Simple, sebenernya share button yang simple ini pengen buat tanpa melibatkan js Widget dari social masing2, saya rasa cukup ringan dan tampilannya pun lumayan Apa yg dibutuhkan : 1. Font Awesome yang akan digunakan untuk icon Load fontawesome di head blogger kamu Code: <link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/> 2. CSS button , diambil berdasar dari ini - https://github.com/necolas/css3-github-buttons Spoiler Code: .share-buttons, a.share-buttons { position: relative; overflow: visible; display: inline-block; padding: 0.5em 1em; border: 1px solid #d4d4d4; margin: 0; text-decoration: none; text-align: center; text-shadow: 1px 1px 0 #fff; font:11px/normal sans-serif; color: #333; white-space: nowrap; cursor: pointer; outline: none; background-color: #ececec; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); background-image: -moz-linear-gradient(#f4f4f4, #ececec); background-image: -ms-linear-gradient(#f4f4f4, #ececec); background-image: -o-linear-gradient(#f4f4f4, #ececec); background-image: linear-gradient(#f4f4f4, #ececec); -moz-background-clip: padding; /* for Firefox 3.6 */ background-clip: padding-box; border-radius: 0.2em; /* IE hacks */ zoom: 1; *display: inline; } .share-buttons:hover, .share-buttons:focus, .share-buttons:active, .share-buttons.active { border-color: #3072b3; border-bottom-color: #2a65a0; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #fff; background-color: #3c8dde; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); background-image: -moz-linear-gradient(#599bdc, #3072b3); background-image: -o-linear-gradient(#599bdc, #3072b3); background-image: linear-gradient(#599bdc, #3072b3); } .share-buttons:active, .share-buttons.active { border-color: #2a65a0; border-bottom-color: #3884cd; background-color: #3072b3; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); background-image: -moz-linear-gradient(#3072b3, #599bdc); background-image: -ms-linear-gradient(#3072b3, #599bdc); background-image: -o-linear-gradient(#3072b3, #599bdc); background-image: linear-gradient(#3072b3, #599bdc); } /* overrides extra padding on button elements in Firefox */ .share-buttons::-moz-focus-inner { padding: 0; border: 0; } /* Red Share Buttons ========================================================================== */ .share-buttons.red { color: #333; } .share-buttons.red:hover, .share-buttons.red:focus, .share-buttons.red:active { border-color: #b53f3a; border-bottom-color: #a0302a; color: #fff; background-color: #dc5f59; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630)); background-image: -moz-linear-gradient(#dc5f59, #b33630); background-image: -ms-linear-gradient(#dc5f59, #b33630); background-image: -o-linear-gradient(#dc5f59, #b33630); background-image: linear-gradient(#dc5f59, #b33630); } .share-buttons.red:active, .share-buttons.red.active { border-color: #a0302a; border-bottom-color: #bf4843; background-color: #b33630; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59)); background-image: -moz-linear-gradient(#b33630, #dc5f59); background-image: -ms-linear-gradient(#b33630, #dc5f59); background-image: -o-linear-gradient(#b33630, #dc5f59); background-image: linear-gradient(#b33630, #dc5f59); } /* BLT Share Buttons ========================================================================== */ .share-buttons.blt { color: #333; } .share-buttons.blt:hover, .share-buttons.blt:focus, .share-buttons.blt:active { border-color: #3a91b3; border-bottom-color: #257796; color: #fff; background-color: #00ABED; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#05a3e0), to(#0299d3)); background-image: -moz-linear-gradient(#05a3e0, #0299d3); background-image: -ms-linear-gradient(#05a3e0, #0299d3); background-image: -o-linear-gradient(#05a3e0, #0299d3); background-image: linear-gradient(#05a3e0, #0299d3); } .share-buttons.blt:active, .share-buttons.blt.active { border-color: #3a91b3; border-bottom-color: #257796; background-color: #00ABED; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00ABED), to(#05a7e6)); background-image: -moz-linear-gradient(#00ABED, #05a7e6); background-image: -ms-linear-gradient(#00ABED, #05a7e6); background-image: -o-linear-gradient(#00ABED, #05a7e6); background-image: linear-gradient(#00ABED, #05a7e6); } 3. Yang terakhir tinggal pasang code nya tepatnya didalam blog1 (biasanya) yang bernama shareButtons Code: <div style='height: 28px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/> <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a> <a class='share-buttons' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a> <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a> </div> Hasil : Spoiler Sedikit demo di blog saya yang kurang terpakai ini http://dblogskies.blogspot.com/ Saya buat ini sebenernya sambil menunggu mastah membuatkan Count Share nya . Silahkan mencoba semoga bermanfaat dan Goodluck ! Updates : Karena di blog Danlogs sudah ada cara menghitung count untuk sharing button, ada baiknya dibaca dahulu artikelnya. Nah sekarang saya mempersiapkan css untuk count nya : Spoiler Code: a.share-buttons span { background: #477FEF; border-radius: 5px 5px 5px 5px; color: #FFFFFF; display: inline-block; font-size: 12px; margin: -21px 0 0 -15px; min-width: 14px; padding: 4px 8px; position: absolute; text-align: center; text-shadow: 0px 0px 0 #fff; } Lalu Update untuk count, tempatnya masih sama seperti cara di atas , Jadi untuk menghindari hasil count yang berbenturan dengan ID post terutama di home yg ada lebih dari 1 postingan maka saya akan pasang di homepage dan static page tanpa count,berikut codenya : Code: <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div style='height: 28px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/> <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a> <a class='share-buttons' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a> <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a> </div> </b:if> </b:if> Dan untuk tampilkan count di halaman postingan tambahkan tepat dibawahnya : Spoiler Code: <b:if cond='data:blog.pageType == "item"'> <div style='height: 28px;margin-top: 15px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/> <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' id='twshared' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a> <a class='share-buttons bfb' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' id='fbshared' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a> <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a> </div> <script type='text/javascript'> var share_url = '<data:post.canonicalUrl/>'; $.getJSON('http://graph.facebook.com/'+ share_url, function(fb) { if (fb.shares != null) { $('#fbshared').append('<span>' + fb.shares + '</span>'); } else { $('#fbshared').append('<span>0</span>'); } }); $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url='+ share_url + '&callback=?', function(tw) { $('#twshared').append('<span>' + tw.count + '</span>'); }); </script> </b:if> Demo bisa disini http://dblogskies.blogspot.com/2013/08/hanya-test-media-dan-video.html Sangat disayang kan sampai saat ini saya belum menemukan Google+ menyediakan api Json untuk data count share nya Update 2 : css bentrok dengan a:link untuk warnanya, sy update cssnya Code: .share-buttons, a.share-buttons { Fahmi, Aug 26, 2013 #1 samuel Member Joined: Feb 5, 2013 Messages: 478 Likes Received: 15 Trophy Points: 18 Google+: Author simple tapi keren juga sih simple tapi keren juga sih Share Buttonnya, pengen nerapin ke blogspot saya tapi templatenya blm ada yang cocok nih samuel, Aug 26, 2013 #2 jajang Member Joined: Aug 20, 2013 Messages: 50 Likes Received: 1 Trophy Points: 8 Keren euy.boleh dicoba neh. Keren euy.boleh dicoba neh.. nuhun gan jajang, Aug 26, 2013 #3 ncang Super Level Joined: Feb 7, 2013 Messages: 4,655 Likes Received: 761 Trophy Points: 113 Google+: Author ternyata sudah jadi, judul ternyata sudah jadi, judul blognya juga di samping, kenapa gak jadi di bawah ? ncang, Aug 27, 2013 #4 Fahmi Newbie Joined: Dec 5, 2012 Messages: 1,719 Likes Received: 159 Trophy Points: 63 Google+: Author Barusan Update post karena Barusan Update post karena sudah ada count nya Fahmi, Aug 28, 2013 #5 pram Well-Known Member Joined: Sep 23, 2013 Messages: 3,099 Likes Received: 161 Trophy Points: 63 Google+: Author terlalu jos nih share terlalu jos nih share buttonya pram, Mar 2, 2014 #6 KBlogger New Member Joined: Mar 7, 2014 Messages: 68 Likes Received: 0 Trophy Points: 6 Bookmark dulu, kebetulan udah ada tombol share, hehehe KBlogger, Mar 9, 2014 #7 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Simple Share Button (Share) Amp Template Blogger Evo Simple rosyad, Feb 20, 2017, in forum: Blogger Replies: 56 Views: 11,259 Amar Alif Dec 14, 2017 [SHARED] Template Blogger Gratis Very Simple SEO gundul pringisan, Jun 23, 2015, in forum: Blogger Replies: 4 Views: 1,665 agusrusdi Jun 24, 2015 [SHARE] Template Toko Online Blogspot yang Simple dan Reponsive gundul pringisan, Jan 22, 2015, in forum: Blogger Replies: 13 Views: 6,563 AndroidApkApps Jan 30, 2017 Berhasil! Pasang Night Mode Di Tema Blog Simple Simply Simple Yuyutsu, Nov 2, 2020, in forum: Blogger Replies: 1 Views: 1,991 KangAndre Nov 2, 2020 [Free] Blogger Template Simple, SEO,Responsive Johanes Gultom, Nov 23, 2015, in forum: Blogger Replies: 8 Views: 2,920 Johanes Gultom Nov 24, 2015 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
simple tapi keren juga sih simple tapi keren juga sih Share Buttonnya, pengen nerapin ke blogspot saya tapi templatenya blm ada yang cocok nih
ternyata sudah jadi, judul ternyata sudah jadi, judul blognya juga di samping, kenapa gak jadi di bawah ?