Memasang Tombol Share di Blog

Berikut ini cara Memasang Tombol social Share di Blog.

Artikel kali menjelaskan cara memasang tombol berbagi (Share button) di Blog. Tombol  ini berguna untuk memudahkan pengunjung yang ingin berbagi artikel yang dirasa bermanfaat ke jaringan sosial media mereka seperti Facebook, Twitter, Google plus, dan Linkedin. Share button ini nantinya akan muncul di setiap postingan blog sobat.

Memasang Tombol Share di Blog - Style #1

Untuk tampilan seperti screenshot di bawah ini atau bisa dilihat langsung di bawah artikel blog ini
Berikut cara penerapannya :

1. Login ke Blogger > Template > Klik Edit HTML > Cari kode di bawah ini kemudian pilih yang ke dua dalam markup post (bukan mobile post).

<data:post.body/>

2. Kemudian salin kode di bawah ini tepat setelah kode yang disebutkan tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi'>
<div class='tombol-berbagi-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-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='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

3. Selanjutnya terapkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* CSS Share Button */
.tombol-berbagi{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-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-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('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/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 a{color:#999;transition:all .3s;}
.tombol-berbagi a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

4. Simpan template.

Memasang Tombol Share di Blog - Style #2 Menggunakan Font Awesome

Style kedua ini tidak menggunakan image seperti style kesatu di atas melainkan menggunakan fontawesome. Sebelum menerapkan widget ini silahkan periksa template yang sobat gunakan apakah sudah terdapat link fontawesome, jika belum silahkan pasang link di bawah ini sebelum tag penutup </head>.

Selanjutnya temukan tag ]]></b:skin> atau </style> jika sobat menggunakan custom template, kemudian tambahkan kode di bawah ini tepat diatasnya.

/* CSS Tooltip */
.jib-tooltip {position:relative;display:inline-block;}
.jib-tooltip:before, .jib-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.jib-tooltip:hover:before, .jib-tooltip:hover:after {opacity:1;}
.jib-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.jib-tooltip:after {content:attr(data-jib-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;}
.jib-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.jib-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%}}

Selanjutnya tambahkan kode ini.

<b:if cond='data:blog.pageType == "item"'>
<div class='share-post'>
              <ul>
                <li><a class='twitter jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Google Plus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr jib-tooltip jib-tooltip-top' data-jib-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 jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
<div style='clear:both'/>
</b:if>

Simpan template dan lihat hasilnya.

Baca juga artikel: Bikin Widget Social Slide Down keren di Sidebar.

COMMENTS

BLOGGER: 2
  1. oke mantap mas.tapi kalau tombol sharenya yang kecil seperti diblog mas gm kodenya?

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Memasang Tombol Share di Blog
Memasang Tombol Share di Blog
Berikut ini cara Memasang Tombol social Share di Blog.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFcXg37VtUwMFArRQpXsXE34fwJT5CbH-4ETrZB8VS0aWqE35w4bdtHPqzlT21oGirmu3lN-V9XO-YfIhqEjdQ1OdKuPnHXM6LiAel7qJJ8-MH23TnGfUntEl8223q11Cbz66W4nF5a4/s1600/Memasang+Widget+Share+Button+di+Postingan+%25281%2529.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFcXg37VtUwMFArRQpXsXE34fwJT5CbH-4ETrZB8VS0aWqE35w4bdtHPqzlT21oGirmu3lN-V9XO-YfIhqEjdQ1OdKuPnHXM6LiAel7qJJ8-MH23TnGfUntEl8223q11Cbz66W4nF5a4/s72-c/Memasang+Widget+Share+Button+di+Postingan+%25281%2529.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/01/memasang-tombol-share-di-blog.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/01/memasang-tombol-share-di-blog.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content