JagadRochain

Cara Membuat Tombol Sosial Media di Blog Keren

Cara Membuat Tombol Sosial Media di Blog Keren

by BangMatro , at 11/10/2015 11:24:00 pm , have 0 komentar
Cara Membuat Tombol Sosial Media di Blog Keren
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/bang_matro" 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/JagadRochain-501992503303978" 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/+MRochainiBangMatro" 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/bang_matro ganti dengan Url twiter sobat
  • https://www.facebook.com/JagadRochain-501992503303978 ganti dengan Url Facebook atau halaman FP sobat sobat
  • https://plus.google.com/+MRochainiBangMatro 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. Sellamat berkarya semoga Allah SWT selalu melimpahkan karunianya memberi  Ridho dan PetunjukNya. Amin.. Sukses..



Cara Membuat Tombol Sosial Media di Blog Keren
Cara Membuat Tombol Sosial Media di Blog Keren - Oleh BangMatro , Pada , Label Blogging , Widgets . Dan 0 komentar
No comment Add a comment
Cancel Reply
GetID

DASAR SEO

BISNIS ONLINE

BLOGGING

Copyright ©2013 JagadRochain by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger
-->