Cara Membuat Widget Follow Us Keren Pada Blog

18:39:00
Cara Membuat Widget Follow Us Keren Pada Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi ilmu tentang blogging yaitu cara membuat widget follow us keren di blog. Widget follow us di blog merupakan widget yang menampilkan media sosial yang dimiliki oleh pemilik blog atau media sosial blog sehingga pengunjung dapat mengetahui informasi secara dalam tentang blog tersebut.



Dengan adanya media sosial yang kita pasang pada blog, akan semakin meningkatkan kepopularitasan blog atau suatu web, karena pengunjung blog maupun web banyak dapat didapatkan melalui jejaring sosial media. Dengan adanya sosial media memudahkan pengunjung untuk mengetahui berita maupun postingan terbaru dari blog kita. Sehingga blog kita akan semakin ramai untuk dikunjungi.



Bagi kalian yang ingin memasang widget follow us, caranya cukup mudah dan simpel, berikut tutorial untuk memasang widget tersebut :


Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard blog pilih menu tata letak,

3. Setelah itu pilih menu tambahkan gadget,

4. Setelah itu pilih menu javascript / html,

5. Setelah itu copy script di bawah ini lalu paste pada kolom javascript / html,

 <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://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/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="https://www.facebook.com/RenaldyRizkiRamadani">Follow us on
Facebook</a></li>

<li data-alt="Follow us on
Twitter">

<a class="icon twitter" href="https://twitter.com/ThisIsRenaldy7">Follow us
on Twitter</a></li>

<li data-alt="Follow us on
Google+">

<a class="icon googleplus"
href="https://plus.google.com/u/0/113399816614878257205">Follow us on
Google+</a></li>

<li data-alt="Follow us on
Pinterest">

<a class="icon pinterest"
href="http://www.pinterest.com/renaldyrizkiram/">Follow us
on Pinterest</a></li>

<li data-alt="Subscribe with
RSS">

<a class="icon rss" href="http://renaldyways.blogspot.com/feeds/posts/default">Subscribe
with RSS</a></li>

</ul>


<small><div
style="font-size:80%; text-align:right; text-shadow:2px 2px 2px
#adadad;"><a href="http://renaldyways.blogspot.com"
target="_blank" title="Widget Follow Us">+ Get This
Widget Here</a></div></small> 


Jangan lupa untuk mengubah link atau alamat url media sosial tersebut!

6. Setelah itu tekan simpan,


7. Selesai.


Demo


Cara Membuat Widget Follow Us Keren Pada Blog


Nah itu saja dari saya tentang cara membuat widget follow us keren di blog semoga artikel ini dapat membantu anda, jangan lupa like, share dan google+nya serta tinggalkan komentar, terima kasih.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

0 Comments