Cara Membuat Tombol Share di Bawah Posting

Cara Membuat Tombol Share di Bawah Posting - Pasti anda sudah sering melihat tombol share atau like yang ada di bawah posting blog, tombol share atau like ini berfungsi agar visitor atau pengunjung blog kita dapat dengan mudah membagikan artikel yang sudah kita posting ke beberapa media sosial seperti facebook, twitter, google+, dll.

Untuk memasang tombol share di bawah posting ini cukup mudah, kita hanya menambahkan sedikit kode di template blog.

Berikut langkah-langkah pemasanganya di blog :

1. Masuk ke akun blogger

2. Pilih tab Template lalu klik Edit HTML

3. Cari kode ]]></b:skin>

4. Copy kode dibawah ini diatas kode ]]></b:skin>

.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}.fcbok { background: #3B5999; }.twitt { background: #01BBF6; }.gplus { background: #D54135; }.digg { background: #5b88af; }.lkdin { background: #005a87; }.ltsme { background: #fb8938;
}

5. Selanjutnya copy kode berikut, dan taruh di bawah kode <div class='post-footer'> atau bisa juga di bawah kode <data:post.body/>.

Note : Perlu diperhatikan biasanya di dalam template blog terdapat lebih dari satu kode <div class='post-footer'> dan <data:post.body/> maka dari itu untuk pemasangannya tombol share ini silahkan sesuaikan dengan template yang anda gunakan.

<div class='widgetshare'>Share artikel ke: <a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> <a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> <a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a><a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</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' class='ltsme'>Lintasme</a>");//]]></script></div>

5. Pilih media jejaring sosial yang ingin ditampilkan.
Note : Hapus script kode berdasarkan warna apabila ingin menghapus tombol share salah satu media jejaring sosial.
Contohnya anda ingin menghapus tombol facebook maka anda tinggal menghapus kode script berwarna biru  saja.

6. Langkah terakhir simpan template anda lalu lihat hasilnya.

Demikian tutorial kali ini tentang Cara Membuat Tombol Share di Bawah Posting. Semoga artikel ini dapat bermanfaat.

[Continue Reading]

Cara Membuat Tombol Share Melayang di Blog

Untuk meningkatkan traffic blog kita, selain upaya optimasi SEO kita juga perlu membuat tombol share di blog kita yang akan menghubungkan blog dengan media jejaaring sosial seperti facebook, twitter ataupun google+. Tutorial kali ini saya akan membahas cara membuat tombol share melayang di sisi kiri atau kanan blog anda.

Berikut langkah-langkah pemasangannya di blog :

1. Masuk ke akun > Pilih Tata Letak
2. Klik Tambah Gadget di bagian sidebar
3. Pilih HTML/Javascript kemudian copy paste kode di bawah ini

<!--Widget Share like FB tweet google plus digg Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solidblack; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .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;}

</style><div id='pageshare' title="bagikan ke teman anda"><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='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></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>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 8px;text-align:center;"><a href=" http://inticoretan.blogspot.com/2013/11/cara-membuat-tombol-share-melayang-di-blog.html"  target="blank"><font color="blue">Get Widget Here<font></font></font></a></div></div>

<!--Widget Share like FB tweet google plus digg  Button Melayang End-->

4. Simpan  widget dan lihat blog anda

Note : Tulisan berwarna merah adalah posisi widget, saya memakai widget ini disebelah kiri jadi saya tulis left, kalau anda ingin mengubahnya di sebelah kanan tinggal ganti tulisan berwarna merah dengan right.

Selesai...mudah kan ??
oh iya jika anda sudah memiliki tombol google+ ( G+ ) baik di atas maupun dibawah postin, kemungkinan tombol google+ di widget yang kita buat tadi tidak akan muncul.

Demikianlah tutorial cara menampilkan tombol share melayang di blog. Semoga bermanfaat

[Continue Reading]

Membuat Breadcrumb Pada Blog

Breadcrumb adalah menu navigasi yang dibuat untuk menunjukkan lokasi dari halaman web yang anda kunjungi sekarang. Breadcrumb biasanya berada di posisi atas halaman web atau blog anda agar lebih SEO friendly.

Contoh breadcrumb pada blog :

Berikut adalah cara membuat breadcrumb pada blogger :

  1. Login pada blogger anda -> template -> edit html
  2. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah)
  3. Paste kode berikut di atas kode ]]></b:skin>

.breadcrumbs{

padding-left:10px;font-size:95%;

line-height:1.4em;

border-bottom:4px double #cadaef;

}

  4. Setelah itu cari kode <b:includable id='post' var='post'> dan pastekan kode di bawah ini

 <b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187;

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>

</b:loop>

</b:if> &#187; <data:post.title/>

</div>

</b:if>

</b:if>

  5. Simpan template, selesai deh..

Semoga bermanfaat..:)

[Continue Reading]