Memasang Widget Share Button Di Blog

Di banyak sekali postingan blog, telah banyak yang memakai widget share button. Tapi apakah kau tahu cara memasang widget share button ?

Pada postingan kali ini kita akan berguru memasang tombol share di blogspot dengan mudah. Silahkan kau ikuti langkah-langkah di bawah ini !

Jika template anda belum ada fontawesome maka silahkan salin isyarat di bawah dan tempatkan di atas isyarat </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'2/> 

Langkah-langkah :
1. Seperti biasanya kita login dulu ke akun blogger. Setelah itu pilih Template dan Edit HTML.

2. Cari isyarat ]]></b:skin> atau </style> selanjutnya tambahkan isyarat dibawah ini sempurna diatasnya.

/* CSS Tooltip */ .arlina-tooltip {position:relative;display:inline-block;} .arlina-tooltip:before, .arlina-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;}  .arlina-tooltip:hover:before, .arlina-tooltip:hover:after {opacity:1;} .arlina-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}   .arlina-tooltip:after {content:attr(data-arlina-tooltip)!important;background:#494158;color:#fff;padding:6px 8px; font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;} .arlina-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;} .arlina-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}  /* CSS Share Button */ .share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;} .widget .post-body > .share-post ul {padding:0;} .share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;} .share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;} .share-post li a:hover{color:#fff;} .share-post li .twitter{background-color:#19bfe5;} .share-post li .facebook{background-color:#3b5998;} .share-post li .gplus{background-color:#d64136;} .share-post li .pinterest{background-color:#cb2027;} .share-post li .tumblr{background-color:#304e6c;} .share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover, .share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;} .share-post li:last-child{margin-right:0} .share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;} .share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);} .share-post li .fa {display:initial;}  @media only screen and (max-width:640px){ .share-post li a{padding:6px 0 6px 0;} .share-post li .fa:before{display:none;}}  @media screen and (max-width:480px) { .share-post li{width:100%}} 

3. Selanjutnya cari isyarat </article> dan tambahkan isyarat dibawah ini sempurna diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='share-post'>               <ul>                 <li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>                 <li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>                 <li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>                 <li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>                 <li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>               </ul>          </div> <div style='clear:both'/> </b:if> 

4. Simpan template dan silahkan lihat hasilnya.

Referensi dari : www.arlinadzgn.com
Sumber https://ramadaniad.blogspot.com/