Cara Memasang Widget Social Media Keren

Cara membuat widget social media di blogspot ini lebih simpel dan tampilan yang lebih menarik. pada postingan kali ini Widget Social Media m...

Cara membuat widget social media di blogspot ini lebih simpel dan tampilan yang lebih menarik. pada postingan kali ini Widget Social Media memiliki style dengan tampilan tombol yang memakai CSS shadow dan in shadow sehingga lebih menarik. Jadi widget ini tidak hanya di pasang pada HTML javascript tapi juga di letakkan pada kode HTML nya. Berbeda dengan postingan saya sebelumnya yang hanya mengandalkan HTML Javascript Cara Memasang Tombol Follow Me di Blog Terlengkap.
Tutorial Blogger

Cara Memasang Widget Social Media Keren

Login ke dashboard anda Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin> Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
Atau bila template blog anda  memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Copy code dibawah ini.
******************************************/
#bdrs-social {
margin:0px auto;
width: 300px;
}
#bdrs-social .bdbox-social a:link,.bdbox-social a:visited{
float:left;
width:32px;
height:32px;
margin:0 5px;
padding:0;
text-indent:-9999em;
box-shadow:3px 3px 3px rgba(0,0,0,0.3);
background-color:transparent;
background-size:100% auto;
background-image:url('http://2.bp.blogspot.com/-l34G5vpMi_M/UnPSyKfedDI/AAAAAAAAB90/uBMeYXEawzQ/s1600/BRS01-sosial.png');
background-repeat:no-repeat;
}
#bdrs-social .bdbox-social a:hover,.bdbox-social a:active {
box-shadow:3px 3px 7px #333 INSET;
}
#bdrs-social .bdbox-social a:first-child{margin-left:3px}
#bdrs-social .bdbox-social a:last-child{margin-right:0}
#bdrs-social .bdrs-rss{background-position:0 0}
#bdrs-social .bdrs-goo{background-position:0 -32px}
#bdrs-social .bdrs-fac{background-position:0 -64px}
#bdrs-social .bdrs-lin{background-position:0 -96px}
#bdrs-social .bdrs-tum{background-position:0 -128px}
#bdrs-social .bdrs-twi{background-position:0 -160px}
#bdrs-social .bdrs-wor{background-position:0 -192px}
/*code CSS end */
Untuk memanggil widget social media tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini.

Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya. Untuk memasang kode htmlnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.

Silahkan pilih " Tata Letak " pada dasbor blog anda.
Klik "Add gadget " ( Tambahkan gadget )
Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
Save dan lihat hasilnya, semoga bermanfaat...
Copy code berikut.
<!-- BDRS widget social media code start -->
<div id="bdrs-social">
    <div class="bdbox-social">
        <a class="bdrs-goo" href="https://plus.google.com/u/0/+muhammadiqbal02" rel="publisher" target="_blank" title="Google+">Google+</a>
        <a class="bdrs-fac" href="https://www.facebook.com/pajatapuih.iqbal" rel="nofollow" target="_blank" title="Facebook">Facebook</a>
        <a class="bdrs-twi" href="https://twitter.com/02IQb4L" rel="nofollow" target="_blank" title="Twitter">Twitter</a>
        <a class="bdrs-lin" href="http://id.linkedin.com/in/iqbal02" rel="nofollow" target="_blank" title="LinkedIn">LinkedIn</a>
        <a class="bdrs-tum" href="http://id.linkedin.com/in/iqbal02" rel="nofollow" target="_blank" title="Tumblr">Tumblr</a>
        <a class="bdrs-rss" href="http://masdabang.blogspot.com/feeds/posts/default" rel="external" target="_self" title="RSS Feed">RSS Feed</a>
    </div>
</div>
<!-- BDRS widget social media code end -->
Keterangan : Ganti link berwarna merah dengan link media sosial sobat
Untuk contoh, Hasilnya nanti lebih kurang seperti ini (sobat bisa meletakkannya di mana saja)

COMMENTS

BLOGGER: 2
Loading...
Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,36,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Blog iTapuih.com: Cara Memasang Widget Social Media Keren
Cara Memasang Widget Social Media Keren
https://3.bp.blogspot.com/-zfgnG9g66d4/Wkp7yZBisxI/AAAAAAAANjA/aXqbVFFDTbcCA5WOsSeGUo8ri7YJxCzdACLcBGAs/s1600/Widget-Header.png
https://3.bp.blogspot.com/-zfgnG9g66d4/Wkp7yZBisxI/AAAAAAAANjA/aXqbVFFDTbcCA5WOsSeGUo8ri7YJxCzdACLcBGAs/s72-c/Widget-Header.png
Blog iTapuih.com
https://blog.itapuih.com/2015/01/cara-memasang-widget-social-media-keren.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2015/01/cara-memasang-widget-social-media-keren.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy