Dalam hari ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang Floating Social Share Buttons for Blogger. Semoga dengan artikel Floating Social Share Buttons for Blogger akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com
Tutorial ini akan membantu Anda dalam menambahkan tombol share Sosial di bawah setiap posting blog Anda. Widget ringan dalam ukuran dan terlihat elegan. Di setiap pos setelah bergulir widget akan muncul di bagian bawah bawah layar. Widget berisi empat tombol berbagi - Facebook, Twitter, Google+, LinkedIn. Ada tombol close juga untuk menutup tombol share.
Adding the Marker
Untuk menambahkan widget ini Anda harus pergi ke1. Blogger
2. Template
3. Edit HTML
4. Cari Kode <data:post.body/>
dan paste kode di bawah ini diletakan tepat di bawah <data:post.body/>
xml
<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'/>
</b:if>
Kemudian cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head> <b:ifcond='data:blog.pageType == "item"'>
<scriptsrc='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-floating-share.js'type='text/javascript'/>
<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'type='text/javascript'/>
</b:if>
Kemudian cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}
.share-button{ background:#DCE0E0!important; position:relative; display:block; float:left; height:40px; overflow:hidden; width:150px; border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}
.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:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}
.icon i{color:#fff;line-height:42px}
.slide{z-index:2; display:block; height:100%; left:38px; position:absolute; width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}
.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid
rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .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:22px;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>
Kode ini telah dioptimalkan dan membuat loading lebih cepat.
<b:if cond='data:blog.pageType == "item"'>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<a class='boxclose' id='boxclose'/>
<div id='share-buttons'>
<div class='facebook share-button'>
<i class='icon'>
<i class='icon-facebook'>
</i>
</i>
<div class='slide'>
<p> facebook </p>
</div>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Farieadie&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'>
</iframe>
</div>
<div class='twitter share-button'>
<i class='icon'>
<i class='icon-twitter'>
</i>
</i>
<div class='slide'>
<p> twitter </p>
</div>
<a class='twitter-share-button' data-via='Anarchyta' href='https://twitter.com/share'> Tweet </a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
<div class='google share-button'>
<i class='icon'>
<i class='icon-google-plus'>
</i>
</i>
<div class='slide'>
<p> google+ </p>
</div>
<div class='g-plusone' data-size='medium'>
</div>
<script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
<div class='linkedin share-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>
<div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'>
Jangan Lupa Untuk Membagikan Kiriman Ini!!
<br />
<span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span>
</div>
</div>
</div>
</b:if>
Ganti URL arieadie dengan URL fanspage facebook Anda.
Kemudian "Save"
Sekian tutorial singkat ini, semoga menambah wawasan sobat lagi dan dapat berguna di kehidupan sobat.
Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com
No comments:
Post a Comment
jangan lupa tinggalkan komentar .... trimakasih atas kunjungannya