Cara Buat Box Menu Ala Strukturkode

Admin akan memberikan tutorial untuk membuat salah satu bagian blog yang memudahkan pengunjung blog , yaitu box menu. Box menu diatas saya dapat inspirasi dari strukturkode.blogspot.com. Admin tidak mengclone tetapi membuat sehingga mirip. Untuk yang pengen tau fungsinya apa? .Menurut orang- orang lebih seo dari pada menu slider.Untuk tutorialnya silakan ikuti langkah langkah dibawah ini.

• Cari kode ]]></b:skin> lalu copy kode css berikut di atasnya.

.box{margin: 15px;margin-bottom: 30px;padding:15px;border: 1px solid lightgray;background-color: #f8f8ce;}
.top-box{width:31%;float:left;}
.top-box ul{margin:0;padding:0;list-style:none;padding:0;margin:0;}
.top-box ul li a{padding:5px 3px;display:block;}
.top-box .box-title{padding:3px; border-bottom:3px solid green;}

• Kemudian latakan kode berikut di bawah <div id='wrapper'>

<div class='box'><div class='top-box' style='margin-right:28px;'><ul><li class='box-title'><b>SEO dan Blogging</b></li><li><a href='/2014/08/memahami-apa-itu-seo-untuk-pemula.html'>Apa itu SEO ?</a></li><li><a href='/2014/09/optimasi-seo-onpage.html'>Optimasi SEO Onpage</a></li><li><a href='/2014/12/cara-agar-judul-postingan-muncul-di-pencarian-google.html'>Agar blog muncul di pencarian google</a></li><li><a href='/2015/01/cara-mendaftarkan-blog-ke-bing-dan-google-webmaster-tool.html'>Cara mendaftarkan blog ke mesin pencari</a></li><li><a href='/2014/10/cara-meningkatkan-trafik-blog.html'>Tips meningkatkan trafik blog</a></li></ul></div><div class='top-box' style='margin-right:28px;'><ul><li class='box-title'><b>Bisnis Online</b></li><li><a href='/2015/08/strategi-mencari-dollar-dengan-blog.html'>Cara Mendapatkan dolar dari internet</a></li><li><a href='/2015/07/mencari-uang-dari-internet.html'>Petunjuk mencari uang secara online</a></li><li><a href='/2014/12/google-adsense.html'>Apa itu google adsense</a></li><li><a href='/2016/03/6-panduan-menghasilkan-uang-dari-blog.html'>Panduan sukses blogging</a></li><li><a href='/2016/03/mendapatkan-uang-dari-youtube.html'>Tips mendapatkan uang dari youtube</a></li></ul></div><div class='top-box' style='float:right;'><ul><li class='box-title'><b>Media Sosial dan Internet</b></li><li><a href='/2014/10/buat-email-baru-gmail-2014.html'>Cara membuat email google (gmail)</a></li><li><a href='/2014/10/cara-membuat-email-yahoo-baru-lengkap.html'>Cara membuat email yahoo</a></li><li><a href='/2014/09/cara-daftar-atau-membuat-akun-facebook.html'>Cara daftar facebook</a></li><li><a href='/2016/06/belajar-menggunakan-dropbox.html'>Belajar menggunakan dropbox</a></li><li><a href='/2015/01/cara-membuat-akun-twitter-terbaru.html'>Cara membuat twitter</a></li></ul></div><div style='clear: both;'></div></div><!-- boxs end -->

• Ganti link di atas dengan link postingan anda.
• Simpan dan lihat hasilnya 

Tweet

Postingan terkait:

Ditulis Tarsisius — Februari 20, 2017 — Add Comment — Tutorial