Widget social sharing slide gaya PopOut 4in1 pada Blogger

Tutorialmixs - Mat, pagi sobat.. untuk mengawali aktivitas di pagi hari ini, aku mo berbagi sedikit terkait cara Membuat Widget Socil Sharing Slider Gaya PopOut pada blogger. Penampilannya oke banget, responsive bener dan dapat menampilkan 4 social widget dalam satu panel.. hhmm kurasa sobat harus menggunakan ini dalam blog sobat untuk mempercantik blog sobat dengan gaya yang attraktive banget..

Jika berkenan, untuk menambahkan ini ke blog sobat, silahkan ikutin tutorial berikut ini :
1. Silahkan masuk saja di blogger >> Template >> Edit HTML
2. Silahkan masukkan kode berikut di atas kode </head>

<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Nb: jika di html anda sudah terdapat jquery dengan versi tersebut, maka abaikan saja

3, Perintah terakhir, silahkan tambahkan code script berikut pada penambahan gedget template [edit html/script]anda

Berikut Scriptnya :

.box-title1 {
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
        padding:10px;
  margin: 10px 0;
    }

.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}

.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){
jQuery(this).stop(true,false).animate({right:  0}, 500);
 },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -250}, 500);
 });
   jQuery("#twitter_right").hover(function(){
 jQuery(this).stop(true,false).animate({right:  0}, 500);
 },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });
jQuery("#google_plus_right").hover(function(){
 jQuery(this).stop(true,false).animate({right:  0}, 500);
 },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });
    jQuery("#feedburner_right").hover(function(){
 jQuery(this).stop(true,false).animate({right:  0}, 500);
 },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
    });
</script>
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNz5lh094_EjhSMW5WBBb4iztrDSKNFRZjtvzrtpiz9iJ8YVtBWLefneATBhp506NKy8QiKa3JxINkTfBtlhr1Q371wfgndR_MqfgWdoD6spad2VX2XRj8WZT32P0tb0AO6iVBJILEXMt/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fyoutubemostwanted&locale=en_GB&width=300&connections=9&stream=&header=false&show_faces=0&height=250"   scrolling="no">
</iframe>
<span>
By <a href="http://www.makingdifferent.com/">Making DIfferent</a> / <a href="http://www.makingdifferent.com/2012/04/4-in-1-social-sharing-slide-popout_29.html">+Get This!</a>
</span>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyevyLTe6CGJXAA_GQoNiA-YCEUhKTabWVGPgezXM3WLwePhxNmrGim11fLarD41HjlOJnBdsHnrXBWbPgfyOIqFk3MWPAsp2RBvgDc3xp6IvzSja12HN5U4THWNpz2tREV3zAmIRHnLLF/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.png" />
<div id="twitterfanbox">
</div>
<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://moopz.com/connect.php?user=pvid77" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial;"></iframe>
<span>
By <a href="http://www.makingdifferent.com/">Making DIfferent</a> / <a href="http://www.makingdifferent.com/2012/04/4-in-1-social-sharing-slide-popout_29.html">+Get This!</a>
</span>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqDa_yYVuWo5KrpfK57nzVQwa60_vciZ_QxTnznVy7gE7DMIodgvn3CrrMV7bf4ajMXKj2fOMFGw8E60EEp-YIH7cv3M3mSMIvigoViMpsRulGZaLOsTeVhR7Lu1z5a6xTpqIeHOOyVtB/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_plus_right.png" />
<div style="float:left;margin:10px 10px 10px 0;">
<g:plusone size="tall" expr:href="data:post.url">
</g:plusone>
<span>
By <a href="http://www.makingdifferent.com/">Making DIfferent</a> / <a href="http://www.makingdifferent.com/2012/04/4-in-1-social-sharing-slide-popout_29.html">+Get This!</a>
</span>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="mdburner_div">
<center>
<h4 style="color:#F66303;">
You can also receive Free Email Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tutorialmixs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == ''){this.value = 'Enter your email here...';}"onfocus="if (this.value == 'Enter your email here...'){this.value = '';}" type="text" />
<input value="youtubemostwanted" name="uri" type="hidden" />
<input value="Submit" class="submitbutton" type="submit" />
</form>
</center>
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbpxSBG80HL6o9No0LCyfDOYblIIK0oXhmbWKRKP20NZn3CubNURm-w-wscse4N41frj32cNo0NTuqd0UIyJdpAX_CgCCgUp0RQt322PACC7PnhnPBmEBgjst9GwouEwREMXmnOMKX-3s/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png" />
<span>
By <a href="http://www.makingdifferent.com/">Making DIfferent</a> / <a href="http://www.makingdifferent.com/2012/04/4-in-1-social-sharing-slide-popout_29.html">+Get This!</a>
</span>
</div>
</div>
</div>
</div>

oke, berikut adalah tutorial bagaimana membuat dan menambahkan Widget Social Sharing gaya slide Popout 4in1 pada blogger, semoga bisa menjadikan manfaat buat sobat blogger
salam

Widget social sharing slide gaya PopOut 4in1 pada Blogger

Share this

Related Posts