Cara Menambah Tombol Social Media Di Menu Bar

Jumat, 09 September 2016

Bagikan :

Tweet

Menambah tombol Social Media selain dapat membuat tampilan blog menjadi keren dan indah juga dapat memudahkan pengunjung atau pembaca  untuk menghubungkan pengunjung dengan pemilik blog lewat social media. Tahun 2016, tombol ini jadi sangat penting, para designer template telah membuat setiap template dengan diisi tombol social media. Coba pikirkan jika pengunjung ingin berkenalan dengan pemilik lewat social media misalkan facebook, atau twitter, tetapi pemilik tidak memasang tombol social media, pastingany pengunjung merasa bingun kan?. Keuntungan lain memasang tombol social media, kita jadi mendapatkan pengikut ataupun teman banyak, untuk menyambung silaturohim, bisa jadi pengunjung dapat jadi pacar kita haha. Enak kan kalau banyak teman, makanya pasang tombol social media di template kamu, caranya mudah kok.
Pada kali ini admin berbagi cara untuk memasang tombol social media di bagian pojok kiri menu bar, jadi disini admin hanya berbagi bagaimana caranya memasang tombol saja, tidak dengan membuat menu bar, bisa dilihat penampakannya  seperti di bawah ini :

Tombol social media meliputi tombol

• facebook
• google plus
• twitter
• youtube

nggak bnyak-banyak, yang bisasa dipake orang lain umunya kan hanya itu saja, haha
kamu tertarik?, ikuti langkah-langkah berikut :
1. Masuk ke blog kamu, lalu pilih bagian template > edit html
2. Yang pertama harus dilakukan adalah kamu mencari kode CSS menu bar kamu, biasanya terletak       diatas kode ]]></b:skin> , contoh punya admin seperti ini :

/*AHA Top Menu*/
#top{margin:auto;padding: 0;width: 880px;background:#FFD700;border-bottom:0px solid #ddd;} #top-wrap{margin:auto;padding: 0;width: 810px;background:#FFD700;}
#navwrap {margin: 0px auto; width:580px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:12px;display:block;padding:13px 13px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:active {text-decoration:none; background:#3CB371;}
]]></b:skin>

3. Lalu tambahkan kode css tombol social media berikut di bawah kode css menu bar bagian hover         milik kamu :

ul.nav-social{height:38px;margin:0 0 0 0;padding:0 0;float:righ
ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0;border-right:none;border-left:0 solid #f0f0f0}
ul.nav-social li a{display:inline-block;line-height:33px;height:33px;padding:0 8px;margin:0 0 0 0;color:#666666}
ul.nav-social li a i{line-height:33px}
ul.nav-social li a:hover{color:#fff}
ul.nav-social li a.fcb:hover{background:#3B5A9B}
ul.nav-social li a.gpl:hover{background:#DD4B39}
ul.nav-social li a.twt:hover{background:#1BB2E9}
ul.nav-social li a.ytb:hover{background:#ED3F41}

ket : kode yang berwarna biru untuk ganti ukuran tombol
Contoh kode css menu bar bagian hover punya admin sebagai berikut :

.topnav li a:hover, li a:active {text-decoration:none; background:#3CB371;}

4. Cari kode html menu bar kamu, lalu tambahkan kode html berikut sebelum kode </li> terakhir :

<ul class='nav-social'>
<li><a class='fcb' href='https://www.facebook.com/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
</li>
<li><a class='gpl' href='https://plus.google.com/' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
</li>
<li><a class='twt' href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a>
</li>
<li><a class='ytb' href='https://www.youtube.com/' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a>
</li>
</ul>

Contoh punya admin seperti ini :

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='/' title='Top Menu'>BERANDA</a></li>
<li><a href='http://gekjow.blogspot.com/p/privacy-policy_4.html' title='Privacy Policy'>PRIVACY POLICY</a></li>
<li><a href='http://gekjow.blogspot.com/p/privacy-policy_4.html' title='Privacy Policy'>CONTACT US</a></li>
<li><a href='http://gekjow.blogspot.com/p/terms-of-service.html' title='Disclaimer'>DISCLAIMER</a></li>
<li><a href='http://gekjow.blogspot.com/p/privacy-policy_4.html' title='Privacy Policy'>TOS</a></li>
</ul>
<ul class='nav-social'>
<li><a class='fcb' href='https://www.facebook.com//' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
</li>
<li><a class='gpl' href='https://plus.google.com/' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
</li>
<li><a class='twt' href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a>
</li>
<li><a class='ytb' href='https://www.youtube.com/' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a>
</li>
</ul>
</div>
</div>

6.Selesai, dan simpan/save template kamu
   Sekian cara menambah tombol social media di pojok kiri menu bar, bila ada masalah silahkan tanya    di bagian komentar, atau hubungi admin, ok, terimakasih sudah berkunjung di blog Gecko Jowo.

Tag : Tutorial Blog