Cara Memasang Tombol Share Di 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 simpulan 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, lalu cari kode <head>

Jika sudah, copy-paste script dibawah ini sempurna dibawah kode <head>

CODE:HIDE

<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 sempurna diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini sempurna dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di simpulan artikel.

CODE:HIDE

<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:active{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:active,.sharepost li .facebook:active,.sharepost li .gplus:active, .sharepost li .pinterest:active,.sharepost li .linkedin:active{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 == &quot;item&quot;'>         <div class='sharepost'>                 <ul>                 <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>                  <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>                  <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + 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='&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' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>                  <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' 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, lalu cari kode <head>

Jika sudah, copy-paste script dibawah ini sempurna dibawah kode <head>

CODE:HIDE

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian cari kode <data:post.body/>

CODE:HIDE

<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, lalu cari kode <head>

Jika sudah, copy-paste script dibawah ini sempurna dibawah kode <head>

CODE:HIDE

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian cari kode <data:post.body/>

CODE:HIDE

<style> .social-buttons-box { height: 67px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt0be7ptLb8-S1q9UpgtY92tFY88Rs9EXP8P6MwLux0LoUurgjh57puXm5fDPErCfpRBCEKhTlkpfosuVHN3KT1yqpQX3u2WfKQ9G1myt_1EMtMZmTZjPq21yfCTNDyfbFioslDRbEdojF/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 instruksi sehabis kode <data:post.body/>.

Setiap template biasanya mempunyai dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi bila misalkan tombol social share button tidak muncul, silahkan coba letakan instruksi yang saya berikan pada <data:post.body/> kedua atau ketiga.

Atau coba hingga 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, lalu cari kode <head>

Jika sudah, copy-paste script dibawah ini sempurna dibawah kode <head>

CODE:HIDE

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian cari kode <data:post.body/>

CODE:HIDE

<div id='share-button'> <p>Bagikan artikel ke: </p> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a> <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a> <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' 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="Cara Memasang Tombol Share di Blog"' 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:active{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, lalu cari kode <head>

Jika sudah, copy-paste script dibawah ini sempurna dibawah kode <head>

CODE:HIDE

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Kemudian cari kode <data:post.body/>

CODE:HIDE

<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:active .slide-share,.twitter:active .slide-share,.google:active .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 == &quot;item&quot;'> <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='&quot;http://www.facebook.com/sharer.php?u=&quot; + 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: &#39;id&#39;};    (function() {     var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;     po.src = &#39;https://apis.google.com/js/plusone.js&#39;;     var s = document.getElementsByTagName(&#39;script&#39;)[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 misalkan ikon pada tombol social share tidak work (cuma background atau lambang ikon broken), maka besar kemungkinan itu terjadi sebab Anda mempunyai instruksi yang serupa/mirip dengan code dibawah ini:

CODE:HIDE

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kode diatas ialah instruksi bootsrap CSS untuk meload ikon-ikon tertentu dari Font Awesome, jadi bila misalkan Anda mempunyai instruksi serupa (versi yang lebih lama), maka silahkan hapus instruksi 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:

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 Konten

CODE:HIDE

<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="Cara Memasang Tombol Share di Blog"> <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>

Seperti yang terlihat pada screenshoot dibawah ini:

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 Konten

CODE:HIDE

<!-- 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>

Seperti yang terlihat pada screenshoot dibawah ini:

Jika sudah, klik Simpan

Perlu diketahui bahwa script yang Anda masukan dalam tutorial diatas (cara menciptakan social share button yang muncul secara pop-up) memakai layanan third-party atau pihak ketiga, yakni AddThis.com

Sesungguhnya, Anda perlu mendaftar dan login untuk sanggup mendapat instruksi tersebut, namun untuk cara instannya, Anda sanggup memakai instruksi milik saya.

Dampak buruknya?

Tidak ada

Ini hanyalah sebuah cara yang dipakai supaya Anda sanggup memasang widget milik AddThis dengan cepat.

Namun bila Anda ingin menciptakan widget sendiri di Addthis, silahkan.

Bahkan itu lebih disarankan, sebab Addthis ialah salah satu situs yang sanggup 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 sanggup aktif sesaat sehabis Anda memasang script yang saya berikan. Diperlukan waktu 15-1 jam supaya script sanggup aktif dan menampilkan tombol share yang tampil secara pop-up

Sumber https://hilbrakurnia3.blogspot.com/

Vaperiana

Cara Memasang Tombol Share Di Blog

Menu Halaman Statis