Home » , » Cara Membuat Widget Social Media Melayang di Blog

Cara Membuat Widget Social Media Melayang di Blog

POETRA PAKUMIS | Hallo sobat semua bagaimana kabarnya moga baik semua yah. Setelah lama ngak posting karna kemariin saya sedang menjalankan MID semester jadi saya ngak terlalu fokus sama blog kesayangan saya ini, dan sekarang sudah selesai dan saya akan share kembali artikel-artikel menarik untuk sobat setia POETRA PAKUMIS. Kali ini saya akan share Cara Membuat Widget Social Media Melayang di Blog mungkin sudah banyak para master blogger yang share Cara Membuat Widget Social Media ini tapi kali ini saya akan memberikan sesuatu yang berbeda dari pada yang lain karna Widget Social Media ini melayang di samping kanan jadi blog anda akan terlihat simple, rapih. Oh iyah cara ini sebenarnya sudah saya posting juga di blog saya yaitu KU SHARE . Cara ini saya dapatkan dari Template Ciptaan Maskolis yaitu Johny Ribet. Berikut screentshotnya :

Begini contohnya gan
Bagaimana anda tertarik dan inginkan Widget ini ada di blog anda ? kalo iyah silahkan di simak cara berikut ini.

  • Login akun blogger sobat seperti biasa sob.
  • Lalu pilih Template - Edit HTML (Jangan lupakan centang Expand Widget Template)
  • Lalu silahkan sobat cari kode ]]><b:skin> agar memudahkan sobat dalam mencari kode tersebut silahkan gunakan CTRL+F bila kode tersebut sudah di temukan silahkan sobat taruh kode di bawah ini tepat di atas kode ]]><b:skin>.
.sosmed-kananblogger{ background:url('http://4.bp.blogspot.com/-pHaCPnRRhpw/UEyeymZDBAI/AAAAAAAAAPo/sQgRynAxmLc/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.sosmed-kananbloggerc{ background:url('http://4.bp.blogspot.com/-udMDlRqH1mA/UEyexorOOMI/AAAAAAAAAPg/xlYmVRZR5Gc/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.sosmed-isiblogger{margin:0px 0 0 43px}
.sosmed-kanantwitter{background:url('http://2.bp.blogspot.com/-cb-8UxmdvCY/UEye3s5ckoI/AAAAAAAAAQI/2UsOUiBl7OY/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.sosmed-kanantwitterc{background:url('http://4.bp.blogspot.com/-TtvqyHndUXc/UEye2FTtlVI/AAAAAAAAAQA/3de7K8XwcWE/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.sosmed-isitwitter{margin:0px 0 0 43px}
.sosmed-kananfacebook{background:url('http://2.bp.blogspot.com/-kX-wO_55wpo/UEye0R9pSdI/AAAAAAAAAP4/GYLd2emZvyc/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.sosmed-kananfacebookc{background:url('http://3.bp.blogspot.com/-xAafaK_rors/UEyezhSNU4I/AAAAAAAAAPw/ceimgukhoT8/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.sosmed-isifacebook{margin:0px 0 0 43px}
.sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.sosmed-isirss{margin:0px 0 0 43px}

  • Nah setelah langkah di atas sudah dilakukan jagan kemana-mana dulu sob masih ada yang lainya.
  • Sekarang cari kode </body> sob gunakan lagi CTRL+F biar gampang nyarinya sob. Kalo kode tersebut sudah di temukan masukan kode di bawah ini tepat di atas kode </body>.
<div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'><div class='sosmed-isiblogger'><a href='ID FACEBOOK SOBAT' target='_blank'><img alt='Like us on Facebook' src='http://3.bp.blogspot.com/-N67uPytUphw/UEyoTwSDa9I/AAAAAAAAAQc/yQjj5R6pBuI/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='sosmed-kanantwitter' onmouseout='this.className=&apos;sosmed-kanantwitter&apos;' onmouseover='this.className=&apos;sosmed-kanantwitterc&apos;'><div class='sosmed-isitwitter'><a href='https://twitter.com/ID TWITTER SOBAT' target='_blank'><img alt='Follow us on Twitter' src='http://1.bp.blogspot.com/-82LWv3XyPKQ/UEypI664imI/AAAAAAAAAQk/CBSAuHp_lqA/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='sosmed-kananfacebook' onmouseout='this.className=&apos;sosmed-kananfacebook&apos;' onmouseover='this.className=&apos;sosmed-kananfacebookc&apos;'><div class='sosmed-isifacebook'><a href='ID GOOGLE+ SOBAT' target='_blank'><img alt='Recommend us on Google Plus' src='http://3.bp.blogspot.com/-eOpgXkqE7cw/UEyqFjfr6dI/AAAAAAAAAQs/A2JlJ2fios0/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='sosmed-kananrss' onmouseout='this.className=&apos;sosmed-kananrss&apos;' onmouseover='this.className=&apos;sosmed-kananrssc&apos;'><div class='sosmed-isirss'><a href='http://feeds.feedburner.com/ID FEED BURNER SOBAT/iqBg' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png' title='Subscribe me'/></a><br/>
</div></div>

  • Terakhir sebelum sobat klik Save silahkan preview dulu apakah sudah godjob atau belum kalo sudah baru sobat klik Save
Note :
Silahkan sesuaikan script yang berwarna-warni itu sesuai dengan ID-ID sobat semua.

Saya rasa cukup sekian artikel yang saya berikan semoga artikel yang saya berikan ini bermanfaat bagi sobat. bila ada salah-salah kata yah mohon di maafkan maklumlah saya juga manusia tak luput dari dosa. Dan jgan lupa sob sering-sering mampir ke POETRA PAKUMIS dan dapatkan artikel-artikel menarik lainya di sini tinggalkan juga kritik dan saran di blog ini.
Jika anda menyukai artikel Cara Membuat Widget Social Media Melayang di Blog dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.

0 komentar:

Peraturan berkomentar di blog's POETRA PAKUMIS

- Silahkan berkomentar sesuai artikel bisa berupa saran dan kritik,
- Anda juga bisa menggunakan gambar EMOTICON pada komentar,
- Mohon untuk tidak meletakan Link Hidup, Sara, Dan Spam.
- Sebisanya komentar anda saya balas dengan Cepat,
- Untuk mengetahui balasan komentar dari saya silahkan berlangan artikel.