Tujuan dibuat sosial media share button diharapkan para pembaca artikel blog dapat membagikannya ke media sosial seperti FB, twitter, Googleplus, dan lain-lain. Sehingga memudahkan para pembaca artikel meneruskan artikel yang dianggap penting untuk dibagikan.
Dengan harapan tersebut, beberapa hari ini telah melakukan obok-obnok template untuk menambah share button sosial media di blog ini. Namun hingga artikel ini diturunkan, belum juga berhasil.
Walaupun telah membaca beberapa tutorial yang ditulis di blog lain, baik blog dalam Bahasa Indonsia dan juga blog berbahasa inggris tetap saja saya belum berhasil menambahkan share button sosial media di blog.
Nah... ketika mencoba membongkar lagi dan membanding-bandingkan dengan artikel-artile yang lumayan banyak, dapat ditemukan sebuah pola.
Pertama, menambah CSS
Kedua, membuat syntak html.
Kedua langkah tersebut di atas sudah dapat diatasi dan berhasil diuji cobakan di notepad++, namun ketika diaplikasikan di blog, malah tidak mau nongol di browser. Nah.. tambah bingungkan?
Sampai artikel ini diturunkan penambahan atau pembuatan share button sosial media di atas maupun di bawah artikel blog belum berhasil ditambahkan.
Catatan: Menggunakan bawaan template blog, button terlalu kecil, dan kebetulan tidak bisa mengeditnya ke ukuran yang lebih. besar. Bingung.....
Bila Anda punya saran, silahkan urun saran di komentar di bawah ini. Ini syntak yang telah saya pakai.................
kode cssnya...
.fa {
padding: 8px;
font-size: 15px;
width: 3%;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-tumblr {
background: #2c4762;
color: white;
}
.fa-flickr {
background: #f40083;
color: white;
}
kode html....
<!-- Add font awesome icons ditambahkan di bawah <head>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--sharebutton html start-->
<h4>Bagikan Artikel: </h4>
<a expr:href='"https://www.facebook.com/sharer.php?u="+ data:post.url'
rel='nofollow' class="fa fa-facebook" target='_blank' title='share to Facebook'></a>
<a expr:href='"https://www.twitter.com/share?url="& + data:post.url'
rel='nofollow' class="fa fa-twitter" target='_blank' title='Share to Twitter'></a>
<a expr:href='"https://plus.google.com/share?url="& + data:post.url'
rel='nofollow' class="fa fa-google" target='_blank' title='Share to PlusGoogle'></a>
<a expr:href='"https://www.linkedin.com/share?url=" + data:post.url'
rel='nofollow' class="fa fa-linkedin" target='_blank' title='Share to Lind'></a>
<a expr:href='"https://www.youtube.com/share?url=" + data:post.url'
rel='nofollow' class="fa fa-youtube" target='_blank' title='Share to Youtube'></a>
<a expr:href='"https://www.instagram.com/share?url=" + data:post.url'
rel='nofollow' class="fa fa-instagram" target='_blank' title='Share to instagram'></a>
<a expr:href='"https://www.pinterest.com/share?url="+ data:post.url'
rel='nofollow' class="fa fa-pinterest" target='_blank' title='share to pinterest'></a>
<a expr:href='"https://www.snapchat.com/share?url=" + data:post.url'
rel='nofollow' class="fa fa-snapchat-ghost" target='_blank' title='share to snapchat'></a>
<a expr:href='"https://www.skype.com/share?url=" + data:post.url'
rel='nofollow' class="fa fa-skype" target='_blank' title='share to skype'></a>
<a expr:href='"https://www.tumblr.com/share?url=" + data:post.url'
rel='nofollow' class="fa fa-tumblr" target='_blank' title='share to tumblr'></a>
<a expr:href='"https://www.flickr.com/share?url=" + data:post.url'
rel='nofollow' class="fa fa-flickr" target='_blank' title='share to Flickr'></a>
<!--sharebutton html end-->
dan sudah diletakkan di atas ataupun di bawah <data:post.body/>
Sebelumnya diucapkan terima kasih.
NB: sytac css maupun html di atas, hasil copy paste dari situs w3school.com, yang dimodif kemudian berdasarkan sebuah artikel di yang blog lain.
