Memasang Widget Share Button Di Postingan

Memasang Widget Share Button di Postingan - Kembali mengembangkan tutorial ke tiga di hari ini.

Tutor kali ini aku bagikan atas undangan sahabat blogger di blog yang ingin memasang widget share button pada blognya.

Silakan ikuti langkah berikut :

Catatan : Sebelum menerapkan widget ini ada baiknya di template yang sahabat gunakan sudah terdapat link fontawesome, jikalau belum ada silakan terapkan link di bawah ini sebelum tag epilog </head>

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

1. Buka blogger > Klik Template buka Edit HTML > Cari kode  ]]></b:skin> atau </style> lalu tambahkan arahan di bawah 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%}}

2. Selanjutnya tambahkan arahan ini sempurna di atas </article>

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

3. Simpan template dan lihat hasilnya.

Share this post