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 ...
Sedikit trik manipulasi warna dengan menggunakan border dashed.
Penjelasan
Ini akan memperlihatkan seperti Bergerigi.
Kode:
border-bottom:2px dashed #222222;
Dengan ukuran kecil dan warna disamakan dengan warna background, sehingga terlihat seperti bergerigi.
Ini adalah contoh berada disisi lain :
border dashed berada diatas.
border-top:2px dashed #222;
hanya dikiri
border-left:2px dashed #222;
hanya dikanan
border-right:2px dashed #222;
Pengembangan di Menu
Contoh Menu Dashed 1
Kode CSS:
.dashed{
width:250px;
margin:10px 0;
}
.dashed h4{
background:yellow;
color:#222;
padding:10px;
margin:0;
border-bottom:2px dashed #666666;
}
.dashed ul{
list-style-type:none;
margin:0;
padding:0;
}
.dashed ul li{
}
.dashed ul li a:link, .dashed ul li a:visited{
background:#444444;
color:#bbbbbb;
border-left:2px dashed #444;
border-right:2px dashed #222;
padding:10px 5px;
display:block;
}
.dashed ul li a:hover{
background:#666666;
color:#222222;
border-left:2px dashed #222;
border-right:2px dashed #666;
padding:10px 5px;
}
Kode HTML:
<div class="dashed">
<h4>Contoh Menu Dashed 1</h4>
<ul>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-html.html" target="_blank">Tutorial Kode</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-xhtml.html" target="_blank">Tutorial XHTML</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-css.html" target="_blank">Tutorial CSS</a></li>
</ul>
</div>
Contoh Menu Dashed 2
Kode CSS:
.dashed2{
width:100%;
margin:10px 0;
}
.dashed2 h4{
background:yellow;
color:#222;
padding:10px;
margin:0;
border-right:2px dashed #222222;
border-left:2px dashed #222222;
}
.dashed2 ul{
list-style-type:none;
margin:0 0 0 5px;
padding:0;
}
.dashed2 ul li{
display:inline;
}
.dashed2 ul li a:link, .dashed2 ul li a:visited{
background:#444444;
color:#bbbbbb;
border-top:2px dashed yellow;
padding:10px 5px;
display:inline-block;
}
.dashed2 ul li a:hover{
background:#666;
color:#222222;
border-top:2px dashed #999999;
padding:10px 5px;
}
Kode HTML:
<div class="dashed2">
<h4>Contoh Menu Dashed 2</h4>
<ul>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-html.html" target="_blank">Tutorial Kode</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-xhtml.html" target="_blank">Tutorial XHTML</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-css.html" target="_blank">Tutorial CSS</a></li>
</ul>
</div>
Kode CSS:
.dashed3{
width:100%;
margin:10px 0;
}
.dashed3 ul{
list-style-type:none;
margin:0 0 0 5px;
padding:0;
}
.dashed3 ul li{
display:inline;
}
.dashed3 ul li a:link, .dashed3 ul li a:visited{
background:#444444;
color:#bbbbbb;
border:8px dashed #444;
padding:10px;
display:inline-block;
}
.dashed3 ul li a:hover{
background:#666;
color:#222222;
border:8px dashed #222;
}
Kode HTML:
<div class="dashed3">
<ul>
<li><a href="http://nanoyulianto.blogspot.com/" target="_blank">Home</a></li>
<li><a href="http://nanoyulianto.blogspot.com/1989/07/apa-siapa-bagaimana-dimana-kapan-kenapa.html" target="_blank">About</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2011/04/search-blog-nano-yulianto.html" target="_blank">Search</a></li>
</ul>
</div>
Border dashed dengan ukuran besar, menu terlihat unik.
Referensi untuk pengembangan:
2. CSS Border
3. CSS Lists
4. CSS Display
5. CSS Menu Vertikal dan Horizontal
Comments
Post a Comment