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 1 :
Tab konten 1
Tab kontent 2
Tab kontent 3
Tab kontent 4
Demo 2 :
Tab kontent 1
Tab kontent 2
Tab kontent 3
Tab kontent 4
Demo 3 :
Tab kontent 1
Tab kontent 2
Tab kontent 3
Tab kontent 4
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
/* CSS yang Pertama */
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
display: inline;
margin: 0;
}
.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIZDaUi1tFv1IoyJAHjvzAF0G3XCQYiVeQqCi0hEzvJKCiJn9DPrfY6qXPAlditLOCCjeDPrhnRsEl-zBB2UYSWmx8Zf3l-y54cI-5T3WlcyNyqCKh9tfcm4OYODRfX9GdBgygn6i97QB/s1600/shade-Nano+Yulianto.gif) top left repeat-x;
}
.shadetabs li a:visited{
color: #2d2b2b;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}
.shadetabs li a.selected{ /*selected main tab style */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie2LYOTUkOqizZx6vuBsFauuuEUfkLDPMqXRr7WAJCdMbQCbJsWTMTInYhdIzdASy02chfF8JtNAJtnly6btbOdiYnh_pvoeWqe4CJSXp-YsB_jmNocCld-8QpbvQjI4ZGet7zkZOOwHTz/s1600/shadeactive-Nano+Yulianto.gif);
border-bottom-color: white;
}
.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* CSS yang kedua */
.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.modernbricksmenu2 ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}
.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px;
background-color: black;
border-top: 1px solid white;
}
.modernbricksmenu2 a:hover{
background-color: #D25A0B;
color: white;
}
.modernbricksmenu2 a.selected{
background-color: #D25A0B;
color: white;
border-color: #D25A0B;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* CSS yang ketiga */
.indentmenu{
font: bold 13px Arial;
width: 100%;
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
border-top: 1px solid navy;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiRSuOdLCbTwYo5og926Shv7qmDg3bHSw9Si-eoEL3KL82vV0bqYY8EZHiKO3Lbf9nfeSUT4f1AdSXNMUX6qAby42ghRBr6HlDNlZ9XA9zCRINBDuTGpENiANUhN9GjZzZDnZKC2irU0R/s1600/indentbg-Nano+Yulianto.gif) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px;
padding-bottom: 4px;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwIW22p7Af6g85LNbcOasqndH8XMaGXgZaGXfvDp2dyGuNDBe1TmQzPAvvhwG3yzBkCqBOQNNb5l7PjUXn29wmre64fOaqOxvE9V4LapxXG6I8E-Ck89aIIA3f01ZT2U5eBZknkiknpb9r/s1600/indentbg2-Nano+Yulianto.gif) center center repeat-x;
}
.tabcontentstyle{
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
Langkah kedua > Penempatan URL JavaScript
dibawah <body>
........
diatas </body>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Tab%20Konten.js"></script>
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
Tab pertama :
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab konten 1
</div>
<div id="country2" class="tabcontent">
Tab kontent 2
</div>
<div id="country3" class="tabcontent">
Tab kontent 3
</div>
<div id="country4" class="tabcontent">
Tab kontent 4
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init()
</script>
Tab kedua :
<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">
<div id="tcontent1" class="tabcontent">
Tab kontent 1
</div>
<div id="tcontent2" class="tabcontent">
Tab kontent 2
</div>
<div id="tcontent3" class="tabcontent">
Tab kontent 3
</div>
<div id="tcontent4" class="tabcontent">
Tab kontent 4
</div>
</div>
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
</ul>
</div>
<br style="clear: left" />
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link")
myflowers.init()
</script>
Tab ketiga :
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
</ul>
<br style="clear: left" />
</div>
<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">
<div id="dog1" class="tabcontent">
Tab kontent 1
</div>
<div id="dog2" class="tabcontent">
Tab kontent 2
</div>
<div id="dog3" class="tabcontent">
Tab kontent 3
</div>
<div id="dog4" class="tabcontent">
Tab kontent 4
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>
Credit : Dynamic Drive
Alhamdulillah
Comments
Post a Comment