Kali ini Blog Gado Gado akan menampilkan artikel berjudul Social Sharring Horizontal Bar Mendatar Untuk Blogger. Dengan artikel Social Sharring Horizontal Bar Mendatar Untuk Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Social Sharring Horizontal Bar Mendatar Untuk Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Social Sharring Horizontal Bar Mendatar Untuk Blogger selengkapnya:
D-Copy Blog | Website jejaring social telah menjadi pusat kegiatan internet karena mampu menarik setiap user yang menggunakan internet baik dari sekolah, kantor atau perumahan. Sekarang hari orang yang suka untuk berbagi artikel takjub dengan komunitas sosial yang menguntungkan semua orang sama sekali. Ini penting untuk setiap blogger dan webmaster untuk mengintegrasikan sharing social atau seperti tombol di blog mereka, sehingga mereka dapat berbagi cerita di website jejaring sosial terbaik pada pengunjung, ini tidak hanya akan memberi mereka cakupan tetapi juga akan membangun pembaca setia. Ada widget social share terbatas yang tersedia di berbagai blog, tetapi mereka juga kurang dalam menghitung tombol atau mereka tidak dirancang dengan baik. Jika Anda telah melihat orang-blog wordpress yang memiliki bar sharing horizontal sosial yang mengapung saat halaman menggulir, jadi hari ini kita akan berbagi jenis widget serupa untuk blogger yang terdiri dari Facebook, Twitter, Google Plus, Pinterest, Digg dan Stumbleupon Sharing tombol.
Langkah :
- Buka akun Blogger Anda
- Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
- Cari kode dibawah ini :
</head>4. Pada kode diatas, pastekan kode dibawah ini diatas pada kode diatas :<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
#mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#mblSocialFloat td{padding:4px;margin:0;border:none;}
#mblSocialFloat td iframe{max-width:82px;width:82px !important;}
#mblSocialFloat.mblFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#mblSocialFloat");a.wrap('<div id="mblSocialPlaceholder"></div>').closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script src='http://mbl-flipper-google-blogger.googlecode.com/files/mbl_blogger_pinit.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Stumbleupon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Digg
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>Keterangan :
- Jika template Anda sudah menggunakan jQuery hapus kode berwarna biru diatas agar proses scrolling bar berjalan lancar.
Biasanya jQuery dengan kode seperti berikut :<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>5. Cari kode dibawah ini :<data:post.body/>Keterangan :
- Biasanya kode diatas ada 3-4 pada masing-masing template, binya untuk peletakkan kode pada <data:post.body/> yang ke 2 dan ke 3. Jadi jika Anda nantinya social sharring horizontal bar mendatar untuk blogger tidak muncul pada template Anda, maka Anda harus meletakkan kode pada kode <data:post.body/> yang laiinya.
6. Pastekan kode dibawah ini, diatas pada kode langkah 5 :<b:if cond='data:blog.pageType == "item"'>7. Save template Anda.
<div class='mblSocialFloat' id='mblSocialFloat'>
<table class='mblSocialFloat' width='100%'>
<tr>
<td>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</td>
<td>
<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</td>
<td>
<div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>
<data:post.body/>
<script type='text/javascript'>
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvehYh11T3qlrsGRUlZOSrf5lObeRHTAThpafpbvL79SDzZU_59-bF2huLgyoaHIrfN6V7BlnJCGigkilusk-1IDBn7GOeny2J9Y9TwmP0wI_X92bMSBSXGeL6cLUsZSiiGLM91s3zceO/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
</div>
</td>
<td>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</td>
<td>
<su:badge expr:location='data:post.url' layout='1'/>
</td>
<td>
<a class='DiggThisButton DiggCompact'/>
</td>
</tr>
</table>
</div>
</b:if>Keterangan :
Untuk penyesuaian warna template Anda, Anda bisa mengubah warna kode pada kode #FFFFFF yang telah diwarnai pada langkah 4.Catatan :
- Sebaikknya Anda membaca dengan baik keterangan-keterangan yang telah dibertahukan kepada Anda.
Terima kasih, semoga bermanfaat.
Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Social Sharring Horizontal Bar Mendatar Untuk Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.
0 komentar:
Posting Komentar