Cara Membuat Widget Follow Us Social Media Buttons Keren -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Widget Follow Us Social Media Buttons Keren, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel CSS3, Artikel Sosial Bookmarking, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Membuat Widget Follow Us Social Media Buttons Keren
link : Cara Membuat Widget Follow Us Social Media Buttons Keren
Gambar dibawah ini

Cara Membuat Widget Follow Us Social Media Buttons Keren

Hampir setiap blog atau website memiliki widget follow social media dengan tombol icons yang beragam. Dengan memasang widget sosial media pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi blog anda. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik tombol follow pada widget jaring sosial anda, dan mereka hanya akan mengklik atau mengikuti update blog anda kecuali mereka merasa atau menemukan hal yang berguna dan bermanfaat pada blog anda.

Widget ini tidak otomatis dapat meningkatkan follower blog anda diberbagai jaring sosial tapi setidaknya kita dapat memancing mereka untuk setidaknya mengklik sekali pada tombol dengan membuat/menampilkan tombol widget ini lebih menarik dan memiliki efek hover yang meluas, mulus dan sexy . Efek hover ini kita buat dengan bantuan CSS3 transisi.

Widget ini juga tanpa javascript, tanpa JQuery, murni hanya dengan CSS. Widget akan terlihat rapi dan bersih disidebar blog anda atau dibagian manapun anda meletakkannya.

Nah silahkan lihat demo widget ini terlebih dahulu, jika anda menemukannya menakjubkan atau tertarik sekedar mencoba membuatnya atau menambahkannya pada blog anda silahkan melangkah pada tahapan pembuatannya

View Demo

Fitur:

Widget ini cukup sederhana tapi memiliki beberapa fitur utama:

� Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS

� Efek memperluas, mulus dan sexy pada hover

� Penggunaan CSS sprite

� Sangat rapi dan bersih

� Tidak ada JavaScript. JQuery No. Ini murni CSS

CSS sprite Teknik cukup keren dan berguna terutama ketika Anda memiliki terlalu banyak gambar. Dalam widget ini Anda akan berpikir bahwa satu gambar atau ikon yang digunakan untuk setiap tombol yang membuat total 5 gambar. Tapi sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon. Teknik ini berguna karena bukannya 5 permintaan HTTP, Anda hanya membuat satu permintaan yang mempercepat waktu loading. Teknik ini tidak sangat umum di blog Blogger tetapi dalam blog WordPress teknik ini sering digunakan.

Sekarang mari kita menambahkan widget ini di blog Anda.

Catatan:

Jika Anda ingin menambahkan widget pada tempat tertentu, gunakan HTML terpisah dan CSS dan jika Anda ingin widget untuk muncul di suatu tempat di sidebar Anda, silahkan melompat langsung di bagian Alternatif di bagian bawah.

HTML

1. Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
2. Letakkan kode berikut pada bagian yang anda inginkan dari blog anda

<!--Sexy Social Buttons Widget RePost TipsTrikBlogging.com-->
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<!--Sexy Social Buttons Widget RePost TipsTrikBlogging.com�>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti semua tanda # dengan URL jejaring sosial anda.

CSS

Sekarang tambahkan kode CSS yang akan membuat tombol ini sexy

1. Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
2. Cari kode ]]></b:skin> Letakkan kode berikut diatasx

/* Sexy Social Buttons Widget RePost TipsTrikBlogging.com*/
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOdvCh5eARb8tO_0JJLlBaV5-NKh0e4mwNhvQ138ioBxQL0i3Hcg5GRg3YjyH3gKKfITlB1AgfvU41x33TuJFQhtG8O7M7yNxzStcZqub9gtNRFbC4sg1MO1xNs4dsOL65T3K5ty6RsAE/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;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
/* Sexy Social Buttons Widget By RePost TipsTrikBlogging.com*/

Alternatif

Jika ingin menambahkan widget ini pada sidebar blog anda

1. Login ke akun Blogger anda-> Layout
2. Klik tambah gadget pada sidebar
3. PilihHTML/JavaScript pada form letakkan kode berikut

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOdvCh5eARb8tO_0JJLlBaV5-NKh0e4mwNhvQ138ioBxQL0i3Hcg5GRg3YjyH3gKKfITlB1AgfvU41x33TuJFQhtG8O7M7yNxzStcZqub9gtNRFbC4sg1MO1xNs4dsOL65T3K5ty6RsAE/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;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti semua tanda # yang berwarna biru dengan URL jejaring sosial anda

4. Simpan dan lihat hasilnya diblog anda!

Nah demikian tutorial membuat widget follow social media dengan tombol sexy. Semoga bermanfaat!

Original Resaurce

Demikianlah Artikel Cara Membuat Widget Follow Us Social Media Buttons Keren

Sekianlah artikel Cara Membuat Widget Follow Us Social Media Buttons Keren kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Membuat Widget Follow Us Social Media Buttons Keren dengan alamat link https://trikmitos.blogspot.com/2012/12/cara-membuat-widget-follow-us-social.html