Cara Membuat Widget Sosial Follow Button Keren di Sidebar

Cara Membuat Widget Sosial Follow Button Keren di Sidebar

Blog Optimasi Blog SEO blog Sosial Media tombol follow sosial media keren Widget HTML widget sidebar soasial media Widget Sosial media follower

Cara membuat widget sosial follow button keren di sidebar sebenarnya sudah ada sejak template itu Anda download namun tidak semua nya template blogger mempunyai sosial icon follow untuk share dan follow konten di sidebar. Walaupun  ada namun kurang keren. Membuat sosial follow button  icon di sidebar ini dibuat dari kode HTML dan tidak ada javascript yang memberatkan loading halaman blog Anda. Sosial button untuk follow sosial media ini akan membantu Anda dimana pengunjung ikut berperan serta memfollow atau mengikuti blog maupun artikel yang mereka temukan dari mesin pencari, jika mereka anggap artikel itu keren dan bermanfaat merek akan follow blog dan konten Anda, dan cara membuat widget sosial follow button  keren di sidebar akan membantu blog Anda dalam optimasi SEO. Widget ini akan bermanfaat sekali untuk populeritas blog dan konten blog Anda jika banyak yang melakukan follow blog Anda.

Cara Membuat Widget Sosial Button Follow Keren di Sidebar Tanpa Javascript

Cara membuat widget sosial follow button  keren di sidebar sangat gampang, karena imuzcorner sudah menyediakan kode HTML nya dan tinggal Anda ganti kode Sosial media Anda dan widget sosial follow button keren di sidebar langsung jadi hitungan menit. Cara membuat widget sosial follower, ikuti cara berikut;

1. Buka Tata Letak --> Tambahkan Gadget --> Pilih HTML/JavaScript dan Paste/tempelkan kode HTML dibawah

2. Copy kode HTML dibawah kemudian tinggal ganti kode HTML sosial share Anda untuk Facebook, Twitter, Google Plus dan Feed blog Anda, dan selanjutnya ganti ID Blog Anda yaitu ID blogger Anda, Untuk ID Blogger Anda Anda bisa dapatkan kodenya disaat Anda mau melakukan postingan maka akan munul kode blogID=(Sejumlah Angka) di alamat browser. Anda tinggal ganti Kode berwarna merah dibawah dengan kode HTML sosial media dan ID blogger milik Anda setiap blog beda-beda blogID bloggernya.

<div class="widget HTML" id="HTML8"><br /><div class="widget-content"><br /><style>#iconizr li {font-size:18px;font-family:shaun the sheep !important;
color:#cccccc;text-shadow:0px -1px 0px #000;cursor: pointer;height:41px;position: relative;border-top:none;border-bottom:none;list-style:none;}
#iconizr .icon {background: #d91e76 url('http://codecbd.googlecode.com/files/iconizers.png') 3px 0 no-repeat;background-color: rgba(217,30,118, .42);-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;border-radius:20px;display: block;color: #141414;float: none;height: 40px;line-height: 40px;margin: 5px 0 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 250px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;box-shadow: rgba(0,0,0, .28) 0 1px 3px;width:40px}
#iconizr li:after {color: #141414;content: attr(data-alt);display: block;height: 38px;line-height: 38px;position: absolute;left: 55px;top: 0;z-index: 2;}
#iconizr .icon {color: #fafafa;overflow: hidden;text-decoration: none;}
#iconizr .facebook {background-color: rgba(65,131,196, .42);background-position: 3px 0;}
#iconizr .twitter {background-color: rgba(74,191,226, .42);background-position: 3px -40px;}
#iconizr .gplus {background-color: rgba(206,26,29, .42);background-position: 3px -80px;}
#iconizr .rss {background-color: rgba(255,109, 0, .42);background-position: 3px -160px;}
#iconizr li:hover .icon {width:99%;}
#iconizr li:hover .icon {background-color: #d91e76;}
#iconizr li:hover .facebook {background-color: #2d76b9;}
#iconizr li:hover .twitter {background-color: #29b8e5;}
#iconizr li:hover .gplus {background-color:#E0181C;}
#iconizr li:hover .rss {background-color: #ff6d00;}</style><br /><ul id="iconizr"><li data-alt="Follow me on Twitter"><a class="icon twitter" href="https://twitter.com/imuzcorner" rel="external" target="_blank">Follow me on Twitter</a></li><br /><li data-alt="Follow me on Facebook"><a class="icon facebook" href="https://www.facebook.com/imuzcorner" rel="external" target="_blank">Follow me on Facebook</a></li><br /><li data-alt="Find me on Google+"><a class="icon gplus" href="https://plus.google.com/+imuzcorner" rel="publisher" target="_blank">Find me on Google+</a></li><br /><li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/imuzcorner" rel="external" target="_blank">Subscribe via RSS</a></li><br /></ul><br /></div><br /><div class="clear"></div><br /><span class="widget-item-control"><br /><span class="item-control blog-admin"><br /><a class="quickedit" href="http://www.blogger.com/rearrange?blogID=1234567891010&widgetType=HTML&widgetId=HTML8&action=editWidget&sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML8"));" target="configHTML8" title="Edit"><br /><br /></a><br /></span><br /></span><br /><div class="clear"></div><br /></div>

Dan hasil Widget Sosial Button Follow Akan seperti ini;

Dan saat Widget Sosial ini di sentuh kursor akan berubah warna sesuai dengan warna Sosial media masing masing, seperti dibawah ini;

3. Setelah di Pastekan di HTML/Javascript, simpan dan lihat hasilnya. Untuk demo widget sosial follownya nya  lihat di InfoTech dan silakan bantu follow untuk mencoba.

Beginilah Cara Membuat Widget Sosial Follow Button  Keren di Sidebar tanpa javascript dan sangat ringan untuk blog Anda. Semoga bermanfaat, Selamat Mencoba!

Baca juga Cara Membuat Tombol Pin It dari Pinterest

imuz Pada 12/12/2013