Praktik optimasi seo blogspot terbaik yaitu dengan memahami tren dan kondisi update mesin pencari terbaru 2019. Agar blog tampil dengan ranking teratas anda perlu mengetahui faktor peringkat hasil pencarian google . 100 lebih faktor penentu berikut ini dapat mempengarui, menentukan, memposisikan, dan menaikkan peringkat blog pada hasil pencarian. Agar mudah dipahami artikel ini saya kelompokkan menjadi beberapa kategori faktor penentu. Saya mengambil beberapa referensi dari beberapa pakar seo internasional seperti Backlink dot co, Moz, SEJ, SEL, serta halaman resmi bantuan webmaster google. Halaman-halaman tersebut secara jelas menyebutkan ratusan aspek atau hal-hal yang dapat mempengaruhi rangking sebuah situs. Berdasarkan pengalaman saya ngeblog sejak 8 tahun yang lalu saya berpendapat bahwa blog dengan teknik seo berikut ini dapat mempengaruhi peringkat artikel. Dengan cara resmi dan dengan anjuran sesuai kebijakan mesin pencari akan membuat posisi blog selalu konsisten dan tetap ...
Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.nanocord {
width: 180px; /* lebarnya disesuaikan */
}
.nanocord .menuheader{
font: bold 14px Arial;
color: white;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB_zxKFnWz-38vFKLPmaNHiZd6OfEOIryhUr2csBE37u7kXcMpwjGDVNJ3nmDBgUzC3HOEUXcu4gr3P1Np5vwMLSDrOoques-Sec4Jyzpb0sK9xR6M08ruYDWH90XyLcwC1U78TVOFVxSq/s1600/titlebar-Nano+Yulianto.png) repeat-x center left;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px;
cursor: hand;
cursor: pointer;
}
.nanocord .openheader{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsBMlAMAMlf7jtoZfWpm7A7Sq0n6qkgpve4TxJyIJv8VMZ41ffL3L0bEo4UUspflt1VQj4UPK4cCeZ2k2gHCAiascUpqQMU3pprham4h9JkiD-6elbOyWLU3dXfFFFWMUwXdIqmfxhyxa/s1600/titlebar-active-Nano+Yulianto.png);
}
.nanocord ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}
.nanocord ul li{
padding-bottom: 2px;
}
.nanocord ul li a{
color: #A70303;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ3MH1RAIfEhPqGF9gL1xLUWtsDNTaaifKvQ1xuxxKr5UcsgbO_FZ0gal4-Tle21eWt4ZIEPoWSTJwpiT9RsXJwmwa7m3nPva8MOlDef2utyx7KPEX1ydx6gO0iFuaOf-BwrFa_uDCcPvE/s1600/arrowbullet-Nano+Yulianto.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.nanocord ul li a:visited{
color: #A70303;
}
.nanocord ul li a:hover{
color: #A70303;
background-color: #F3F3F3;
}
.nanocord ul li .subbuka{
background: lightblue !important; /* warna background subcontoh tidak aktif */
}
.nanocord ul li .subtutup{
background: lightgreen !important; /* warna background subcontoh aktif */
}
.nanocord ul li a.subnanocord:hover{
background: lightblue; /* warna background subcontoh tidak aktif dengan kursor mouse diatas */
}
Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Accordion%20Konten.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable",
contentclass: "categoryitems",
revealtype: "click", //bisa diganti : "click", "clickgo", atau "mouseover"
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["prefix", "", ""],
animatespeed: "normal", //bisa diganti : "fast", "normal", atau "slow"
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
ddaccordion.init({
headerclass: "subnanocord",
contentclass: "subcategoryitems",
revealtype: "click", //bisa diganti : "click", "clickgo", atau "mouseover"
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["subbuka", "subtutup"],
togglehtml: ["none", "", ""],
animatespeed: "normal", //bisa diganti : "fast", "normal", atau "slow"
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>
Teks berwarna merah, jika sudah ada tidak perlu lagi...!.
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div class="nanocord">
<h3 class="menuheader expandable">Panduan Blogger</h3>
<ul class="categoryitems">
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="#" class="subnanocord">Contoh 2</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="URL-Anda">Sub Contoh 1</a></li>
<li><a href="URL-Anda">Sub Contoh 2</a></li>
<li><a href="URL-Anda">Sub Contoh 3</a></li>
<li><a href="URL-Anda">Sub Contoh 4</a></li>
<li><a href="URL-Anda">Sub Contoh 5</a></li>
</ul>
</li>
<li><a href="URL-Anda">Contoh 3</a></li>
<li><a href="URL-Anda">Contoh 4</a></li>
<li><a href="URL-Anda">Contoh 5</a></li>
<li><a href="URL-Anda">Contoh 6</a></li>
<li><a href="URL-Anda">Contoh 7</a></li>
</ul>
<h3 class="menuheader expandable">SEO</h3>
<ul class="categoryitems">
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="URL-Anda">Contoh 2</a></li>
<li><a href="URL-Anda">Contoh 3</a></li>
<li><a href="URL-Anda">Contoh 4</a></li>
<li><a href="URL-Anda">Contoh 5</a></li>
<li><a href="URL-Anda">Contoh 6</a></li>
</ul>
<h3 class="menuheader expandable">Template Blogger</h3>
<ul class="categoryitems">
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="URL-Anda">Contoh 2</a></li>
<li><a href="URL-Anda">Contoh 3</a></li>
<li><a href="URL-Anda">Contoh 4</a></li>
<li><a href="URL-Anda">Contoh 5</a></li>
</ul>
</div>
Credit : Dynamic Drive
Alhamdulillah
Comments
Post a Comment