Gerbangkomputer

Download,Aplikasi,software,Tips dan trick,Tutorial,Kesehatan,Bisnis,Berita Unik,free mp3 dan lainnya gratis semua hanya disini

cara membuat icon media sosial melayang di blog, keren

Cara menambahkan widget social media melayang di samping kiri atau kanan di blog.Assalamu'alaikum. wr. wb. Bertemu lagi dengan saya sobat, kali ini saya akan membagikan tutorial Cara menambahkan widget social media melayang di samping kiri. Bagi para bloger Master memang cara ini sudah basi, ya..ya..ya saya akui. Namun bagi para blogger pemula seperti saya ini memang agak kebingungan bagaimana cara menambahkan icon social media pada blog karna kebanyakan pada template bawaan dari blog belum tersedia icon social media dan walaupun sudah tersedia, mungkin iconnya yang kurang keren dan menarik. Sebenernya tutorial ini sudah banyak di paparkan di blog-blog tetangga, namun tidak ada salahnya saya ikut ambil bagian dengan membahasnya kembali karena cara ini lah yang saya gunakan dulu suwaktu saya menambahkan icon social media di blog amitir ku ini. Hehe,... kebanyakan nyerocos ya?? yupi...Langsung saja ya sobat, Let's Do It" ?

cara membuat icon media sosial melayang di blog



~*Langkah pertama ada masuk ke dasbor, tata-letak dan tambah widget-pilih yang mode HTML/JavaScript
~*Langkah selanjutnya, sobat copy paste semua Script di bawah ini

<style>
.fixedmenu{ background:url('http://1.bp.blogspot.com/-FaeRKNmFDX8/Ud16d2_PZFI/AAAAAAAAAsM/5xugOK5YAuE/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:160px; z-index:1000;}
.fixedmenu1{ background:url('http://3.bp.blogspot.com/-W7Z5XKfLWd8/Ud16eM8AadI/AAAAAAAAAsQ/cv7fgYD5fiE/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:160px; z-index:1100;}
.fixedmenu_1{margin:0px 0 0 43px}
.fixedmenutw{background:url('http://1.bp.blogspot.com/-WeUDB_HkbWA/Ud16fP78JoI/AAAAAAAAAsk/1k2WNVRCBvo/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:205px;z-index:1000;}
.fixedmenutw1{background:url('http://1.bp.blogspot.com/-AEj1b-df974/Ud16fs5CVkI/AAAAAAAAAss/HYNXT4cJpPI/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:205px; z-index:1100;}
.fixedmenutw_1{margin:0px 0 0 43px}
.fixedmenufb{background:url('http://1.bp.blogspot.com/-hj1nQIe4NPQ/Ud16cbNkV1I/AAAAAAAAAr0/EswfGA-rVjM/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:250px; z-index:1000;}
.fixedmenufb1{background:url('http://4.bp.blogspot.com/-umCgVIZ-wTs/Ud16c1EAICI/AAAAAAAAAr8/5ZSWR05S2B8/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:250px; z-index:1100;}
.fixedmenufb_1{margin:0px 0 0 43px}
.fixedmenurss{background:url('http://2.bp.blogspot.com/-9KAMTvWkJ4s/Ud16eU7kWyI/AAAAAAAAAsY/OpoARuR5pXY/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:295px; z-index:1000;}
.fixedmenurss1{background:url('http://4.bp.blogspot.com/-SDcrlF3MTAU/Ud16dDy_wnI/AAAAAAAAAsE/QjdRXR9BekM/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:295px; z-index:1100;}
.fixedmenurss_1{margin:0px 0 0 43px}
</style>
<br />
<div class="fixedmenu" onmouseout="this.className='fixedmenu'" onmouseover="this.className='fixedmenu1'">
<div class="fixedmenu_1">
<a href="alamat facebook sobat" target="_blank"><img alt="Like us on Facebook" src="http://3.bp.blogspot.com/-jWaYNYywDf0/Ud1_G7YS7RI/AAAAAAAAAtA/8b40N46byIQ/s1600/facebook-hover1.png" title="Like us on Facebook" /></a></div>
</div>
<div class="fixedmenutw" onmouseout="this.className='fixedmenutw'" onmouseover="this.className='fixedmenutw1'">
<div class="fixedmenutw_1">
<a href="alamat twitter sobat" target="_blank"><img alt="Follow us on Twitter" src="http://3.bp.blogspot.com/-ppQkr4BjSVQ/Ud1_HkD_OBI/AAAAAAAAAtU/xN5krYZPBhY/s1600/twitter_hover1.png" title="Follow us on Twitter" /></a></div>
</div>
<div class="fixedmenufb" onmouseout="this.className='fixedmenufb'" onmouseover="this.className='fixedmenufb1'">
<div class="fixedmenufb_1">
<a href="https:"alamat google plus sobat" target="_blank"><img alt="Recommend us on Google Plus" src="http://3.bp.blogspot.com/-fPA1gJ6k9Bk/Ud1_G_aexzI/AAAAAAAAAtI/rcqioslWMN0/s1600/Gplus_hover1.png" title="Recommend us on Google Plus" /></a></div>
</div>
<div class="fixedmenurss" onmouseout="this.className='fixedmenurss'" onmouseover="this.className='fixedmenurss1'">
<div class="fixedmenurss_1">
<a href="alamat RSS sobat" target="_blank"><img alt="Subscribe me on RSS" src="http://3.bp.blogspot.com/-1XXERhy9eeQ/Ud1_GgCBHTI/AAAAAAAAAs8/TIB78w-42eg/s1600/RSS-hover1.png" title="Subscribe me" /></a></div>
</div>

Setelah sobat mencopy paste kode script di atas, lalu save dan lihat hasilnya"

NB: Yang Perlu Sobat Ganti Adalah:

  • Tulisan yang saya beri warna biru adalah letak dimana kita akan menaruh icon, di situ saya menuliskanleftyang berarti kiri. Jika sobat ingin menaruhnya di bagian kanan, maka ganti kodenya menjadiright
  • Tulisan yang saya beri warnaKUNINGadalah alamat social media, ganti dengan url social media sobat.

Sekarang lihat hasilnya, jika langkah-langkah di atas sudah benar maka icon social medianya akan seperti yang saya gunakan di blog ini.
Sekian dulu tutorial dari saya, apabila ada masukan, kritik dan saran serta pertanyaan, mohon sudi kiranya untuk meninggalkan komentar. Semoga bermanfaat" ?

Wassalamu'alaikum. wr. wb
Bagikan :
+
Previous
Next Post »
0 Komentar untuk "cara membuat icon media sosial melayang di blog, keren"

 
Template By Kunci Dunia
Back To Top