Cara Membuat Floating Menu Keren Widget Social Media

Tutorial Belajar Blogger - Cara Membuat Floating Menu Keren Widget Social Media - Melanjutkan Tutorial blog sebelumnya Cara Membuat Social Button Melayang Banyak blogger berlomba-lomba memasang widget yang paling keren pada blog mereka agar tampak menarik.Widget ini berfungsi untuk mempermudah pengunjung menemukan dan mengikuti anda dalam jejaring social atau yang lainnya dan dilengkapi dengan Efek Floating menu yang keren.
http://ashare-xp.blogspot.com/2013/03/cara-membuat-floating-widget-social.html

Cara Membuat Floating widget Social Media keren
  • login ke blogger
  • pilih menu template-->expand template widget
  • cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
/* social button http://tutorialbelajarblogger.blogspot.com* /
.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 #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/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 #pinterest-btn span {
    background-position: 11px -177px;
}
.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 #pinterest-btn span {
    background-position: 11px -177px;
}
.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 #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.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;
} 

  • letakkan kode dibawah ini diatas kode </head>
<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> 
  • kemudian cari kode </body>  dan letakkan kode dibawah ini diatasnya
  <div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' 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/your twitter' 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/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' 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/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
script diatas juga dapat sobat letakkan pada widget html/javascript pada menu tata letak.Terserah mau diletakkan diatas </body> ataupun pada widget html/javascript.
Kemudian ganti tulisan yang berwarna biru dengan ID jejaring social anda.

Sekian Semoga tutorial Cara Membuat Floating Menu Keren Widget Social Media ini dapat bermanfaat.

7 Responses to "Cara Membuat Floating Menu Keren Widget Social Media "

  1. http://tutorialbelajarblogger.blogspot.com/

    ReplyDelete
  2. https://lh3.googleusercontent.com/-fMtAZDakmBI/T2WEXswr5BI/AAAAAAAACaA/83R1X_PumTk/s36/05.gif

    ReplyDelete
  3. SayaPoker.com | Agen Judi Poker dan Domino Online Terpercaya Indonesia

    Kami Agen Judi Poker Online Indonesia - SayaPoker.com mengadakan Kontes SEO yang akan
    di mulai pada tanggal 15 Maret 2014 sampai dengan 31 Mei 2014 ,
    dengan Total Hadiah Rp 30.000.000,-

    Ikuti dan Daftarkan diri Anda untuk memenangkan dan ikut menguji kemampuan SEO Anda. Siapkan website terbaik Anda untuk mengikuti kontes SEO ini.
    Buktikan bahwa Anda adalah Ahli SEO disini. Saat yang tepat untuk mencoba kemampuan SEO Anda dengan tidak sia-sia, hadiah kontes ini adalah Rp 30.000.000,- Tunggu apa lagi?


    Kontes SEO SayaPoker.com ini akan menggunakan kata kunci (Keyword):

    "SayaPoker.com Agen Judi Poker dan Domino Online Terpercaya Indonesia"

    Jika Anda cukup percaya akan kemampuan SEO Anda, daftarkan web
    terbaik Anda SEKARANG JUGA! Dan menangkan hadiah pertama
    Rp 10.000.000. Pemenang Akan ditentu-kan dengan aturan kontes SEO
    yang dapat dilihat di halaman berikut :

    http://itulink.com/iframer4.php?page=KontesSeoSayaPoker

    Tunggu apa lagi? Ikuti kontes ini sekarang juga.

    ReplyDelete
  4. Halo bosku semuanya kami dari C U M A P O K E R . C O M dijamin NO ROBOT !

    Kami memiliki 6 jenis permainan dalam 1 user ID
    -AduQ
    -BandarQ
    -Poker
    -Bandar Poker
    -Capsa Susun
    -Domino

    Kami juga memberikan promo-promo yang menarik kepada seluruh member kami loh bosku
    -Bonus Turnover sebesar 0,5%
    -Bonus Referal sebesar 20%

    Kami juga memiliki support bank local yang ternama di Indonesia
    -BCA
    -BNI
    -BRI
    -MANDIRI
    -DANAMON

    Kami juga menyediakan newgame yang sedang populer
    -SABUNG AYAM
    -FISH HUNTER ( TEMBAK IKAN )
    -JOKER SLOT

    Buruan daftar bersama kami dan dapatkan hadiah jackpot hingga jutaan rupiah menunggu anda bosku ^_^

    ReplyDelete