Membuat Dynamic Social Bar tanpa Edit HTML

Social Bar
Salam Blogger! Pada kesempatan ini Bang Kamplenk akan mengshare tentang cara Membuat Widget Dynamic Social Bar keren, unik dan mudah digunakan, dalam penerapannya tidak perlu Edit HTML,dan tidak memberatkan loading blog anda. Bila ingin mencoba langsung saja ikuti tutorialnya dibawah ini : 
D E M O



1.Klik Tata Letak.
2.Klik Elemen Halaman.
3.Klik Tambah Gadget.
4.Kemudian Pilih HTML/Javascript.
5.Copy paste kode dibawah ini :

Semoga Bermanfaat.

<style>
.sosmed-kananblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVN4P3xvHyTP0pNeu1P6ZlLLFwWj54Fb7wBHJsYrHSmtA9JyYmU1m4z6dAfCtgjFS1WS_lQjoBY3p-XhxTD5cIj0rRmDV1bGFiXBKWqyoS210FAOBx5GmB1aS0jQJMt3ZHCpMzrj4zvZbV/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.sosmed-kananbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn71SbQU1k56pUGY49QxqTfTkAD83vHyiny_lDp3udLfWK3pbj8I41ynm9yfIxkFRss_mU2jWLxxK3525ORmTp04EtRVVf1W2UXlhlTguXPNBKB0XJzrHDLzx26y-Hjz1X-YdwrH0tjW2/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMspOzE3KhakY5zavOUTHOBfDrN7jdmAG-1j8JVxgOSX9WtgBVbzReP6jh-7rccVmYKXEtvPujtn2Cpa9zy2KVl1oFIb__TLk14EnoKnDG430Gln5vbJ6SXip4mDq5WdY5oJARQfk40QT/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.sosmed-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUH9jkUKPFpUfZbI3gF2dCIQhSIMJDmp697LkmoplLMXx45TY6Yta9i6fXjux5SawUp70_eqcVRBM2l0adPNdCOuXflEFQ9SbRi9atUB5oTYXDALneCQusdF_kWkU7hYuBZpesDYSoeN3J/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO6yPtOHBxwIhyPtz3vcDAP7GsIS4x7g4_rOnT-DeVclWeg2quWiMmHKmb_aRuGD1Vy22ZFLNZKdxxRJmo6L6i3PshfrNOs3NcLVO1ckpJJA99GgsaTlsCq9QC_l71NBNsAQ0H8vU-RKIp/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.sosmed-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWyxI8ZtjuCYdKpzuE_9_4MbwyQDH9e8bs6ivv-u9_06_xc_0P1o3-V8siE018yyqEFQdXDYWCWG9wA_LEDvqLNRBNcqenZPHxrlRZsKz1F0Tf5_jtG-kWShyphenhyphenIyVYIm4rK1ObNL67sRR_7/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}
</style>
<div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'><div class='sosmed-isiblogger'><a href='https://www.facebook.com/XXX' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsr7mwMMG-cAaQe5_acPnKB6OAc-y5sQcUjwM8OqlGNAnLUzzNONxC7OLP4LOnUYo9YUrYnmhu3unKzinxIVw3cMW4SjA5lkdjDSawTAzMUclJn2-dAYyUpNmOMPmfObGJvyQhjA7ITXz_/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/XXX' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpwSHi1F2vHDPLYuO9KlkM9OCtNYY1xzupFrrWcVZUgpay-16mfwpBPcXBPaY552sh63c1XhLjOAfInfFBUXf7tRwQ6bMNHigXbobjPMnyRxHJpELb0xkllj4zAsfqAj68Y7LJXJxvSPxH/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='https://plus.google.com/your googleplus/posts' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzocUJvErUUmSBb5ox_xl5Qyzn1AccVEFAiPA-0OD6H1ZvUrx7jRMp8lS_iuisXwqWtUl_CKPJchhPnicBOU1fdXijI4OcEzlCgeJrUoqcx9CYiggIOITTECjwdL7a11mAavH0PIE9ueY/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/XXX' 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>
C O D E

Related Posts:

  • Membuat Catatan Slide Pada Blog Slide Notes Salam Blogger! Bagi Pembaca Setia blog RIEFSAZ yang ingin membuat Catatan Slide pada blognya Bang Kamplenk akan mengshare artikel tersebut, bagi sahabat yang ingin mempercantik blognya silahkan ikuti tutorial… Read More
  • Cara Membuat Favicon Blog Sendiri Favicon Generator Salam Blogger! Favicon adalah ikon utama yang muncul pada addres bar pada Blog ataupun website, Ikon ini adalah sebagai Logo brand suatu Web, bagi anda yang ingin membuatnya sendiri silahkan ikuti langk… Read More
  • Memasukan Status Twitter Tanpa Edit HTML Ngetwitt di Blog Salam Blogger! Apa kabar semunya semoga ditahun ini kita bisa lebih sukses lagi, Malam ini saya akan meberikan panduan bagaimana Cara Memasang Status Twett kita ke dalam Blog, seperti biasa yang simpel-s… Read More
  • Membuat Label atau Kategori Pelangi pada Blog Multi Colors Labels Salam Blogger! Apa kabar pembaca setia Blog ini?  semoga sehat selalu ya, pada hari ini saya akan membagikan Bagaimana Cara Membuat Label atau Kategori Warna Warni seperti Pelangi pada Blogspot, Ba… Read More
  • Membuat Formulir Belangganan Terbaru tanpa Edit HTML Feedburner  Salam Blogger! Bagi Sahabat yang bosan dengan tampilan Formulir Belangganan standar bawaan dari Blogspot anda bisa merubahnya dengan tampilan yang menarik dan unik. cara membuatnya sangatlah mudah karena t… Read More

2 komentar:

  1. keren nih gan
    izin coba yaa
    salam kenal

    BalasHapus
    Balasan
    1. Salam kenal juga ;)
      Silahkan dicicipin....

      Hapus

Silahkan sobat tinggalkan jejak di bawah ini...NO.SPAM
Dengan Memberikan Komentar Secara Otomatis akan Mendapatkan Pagerank, Traffic dan Backlink.