Cara Membuat Share Post pada Postingan Blog

Tutorial Lengkap Cara Membuat Share Post Pada Akhir Postingan Blog - Pagi ini admin mau share cara membuat button Share Post yang sama dengan punya blog ini ( 18/12/2015 ). Sesuai dengan request dari agan Kgenzaru Khuluq "Kalau tombol share (twitter, fb,g+, tumblr, pinterest) kyak di blog agan ini cara pmbuatannya gimana? itu tuh yg dibawah postingan hehe" itulah yang disampaikan oleh gan Kgenzaru Khuluq.

Tutorial ini bukanlah tutorial yang admin garap sendiri. Sebenarnya widget itu sudah bawaan template, namun Author template ini yaitu arlinadesign sudah share tutorial ini. Admin hanya akan share ulang tutorial tersebut. Okay lah cekidot gan

Screenshot

 Tutorial Pemasangan

Pertama agan lihat ke template blognya, apakah sudah terpasang script font-awesome. Jika sudah lewati langkah pertama ini. Jika belum silahkan copy kodenya tepat diatas </head>

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

Kedua kita pasang script css nya gan. Copy dan pasang tepat diatas kode ]]></b:skin> atau jika agan mau, agan bisa pasang tepat diatas kode </style>

/* 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%}}

Ketiga sekarang tinggal pasang script html nya gan. Nanti untuk edit agan bisa coba - coba mengedit script css maupun html. Tapi jika kurang yakin admin sarankan jangan gan. Scriptnya pasang tepat diatas kode </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>

Okay gan itulah Cara Membuat Share Post pada Postingan Blog. Admin ingin menyampaikan terimakasih kepada arlinadesign karena sudah membagikan tutorial ini lengkap. Sekian yang bisa admin sampaikan jika ada pertanyaan tinggal tanyakan di komentar Terimakasih.