Cara Membuat Tombol Sosial Media di Blog Keren

Tombol Follow Me yang mengarahkan visitor ke akun sosial media seperti facebook, twitter, dan google+ yang terpampang dalam Blog sebagai bagian dari pada usaha untuk mempromosikan blog banyak di share oleh Blogger terutama yang membahas mengenai Tutorial Blog.Kesempatan Kali ini ijinkan JagadRochain sedikit cawe-cawe mungkin dari rekan blogger sekalian sedang mencari panduan ataupun bingung menentukan mau memasang widget tombol sosial media yang model bagaimanayang akan di sematkan pada blog kesayangan sobat.

Sebagai contoh Widget Tombol Sosial Media twitter, facebook, dan google+ penampakanya adalah seperti di bawah ini. Bagi rekan blogger sekalian jika interes bisa di sematkan pada blog sobat sekalian. 


Jika rekan-rekan sekalian mau Membuat Tombol Sosial Media di Blog Keren seperti contoh di atas bisa comot kode berikut.




<style>#iconizr li {font-size:18px;font-family:shaun the sheep !important;


color:#cccccc;text-shadow:0px -1px 0px #A9A9A9;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>


<ul id="iconizr">


<li data-alt="Follow me on Twitter"><a class="icon twitter" href="https://twitter.com/" rel="external" target="_blank">Follow me on Twitter</a></li>


<li data-alt="Follow me on Facebook"><a class="icon facebook" href="https://www.facebook.com/" rel="external" target="_blank">Follow me on Facebook</a></li>


<li data-alt="Find me on Google+"><a class="icon gplus" href="https://plus.google.com/" rel="publisher" target="_blank">Find me on Google+</a></li>




</ul>


Untuk Cara Membuat Tombol Sosial Media di Blog Keren  seperti itu  langkahnya adalah sebagai berikut
  1. Login di blogger.com
  2. Pilih menu Tata Letak
  3. Tambahkan Widget/Gadget >>kemudian pilih tambahkan HTML/JavaScript
  4. Masukan Kode Seperti diatas untuk 
  • https://twitter.com/ ganti dengan Url twiter sobat
  • https://www.facebook.com/ ganti dengan Url Facebook atau halaman FP sobat sobat
  • https://plus.google.com/ ganti dengan Url google+  sobat

Langkah Terakhir atau nomor 5 silahkan save dan lihat hasilnya. Sedikit share tentang Cara Membuat Tombol Sosial Media di Blog Keren semoga bermanfaat.

0 komentar:

Posting Komentar

 
vcbcvb © 2013. All Rights Reserved. Powered by Blogger Shared by Mafsyah
Top