Cara-Cara Terbaik Untuk Menambahkan Tombol Share Pada Blogspot

Cara-viz.blogspot.com :: Dengan menambahkan tombol share pada blog milik Anda, maka Anda dapat dengan mudah melakukan share pada situs sosial media yang Anda miliki atau memudahkan orang lain untuk melakukan share artikel milik Anda ke social media yang mereka miliki.

Dan berikut cara-cara terbaik yang dapat Anda gunakan untuk menambahkan tombol share pada Blogspot.

Menambahkan Tombol Share Ala Evo Mags pada Blogspot

Masuk ke editor template, dan pasang kode css berikut diatas kode ]]></b:skin> atau </style>

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70nl3C2s9G2IEW7Wy8UbivOxxExWxpeJnNLr9Ebd7b1Sgoohe27NjTEmOaLx86HdHd-CcgIbV57DPBC060Pu3WBlFrQCpxkKNre2RAfh6gLdeRLNSokmyNYlHKGBdrN9N2tguwBaG7xbs/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}

.share-buttons{margin:0 0;height:67px;float:left}

.share-buttons .share{float:left;margin-right:10px;display:inline-block}

Lalu paste-kan script dibawah ini tepat dibawah kode <data:post.body/> (biasanya Anda akan menemukan kode <data:post.body/> lebih dari satu, Anda dapat memilih yang letaknya paling akhir atau mencobanya satu persatu)

<div class='share-buttons-box'>

                        <div class='share-buttons'>

                                    <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>

                                    <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>

                                    <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>

                                    <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>

                                    <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>

                                    lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>

                        </div>

                        </div>

                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

Jika sudah, simpan template tersebut dan lihat hasilnya. Anda dapat mengatur ukuran, posisi, background, dll pada kode css yang Anda pasang diatas kode ]]></b:skin>atau </style>.

Menambahkan Tombol Share Elegant pada Blogspot

Copy dan pastekan script dibawah ini pada HTML/Javascript yang berada di blog Anda.

<!-- Tombol Share -->

<hr/>

<div class='addthis_toolbox addthis_default_style addthis_32x32_style text-center'>

<a class='addthis_button_preferred_1'/>

<a class='addthis_button_preferred_2'/>

<a class='addthis_button_preferred_3'/>

<a class='addthis_button_preferred_4'/>

<a class='addthis_button_compact'/>

<a class='addthis_counter addthis_bubble_style'/>

</a></a></a></a></a></a></div>

<script type='text/javascript'>

    var addthis_config = {data_use_cookies:false}

    var addthis_share = {

        url_transforms: {

             shorten: {

                 twitter: &#39;bitly&#39;

             },

         },

         shorteners: {

             bitly: {

                  login: &#39;BITLY_USERNAME&#39;,

                  apiKey: &#39;BITLY_KEY&#39;

             }

         },

         templates : {

         twitter : &quot;{{title}} {{url}}&quot;

    }

}

</script>

<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f8f8aff2b546e04' type='text/javascript'/>

</script>

<!-- Tombol Share END -->

Menambahkan Tombol Share Simple pada Blogspot

Masuk ke editor template, dan pasang kode css berikut dibawah kode <data:post.body/> (biasanya Anda akan menemukan kode <data:post.body/> lebih dari satu, Anda dapat memilih yang letaknya paling akhir atau mencobanya satu persatu)

<b:if cond='data:blog.pageType == "item"'><br/><script type='text/javascript'>var switchTo5x=false;</script><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&quot;ur-f47fa722-7a63-345d-ca8b-f9aadea89ef4&quot;,doNotHash:false,doNotCopy:false,hashAddressBar:false});</script><div class='shr-btn'>Share This Article<br/><center><span class='st_facebook_hcount' displayText='Facebook'/><span class='st_twitter_hcount' displayText='Tweet'/><span class='st_linkedin_hcount' displayText='LinkedIn'/><span class='st_googleplus_hcount' displayText='Google +'/><span class='st_pinterest_hcount' displayText='Pinterest'/><span class='st_sharethis_hcount' displayText='ShareThis'/></center></div><br/><br/><style>.shr-btn{text-align:center;font-size:30px;font-family:Georgia,serif;font-style:italic;color:#6d0000;border-top:1px solid;padding:10px;border-bottom:1px solid;margin-left:-52px;margin-right:-65px}</style></b:if>

Menambahkan Tombol Share Simple 2 pada Blogspot

Masuk ke editor template, dan pasang kode berikut diatas kode </head>

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

Selanjutnya, pasang kode berikut tepat dibawah kode <data:post.body/> (biasanya Anda akan menemukan kode <data:post.body/> lebih dari satu, Anda dapat memilih yang letaknya paling akhir atau mencobanya satu persatu)

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

<style>

.doncaprio-share-buttons{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding: 5px;margin: 10px;}

</style>

<p align='center' class='doncaprio-share-buttons'>

<span class='st_facebook_hcount' displayText='Facebook'/>

<span class='st_plusone_hcount' displayText='Google +1'/>

<span class='st_twitter_hcount' displayText='Tweet'/>

<span class='st_pinterest_hcount' displayText='Pinterest'/>

<span class='st_digg_hcount' displayText='Digg'/>

<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>

<span class='st_fblike_hcount' displayText='Facebook Like'/>

</p></b:if>

Menambahkan Tombol Share Melayang pada Blogspot

Copy dan pastekan script dibawah ini pada HTML/Javascript yang berada di blog Anda.

<!--Tombol Share Melayang Start-->

    <style>

    #pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solidblack; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

    0;z-index:10;}

    #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

    .fb_share_count_top {width:48px !important;}

    .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

    .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

    </style><div id='pageshare' title="bagikan ke teman anda"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div><div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

    <div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

    <div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 8px;text-align:center;"></div></div>

<!--Tombol Share Melayang End-->