Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

» » » widget menu

Thursday, November 14, 2013

widget menu

Widget menu untuk blogspot, cara membuat widget menu ini tergolong mudah dengan tampilan widget menu yang menarik dan dapat menampung banyak link membuat widget menu paa postingan kali ini disukai para blogger mania. Sistem hiden show pada link widget menu ini menambah kesan elegan dan unik. Untuk melihat tampilan widget menu pada postingan kali ini, silahkan klik demo di bawah, jangan lupa bila anda tertarik dengan widget menu ini, silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

Demo


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS widget menu dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSS widget menu tepat diatas </style> template anda.

/*****************************************
Name : widget menu
By : Rivai Silaban | Blog Design
Update : Kamis, 14 Nopember 2013
******************************************/
#bdrsnav-icon {
background-color:#f7f7f7;
border:1px solid #e6e6e6;
margin: 0 auto;
width: 960px;
height: 50px;
}.social-icons{
margin:0px 0px 0px -30px;
padding:0;
background-position:initial initial;
background-repeat:initial initial;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
float: left;
width:95%;
}.social-icons li{
float:left;
width:auto;
height:33px;
line-height:1.3;
margin:0px 10px 10px;
padding:3px 0px 0px 38px;
list-style-type: none;
}.social-icons li a,.social-icons li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration: none;
}.social-icons li a:hover{
color:#999999;
}
.social-icons li span{color:#999;display:block;font-size:10px}.social-icons .icon-rss{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZQiigcwAvkFZFFAtJO6tA_jUN5shJWiEPObJYWt9QYWhdO-CCp2d3DyydGAQXK9qO6eUgXuIOkh_9frrVg_op7ouq8JIN7480O9hrW0R7hlWXXkgtV6PxdSWSwmcazndK1-vIc43Jtc/s1600/rss5.png);background-position:0px 0px;background-repeat:no-repeat no-repeat}.social-icons .icon-google{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8giMpAYb42IMDJ4vQd9eLieJ2rxnRCzuUn_TmtNx7_5Y5ytcALz88SjvEuC5lvJ4ae_j4HaRvc7H-2igGLoj1b7wCGOam1Zo_PYz37CVbiiorSHd0bjbIi5Bt1csjjjQyA2vYF8vAgYk/s1600/gplus5.png);background-position:0px 0px;background-repeat:no-repeat no-repeat}.social-icons .icon-twitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYoD3MO7fDZ-cyLS8zMeY8pBG22sz-g0_Jny8Lk2lO9czqUEHjuT9XyoWmP5fYdxqEhalrpGbyq9nWL82Tpp3w2l6TFHXV6QKqTQal_DQ2pkqx9BXVYEkwEbf8qy_xGdFHXQs1r6qbS0w/s1600/twit5.png);background-position:0px 0px;background-repeat:no-repeat no-repeat}.social-icons .icon-facebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKdeRxpmAsFnXODJT1xyIaIUlYIlVBTfWtR2av4oQDgA70kjlzs__kwyqTGGQhqymWxLllLWm6XhIbxHKf0jqLk5Z0MwynPrdMS6kQyR4giK6ZJPqX70XZ2jsaVJycvSOcO90LrieOVuA/s1600/fb5.png);background-position:0px 0px;background-repeat:no-repeat no-repeat}
.BD_spoler{
border: 1px solid #666;
border-radius: 3px 3px 3px 3px;
color:#000000;
cursor:pointer;
font-family:verdana;
text-shadow:1px 2px 1px #999;
width:100%;
background-color: #ccc;
float: right;
margin-top: -44px;
font-size: 12px;

} .BD_spoler:hover{
border: 1px solid #000;
color: #FFFFFF;
box-shadow: 0 0 2px #000 ;
}.bdlink-main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
list-style-type: none;
margin-left:-5px;
width: 170px;
height: 100px;
margin:2px 5px 30px 5px;
float: left;
}.bdlink-main a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUKTWY_y9CfNxZJblTsVdlpopI4sSVUuOEFYsLYQRLwm_P5zKgEDXWh6axaUHIDyw3rKBrzboor8CDY3vin1uEUzroo3hC5DWTVLBO2GKfN-2Jt0sL9u6n-5vqy8ckiIV6X2-ZWurdkYg/s1600/li.gif') no-repeat 0px 3px;
padding-left:15px;
width: 170px;
line-height: 20px;
}.bdlink-main a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-decoration: underline;
}
/* End CSS widget menu



Install Program Tag HTML

  • Setelah anda sudah memasang CSS widget menu di atas , saatnya anda memasang kode html widget menu pada postingan kali ini. untuk pemasangannya anda bisa saja menempatkannya diatas header halaman atau dibawah header..
  • Pada tutorial kali ini saya akan memasang widget menu ini di bawah header halaman, di dalam sebuah gadget html, bila kolom layout dibawah header anda belum ada silahkan kunjungi laman 1 kolom layout di bawah header. Setelah anda sudah memasang kolom gadgetnya saatnya kita akan memasang kode html widget menu ini didalam gadget htmlnya.
  • Lihat ' Tata Letak ' pastinya sudah ada satu kolom layout dibawah header.
  • klik ' ADD Gadget ' kemudian pilih ' HTML / JavaScript '.
  • Copy kode html widget menu dibawah ini, pastekan di gadget anda, edit linknya dan save.

<!-- Rivai Silaban | BLOG DESIGN CODE widget author box start -->
<div id="bdrsnav-icon">
<div class="social-icons">
<ul>
<li class="icon-rss"><a href="http://feeds.feedburner.com/RivaiSilaban" target="_blank" rel="nofollow" title="rss">RSS</a><span>Get updates</span></li>
<li class="icon-google"><a href="https://www.google.com/+RivaiSilaban" target="_blank" rel="nofollow" title="googleplus">Google Plus</a><span>Join our circle</span></li>
<li class="icon-twitter"><a href="https://twitter.com/Rivai_Silaban" target="_blank" rel="nofollow" title="twitter">Twitter</a><span>Follow us</span></li>
<li class="icon-facebook"><a href="https://www.facebook.com/rivaisilaban" target="_blank" rel="nofollow" title="facebook">Facebook</a><span>Become our fan</span></li>
</ul>
<div class="clear"></div>

<div><div style="margin: 2px;text-align:center" >
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"> </span></i><input type="button" class="BD_spoler" style=" padding: 5px; width: 200px; font-size: large; text-align: center;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Click to Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open Kategory'; }" value="Open Kategory"/>
</div>
<div class="alt2" style=" margin: 50px; font-family: 'Courier New', Courier, monospace; font-size: 12px; width:100%; ">
<div style="display: none;text-align: left;padding: 10px;word-wrap:break-word; background-color: #EBEBEB;width:100%; height:270px;margin:0 auto;">
<div style="width:100%; margin:0 5px">

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

<!-- 1 kolom link start -->
<div class="bdlink-main" >
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_18.html' target='_blank' title='Sitemap'>
Sitemap
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_22.html' target='_blank' title='Disclaimer'>
Disclaimer
</a><br/>
<a href='http://rivai-silaban.blogspot.com/p/blog-page_24.html' target='_blank' title='Privacy Policy'>
Privacy Policy
</a><br/>
</div>
<!-- 1 kolom link end -->

</div>
</div></div></div></div>
</div> </div>
<!-- Rivai Silaban | BLOG DESIGN CODE widget author box End -->


Keterangan Gambar
  • Code warna BIRU pada CSS [ 960px ] merupakan lebar widget menu ini
  • Code warna MERAH pada code html widget menu ini ganti dengan link sosial media anda.
  • Code warna HIJAU ganti dengan link anda.
  • Silahkan anda edit kode widget menu ini sesuai dengan thems template blog anda.

Kesimpulan

widget menu pada tutorial kali ini sangat cocok buat halaman blog yang memiliki jumlah link yang banyak. Ditambah widget sosial media yang menyempurnakan widget ini sehingga semakin menarik.

Bila anda mengalami masalah dalam pemasangan widget menu ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

widget menu
Kamis, 14 Nopember 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 5:04 PM

2 comments :

  1. UnknownNovember 14, 2013 at 5:32 PM

    Mantap sekali tampilan widget menunya,dengan memakai widget menu ini tampilan blog jadi rapi tp tetap dapat dengan mudah mengakses seluruh menu-menu dalam blog.

    ReplyDelete
    Replies
    1. UnknownNovember 14, 2013 at 9:07 PM

      betul sekali mas..
      thx atas pendapatnya dan kunjungannya..
      salam..

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog

Find us on Google+ | Powered Blogspot

7 Maret © 2013 Rivai Silaban | BLOG DESIGN