Cara Menambah tombol share di kiri postingan blog

Menambah Widget. Pernah melihat widget share seperti di kiri postingan blog? Kalau kamu belum pernah melihat cobalah kamu lihat gambar di kiri.

Ya kira-kira seperti itulah penampakan yang akan keluar ketika kamu membuat tombol share yang akan aku bahas kali ini.

Banyak fungsi dari tombol share ini sendiri. Selain bisa buat mempromosikan blog kamu ke jejaring sosial, kamu juga bisa melihat seberapa tertarik pengunjung blog kamu dengan postingan yang kamu buat. Cara ini tidak sama dengan menambahkan widget ke blog kamu lho..!

Are you ready to get it to your blog?

Ada beberapa langkah untuk membuat tombol share di kiri postingan.  [DEMO]

Langsung saja ikuti langkah-langkah di bawah ini.

1. Login ke blogger.com

2. Kemudian buka menu drop down di dasboard dan pilih template.

3. Simpan dulu template blog kamu yang lama dengan klik cadangkan/pulihkan di sebelah kanan atas layar. Pilih cadangkan !

4. Setelah selesai membuat cadangan template kamu langsung saja masuk ke edit HTML template kamu.

5. Akan ada kotak peringatan dan pilih lanjutkan.

6. Centang expand widget template.

Nah sekarang kamu sudah siap untuk memasukkan tombol share di kiri postingan blog kamu. Ikuti langkah mudah di bawah :

1. Cari <b:includable id='post' var='post'> dengan klik CTRL + F

2. Masukkan HTML/Javascript di bawah ini tepat di bawah <b:includable id='post' var='post'>

<style> .mbt_social_floating{ position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px; background-color:#f7f7f7; padding: 5px 0 0px 0px; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; z-index:9999px !important; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; } .mbt_social_floating .mbt_side_social_button{ margin-bottom:5px; float:none; height:auto; width:60px; } .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ margin-left:5px; } .mbt_social_floating .st_fblike_vcount{ margin-left:5px; } .mbt_social_floating .stButton_gradient{ background:none !important; height:21px !important; padding-left:0 !important; } .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWcOhLS7eSXN8QGMr2vCsdaepvBNrW3vFaentPDU5jG0zaetvQO9K_vxKgLRWqdUHo-ARYwxJuoQnGXxeossPJy8bffazwS48bh0Uaco8xUAhDe5j6ZcohlkTSvdMzTGyc8kl5OkwZc0gV/s400/gc_social_sprite.gif') no-repeat !important; height:19px !important; width:45px !important; padding:0 !important; } .st_email .chicklets{ background-position:0 -77px !important; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWcOhLS7eSXN8QGMr2vCsdaepvBNrW3vFaentPDU5jG0zaetvQO9K_vxKgLRWqdUHo-ARYwxJuoQnGXxeossPJy8bffazwS48bh0Uaco8xUAhDe5j6ZcohlkTSvdMzTGyc8kl5OkwZc0gV/s400/gc_social_sprite.gif') !important; } .mbt_social_floating .st_twitter_vcount .st-twitter-counter{ background-position:0 -58px !important; } .mbt_social_floating .stButton_gradient{ border:none !important; } .mbt_social_floating .stBubble_count{ width:44px !important; font-size: 15px !important; font-weight: normal !important; padding-top:7px !important; height:23px !important; background:none !important; } .mbt_social_floating .st_twitter_vcount .stBubble_count{ color:#00a6df; background-color:#f8fbfc !important; } .st_fblike_vcount{ margin-bottom: 0px; display: block; } .st_twitter_vcount{ margin-bottom: 3px; display: block; } .st_email{ margin-bottom: 5px; margin-top: 3px; display: block; } .mbt_social_floating .stBubble{ background-position: 21px 31px !important; height:35px !important; } </style> <div class='mbt_social_floating'> <span id="preservee0c95228665748abbea5055428431b80" class="wlWriterPreserve"><script type='text/javascript'>var switchTo5x=true;</script></span> <span id="preserve543c6d6e07874c2dae9daad2df804066" class="wlWriterPreserve"><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'>stLight.options({onhover:false});</script></span> <span class='st_fblike_vcount' displaytext=''/> <span class='st_twitter_vcount' displaytext='' st_via='Cofee-mix'/> <div style='margin:5px 0 0px 0;'> <center> <a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a> <a href="javascript:void(run_pinmarklet())" style="margin-left:-46px; width:43px; height:20px; display:inline-block;" /> <span id="preserve85148f3307e5447a8b4d5b49e17a6144" class="wlWriterPreserve"><script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999); document.body.appendChild(e); } </script></span> </center> </div> <div style='margin:0px 0 0 5px;'> <span class='st_plusone_vcount' displaytext=''/> </div> <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'> <a class='addthis_counter'/> </div> <span id="preserve186fa5bb6bf243c4be7889a31f4cd087" class="wlWriterPreserve"><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: "Blazer Blog", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script></span> <span class='st_email' displaytext=''/> </div>

3. Jangan langsung simpan template. Lihat Pratinjau dulu.

4. Kalau sudah jadi, save template.

Gimana sobat cofee mix? mudah bukan?

Share This:

Post Tags:

blogging tips blogger Tutorial Blogspot widget

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/

• Social Links:

• Rss
• Facebook
• Twitter
• Google+
• Linkedin
• Youtube