Social Sharing Widget for Blogger in WP Style

Bagaimana menambaBloggerhkan Sosial Sharing Widget Untuk 

Terlebih Dahulu,

Login ke Dashboard Blogger Baru> Pilih Blog Anda dan Klik Mitra Dropdown

Pilih Template> Klik Edit HTML> Lanjutkan

Cukup ikuti 3 langkah sederhana,

THE JQUERY PLUGIN!

Seperti biasa, itu adalah widget berbasis jQuery, dan blog Anda harus memiliki plugin jQuery. jika blog Anda sudah memiliki plugin terbaru jQuery, maka Abaikan langkah ini dan langsung mengikuti langkah kedua.

Jika tidak menambahkan potongan kode di bawah ini sebelum </ head> tag

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

dan menambahkan kode script sosial untuk widget beban benar. Cari untuk {Gunakan CTRL + F} </ body> tag dan menempatkan di bawah kode sebelum dan menyimpannya.

<script type='text/javascript'>/*<![CDATA[*///Facebook Script(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js,fjs)}(document,'script','facebook-jssdk'));//Twitter Script!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");//Google Plus Script(function(){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='https://apis.google.com/js/plusone.js';var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x)})();/*]]>*/</script> 

Tambahkan Kode CSS

Kode ini mengandung gaya css, dan mereka adalah beban hanya di Halaman Posting yang akan menurun, waktu buka ketika Anda di rumah atau halaman lain. ;)

Tambahkan potongan kode di bawah ini sebelum </ head> tag dan simpan.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'>/*<![CDATA[*//*-----Social Sharing CSS code widget by www.digitalhubinc.com----*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons { border-radius: 5px; padding: 14px 7px; background: white; width: 680px; overflow: hidden; margin: 2px auto 0; box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button { background: #DCE0E0; position: relative; display: block; float: left; height: 40px; margin: 0 7px; overflow: hidden; width: 150px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}.icon { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; text-align: center;}.icon i { color: #fff; line-height: 42px;}.slide { z-index: 2; display: block; margin: 0; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;}.slide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 16px; left: 0; margin: 0; position: absolute; text-align: center; top: 10px; width: 100%;}.button .slide { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.facebook iframe { display: block; position: absolute; right: -16px; top: 10px; z-index: 1;}.twitter iframe { width: 90px !important; right: 5px; top: 10px; z-index: 1; display: block; position: absolute;}.google #___plusone_0 { width: 70px !important; top: 10px; right: 15px; position: absolute; display: block; z-index: 1;}.linkedin .IN-widget { top: 10px; right: 2px; position: absolute; display: block; z-index: 1;}.facebook:hover .slide { left: 150px;}.twitter:hover .slide { top: -40px;}.google:hover .slide { bottom: -40px;}.linkedin:hover .slide { left: -150px;}.facebook .icon, .facebook .slide { background: #305c99;}.twitter .icon, .twitter .slide { background: #00cdff;}.google .icon, .google .slide { background: #d24228;}.linkedin .icon, .linkedin .slide { background: #007bb6;} /*]]>*/</style> </b:if>

PENAMBAHAN SOSIAL TOMBOL WIDGET

Mari kita akhirnya tambahkan Sosial horisontal bar code widget.

Tambahkan kode ini sebelum <data: post.body /> tag. {Paste kode ini setelah posting tubuh}

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='border-bottom: 1px solid #CCCCCC; padding: 10px 10%;margin:5px;'/><div id='sbuttons'><div class='facebook button'><i class='icon'><i class='icon-facebook'></i></i><div class='slide'><p>facebook</p></div><fb:share-button type='button_count'/> </div> <div class='twitter button'><i class='icon'><i class='icon-twitter'></i></i><div class='slide'><p>twitter</p></div><a class='twitter-share-button' data-via='digitalhubinc' href='https://twitter.com/share'>Tweet</a></div> <div class='google button'><i class='icon'><i class='icon-google-plus'></i></i><div class='slide'><p> google+</p></div><!-- Place this tag where you want the +1 button to render. --><div class='g-plusone' data-size='medium'></div><!-- Place this tag after the last +1 button tag. --></div>  <div class='linkedin button'><i class='icon'><i class='icon-linkedin'></i></i><div class='slide'><p>linkedin</p></div><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script></div></div></b:if>

SAVE TEMPLATE!!!

Save the template and check your blog post pages, a working and awesome jQuery based New Slide-in and Slide-out social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.

CHANGES :

1. I FOUND THE TAG THREE TIMES?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,

Solution:

Search for below two lines

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

Place the Widget code in between the two tags.

2. HOW TO CHANGE THE BACKGROUND COLOR OF HORIZONTAL BAR?

You can change the background color of Horizontal bar.

Solution:

In the Second step (The Social Scripts), search for

background:#FFFFFF;

and change the #FFFFFF with your own Hex Color.

Share :

Tweet

✚

Related Post