Tombol share di bawah postingan blog wajib dipasang agar
memudahkan admin dan pengunjung membagikan postingan
ke akun media sosial Facebook, Twitter, Pinterest, LinkedIn,
dan WhatsApp (WA).
Desain Social Share Button sangat banyak, termasuk tampilan
dari Blogger dan WordPress (menggunakan plugin Jetpack).
Dari sekian banyak tombol share, saya suka yang berikut ini.
Tampilannya simple tapi bagus banget. Facebook dan Twitter
dikhususkan, karena memang kedua medsos itu paling banyak
mendatangkan pengunjung.
Cara Membuat Tombol Share
di Bawah Postingan Blogger
Berikut ini cara memasangnya di template blog dengan posisi
di bawah postingan blog.
Karena ikon medsosnya menggunakan font awesome,
maka pastikan ada link ke font awesome seperti ini
di template blog Anda:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Jika belum, ada pasang di atas kode </head>
1. Klik Tema > Edit HTML
2. Copas kode CSS Tombol Berbagi Posting ke Media Sosial
berikut ini di atas kode </head>
<b:if cond='data:view.isPost'>
<style>
.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin:0;padding:0}.post-share{overflow:hidden;line-height:0;margin:0}.share-links li
a,.share-links li
a:before{float:left;text-align:center;line-height:32px}.share-links
li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0
0;list-style:none}.share-links li.facebook,.share-links
li.gplus,.share-links li.twitter{width:20%}.share-links li
a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all
.17s ease}.is-mobileli.whatsapp-desktop,.share-links
li.whatsapp-mobile{display:none}.is-mobile
li.whatsapp-mobile{display:inline-block}.share-links li
a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links
li a:hover{opacity:.8}.social
a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social
.facebook a:before{content:"\f09a"}.social .twitter
a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social
.linkedin a:before{content:"\f0e1"}.social .pinterest
a:before{content:"\f0d2"}.social .whatsapp
a:before{content:"\f232"}.social .external-linka:before{content:"\f35d"}.social-color .facebook
a{background-color:#3b5999}.social-color .twitter
a{background-color:#00acee}.social-color .gplus
a{background-color:#db4a39}.social-color .pinterest
a{background-color:#ca2127}.social-color .linkedin
a{background-color:#0077b5}.social-color .whatsapp
a{background-color:#3fbb50}.social-color .external-link
a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter
a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google
Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text
.pinterest a:after{content:"Pinterest"}.social-text .whatsapp
a:after{content:"Whatsapp"}.social-text .external-linka:after{content:"WebSite"}@media
screen and (max-width:540px){.share-links li a
span{display:none}.share-links li.facebook,.share-links
li.gplus,.share-links li.twitter{width:30px}
}
</style>
</b:if>
3. Copas HTML Tombol Berbagi Posting ke
Media Sosial berikut ini di bawah kode
<data:post.body/> yang kedua atau ketiga,
atau di atas kode <div class=’post-footer’>
<b:if cond='data:view.isPost'>
<div class='share'>
<div class='post-share'>
<ul class='share-links social social-color'>
<b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
<li class='facebook'><a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" +
data:post.url' onclick='window.open(this.href,
'windowName', 'width=550, height=650,
left=24, top=24, scrollbars, resizable'); return false;'
rel='nofollow'><span>Facebook</span></a></li>
<li class='twitter'><a class='twitter'
expr:href='"https://twitter.com/share?url=" +
data:post.url + "&text=" + data:post.title'
onclick='window.open(this.href, 'windowName',
'width=550, height=450, left=24, top=24, scrollbars,
resizable'); return false;'
rel='nofollow'><span>Twitter</span></a></li>
<li class='pinterest'><a class='pinterest'
expr:href='"https://www.pinterest.com/pin/create/button/?url="
+ data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title'onclick='window.open(this.href, 'windowName',
'width=735, height=750, left=24, top=24, scrollbars,
resizable'); return false;' rel='nofollow'/></li>
<li class='linkedin'><a class='linkedin' expr:href='"https://www.linkedin.com/shareArticle?url=" +
data:post.url' onclick='window.open(this.href,
'windowName', 'width=950, height=650,
left=24, top=24, scrollbars, resizable'); return false;'
rel='nofollow'/></li>
<li class='whatsapp whatsapp-desktop'><a class='whatsapp'
expr:href='"https://web.whatsapp.com/send?text=" +
data:post.title + " | " + data:post.url'
onclick='window.open(this.href,'windowName', 'width=900, height=550,
left=24, top=24, scrollbars, resizable'); return false;'
rel='nofollow'/></li>
<li class='whatsapp whatsapp-mobile'><a class='whatsapp'
expr:href='"https://api.whatsapp.com/send?text=" +
data:post.title + " | " + data:post.url'
rel='nofollow' target='_blank'/></li>
</ul>
</div>
<div class='clear'/>
</div>
</b:if>
4. Save!
Simpan template!
Kini Tombol Share ke Media Sosial sudah muncul
di bawah postingan blog Anda.
0 komentar:
Posting Komentar