Breaking News

Definition List

Flickr Images

Wednesday, December 31, 2014

Cara Membuat Featured Post Content Slider Image

Cara Membuat Featured Post Content Slider Image di Halaman Depan Blog yang SEO & User Friendly. 

SEBELUMNYA CB pernah share tentang Featured Content Slider di Homepage Blog Tidak Bagus buat SEO. Di sana disebutkan, hasil survei soal gambar slider / carousel image di sejumlah blog/website di halaman depan (homepage) ternyata buruk buat SEO dan jelek pula kegunaannya (tidak user friendly), hanya bikin silau mata! Yang ngeklik juga cuma 1%, kecil bingit!

Namun, jika masih merasa butuh menampilkan Featured Post Content Slider Image/Gambar di Home, maka pastikan dua hal ini:
  1. Slider tidak otomatis bergerak (automatic slides)! Matikan fungsi otomatis gerakannya!
  2. Pastikan judul postingnya menggunakan Heading Tag H2 atau H3. Jika menggunakan H1, silakan ganti.
Kedua hal itulah sumber masalah Featured Post Content Slider Image yang menjadikannya tidak seo dan user friendly.

FUNGSI FEATURED POST/IMAGE SLIDER
Featured Post Content Slider Image/Gambar sering digunakan oleh situs web/blog toko online, blog jasa/produk, dan situs berita. Toko Online atau web bisnis biasnaya menampilkan produk/jasa. Situs berita menampilkan Headline News.

Posting berikut ini sekadar "menyimpan" tips desain blog tentang cara Membuat Featured Post Content Slider Image yang di-share Maskolis baik Versi 1 maupun Versi 2. Jika ingin menampilkan satu posting saja di Featured Post di halaman depan tanpa slider, silakan cek  Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss.

CB share di sini dua jenis Featured Post Content Slider Image sebagaimana tampak dalam ilustrasi gambarnya. 

Cara Membuat Featured Post Content Slider Image

VERSI 1 - Thumbnail di Bawah Gambar Utama

 Featured Post Content Slider Image

Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> 

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

Angka berwarna merah adalah ukuran Panjang dan Lebar Slider. Silahkan sesuaikan dengan "kondisi" template Anda. Demikian pula angka berwarna merah di kode no. 3 di bawah ini.
3. Copas kode berikut ini di atas kode <head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
        
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        
        postdate = entry.published.$t;
    
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
        
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        
        postdate = entry.published.$t;
    
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
    document.write(trtd);

    j++;
}

}

//]]>
</script>

4. Copas kode berikut ini di bawah kode <div id='main-wrapper'> atau yang sejenisnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>

5. Save Template!

6. Klik "Layout" dan akan tampak Widget Baru di atas "Blog Posts" seperti tampak dalam gambar di bawah ini. Jika tidak ada, cobra "Refresh Page" (Tekan F5). 

Featured Post Content Slider Image

6. Klik "Edit" dan Copas kode berikut ini ke dalam "Content".

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

7. Save!!! 
Featured Post Content Slider Image mestinya sudah muncul.

Cara Membuat Featured Post Content Slider Image

VERSI 2 - Thumbnail Image di Samping Gambar Utama

Featured Post Content Slider Image


CARA MEMBUAT
Tahapan Membuatnya kurang lebih sama dengan cara di atas, cuma beda kode dikit.

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#featured{width:640px;height:250px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:400px;height:250px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}  

3. Copas kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
    });
</script>

<script type='text/javascript'>
//<![CDATA[
   imgr = new Array();

imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 70;
summaryTitle = 20;

numposts1 = 4;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
     
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
     
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
     
        postdate = entry.published.$t;
 
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
 
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

 
    //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";


    var trtd = '<div class="ui-tabs-panel ui-tabs-hide" id="post-'+i+'"><a href="'+posturl+'"><img width="400" height="246" src="'+img[i]+'"/></a><div class="info"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...<a href="'+posturl+'"></a></p></div></div>';

    document.write(trtd);

    j++;
}

}

function showrecentposts5(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
     
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
     
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
     
        postdate = entry.published.$t;
 
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
 
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

 
    //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";


    var trtd = '<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="80" height="50" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';

    document.write(trtd);

    j++;
}

}

 //]]>
</script>

4. Cari kode <div id='main-wrapper'> atau yang sejenusnya. Copad kode berikut ini di bawahnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>  

5. Save Template!

6. Klik "Layout". Akan Widget Baru di atas element "Blog Posts" seperti gambar di bawah ini. Jika belum muncul, Refresh dengan menekan tombol F5.

Featured Post Content Slider Image

7. Saatnya memasang posting yang akan ditampilkan. Klik "Edit" dan  Copas kode berikut ini di kolom "Content". Kolom judul biarkan kosong!

<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

Demikian Cara Membuat Featured Post Content Slider Image / Slide Gambar Posting di halaman depan blog. Good Luck & Happy Blogging!
Read more ...

Pengaruh Ganti Template Blog terhadap Trafik

Pengaruh Ganti Template Blog terhadap Trafik
APAKAH ganti template blog akan bedampak pada penurunan trafik (jumlah pengunjung)? Apa pengaruh mengganti template terhadap indeks Google?

Itulah pertanyaan yang sering muncul di kalangan bogger. Umumnya, para blogger menjawab: ya, mengganti template berpengaruh, yaitu bisa menurunkan trafik atau mengurangi jumlah kunjungan!

Alasannya, Google harus mengindeks kembali struktur blog kita!

Benar demikian? Bisa jadi. Tapi, ada tapinya.... kalo kita intip obrolan di forum Digital Point: Does change in blogger template effect the incoming traffic?, maka jawabannya: ganti template blog TIDAK BERPENGARUH, selama Meta Tags (Blog Title, Blog Description, Keywords) tidak diubah.

Lihat: Meta Tags SEO Friendly untuk Blog

Ini sebagian jawaban di forum Digital Point atas pertanyaan "Apakah mengubah template blog berdampak pada trafik?"
  • Blogger template can't effect to your website traffic but it makes your website more search engine friendly.
  • I agree, I don't see a template change effecting it unless its a really slow loading one as Google have started taking speed into account as a factor of your rankings.
  • I am very sure that if u change blogger template than definitely change in incoming traffic.
  • No, .. changing the template alone won't affect your traffic.. There must be something else that is affecting your traffic.
  • No, changing the template may never affect to your site or blog.,
  • I don't think changing the template should have any effect. Did it change the META data?
  • No.. there's no any effect if you change your template.. If the traffics are gone it should be the case of meta date as jdhflip said.. or maybe you change your title tag..
  • Yes, i have done this and seen the change. Actually few months before, i changed the template of my blog, to make it attractive and trust me, thetraffic increased. Though off-page plays an important part in it but yes, template do effect the traffic a bit.
  • No i dont think that changing a template may affect to your traffic.
  • If your template has slowed down your website loading, it could affect your traffic.
Jadi, yang menyebabkan penurunan trafik ketika ganti template itu bukan karena ganti templatenya, tapi karena sang blogger mengubah Meta Tags atau tidak menyamakan Meta Tags sebelumnya dengan Meta Tags yang ada di template baru.

Kecuali, jika template baru itu BERAT alias tidak fast loading, maka jelas penyebabnya adalah karena jadi berat itu.

Jika templatenya lebih seo friendly dan fast loading, ganti template bukan menurunkan trafik, tapi sebaliknya: menaikkan jumlah pengunjung!

CB sendiri ganti template sudah dua kali, yaitu dari Johny Wuss, New Johny Wuss V1, dan New Johny Wuss V2. Dampaknya? Pengunjung malah naik. Rank Alexa juga naik.

Kuncinya: template blognya lebih seo dan fast loading, meta tags tetap, bahkan ditambah dengan yang lebih relevan dengan konten blog.

KESIMPULAN

  1. Ganti template tidak akan berpengaruh pada trafik selama Meta Tags-nya (judul blog dan deskripsi blog) sama dengan template lama.
  2. Ganti template bahkan akan menaikkan jumlah pengunjung (trafik), jika template baru lebih seo friendly, fast loading, responsive, dan memiliki struktur data yang baik.
  3. Sebaliknya, jika template baru itu berat (tidak fast loading) dan tidak seo friendly, juga jika Anda mengubah Meta Tags, maka kemungkinan penurunan trafik sangat tinggi.
SARAN
  1. Gunakan template yang seo friendly, fast loading, responsive, dan stuctured datanya tidak error (cek di Google RichSnippets).
  2. Jangan ubah Nama & Deskripsi Blog (Meta Tags) di template baru. Copas Meta Tags di template lama dan Paste ke template baru.
  3. Jangan ragu ganti template, jika template terbaru yang Anda miliki lebih seo, lebih kenceng, dan lebih bagus! 
Pengalaman Anda ganti template blog bagaimana...? Please, share....!
Read more ...

2 Template Simple Responsive Terbaru 2015

2 Template Simple Responsive Terbaru 2015
The Newest  SEO Ready, Mobile Friendly, Fast Loading, Cool,  Simple & Clean Responsive Blogger Template. Free Download!

SEO Friendly, Mobile Friendly, User Friendly, ringan, cepat (Fast Loading), simple, dan terbaru 2015 adalah ciri-ciri template blog keren yang CB share ini, sebagaimana template-template blog seo sebelumnya yang sudah lebih dulu hadir.

1. CB Bloggerz Template
2. Cara CB Template

Dua template ini merupakan hasil modifikasi atau versi lain dari New Thesis SEO V2. Hanya mengubah beberapa elemen, dengan tetap mempertahankan ke-seo-an, ke-responsif-an, dan loading cepatnya.

Dua template terbaru 2015 ini cocok dan dirancang untuk personal blog (blog pribadi).

CB Bloggerz Template dua kolom, untuk blog pribadi dengan "niche blog" tertentu dan tidak banyak label/kategori.

Cara CB Template tiga kolom, ada sidebar kiri untuk menampilkan label/kategori, bagi blog pribadi yang memilih "general blog" dengan banyak kategori.

Keduanya memiliki skor seo sempurna, 100% (versi Chkme) dan loadingnya kenceng (nilai A-B) versi GT Metrix.

Tak kalah pentingnya adalah kedua template ini sama-sama lolos Google Richsnippets alias Googel Structured Data yang punya peran penting bagi indeks mesin pencari --khususnya Google.

Dua template ini gratis! Free, dengan catatan Anda tidak boleh menghapus credit link di footer! Jika menghapusnya, CB tidak akan tinggal diam --lapor ke Pengadilan Google DMCA!!!

Ini dia link demo dan download kedua Template Simple Responsive Terbaru 2015 Free Download alias Gratis ini. Good Luck!

CB Bloggerz - Simple & Clean Responsive Blogger Template

CB Bloggerz - Simple & Clean Responsive Blogger Template


Cara CB Template - Simple & Clean Responsive Blogger Template

Cara CB Template - Simple & Clean Responsive Blogger Template


Please remember! You have no right to remove credit link footer on these new, cool, and clean templates. Google DMCA will penalise you if yo do that. Thanks!
Read more ...

Tuesday, December 30, 2014

Top 5 Template Blog Terpopuler 2014

Template Blog Terpopuler Sepanjang Tahun 2014 - The Most Popular Blogger Templates of 2014.


Top 5 Template Blog Terpopuler 2014
YANG dimaksud "terpopuler" dalam judul "Top 5 Template Blog Terpopuler 2014" adalah template blog seo friendly, mobile friendly alias responsif, fast loading, simple, dan user friendly yang paling banyak digunakan oleh blogger Indonesia.

Tentu, ini hasil "pengamatan" CB selama ini, terutama berdasarkan jumlah download atas template yang CB share di blog ini.

Apakah Anda termasuk pengguna salah satu dari Top 5 Template Blog Terpopuler slama tahun 2014 ini? Jika ya, syukurlah....! Jika belum, cepetan ganti template!

Top 5 Template Blog Terpopuler 2014 versi CB Bloggerz:
  1. Johny Wusss --termasuk variasinya: Johny Wuss Responsive, New Johny Wuss, dan New Johny Wuss V2, serta yang mirip dengannya: Google SEO Blogger Template.
  2. Thesis SEO --termasuk variasnya: New Thesis SEO dan Thesis SEO Responsive.
  3. Fastest Magz. Ini premium template, namun banyak juga tuh yang bagi-bagi template ini secara gratis!
  4. Super SEO --termasuk Super SEO versi Responsive-nya.
  5. No. 5 ini sengaja dikosongkan untuk Anda isi di kolom komentar.
Semua template blog terpopuler sepanjang tahun 2014 (the most popular blogger templates of 2014) itu ada di blog ini. Klik aja: Template SEO. Silakan "ubek-ubek" ya :)


Berikut ini "penampakan" template terpopuler alias terbanyak digunakan oleh blogger Indonesia tersebut:

new johny wuss template

johny wuss template

google seo template

new johny wuss v2 template

johny wuss responsive


fastst magz template

super seo blogger template

new thesis seo blogger template

Nah, yang New Thesis Seo ini nih.... aneh dan sayangnya, banyak digunakan oleh blogger yang "gituan" waduuuh.... ikut dosa ga ya....??? Mudah-mudahan nggak. Soal penyalahgunaan template 'kan urusan si blogger masing-masing.

Kok CB tau? Ya tau lah....!!! Soalnya ada kode CB yang tidak diubah sama mereka, sehingga "ada laporan" yang masuk via email soal kode tersebut. 

Itulah Top 5 Template Blog Terpopuler 2014 versi CB and will continoues..... di tahun 2015. Soalnya, trend template dan desain website 2014 tentang fast loading, mobile friendly, dan SIMPLE akan berlanjut dan jadi primadona.

Algoritma Google, selain mengutamakan konten berkualitas, juga merekomendasikan template fast loads dan user friendly, seperti diterapkan di Pro Google Theme.*

Read more ...

Monday, December 29, 2014

Cara Memasang Back to Top Blog Tanpa jQuery

Cara Membuat Tombol "Back to Top" di Blog Blogspot murni CSS + HTML, Tanpa jQuery!


Cara Memasang Back to Top Blog Tanpa jQuery
KEBANYAKAN tutorial membuat tombol "Kembali ke Atas" (Bact to Top button) menggunakan jQuery alias JavaScript. Pengaruhnya, selain "ribet" pasangnya, adalah memperlambat loading blog.

Dampak lainnya jika pake jQuery adalah terjadi "bentrok" atau "konflik" antara javascript, jika lupa menghaspus salah satu jquery. Intinya, gak banget deh!

CB juga termasuk yang share tentang back to top yang pake jQuery. Kini tips tersebut gak lagi berlaku! Ganti dengan kode "Back to Top" yang murni CSS+HTML, tanpa JavaScript.

Kode "Back to Top" yang ini jelas SEO Friendly dan bisa dibilang tidak ada pengaruhnya terhadap loading blog. Artinya, blog tetap loading cepat, tidak diperlambat dengan kode "Back to Top" ini.

BUAT APA?
Buat apa ada "Back to Top" di blog? Ini menyangkut UX alias User Experience. Mempermudah user kembali ke bagian atas halaman blog tanpa perlu scroll.

Tombol "Back to Top" bagian dari upaya agar blog kita user friendly, bikin nyaman dan mudah pengunjung. Itulah sebabnya tombol "kembali ke atas" ini menjadi salah satu "trending" dalam desain situs web dan/atau template blog.

"Back to Top" Tanpa jQuery
CB juga sudah pasang tombol ini, tanpa jQuery. Ini kodenya, sudah seo friendly dan fast loads. Cara pasangnya juga gak mesti masuk ke template > edit HTML.

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png "/></a>

Yang warna merah itu link gambar atau icon back to topnya. Bisa diganti. Lihat di posting sebelumnya.

CARA PASANGNYA:
1. Layout > Add a Gadget > pilih Javascript/HTML
2. Copas kode di atas di bagian content/isi.
3. Save! Beres da ah...!!!

KODE LAINNYA
Kode berikut ini sama bagus dan seo friendly. Tanpa jQuery juga. CB modif dari kode yang di-share blog MS2. Cara pasangnya agak ribet dikit sih, tapi hasilnya lebih wusss!!! Lebih kenceng karena tanpa url image.

1. Template > Edit HTML
2. Copas kode berikut ini tepat di atas kode </body> (lihat bagian template paling bawah banget!)


<span class='back-to-top'><a href='#'> &#8593; </a></span>
<span class='back-to-top-a'><a href='http://contohblognih.blogspot.com/'>CB</a></span>
<style>
.back-to-top {position: fixed ;bottom:20px;right:10px;z-index:9999999}
.back-to-top-a {font-size:10px;z-index:9999999;opacity:0.2;position:fixed;bottom:0;}
.back-to-top a {font-size: 30px ;background-color: #DD3434 ;color:#FFF;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:12px 18px 20px;text-decoration: none}.back-to-top a:hover {background-color: #272727 ;text-decoration: none}
</style>

Note! Ganti http://contohblognih.blogspot.com/ dengan alamat blog Anda.

3. Save Template!

Itu dua dua kode tombol "kembali ke atas" (back to top button) seo friendly & fast loasing, murni CSS+HTML tanpa javascript --user friendly & aman bagi loading blog! Good Luck!
Read more ...

Cara Membuat & Menampilkan Halaman Statis Blog di Navigasi Menu

Cara Menampilkan Menu Halaman Statis Blog
BAGI newbie, memunculkan atau menampilkan link Halaman Statis (Static Page) di Navigasi Menu Blog bukan perkara gampang --karena belum tahu aja. Nyaris percuma 'kan, kita bikin halaman statis (page), tapi gak keliatan dan "ditengok" sama pengunjung?

Halaman (Page) atau Halaman Statis (Static Page) adalah jenis halaman yang biasanya berisi konten "statis", jarang sekali diubah. Sekali bikin, ya sudah... begitulah namanya halaman statis, meskipun masih bisa diedit/update kapan saja.

Beda dengan "halaman dinamis", yakni halaman postingan (Posts) yang kita buat setiap kali kita menulis konten blog.

APA SAJA HALAMAN STATISNYA?
Konten blog yang biasanya menjadi halaman statis adalah:
  1. About (Tentang)
  2. Sitemap (Daftar Isi)
  3. Contact (Kontak)
Untuk blog bisnis bisa ditambah dengan halaman:
  1. Privacy Policy/Disclaimer
  2. Services (Layanan)
  3. Products (Produk)
Untuk blog organisasi, bisa ditambah dengan halaman:
  1. Profil
  2. Sejarah
  3. Susunan Pengurus
  4. Visi Misi
  5. Program
  6. Agenda
  7. Galeri Foto
  8. Galeri Video
Nah, halaman-halaman tersebut disebut Halaman Statis (Static Page). 

CARA MEMBUATNYA
"Each blog can have up to 20 pages," kata blogger. Tiap blog maksimal bisa membuat 20 halaman statis. Tidak bis lebih.

Cara membuatnya sudah ada di panduang Blogger: Create a new page on your blog. Ringkasnya:
  1. Klik menu "Pages" (Halaman) di Dashboard Blog.
  2. Klik "New Page" (Halaman Baru)
  3. Silakan Isi "nama halaman" dan "konten halaman".

Cara Menampilkan Halaman Statis di  Menu Navigasi Blog

Nah, sekarang bagaimana cara menampilkannya? Jika template Anda bukan default blogger, artinya template hasil download dari "pihak ketiga", biasanya sudah ada link menu halaman statis di dalam template.

Anda tinggal ganti link dan nama halamannya, misalnya seperti ini:

<div class='Menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</li>

Ganti tanda pagar (#) dengan link halaman Anda, misalnya: 
<li><a href='http://contohblognih.blogspot.com/p/about-cb.html'>About</a></li>

Dari mana mendapatkan linknya? Lihat gambar di bawah. Klik kanan di menu "View" dan klik "Copy Link Address".  Coba paste di Notepad. Itulah link halaman statisnya!

Cara Menampilkan Menu Halaman Statis Blog

Cara lainnya, dan ini biasa berlaku di template bawaan blogger, yaitu dengan menambahkan gadget:
  1. Klik "Layout" > "Add a Gadget" 
  2. Pilih "Page List"
  3. Nah... di sinilah halaman statis Anda bermunculan.
Cara Menampilkan Menu Halaman Statis Blog

Demikian Cara Menampilkan Menu Halaman Statis Blog, panduan bagi Newbies alias para blogger baru. Good Luck!

Read more ...

Thursday, December 25, 2014

Serbuan Komentar dari Admin Blog "Gituan"

Komentar Spam dari Admin Blog Dewasa
Cara Mengatasi Komentar Spam dari Admin Blog Dewasa.

NYARIS setiap hari blog ini mendapatkan "serbuan" komentar "spammy" dan "modus" dari admin blog "gituan" dan jualan obat kuat untuk "begituan".

Tentu saja, CB tidak bisa publish karena Google Adsense (GA) melarang ada link ke situs dewasa dan judi di blog yang ikut program GA. Nah, daripada CB kena banned GA? Ya maaf maaaf kate ye, gak bisa dipublish tuh.... :)

Baca deh: Cara Daftar & Syarat Diterima Google Adsense.

Banyak juga komentar spam, spammy, dan "junk comment" yang otomatis tidak bisa muncul dan masuk ke folder "Spam Comment". Itu mah sama blogger lho ya diurusnya, karena blogger memang membantu para blogger untuk urusan komentar spam.

Sebelum posting ini ditulis, CB menghapus sekitar 8-10 komentar spam dari admin blog toko online yang jual "obat gituan". Ada juga blog toko online "s*x shop". Ihh.... ngeri!!!

Rupanya, mereka "sedang usaha" mencari backlink, link effect, atau setidaknya berusaha mengenalkan blog "gituan" mereka ke blog CB yang memang... ehm... lumayan tinggi tuh Alexa Rank dan PageViews-nya!

Harga blog CB ini bahkan diperkirakan mencapai Rp1 Miliar lho! :) (Baca: Harga Blog CB Rp1 M).

Anda juga mengalami Serbuan Komentar dari Admin Blog "Gituan"???  Bagaimana Anda mengatasinya?
Read more ...

Sunday, December 21, 2014

6 Cara Mendapatkan Backlink Blog Berkualitas

6 Cara Mendapatkan Backlink Blog Berkualitas
CARA membangun, memperoleh, atau mendapatkan Backlink Berkualitas (High Quality Backlinks) bagi blog tidak semudah nulis komentar "nice info" lalu "nyepam" dengan menuliskan alamat blog atau meninggalkan link aktif (live link).

Banyak blogger "newbie" mengira, dengan berkomentar di banyak blog, mereka akan mendapatkan backlink. Tidak demikian. Mayoritas link di kolom komentar blog disetting default "nofollow" sehingga tidak menjadi backlink.

Kehadiran kode anti komentar spam juga akan menghapus secara otomatis komentar yang berisi link aktif atau alamat blog.
Pasang/copas kode .comment-content a {display: none;} di atas kode </b:skin> di template blog, maka otomatis komentar spam dan sampah [junk comment] akan terhapus.
Pengertian Backlink
Backlink (Inbound Link) adalah tautan dari blog lain yang mengarah ke blog kita atau alamat blog kita yang ada di blog lain.
A backlink is an incoming hyperlink that connects the web page or content to another website. Backlinks arevery important when it comes to page ranking as Google rates them highly.
Pentingnya Backlink Berkualitas
Backlink berkualitas yaitu link blog kita yang ada di situs populer dan/atau banyak pengunjungnya. 10 backlink berkualitas akan mengalahkan 200 backlink kualitas rendah.

Google hanya akan memperhitungkan backlink dari situs berkualitas. Backlink yang didapatkan secara ilegal bahkan akan menyebabkan blog kita di-banned atau dipenalti.

Anda yang suka nyepam di blog orang lain akan dideteksi oleh Google. Akibatnya, situs Anda pun akan kena sanksi Google, minimal sulit diindeks dan disimpan di peringkat bawah di halaman hasil pencarian (SERP).

6 Cara Mendapatkan Backlink Blog Berkualitas

Berikut ini Cara Mendapatkan Backlink Blog Berkualitas versi Help Blogger yang sudah terbukti ampuh. CB edit sedemikian rupa agar lebih mudah dipahami blogger "newbie".

1. Buatlah Posting (Tulisan/Konten) yang Panjang dan Menarik
Create Long, Interesting Posts. Misalnya tulisan tentang tips & trik, tutorial, menggunakan gambar, chart, dan grafis lainnya.

Tulisan panjang itu antara 1000 hingga 1200 kata. Namun, semua kata dan kalimatnya benar-benar bermakna, bukan asal panjang, apalagi mengulang-ulang kata kunci (stuffing).

2. Aktif di Forum-Forum
Participate in Forums. Misalnya di kaskus atau forum netizen. Forum online biasanya menyediakan profil, seperti halnya media sosial, dan kita bisa memasukkan alamat blog.

Forum lainnya adalah Yahoo Answer di mana Anda bisa menjawab pertanyaan orang lain dan menyertakan link blog Anda --jika jawabannya ada di blog Anda tentunya.

3. Membuat eBook
Write e­Books. Buat buku elektronik dan share di media sosial dan forum-forum. Ini akan "build high quality backlinks".

4. Miliki Produk Gratis
Have Free Products. Berbagi template adalah salah satunya. Setiap orang suka yang gratisan. Jika produk gratis itu baik, menarik, halal, dan berguna, maka otomatis user akan menyebarkannya.

5. Gunakan Videos
Buatlah akun YouTube dan upload video yang unik dan menarik. Video tentang "cara" (how to) akan selalu menarik pengunjung.

6. Interaksi dengan Blog Lain
Interact with Other Blogs. Jangan "menyendiri". Lakukan "blogwalking" dan berinteraksilah dengan sesama blogger.

Tulislah komentar yang berkualitas, bukan komentar asal apalagi komentar "modus", spam, dan sampah, serta JANGAN PERNAH MINTA KUNJUNGAN BALIK!

Hindari komentar yang menyertakan link hidup, link aktif, dan spammy. Jangan pernah berkomentar dengan menuliskan alamat lengkap blog, kecuali jika ditanyakan oleh admin blogger.

Komentar yang menuliskan alamat blog biasanya tidak akan dipublish oleh admin blogger.

Demikianlah sebagian tips Cara Mendapatkan Backlink Blog Berkualitas. Baca juga Cara Efektif Membangun Backlink Blog. Good Luck!
Read more ...

Saturday, December 20, 2014

5 Tips SEO Dasar untuk Blogger Baru (Newbie)

Tips, trik, dan tips SEO dasar banget buat para blogger baru dan saat membuat blog baru.

5 Tips SEO Dasar untuk Blogger Baru (Newbie)
KARENA banyak yang "mengaku" newbie di dunia blogging, berikut ini CB share tentang panduan SEO dasar untuk blogger baru alias newbie itu.

Optimisasi blog yang dikenal dengen sebuat SEO Blog itu mesti dilakukan agar blog kita terindeks Google dan mudah ditemukan user (pengguna), visitor (pengunjung), atau reader (pembaca). Pasalnya, blog kita bersaing ketat dengan blog lain.

Sebenarnya tanpa SEO sama sekali pun blog bisa terkenal dan banyak pengunjung, jika tulisannya orisinal (asli) dan unik, gak ada di blog lain, eksklusif, dan dicari user, serta ditambah promosi dan SEO Offline.

Pengertian SEO

SEO (baca: eS-i-Ow) adalah singkatan dari Search Engine Optimization, yaitu upaya agar blog kita diindeks mesin pencari (yaitu situs pencarian seperti Google, Bing, dan Yahoo!) sehingga ditemukan pengunjung.

Menurut data Wikipedia, istilah SEO pertama kali digunakan 26 Juli 1997 oleh sebuah pesan spam yang diposting di Usenet. Pada masa itu, algoritma mesin pencari belum terlalu kompleks sehingga mudah dimanipulasi.

Versi awal algoritma pencarian didasarkan sepenuhnya pada informasi yang disediakan oleh webmaster melalui meta tag pada kode HTML situs web/blog mereka. Meta tag menyediakan informasi tentang konten (isi) yang terkandung pada suatu halaman web dengan serangkaian kata kunci (keyword).

Sebagian webmaster melakukan manipulasi dengan cara menuliskan kata kunci yang tidak sesuai dengan konten situs yang sesungguhnya, sehingga mesin pencari salah menempatkan dan memeringkat situs tersebut. 

Saat ini, seiring update algoritma Google, manipulasi semacam itu --dikenal dengan Stuffing-- sudah tidak berlaku. 

5 SEO Dasar untuk Blogger Baru

SEO dasar ini untuk blog platform blogger/blogspot. Untuk blog platform lain, seperti WordPress, mungkin akan dibahas di kesempatan lain (tapi gak janji).

1. Nama/Judul Blog
Buatlah nama/judul blog (Blog Title) yang relevan atau sesuai dengan sebagian besar konten (isi) blog. 

Misalnya, jika blog Anda berisi tulisan (teks), foto, video, dan/atau audio tentang sepakbola, maka buatlah nama blog yang mengandung kata sepakbola --misalnya Sepakbola Magz dengan domain Url sepakbolamagz.blogspot.com.

Anda bisa gunakan Blog Name Generator jika bingung mencari atau memilih nama blog.

2. Gunakan Meta Tags
Jangan lupa mengisi Blog Description dan Search Description di "Setting" > "Basic" > "Description" setelah Anda membuat satu blog. 

Misalnya, seperti punya CB ini, di bagian "Title" tulis "Contoh Blog" dan di bagian Description tulis "Panduan blogging untuk pemula - Tips SEO dan desain blog, download template SEO friendly gratis, cara membuat blog keren dan contohnya".

Di bagian "Setting" > "Search Preference" > Meta Tags > Description isi juga dengan gambaran isi blog Anda, misalnya: "Panduan Blog untuk Pemula - Tips SEO Blog, Desain Blog, Download Template Blog SEO Friendly Gratis, Cara Membuat Blog keren".

3. Manfaatkan Google Webmaster Tools.
Buka Webmaster Tools, login dengn akun gmail/blogger Anda, klik "ADD A SITE" di kanan atas, dan masukkan URL blog Anda!

Setelah itu, masukkan sitemap dengan cara klik "Manage Site" (Kelola Situs) dan "Add A Sitemap" (Tambahkan Peta Situs) dengan cara:
- tambahkan sitemap.xml di kolom akhir yang ada di belakang nama blog Anda. Klik "Submit" dan "Refresh".
- Klik sekali lagi "Add A Sitemap" dan masukkan kode
 atom.xml?redirect=false&start-index=1&max-results=500 di belakangnya: dan klik lagi "Submit" dan "Refresh".

4. Daftarkan Blog ke Google.
Sebenarnya begitu dibuat, blog kita sudah terdaftar di Google karena blogspot 'kan milik Google dan terintegrasi dengan akun Google, Gmail, Youtube, dll. 

Namun, untuk mempercepat indeks blog kita, maka buka Submit Url dan masukkan alamat blog Anda di kolom yang tersedia.

5. Link dengan Akun Media Sosial
Tautkan blog Anda dengan media sosial. Buatlah Fans Page Facebook, Twitter, dan Google Plus. Bisa ditambah dengan Youtube, Pinterest, LinkedIn, dan sebagainya, lalu masukkan alamat blog Anda di bagian "profile". Ini akan menjadi "backlink" blog Anda.

Itulah 5 Dasar SEO Blog bagi pemula (blogger baru), juga berlaku setiap kali kita membuat blog baru.

Gunakan Template SEO

Untuk mendukung lima tahap dasar seo tadi, maka gunakan Template SEO Friendly yang ringan, fast loading (cepat tampil), clean (bersih), user friendly, dan responsive alias mobile friendly.

Di atas semua tips seo tadi, kunci sukses utama blogging adalah KONTEN --isi blog. Maka, buatlah selalu Konten Berkualitas (Quality Content) seperti disarankan Google. Jangan terlalu ngurusin tampilan, desain, atau sisi artistik blog!

Untuk tips, trik, dan tips SEO "tingkat lanjut" dan "tingkat mahir", silakan klik "Tips SEO". Good Luck and Happy Blogging! (http://contohblognih.blogspot.com).*
Read more ...

Friday, December 19, 2014

Cara Pasang Kode Script Anti Adblock di Blog

Cara Pasang Kode Script Anti Adblock di Blog
Berikut ini cara menambah atau memasang kode (script) anti-iklan (Adblock/AddBlocker) di blog. Kode Script Anti Adblock ini bertujuan Anda blog Anda tampil utuh saat dibuka oleh user yang mengaktifkan add-on/aplikasi blokir iklan di browser (Mozilla Firefox & Google Chrome).

Adblocker adalah musuh utama para blogger yang memasang iklan Google atau Chitika dll di blognya. Jika user memasang anti iklan ini di browsernya, maka iklan tidak tampil dan tentu merugikan para blogger dan Google.

Adblocker adalah addon atau plugin di Mozilla Firefox dan Google Chrome yang berfungsi memblokir atau menghalangi tampilnya iklan di blog stau situs web.
Blogger yang baik, sebagai solidaritas sesama blogger, tentu tidak akan memasang adblocker. User yang paham pun tidak akan memasangnya karena aktivasi adblocker akan menyebabkan blog/web yang mereka buka tidak tampil utuh.

Cara Pasang Kode Script Anti Adblock di Blog
Ada dua kode dan acara pasangnya:
  1. Meminta user menonaktifkan atau mendisable add-on, aplikasi, atau software anti-iklan (AddBlocker).
  2. Memaksa user menonaktifkan adblocker jika mereka masih mau membuka blog kita yang ada iklannya (Google Adsense).

Cara Pasang Kode Anti Adblocker #1 

Klik "Template" dan "Edit HTML".

1. Copas kode berikut ini di atas kode ]]></b:skin> 

#swp_noadblocker { display:none;}


2. Copas kode berikut ini di atas kode </head>

    <script type="text/javascript">
    if (document.getElementById("swp_noadblocker") != undefined)
    {
    }
    else
    {
        alert("We've detected that you're using ADBLOCKER or some other adblocking software. In order to keep this website free, this site is sponsored in part by advertisements.\r\nPlease consider disabling your ad blocker on this website\r\nif you enjoyed the content, and would like to support future \r\ninformative posts.Thank you!\r\n\r\nClick OK to continue\r\n\r\nPowered by yoursitename");
            setTimeout("nag()",12000);
    }
    </script>


*** Tulisan yang berwarna merah bisa diubah sesuai dengan keinginan Anda.


3. Copas kode berikut ini di atas </body>


<script type="text/javascript" src="http://ftp.bauer-power.net/misc/tc/advertisement.js"></script>


4. Save Template!

Cara Pasang Kode Anti Adblocker #2

1. Layout > Add a Gadget > HTML/Javascript
2. Copas kode berikut ini di kolom "Content".


<style>#g207{position:fixed!important;position:absolute;top:0;top:expression

((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document
.body.scrollTop)+"px");
left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}</style><noscript><i id=g207><p>Please enable JavaScript!<br />Bitte aktiviere JavaScript!<br />S'il vous pla&icirc;t activer JavaScript!<br />Por favor,activa el JavaScript!<br /><a href="http://antiblock.org/">antiblock.org</a></p></i></noscript><script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p>Please disable your ad blocker!<br/>This site is supported by the advertisement <br/> Please disable your ad blocker to support us!!! </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display
)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

Kode Anti AdBlock #3

Kode ini yang dipasang CB sekarang. Jika user gak mau menonaktifkan AdBlock-nya, bodo amat ah, yang penting blog kita udah kebuka :)

1. Layout > Add a Gadget > HTML/JavaScript
2. Copas kode berikut ini:

<style>#h237{position:fixed !important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:102%;height:102%;background-color:#f9f9f9;opacity:.97;display:block;padding:10% 0}#h237 *{text-align:center;margin:0 auto;display:block;filter:none;font:bold 14px Verdana,Arial,sans-serif;text-decoration:none}#h237 ~ *{display:none}</style><div id="h237">
<span>Please Enable JavaScript!<br />Mohon Aktifkan Javascript!<a href="http://www.enable-javascript.com/">[ Enable JavaScript ]</a></span></div>
<script>window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237"));(function(l,m){function n(a){a&&h237.nextFunction()}var h=l.document,p=["i","s","u"];n.prototype={rand:function(a){return Math.floor(Math.random()*a)},getElementBy:function(a,b){return a?h.getElementById(a):h.getElementsByTagName(b)},getStyle:function(a){var b=h.defaultView;return b&&b.getComputedStyle?b.getComputedStyle(a,null):a.currentStyle},deferExecution:function(a){setTimeout(a,250)},insert:function(a,b){var e=h.createElement("span"),d=h.body,c=d.childNodes.length,g=d.style,f=0,k=0;if("h237"==b){e.setAttribute("id",b);g.margin=g.padding=0;g.height="100%";for(c=this.rand(c);f<c;f++)1==d.childNodes[f].nodeType&&(k=Math.max(k,parseFloat(this.getStyle(d.childNodes[f]).zIndex)||0));k&&(e.style.zIndex=k+1);c++}e.innerHTML=a;d.insertBefore(e,d.childNodes[c-1])},displayMessage:function(a){var b=this;a="abisuq".charAt(b.rand(5));b.insert("<"+a+'><img src="http://4.bp.blogspot.com/-0QDKtxtiJQ8/VLb--Say1mI/AAAAAAAADMw/DaO_6B0ZRfY/s1600/Disable%2BAdblock%2B-%2BEnglish.png" height="350" width="699" alt="Stop-AdBlock" /> <a href="JavaScript:window.location.reload()">[ Reload ]</a>'+("</"+a+">"),"h237");h.addEventListener&&b.deferExecution(function(){b.getElementBy("h237").addEventListener("DOMNodeRemoved",function(){b.displayMessage()},!1)})},i:function(){for(var a="DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","),b=a.length,e="",d=this,c=0,g="abisuq".charAt(d.rand(5));c<b;c++)d.getElementBy(a[c])||(e+="<"+g+' id="'+a[c]+'"></'+g+">");d.insert(e);d.deferExecution(function(){for(c=0;c<b;c++)if(null==d.getElementBy(a[c]).offsetParent||"none"==d.getStyle(d.getElementBy(a[c])).display)return d.displayMessage("#"+a[c]+"("+c+")");d.nextFunction()})},s:function(){var a={'pagead2.googlesyndic':'google_ad_client','js.adscale.de/getads':'adscale_slot_id','get.mirando.de/miran':'adPlaceId'},b=this,e=b.getElementBy(0,"script"),d=e.length-1,c,g,f,k;h.write=null;for(h.writeln=null;0<=d;--d)if(c=e[d].src.substr(7,20),a[c]!==m){f=h.createElement("script");f.type="text/javascript";f.src=e[d].src;g=a[c];l[g]=m;f.onload=f.onreadystatechange=function(){k=this;l[g]!==m||k.readyState&&"loaded"!==k.readyState&&"complete"!==k.readyState||(l[g]=f.onload=f.onreadystatechange=null,e[0].parentNode.removeChild(f))};e[0].parentNode.insertBefore(f,e[0]);b.deferExecution(function(){if(l[g]===m)return b.displayMessage(f.src);b.nextFunction()});return}b.nextFunction()},u:function(){var a="ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","),b=this,e=b.getElementBy(0,"img"),d,c;e[0]!==m&&e[0].src!==m&&(d=new Image,d.onload=function(){c=this;c.onload=null;c.onerror=function(){p=null;b.displayMessage(c.src)};c.src=e[0].src+"#"+a.join("")},d.src=e[0].src);b.deferExecution(function(){b.nextFunction()})},nextFunction:function(){var a=p[0];a!==m&&(p.shift(),this[a]())}};l.h237=h237=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);</script>

Demikian cara memasang kode atau script Anti Adblock di Blog Blogspot Anda. Semoga para user sadar bahwa mengaktifkan adblock itu merugikan orang lain juga dirinya sendiri. Good Luck!

Sumber
Read more ...
Designed By