Cara cepat memasang Widget Sosmed mengambang

Sobat-sobat bloggers, banyak cara yang bisa digunakan untuk mendongkrak trafik dan mengangkat popularitas blog. Blogwalking ke banyak blog lain, berbagai macam teknik SEO, Bookmark, tanam Backlink sampai Sosial Media (Sosmed). Masih berhubungan dengan cara-cara tersebut, saya akan memberikan tutorial tentang Cara cepat memasang Widget Sosmed mengambang di blog blogger sobat. 

http://kendhou.blogspot.co.id/2015/12/memasang-widget-sosial-media.html
Widget Sosmed mengambang

Sosial media/jejaring sosial merupakan salah satu cara yang ampuh untuk menghasilkan trafik, maka tak heran jika banyak blogger maupun youtuber yang aktif di banyak sosial media. Tentu dengan syarat telah memiliki banyak teman dan pengikut di sosme-sosmed tersebut, jadi mulai dari sekarang tingkatkan jumlah teman dan pengikut sosmed sobat.

Widget Sosial Media yang akan dibuat berisi lima baris tombol follow, terdiri dari 4 sosmed yang sudah sangat dikenal yaitu Facebook, Twitter, Google+ dan Youtube, lalu ditambah dengan RSS Feed. Semua orang sudah sangat mengenal Facebook dan Twitter sehingga sangat bagus dijadikan media pendongkrak trafik blog sobat. Google plus dan Youtube pun tak kalah terkenal dibanding kedua nama sebelumnya.

Tutorial ini sekaligus untuk melengkapi tutorial terdahulu, baca kembali mengenai pembuatan menu navigasi responsive dan juga tentang membuat membuat penomoran pada postingan artikel sobat.

Bagaimana cara memasang Widget Sosmet yang mengambang ini?

Sobat cukup mengikuti tutorial ini tahap demi tahap sampai selesai, saya jamin akan berhasil selama sobat telah melakukannya dengan benar. Dan sobat akan percaya bahwa cara ini cukup cepat dan mudah.

1. Masuk ke akun blogger sobat

2. Pada halaman administrator blog, buka Template > Edit HTML

3. Cari kode ini ]]></b:skin> lalu tempelkan script berikut ini tepat diatas kode tadi


.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

4. Sekarang cari kode </head> kemudian letakkan script berikut ini di bawah kode head tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>


5. Selajutnya adalah mencari kode </body> menempelkan script berikut tepat dibawah kode body yang sobat temukan.

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/FB sobat' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/twitter sobat' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/G+ sobat' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/ID sobat' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/feed sobat' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>


6. Tinggal masukkan ID sosmed sobat (Facebook, Twitter dan lain-lain) dan Selesai

Widget ini akan tampil di bagian samping halaman blog sobat secara vertikal dan mengambang, sehingga akan terus terlihat meskipun pengunjung melakukan scrolling ke atas maupun ke bawah.

Bagi sobat-sobat saya yang belum memiliki blog dan tertarik untuk membuatnya tidak usah bingung, karena membuat blog bukanlah hal yang sulit. Sobat dapat mencari tahu cara-caranya pada halaman yang membahas cara membuat blog.Semoga bermanfaat dan
Salam Pintar...

Berlangganan update artikel terbaru via email:

6 Responses to "Cara cepat memasang Widget Sosmed mengambang"

  1. Bagus juga nih mas bro... mungkin bisa di coba... :D

    Apakah responsive?

    ReplyDelete
  2. Replies
    1. insya Allah sekali nyoba langsung sukses sob, mau diedit sesuka hati juga monggo.

      Delete
  3. 100%TERPERCAYA TOKO ONLINE RESMI BUKAN PENIPUAN DI DELIMA PONSEL 100% KAMI JAMIN UANGX KAMI KEMBALIKAN APA BILA BARANGX TIDAK SAMPAI DALAN JANGKA 2 HARI ATAU KUNJUNGI WEBSITE RESMI KAMI DI http://delima-ponsel.blogspot.com
    PONSEL:HUB/SMS:0852-4004-4475 PIN BB:5B3C6CE6
    Ready Stock ! Apple iphone 5 32GB Rp.3.000.000,-
    Ready Stock ! Apple iPhone 5S 32GB Rp.4.000.000,-
    Ready Stock ! Apple iPhone 6 plus 32gb Rp.5.500.000,-
    Ready Stock ! Samsung Galaxy S5 Rp.2.500.000
    Ready Stock ! Samsung Galaxy S6 32GB Putih Rp.3.700.000
    Ready Stock ! Samsung Galaxy S4 I9500 Putih Rp.2.200.000
    Ready Stock ! Samsung Galaxy Note 3 PUTIH Rp.3.000.000
    Ready Stock ! Samsung Galaxy Note 4 SM-N910H Gold Rp.3.500.000,-
    Ready Stock ! Samsung Galaxy A3 A300H 16GB Rp.2.000.000
    Ready Stock ! Samsung Galaxy A5 A500F Silver Rp. 2.500.000,-
    Ready Stock ! Samsung Galaxy E5 E500H Putih Rp.1.700.000
    Ready Stock ! Samsung Galaxy E7 E700H Putih Rp. 1.900.000,-
    Ready Stock ! Apple iPhone 4 16GB - Black Rp.1.800.000,-
    Ready Stock ! Apple iPhone 4S 16GB (dari Telkomsel) Rp.2.200.000,-
    Ready Stock ! Samsung Galaxy Grand Prime SM-530H Rp.1.200.000
    Ready Stock ! Asus Zenfone 2 ZE551ML RAM 4GB-64GB Rp.2.700.000,

    ReplyDelete
  4. Do you need free Twitter Followers?
    Did you know that you can get them ON AUTO-PILOT & ABSOLUTELY FREE by registering on You Like Hits?

    ReplyDelete

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel