Cara Membuat Tombol Share di Blog

Tombol share sangat mempunyai peranan penting di dalam sebuah blog. Dengan adanya tombol social share memungkinkan pengunjung blog untuk membagikan postingan tersebut. Kemudian, setelah postingan tersebut sudah di bagikan ke Facebook, Twitter, Dig, Pinterest, atau sosial media yang lainnya, maka teman dari pengunjung yang membagikan postingan tersebut bisa ikut menjadi pengunjung blog juga.

Jadi, yang blognya belum menggunakan tombol share, sebaiknya mulai sekarang buatlah tombol share. Jika belum tahu caranya, maka lakukan langkah-langkah berikut ini:

Pertama, Pililhlah terlebih dahulu share manakah yang ingin anda gunakan.

1. Tombol Share Seperti Punya Saya

Masuklah ke menu Edit HTML. Kemudian tempelkan kode berikut ini di atas kode <head>.

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Kemudian masukkan kode CSS berikut ini di atas kode </b:skin>

ul.social_bossconsultants {

list-style:none;

display:inline-block;

margin:15px auto;

}

ul.social_bossconsultants li {

display:inline;

float:left;

background-repeat:no-repeat;

}

ul.social_bossconsultants li a {

display:block;

width:50px;

height:50px;

padding-right:10px;

position:relative;

text-decoration:none;

}

ul.social_bossconsultants li a strong {

font-weight:400;

position:absolute;

left:20px;

top:-1px;

color:#fff;

z-index:9999;

text-shadow:1px 1px 0 rgba(0,0,0,0.75);

background-color:rgba(0,0,0,0.7);

-moz-border-radius:3px;

-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);

-webkit-border-radius:3px;

-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);

border-radius:3px;

box-shadow:0 0 5px rgba(0,0,0,0.5);

padding:3px;

}

ul.social_bossconsultants li.abfacebook {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT47pMb1xaH6D1hZ4WetuK_cILAeuTsT1zJ73qO3XVnyEqSasIGG0wepp0hpk3ter_mvqo9_4PguWqzWLuDKVBb9sC5vLmrvk57VjE9dB9cveRyfsHJshsM_l3t9W3CIw9zp3sXTKG_Mk/s1600/btrix-facebook-icon.png);

}

ul.social_bossconsultants li.abtwitter {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6c19G4hDv0jdjomoj76bQXBCkaObluF0WWUSZ9s1ACLH48mA2msrtT5VLyLKCr_oLkA1idRWz9vhjCaMXAYNk5-Z91COfYHvsljVD5JCvuJ2Ui4zLue6KZXqb3KyzNutvEuKtSI1FFcKD/s1600/btrix-twitter-icon.png);

}

ul.social_bossconsultants li.abgoogleplus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbJbUghcQcpDavmvtMaDv8X6Td7QZRd0kyLJpG4I5vI7qB1f-FeWZCIaf3o5sfn7u3y6YJ5FJddU9RRQOCV4F9oOPMx9L26gq90AvoXRhsp9mMSGjOjc3Q4nkVMzSvuPnDRnD_dsE4Qkz/s1600/btrix-google-icon.png);

}

ul li.abpinterest {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLLREza9gAQuzhMoma3BQzN9mRb_WMXfTt2BfGN0TjcdGhRNkWaRllUmQ2TePsyoYzHuZilI5qCtLc0WFB6dXkSh-wj6E9FjWan7iNoRJroIuhnI2hw2D7puX-upMIlIlSf9OcC5Xcn7s/s1600/btrix-Pinterest-icon.png);

}

ul.social_bossconsultants li.abstumbleupon {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbNihUYb8-dYch619vD4i-zy4hjxwuZyncsArHsNhQ7WMa2ZJ34to6h0tPGVjXuFCCLEXFteMhyphenhyphen8DNGjHOJGVhoPxU6eWB2VHIY0wpL19nfbu5d6igkD15kGipTgG28NqlgXhzCj3wJUj/s1600/btrix-StumbleUpon-icon.png);

}

ul.social_bossconsultants li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyfTMMob7yw4S5pZeB-dTyj_rTu-GZONC5bX3QX4XxScZC0fqJuO0QTb608kFnypbhZwn1nq1t629eFbfS6mpdXZOEwCkONEMjJ-T_xH7_lCrDdANAdCd22MThxGoAqpxUI1ZbaCWHGkYa/s1600/btrix-Digg-icon.png);

}

ul.social_bossconsultants li.ablinkedin {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJxh77DvNeBD4T7mMQ85Y6l1U8urco5bQ6AJ995KPHL2WsPBzp1BZ_B_6hZ9zZA-sPpn6iqGGEsUL6ZUxe6q_vSu3rin2apx3IVc08l13g7lPAxMsw38SsuKAbQ4ai-7QnaJ_X1pbdiQf/s1600/btrix-Linkedin-icon.png);

}

#animation_bossconsultants:hover li {

opacity:0.2;

}

#animation_bossconsultants li {

-webkit-transition-property:opacity;

-webkit-transition-duration:500ms;

-moz-transition-property:opacity;

-moz-transition-duration:500ms;

}

#animation_bossconsultants li a strong {

opacity:0;

-webkit-transition-property:opacity, top;

-webkit-transition-duration:300ms;

-moz-transition-property:opacity, top;

-moz-transition-duration:300ms;

}

#animation_bossconsultants li:hover {

opacity:1;

}

#animation_bossconsultants li:hover a strong {

opacity:1;

top:-10px;

}

Carilah kode <data:post.body/>, kemudian tempelkan kode berikut ini di bawah kode <data:post.body/> yang paling akhir.

<b:if cond='data:blog.pageType == "item"'>

<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>

<div style='text-align:center'>

<ul class='social_bossconsultants' id='animation_bossconsultants'>

<li class='abfacebook'>

<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' ><strong>Facebook</strong></a>

</li>

<li class='abtwitter'>

<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>

</li>

<li class='abgoogleplus'>

<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' title='G+' target='_blank'><strong>Google+</strong></a>

</li>

<li class='abpinterest'>

<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' target='_blank' title='Pinterest'><strong>Pinterest</strong></a>

</li>

<li class='abstumbleupon'>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' title='Stumbleupon' target='_blank'><strong>StumbleUpon</strong></a>

</li>

<li class='abdig'>

<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='Dig' target='_blank'><strong>Dig</strong></a>

</li>

<li class='ablinkedin'>

<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>

</li>

</ul></div>

</b:if>

Simpan template Anda.

2. Tombol Social Share Ala Flat UI Color

Masuklah ke menu Edit Template.
Simpan kode di bawah ini tepat di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

<style type='text/css'>

.sosial ul{position:relative;height:45px;margin:0;padding:0;list-style:none}

.sosial li {position:relative;float:left;margin:0;padding:0;width:20%;height:20px}

.sosial li a {display:block;height:40px;line-height:40px;font-weight:bold;color:#fff;text-align:center;border-top:4px inset rgba(0,0,0,.1)}

.sosial li a span{display:block;font-family:FontAwesome;font-size:40px;line-height:50px;width:50px;height:50px;border-radius:100px;border-bottom:3px solid #fff;position:absolute;background:#666;color:#fff;left:35%;top:135%;transition:all 0.3s ease 0s;opacity:0;visibility:hidden}

.sosial li a:hover span{content:"";position:absolute;top:-150%;left:35%;display:block}

.sosial li:hover span{opacity:1;opacity:1;visibility:visible}

.sosial li:nth-child(1) a,.sosial li:nth-child(1) a span{background: #4A5E99}

.sosial li:nth-child(2) a,.sosial li:nth-child(2) a span{background: #00BFFF}

.sosial li:nth-child(3) a,.sosial li:nth-child(3) a span{background: #d34836}

.sosial li:nth-child(4) a,.sosial li:nth-child(4) a span{background: #C92228}

.sosial li:nth-child(5) a,.sosial li:nth-child(5) a span{background: #F99C58}

@media screen and (max-width:414px){

.sosial ul{height:220px}

.sosial li {float:right;width:100%;height:44px;transition: all .5s}

.sosial li a span{left:35%;top:135%}

.sosial li a:hover span{content:"";position:absolute;top:-40%;left:-10%}

.sosial li:hover{width:90%}

}

</style>

Carilah kode <data:post.body/>, kemudian tempelkan kode berikut ini di bawah kode <data:post.body/> yang paling akhir.

<div class='sosial' id='sosial'>

<ul>

<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-facebook'/>Facebook</a></li>

<li><a expr:href='"http://twitter.com/intent/tweet?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-twitter'/>Twitter</a></li>

<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-google-plus'/>Google +</a></li>

<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-pinterest'/>Pinterest</a></li>

<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' rel='nofollow' target='_blank'><span class='fa-rss'/>My Feeds</a></li>

</ul>

</div>

Simpan template Anda.

3. Tombol Share Dengan Smile Jempol

Masuklah ke menu Edit Template.
Sisipkan kode CSS berikut ini di atas kode </b:skin>

/* social share buttons */

.social-buttons-box {

height: 67px;

background: url(https://lh4.googleusercontent.com/-V-DWAgASUW8/VTtcnHOOboI/AAAAAAAAAIQ/pHPUZ8H0MpY/w246-h60/berbagi%2Bgratis.png) no-repeat 200px 0px;

margin:20px 0 15px;

overflow:hidden;

}

.social-buttons {

margin:0 0;

height:67px;

float:left;

}

.social-buttons .share {

float:left;

margin-right:10px;

display:inline-block;

}

.share-btn {

margin:15px 0 25px;

height:20px;

overflow:hidden;

}

Masukkan kode berikut ini di atas kode </body>

<script>

window.___gcfg = {lang: 'id'};

(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>

<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

</script><div id='fb-root'/>

<script type='text/javascript'>

//<![CDATA[

(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/id_ID/all.js#xfbml=1&version=v2.0";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

//]]>

</script>

Carilah kode <data:post.body/>, kemudian tempelkan kode berikut ini di bawah kode <data:post.body/> yang paling akhir.

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

<div class='social-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 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>

</div>



<div style='clear: both;'/>

Simpan template Anda.

Jika langkah-langkah itu semua sudah Anda lakukan dan ternyata berhasil. Sekarang, alangkah baiknya untuk membagikan postinangan ini.

Pages

Saturday, April 25, 2015

Cara Membuat Tombol Share di Blog

No comments:

Post a Comment

Labels