Berikut langsung saja kami akan sharingkan tentang bagaimana cara untuk menambahkan Tombol sharing artikel kita ke media sosial pada cms wordpress.
Yang perlu kita lakukan pertama kali adalah:
1. Buka Dashboard WordPress website anda.
Untuk Selanjutnya:
2. Buka menu appearances –> Editor –> cari functions.php. Jika langkah anda sudah sampai functions.php, maka tambahkan kode dibawah ini, dan tempel atau paste sebelum tanda penutup php yaitu seperti tanda ini –> ?>
add_filter( ‘the_content’, ‘ilc_share’ );
function ilc_share( $content ) {
global $post;
$postlink = get_permalink($post->ID);
$posttitle = get_the_title($post->ID);
$html = ‘<div class=”share-entry”>’;
// Title
$html .= ‘<h3><class=”share-title” >Share Info Menarik :</h3>’;
$html .= ‘<a class=”share-facebook” title=”Share on Facebook” target=”_blank” rel=”external” href=”http://www.facebook.com/share.php?u=’ . $postlink . ‘”>Facebook</a>’;
$html .= ‘<a class=”share-twitter” title=”Share on Twitter” target=”_blank” rel=”external” href=”http://twitter.com/share?text=’.$posttitle.’&url=’.$postlink.'”>Twitter</a>’;
// Google+
$html .= ‘<a class=”share-googleplus” title=”Share on Google+” target=”_blank” rel=”external” href=”https://plusone.google.com/_/+1/confirm?url=’ . $postlink . ‘”>Google+</a>’;
$html .= ‘<a class=”share-linkedin” title=”Share on LinkedIn” target=”_blank” rel=”external” href=”http://www.linkedin.com/shareArticle?mini=true&url=’ . $postlink . ‘&title=’ . $posttitle . ‘”>LinkedIn</a>’;
// Digg
$html .= ‘<a class=”share-digg” title=”Share on Digg” target=”_blank” rel=”external” href=”http://digg.com/submit?url=’ . $postlink . ‘”>Digg</a>’;
// StumbleUpon
$html .= ‘<a class=”share-stumbleupon” title=”Share on StumbleUpon” target=”_blank” rel=”external” href=”http://www.stumbleupon.com/submit?url=’ . $postlink . ‘&title=’ . $posttitle . ‘”>StumbleUpon</a>’;
// StumbleUpon
$html .= ‘<a class=”share-print*” title=”Print Artikel” rel=”external” href=”javascript:window.print()”><img src=”https://apikhosting.com/hosting-murah-img-apikhost/print_apikhosting.png” width=”40px” height=”30px”/></a>’;
$html .= ‘</div>’;
return $content . $html;
}
3. Apabila telah selesai anda tempel/paste kode diatas selanjutnya –> klik tombol Update … untuk meng update file function.php
4. Setelah selesai update function.php anda perlu menambahkan kode di bawah ini pada file style.css. Dimana style.css terletak sama dengan file function.php, detailnya adalah appearence –> Editor –> style.css . Silakan anda bebas mempaste diatas atau di bawah atau ditengah kode di bawah ini pada style.css
.share-entry{
list-style:none;
position:relative;
margin-bottom:25px;
}
.share-entry h3{
margin-bottom:15px;
}
.share-entry a:link{
color:#000;
text-shadow: 1px 1px 1px #fff;
}
.share-entry a:hover{
color:#fff;
text-shadow: 1px 1px 1px #000;
}
.share-entry .share-facebook{
margin-right:5px;
padding:7px;
border-radius:4px;
background-color:#353ffc;
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
.share-entry .share-facebook:hover{
background-color:blue;
}
.share-entry .share-twitter{
margin:5px;
padding:7px;
border-radius:4px;
background-color:rgba(64,153,255,0.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
.share-entry .share-twitter:hover{
background-color:rgba(64,153,255,1);
}
.share-entry .share-googleplus{
margin:5px;
padding:7px;
border-radius:4px;
background-color:rgba(228,69,36,0.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
.share-entry .share-googleplus:hover{
background-color:rgba(228,69,36,1);
}
.share-entry .share-linkedin{
margin:5px;
padding:7px;
border-radius:4px;
background-color:rgba(0,109,192,0.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
.share-entry .share-linkedin:hover{
background-color:rgba(0,109,192,1);
}
.share-entry .share-digg{
margin:5px;
padding:7px;
border-radius:4px;
background-color:rgba(42,111,184,0.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
.share-entry .share-digg:hover{
background-color:rgba(42,111,184,1);
}
.share-entry .share-stumbleupon{
margin:5px;
padding:7px;
border-radius:4px;
background-color:rgba(232,60,29,0.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
.share-entry .share-stumbleupon:hover{
background-color:rgba(232,60,29,1);
}
.share-entry .share-print{
margin:5px;
padding:7px;
border-radius:4px;
background-color:rgba(47,73,97,0.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
.share-entry .share-print:hover{
background-color:rgba(47,73,97,1);
}
Dimana fungsi dari kode diatas adalah untuk memperindah tampilan saja.
Apabila selesai menambahkan kode css diatas, selanjutnya klik tombol update.
Demikian tutorial Singkat “Menambahkan Tombol Sharing ke facebook, Twitter dan Media Sosial Lain” yang bisa kami sharingkan, tutorial seperti diatas banyak tersedia di mesin pencarian seperti google.com. Anda bisa memodifikasi tombol sharingnya sendiri melalui file style.css. Selamat mencoba.
Note: Tanda petik dua “..” pada kode diatas adalah tanda petik duA pada keyboard.
