Social media adalah salah satu cara untuk mempromosikan blog agar terkenal dan mendapatkan banyak pengunjung.
cara membuat tombol share addthis tutorial menggunakan addthis untuk membuat tombol share dibawah postingan blog membuat tombol share facebook di website cara membuat widget share di blog membuat tombol share keren di blog membuat tombol share di setiap postingan membuat tombol share facebook dengan php cara membuat tombol share melayang di blog tombol share responsive cara membuat tombol share melayang cara membuat tombol share melayang di samping atas bawah blog cara membuat memasang tombol share di bawah atas samping sidebar di samping kiri kanan tutorial cara memasang tombol share di blog wordpress blogger cara memasang tombol share sumome social share keren responsive ringan gratis mudah tutorial pemasangan ikon tombol social share tidak mau terload rusak tidak muncul kendala masalah cara memasang tombol social share diakhir postingan blog januari februari maret april mei juni juli agustus september november desember 2015 2016 2017 2018 2019
Jika Anda cukup pintar untuk memanfaatkan social media, seperti Facebook, Twitter, ataupun Google+, bukan hal yang tidak mungkin jika misalkan Anda akan mendapatkan traffic yang cukup untuk membuat statistik laporan pengunjung Anda menjadi runcing dikarenakan lonjakan pengunjung yang tinggi.
Untuk dapat mengoptimalkan penggunaan social media, Anda juga dapat memfasilitasi pengunjung blog Anda dengan suatu fitur yang dapat mempermudah mereka untuk membagikan artikel ke social media tanpa harus membuka situs social media terlebih dahulu, baru kemudian membagikan tautan blog Anda secara manual.
Itu tentunya rasanya sedikit merepotkan, terutama bagi pengunjung.
Dengan begitu, mereka mungkin akan malas membagikan artikel Anda ke sosmed.
Karena alasan inilah, saya akan sangat disarankan untuk menambahkan tombol social share di blog Anda.
Dengan melakukan pemasangan tombol social share, pengunjung akan dapat membagikan artikel yang dimuat di situs Anda ke social media hanya dengan mengklik 'suatu tombol', yang memang dikhususkan untuk menjalankan fungsi tersebut.
Dan seperti yang saya tuliskan pada judul artikel ini "Cara MEMBUAT Tombol Social Share di BLOG: Lengkap", saya akan membagikan lebih dari satu style tombol social share, jadi silahkan pilih tampilan tombol social share yang Anda suka.
Untuk selengkapnya, silahkan ikuti langkah-langkah dibawah ini untuk memasang tombol social share di blog:
Cara Memasang Tombol Share Melayang di Samping Blog Cara Memasang Tombol Share Keren Melayang di Sisi Kiri Blog Cara membuat tombol share melayang di blog Cara Memasang Tombol Share Melayang di Blog Memasang tombol social share melayang disamping blog Cara Membuat Tombol Share Melayang Dengan SumoMe Cara membuat widget sosial share melayang di sebelah kiri blog
Posisi tombol: dibawah judul atau diakhir postingan
Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya berada dibawah judul artikel atau di akhir postingan, silahkan pilih salah satu style dibawah ini:
Cara pemasangan:
Cara pemasangan:
Jika tombol social share tidak muncul, besar kemungkinan penyebabnya terletak pada penempatan kode setelah kode <data:post.body/>.
Setiap template biasanya memiliki dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi jika misalkan tombol social share button tidak muncul, silahkan coba letakan kode yang saya berikan pada <data:post.body/> kedua atau ketiga.
Atau coba sampai posisi tombol share muncul dengan benar.
Cara pemasangan:
Cara pemasangan:
Jika tombol social share tidak muncul, besar kemungkinan penyebabnya terletak pada penempatan kode setelah kode <data:post.body/>.
Setiap template biasanya memiliki dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi jika misalkan tombol social share button tidak muncul, silahkan coba letakan kode yang saya berikan pada <data:post.body/> kedua atau ketiga.
Atau coba sampai posisi tombol share muncul dengan benar.
Jika misalkan ikon pada tombol social share tidak work (cuma background atau lambang ikon broken), maka besar kemungkinan itu terjadi karena Anda memiliki kode yang serupa/mirip dengan code dibawah ini:
Kode diatas adalah kode bootsrap CSS untuk meload ikon-ikon tertentu dari Font Awesome, jadi jika misalkan Anda memiliki kode serupa (versi yang lebih lama), maka silahkan hapus kode tersebut, dan gantikan dengan code yang saya berikan.
Posisi tombol: melayang
Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya secara float atau fixed (mengikuti layar walaupun discroll kebawah maupun keatas), silahkan pilih salah satu style dibawah ini:
Cara pemasangan:
Posisi tombol: layar pop-up
Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya muncul secara pop-up, silahkan pilih salah satu style dibawah ini:
Cara pemasangan:
Perlu diketahui bahwa script yang Anda masukan dalam tutorial diatas (cara membuat social share button yang muncul secara pop-up) menggunakan layanan third-party atau pihak ketiga, yakni AddThis.com
Sesungguhnya, Anda perlu mendaftar dan login untuk dapat mendapatkan kode tersebut, namun untuk cara instannya, Anda dapat menggunakan kode milik saya.
Dampak buruknya?
Tidak ada
Ini hanyalah sebuah cara yang digunakan agar Anda dapat memasang widget milik AddThis dengan cepat.
Namun jika Anda ingin membuat widget sendiri di Addthis, silahkan.
Bahkan itu lebih disarankan, karena Addthis adalah salah satu situs yang dapat membantu seorang webmaster mengelola pengelolaan navigasi situs, seperti social share button, related post, list building, follow button dan masih banyak lainnya.
Perlu diketahui pula bahwa script AddThis terkadang tidak dapat aktif sesaat setelah Anda memasang script yang saya berikan. Diperlukan waktu 15-1 jam agar script dapat aktif dan menampilkan tombol share yang tampil secara pop-up
Penutup
Kurang lebih, itulah sejumlah hal yang dapat saya sampaikan terkait bagaimana cara memasang tombol social share di blog.
Jika Anda merasa bingung, atau ragu dengan tutorial yang saya tuliskan diatas, jika Anda berkenan, silahkan tinggalkan sebuah feedback di kolom komentar, dan jika memungkinkan, saya akan menjawab feedback yang Anda kirimkan secepat yang saya bisa.
cara membuat tombol share addthis tutorial menggunakan addthis untuk membuat tombol share dibawah postingan blog membuat tombol share facebook di website cara membuat widget share di blog membuat tombol share keren di blog membuat tombol share di setiap postingan membuat tombol share facebook dengan php cara membuat tombol share melayang di blog tombol share responsive cara membuat tombol share melayang cara membuat tombol share melayang di samping atas bawah blog cara membuat memasang tombol share di bawah atas samping sidebar di samping kiri kanan tutorial cara memasang tombol share di blog wordpress blogger cara memasang tombol share sumome social share keren responsive ringan gratis mudah tutorial pemasangan ikon tombol social share tidak mau terload rusak tidak muncul kendala masalah cara memasang tombol social share diakhir postingan blog januari februari maret april mei juni juli agustus september november desember 2015 2016 2017 2018 2019
Jika Anda cukup pintar untuk memanfaatkan social media, seperti Facebook, Twitter, ataupun Google+, bukan hal yang tidak mungkin jika misalkan Anda akan mendapatkan traffic yang cukup untuk membuat statistik laporan pengunjung Anda menjadi runcing dikarenakan lonjakan pengunjung yang tinggi.
Untuk dapat mengoptimalkan penggunaan social media, Anda juga dapat memfasilitasi pengunjung blog Anda dengan suatu fitur yang dapat mempermudah mereka untuk membagikan artikel ke social media tanpa harus membuka situs social media terlebih dahulu, baru kemudian membagikan tautan blog Anda secara manual.
Itu tentunya rasanya sedikit merepotkan, terutama bagi pengunjung.
Dengan begitu, mereka mungkin akan malas membagikan artikel Anda ke sosmed.
Karena alasan inilah, saya akan sangat disarankan untuk menambahkan tombol social share di blog Anda.
Dengan melakukan pemasangan tombol social share, pengunjung akan dapat membagikan artikel yang dimuat di situs Anda ke social media hanya dengan mengklik 'suatu tombol', yang memang dikhususkan untuk menjalankan fungsi tersebut.
Dan seperti yang saya tuliskan pada judul artikel ini "Cara MEMBUAT Tombol Social Share di BLOG: Lengkap", saya akan membagikan lebih dari satu style tombol social share, jadi silahkan pilih tampilan tombol social share yang Anda suka.
Untuk selengkapnya, silahkan ikuti langkah-langkah dibawah ini untuk memasang tombol social share di blog:
Cara Memasang Tombol Share Melayang di Samping Blog Cara Memasang Tombol Share Keren Melayang di Sisi Kiri Blog Cara membuat tombol share melayang di blog Cara Memasang Tombol Share Melayang di Blog Memasang tombol social share melayang disamping blog Cara Membuat Tombol Share Melayang Dengan SumoMe Cara membuat widget sosial share melayang di sebelah kiri blog
Posisi tombol: dibawah judul atau diakhir postingan
Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya berada dibawah judul artikel atau di akhir postingan, silahkan pilih salah satu style dibawah ini:
Style 1:
Cara pemasangan:
- Pertama, silahkan pergi ke dashboard blog Blogger Anda
- Setelah itu, masuk ke menu Template--> Edit HTML
- Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
- Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>Code:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
- Kemudian cari kode <data:post.body/>
- Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.Code:
<style> .sharepost li{width:19%;padding:0;list-style:none;} .sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;} .sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;} .sharepost li a:hover{opacity:1;color:#444;border:double #fff;} .sharepost li .twitter{background-color:#55acee;} .sharepost li .facebook{background-color:#3b5998;} .sharepost li .gplus{background-color:#dd4b39;} .sharepost li .pinterest{background-color:#cc2127;} .sharepost li .linkedin{background-color:#0976b4;} .sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover, .sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;} .sharepost li{float:left;margin-right:1.2%} .sharepost li:last-child{margin-right:0} .sharepost li .fa:before{margin-right:5px} </style> <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <b:if cond='data:blog.pageType == "item"'> <div class='sharepost'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='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'/>Share</a></li> </ul> </div> </b:if>
- Kemudian klik tombol Simpan template
- Tada! Kini tombol social share flat design dengan counter sudah terpasang di blog Anda
Style 2:
Cara pemasangan:
- Pertama, silahkan pergi ke dashboard blog Blogger Anda
- Setelah itu, masuk ke menu Template--> Edit HTML
- Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
- Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>Code:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
- Kemudian cari kode <data:post.body/>
- Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.Code:
<div class="don-share" data-bubbles="top" data-limit="3"> <div class="don-share-total"></div> <div class="don-share-facebook"></div> <div class="don-share-twitter"></div> <div class="don-share-google"></div> <div class="don-share-pinterest"></div> <div class="don-share-linkedin"></div> <div class="don-share-tumblr"></div> <div class="don-share-stumbleupon"></div> <div class="don-share-reddit"></div> <div class="don-share-hackernews"></div> <div class="don-share-buffer"></div> <div class="don-share-xing"></div> <div class="don-share-pocket"></div> <div class="don-share-fancy"></div> <div class="don-share-yummly"></div> <div class="don-share-scoopit"></div> <div class="don-share-weibo"></div> <div class="don-share-vk"></div> <div class="don-share-mailru"></div> <div class="don-share-odnoklassniki"></div> <div class="don-share-hatena"></div> </div> <script type="text/javascript"> (function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//share.donreach.com/buttons.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })(); </script> <style> .don-share .don-share-total { line-height: 18px; margin-right: 30px; display: none !important; position: static; } .don-share .don-share-expand { color: #333; display: none !important; background-color: #fff; border-color: #ccc; } </style>
- Kemudian klik tombol Simpan template
- Tada! Kini tombol social share flat design sudah terpasang di blog Anda
Style 3:
Cara pemasangan:- Pertama, silahkan pergi ke dashboard blog Blogger Anda
- Setelah itu, masuk ke menu Template--> Edit HTML
- Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
- Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>Code:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
- Kemudian cari kode <data:post.body/>
- Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.Code:
<style> .social-buttons-box { height: 67px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNMi7oJ6cL3aFoZtHCQNraS0Gy7YPpkY6cdRVPG317g95AXXLCVggYtA4hSWSc3w5vvfExcWKm26KsYp7bSvxJkfD0Hrcl2-T4ikOjBal3L5_dECYg3ergThrfKo2pz45Hh7ouzhOFLV1/s1600/rect3799.png) no-repeat 200px 0px; margin:20px 0 15px; overflow:hidden; } .social-buttons { margin:0 0; height:67px; float:left; } .social-buttons .share { float:left; margin-right:10px; display:inline-block; } .share-btn { margin:15px 0 25px; height:20px; overflow:hidden; } </style> <div class='social-buttons-box'> <div class='social-buttons'> <div class='share gplus'> <div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/> </div> <div class='share like'> <div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/> </div> <div class='share tweet'> <a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div> </div> </div> <!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>--> <div style='clear: both;'/> <script> window.___gcfg = {lang: 'id'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script><div id='fb-root'/> <script type='text/javascript'> //<![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script>
- Kemudian klik tombol Simpan template
- Tada! Kini tombol social share flat design sudah terpasang di blog Anda
Jika tombol social share tidak muncul, besar kemungkinan penyebabnya terletak pada penempatan kode setelah kode <data:post.body/>.
Setiap template biasanya memiliki dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi jika misalkan tombol social share button tidak muncul, silahkan coba letakan kode yang saya berikan pada <data:post.body/> kedua atau ketiga.
Atau coba sampai posisi tombol share muncul dengan benar.
Style 4:
Cara pemasangan:
- Pertama, silahkan pergi ke dashboard blog Blogger Anda
- Setelah itu, masuk ke menu Template--> Edit HTML
- Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
- Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>Code:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
- Kemudian cari kode <data:post.body/>
- Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.Code:
<div id='share-button'> <p>Bagikan artikel ke: </p> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a> <a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a> <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' rel='nofollow' style='background:#4099ff;'>Twitter</a> <script> //<![CDATA[ var uri = window.location.href; var ttle = document.title; document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>"); //]]> </script> <div class='clear'/> </div> <style> #share-button{margin:10px 0;padding:5px;border: 1px solid #eee;overflow:hidden}#share-button p{float:left;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:1px 1px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px; left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)} </style>
- Kemudian klik tombol Simpan template
- Tada! Kini tombol social share flat design sudah terpasang di blog Anda
Style 5:
Cara pemasangan:
- Pertama, silahkan pergi ke dashboard blog Blogger Anda
- Setelah itu, masuk ke menu Template--> Edit HTML
- Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
- Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>Code:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
- Kemudian cari kode <data:post.body/>
- Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.Code:
<style> #button-count-share { width:100%; overflow:hidden; background:transparent; margin:0 auto; padding:3px; } #button-count-share span { float:left; position:relative; font-size:13px; color:#fff; margin:12px 5px 12px 5px; } .button-share { background:#dce0e0; position:relative; display:block; float:left; height:40px; overflow:hidden; width:140px; margin:4px; border-radius:3px; } .ikons { display:block; float:left; position:relative; z-index:3; height:100%; vertical-align:top; width:38px; text-align:center; } .ikons i { color:#fff; line-height:33px; } .slide-share { z-index:2; display:block; height:100%; left:38px; position:absolute; width:108px; margin:0; } .slide-share p { font-family:Verdana; font-weight:400; border-left:1px solid rgba(255,255,255,0.35); color:#fff; font-size:14px; left:0; position:absolute; text-align:center; top:10px; width:100%; margin:0; } .button-share .slide-share { transition:all 0.4s ease-in-out; } .facebook .fb_iframe_widget { display:block; position:absolute; right:5px; top:0; z-index:1; } .twitter iframe { left:50px; top:10px; z-index:1; display:block; position:absolute; } .google #___plusone_0 { width:90px !important; top:10px; right:5px; position:absolute; display:block; z-index:1; } .facebook .ikons,.facebook .slide-share { background:#4f79bc; } .twitter .ikons,.twitter .slide-share { background:#63cef2; } .google .ikons,.google .slide-share { background:#f36261; } .facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share { left:180px; opacity:0.6; } </style> <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> <b:if cond='data:blog.pageType == "item"'> <div class='clear'/> <div id='button-count-share'> <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i> <div class='slide-share'> <p>Share</p> </div> <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/> </div> <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i> <div class='slide-share'> <p>Like</p> </div> <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/> </div> <div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i> <div class='slide-share'> <p>G+</p> </div> <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/> <script type='text/javascript'> window.___gcfg = {lang: 'id'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i> <div class='slide-share'> <p>Tweet</p> </div> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a> <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> </div> <div class='clear'/> </b:if>
- Kemudian klik tombol Simpan template
- Tada! Kini tombol social share flat design sudah terpasang di blog Anda
Jika tombol social share tidak muncul, besar kemungkinan penyebabnya terletak pada penempatan kode setelah kode <data:post.body/>.
Setiap template biasanya memiliki dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi jika misalkan tombol social share button tidak muncul, silahkan coba letakan kode yang saya berikan pada <data:post.body/> kedua atau ketiga.
Atau coba sampai posisi tombol share muncul dengan benar.
Jika misalkan ikon pada tombol social share tidak work (cuma background atau lambang ikon broken), maka besar kemungkinan itu terjadi karena Anda memiliki kode yang serupa/mirip dengan code dibawah ini:
Code:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Posisi tombol: melayang
Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya secara float atau fixed (mengikuti layar walaupun discroll kebawah maupun keatas), silahkan pilih salah satu style dibawah ini:
Style 1:
Cara pemasangan:
- Pertama, silahkan pergi ke dashboard blog Blogger Anda
- Jika sudah, masuk ke menu Tata Letak --> Tambahkan Widget
- Pilih HTML/JavaScript
- Kemudian, masukan script dibawah ini ke kolom KontenCode:
<style> #seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px 0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;} #seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} @media screen and (max-width:480px){#seocipssharebtn{display:none;}} @-webkit-keyframes bawah{ from{transform:translate(0px, 2000px)} to{transform:translate(0px,0px)} } @keyframes bawah{ from{transform:translate(0px, 2000px)} to{transform:translate(0px,0px)} } </style> <div id='seocipssharebtn' title="Share This With Your Friends"> <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div>
- Jika sudah, klik Simpan
Posisi tombol: layar pop-up
Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya muncul secara pop-up, silahkan pilih salah satu style dibawah ini:
Style 1:
Cara pemasangan:
- Pertama, silahkan pergi ke dashboard blog Anda di Blogger
- Jika sudah, silahkan masuk ke menu Tata Letak--> Tambahkan gadget
- Pilih HTML/JavScript
- Masukan script dibawah ini kedalam kolom KontenCode:
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58748ec649faba2e"></script>
- Jika sudah, klik Simpan
Perlu diketahui bahwa script yang Anda masukan dalam tutorial diatas (cara membuat social share button yang muncul secara pop-up) menggunakan layanan third-party atau pihak ketiga, yakni AddThis.com
Sesungguhnya, Anda perlu mendaftar dan login untuk dapat mendapatkan kode tersebut, namun untuk cara instannya, Anda dapat menggunakan kode milik saya.
Dampak buruknya?
Tidak ada
Ini hanyalah sebuah cara yang digunakan agar Anda dapat memasang widget milik AddThis dengan cepat.
Namun jika Anda ingin membuat widget sendiri di Addthis, silahkan.
Bahkan itu lebih disarankan, karena Addthis adalah salah satu situs yang dapat membantu seorang webmaster mengelola pengelolaan navigasi situs, seperti social share button, related post, list building, follow button dan masih banyak lainnya.
Perlu diketahui pula bahwa script AddThis terkadang tidak dapat aktif sesaat setelah Anda memasang script yang saya berikan. Diperlukan waktu 15-1 jam agar script dapat aktif dan menampilkan tombol share yang tampil secara pop-up
Penutup
Kurang lebih, itulah sejumlah hal yang dapat saya sampaikan terkait bagaimana cara memasang tombol social share di blog.
Jika Anda merasa bingung, atau ragu dengan tutorial yang saya tuliskan diatas, jika Anda berkenan, silahkan tinggalkan sebuah feedback di kolom komentar, dan jika memungkinkan, saya akan menjawab feedback yang Anda kirimkan secepat yang saya bisa.
0 comments :
Post a Comment