Home > Blog > Cara Membuat Widget Sosial Media
Cara Membuat Widget Sosial Media
Posted on Friday 10 May 2013 by Barqah
Cara Membuat Widget Sosial Media
Assalamualaikum teman-teman .. hari ini saya akan membagi ilmu trik dan tips cara membuat widget sosial media yang keren oke langsung saja tanpa basa basi.. langkah langkahnya Sbb :
- Login Blogger
- Tata letak
- Tambahkan Widget
- HTML/Javascript, nah masukin kode berikut
<style type='text/css'>
#saye{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#saye a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#saye p{position:relative; height:38px; cursor:pointer; padding: 0 !important;list-style:none;}
#saye .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:1.5px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qVemmgNsHgOdsMzuk-_UmnI7inbSfJLPIl1StRPkaisNv3yGZmMoQQkql3B2TPn-pAtp38PRigWuZ-KDEOLORGBObpSDxQB27RJneKpqf2igr-hwngApJwkE4f-Mz_WDcmQTxqzOFng/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-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; -ms-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; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#saye p:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#saye .icon{overflow:hidden; color:#fafafa;}
#saye .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#saye .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#saye .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#saye .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#saye .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#saye p:hover .icon,
.touch #saye p .icon{width:97%;}
.touch #saye p .facebook, #saye p:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #saye p .twitter, #saye p:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #saye p .googleplus, #saye p:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #saye p .pinterest, #saye p:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #saye p .rss, #saye p:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<div id="saye">
<ul>
<p data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/ID anda" data-alt="Follow us on Facebook">Ikuti Saya di Facebook</a></p>
<p data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/ID_anda">Ikuti Saya di Twitter</a></p>
<p data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/ID anda">Ikuti Saya di Google+</a></p>
<p data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/jasridm/">Ikuti Saya di Pinterest</a></p>
<p data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/Pri-donlot">Update melalui RSS</a></p>
</ul>
</div>
ganti Link yang berwarna merah sesuai Link2 anda :D makasih dan sekian :D
Demo
Sumber : cyber-jm.blogspot.com
Related Post
Category Article Blog
One Response to “Barqahs Blog”
Labels
Alur Cerita Anime
(136)
Alur Cerita Hunter X Hunter
(4)
Alur Cerita Naruto
(73)
Alur Cerita One Piece
(11)
Aplikasi / Software
(3)
BBM
(1)
Beelzebub Versi Teks
(1)
Bleach Versi Teks
(2)
Blog
(28)
Fairy Tail Versi Teks
(5)
GUI
(1)
Info Anime
(44)
Info Terkini
(30)
Membuat Program
(1)
Naruto Versi Teks
(16)
One Piece Versi teks
(8)
Pemrograman
(1)
Prediksi Naruto
(5)
Trik Blog
(3)
Tutorial Ubuntu
(8)
Windows Phone & Android
(2)
Blog Archive
Popular Posts
-
Alur Cerita Naruto 671 versi teks naruto chapter 671 "Naruto and the hermit of the six path" Sebelumnya : Naruto Chapter 670 ...
-
Membuat Sebuah Program Menggunakan C# (Queue dan Stack). Membuat Sebuah Program Menggunakan C# (Queue dan Stack). Program ini menggunakan...
keren nihhh CSS nya :D
Replybeda sama yg lain
:)
Kunjungan Sore Sobatt....