 |
| Cara Memasang Tombol Share pada Postingan di Blog |
Salah satu hal yang mungkin
dilakukan oleh sebagian pembaca di blog ketika mendapati tulisan atau artikel
yang menarik adalah membagikan atau share artikel tersebut di media sosialnya. Hal
ini dilakukan karena ketertarikannya kepada artikel tersebut ataupun untuk
sekedar berbagi info kepada teman-teman di media sosialnya.
Oleh karena itu, banyak dari para
blogger mencoba untuk memasang tombol share pada postingannya agar srtikel
mereka dikenal dll. Ada banyak cara untuk memasang tombol share di blog, salah
satu cara yang bisa Saling Sharing info bagikan adalah sebagai berikut :
1. Hal pertama yang perlu dilakukan adalah login
ke blogger, lalu pilih “template” dan klik “Edit HTML”.
2. Cari kode berikut “<data:post.body/>
“ kemudian pilih kode yang kedua
3. Salin kode dibawah ini dan letakkan tepat setelah kode “<data:post.body/> “
<b:if cond='data:blog.pageType
== "item"'>
<div
class='tombol-berbagi-arlina'>
<div
class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb'
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.url + "&title=" + data:post.title'
rel='nofollow' target='_blank'/>
<a
class='tombol-berbagi-fb-label'
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.url + "&title=" + data:post.title'
rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div
class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw'
expr:data-text='data:post.title' expr:data-url='data:post.url'
href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a
class='tombol-berbagi-tw-label' expr:data-text='data:post.title'
expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'
target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp'
expr:href='"https://plus.google.com/share?url=" +
data:post.url' rel='nofollow' target='_blank'/>
<a
class='tombol-berbagi-gp-label'
expr:href='"https://plus.google.com/share?url=" +
data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin'
expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url="
+ data:post.url + "&amp;title=" + data:post.title +
"&amp;summary=" + data:post.snippets' rel='nofollow'
target='_blank'/>
<a
class='tombol-berbagi-lin-label'
expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url="
+ data:post.url + "&amp;title=" + data:post.title +
"&amp;summary=" + data:post.snippets' rel='nofollow'
target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>
4. Selanjutnya terapkan kode CSS dibawah ini dan letakkan
sebelum ]]></b:skin> atau </style> (Admin menggunakan
sebelum ]]></b:skin>)
/* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px
solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0
10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0
10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieeCPkJMGv2x2T6bJR_0lME5SnOmlWYRSu9nudNEqB6-TvtdkW2OSbvsYODUh516FxwalA2N6Fj6z1Wuwbca504CaAO6DQ20dQ8ZwiiiEffFydMeespp2py7U-AiHLXjk3dbX_1nQ3ZZNP/s1600/share.png')
no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open
Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0
-43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0
-86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0
-129px}
.tombol-berbagi-arlina
a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina
a:hover{color:#7cb0ed}
@media only screen and
(max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
5. Simpan template dan ketahui hasilnya seperti berikut :
 |
| contoh tombol share |
0 Komentar