Cara Pasang Tombol Share ke Social Bookmarking

Salah satu cara meningkatkan pengunjung blog atau website adalah dengan mendaftarkan artikel-artikel anda ke dalam Situs Social Bookmarking , Social bookmarking Network , Favourite Bookmarking dan lain sebagainya. Contohnya mendaftarkan posting anda ke digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan situs social bookmarking lainnya. Saya akui cara ini sangat efektif untuk meningkatkan pengunnjung blog anda. Selain itu situs-situs social networking (situs pertemanan) seperti facebook, twitter, friendster dan lain-lain juga dapat dijadikan sebagai media promosi yang juga dapat meningkatkan pengunjung blog anda.

Dan pada trik kali ini saya akan menjelaskan bagaimana memasang tombol sharing dan tombol submit ke social bookmarking ke dalam blog. Dengan anda memasang tombol submit/share ke situs social bookmarking seperti ini, akan memudahkan siapapun untuk share artikel/posting anda langsung ke media bookmarking bila dirasa bermanfaat bagi yang lainnya, ini akan sangat bermanfaat untuk meningkatkan reputasi dan akan meningkatkan pengunjung ke blog anda. Tombol share/submit yang akan dibuat disini saya rasa sangat lengkap mulai dari facebook, twiiter, digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan masih banyak lagi. Untuk tampilannya adalah sebagai berikut :

Jika anda tertarik dan berminat memasang tombol tersebut, berikut saya akan jabarkan caranya memasang ke blog anda, check it

1. Pertama, login dulu ke Blog anda

2. Masuk ke tab Rancangan (Design/Layout) -> Edit HTML

3. Klik pada Expand Widget Templates
4. Kemudian Carilah kode berikut ini

<data:post.body/>

atau

<p><data:post.body/></p>

(Note: Gunakan CTRL+F untuk mempermudah pencarian)
Kode ini biasanya ada 2 buah, pilihlah yang lebih bawah

5. Setelah ketemu, letakkan kode ini setelah kode <data:post.body/>

<div style='border-top:0px solid #ccc;border-bottom:3px solid #FE9A2E; padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:right;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
</div>
</div>

6. Selesai, SAVE TEMPLATE anda dan lihat hasilnya

Note: Jika anda telah memasang readmore, tombol submit ini akan terlihat jika posting tampil fullpost

Cara Menambahkan / Memasang Gadget ke Blog.

A. Cara menambah gadget default blogger

1. Sebelumnya perlu diketahui saya memakai tampilan baru dasbor blogger (banyak kelebihan tampilan baru ini) Setelah masuk ke akun blogger, masuk ke dasbor. 
2. Kemudian pilih tata letak lalu klik tambahkan gadget. Sobat bisa melihat 2 gambar di bawah ini. 

Pada gambar 1 pilih tata letak

gambar 1. pilih tata letak

Pada gambar 2 di bawah, klik tambahkan gadget, bisa di bagian sidebar kanan, kiri, footer ataupun header. terserah sobat. namun biasanya di taruh di sidebar kanan agar loading blog menjadi cepat, atau di footer.

gambar 2. KLIK TAMBAH GADGET

Setelah kita klik tambah gadget tadi akan muncul pop iklan/ jendela baru, Naah tinggal pilih deeh, geser aja scroll mouse komputer Anda untuk memilih gadget yang diinginkan.

Sebagai contoh di sini saya akan memilih wigdet kotak penelusuran, Klik tanda tambah ( + ) yang berwarna biru bagian atas, akan muncul pratinjau, Lalu Simpan. Jika tidak jadi pilih batal atau kembali. Selesai, gadget pun muncul di blog sobat blogger.

Klik tanda tambah

B. Memasang gadget dari pihak ketiga / hasil copy/ download dari blog lain

Langkah-langkahnya  tidak jauh berbeda dengan bagian A. Hanya saja kita memakai kode html / javascript khusus untuk memasang widget.

Lihat langkah A gambar 2 geser terus ke bawah cari HTML/Javascript, klik tanda tambah (+)

gambar 4 html javascript

Sebagai contoh di sini saya sediakan kode html/javascript like facebook, tweet dan  google plus. 

Silakan klik saja copy all / select all, (akan otomatis ter copy). 

Kemudian paste didalam kotak form yang tersedia. Terakhir simpan. 

Lalu lihat tombol like facebook tweet dan goole plus 1 sudah muncul di bagian kanan bawah blog.

<style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; 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><br /> <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='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: 9px;text-align:center;"> <a href="http://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="blue">[Get Widget]<font></font></font></a></div> </div>

paste kan kode dari copy all tadi di dalam form lalu simpan

Kumpulan Widget Animasi Blog

Cara Memasang Widget Animasi Di Blog

1.Copy script yang ingin anda munculkan animasinya

2.Login ke Blog

3.Pilih Rancangan

4.Tambah gedget

5.Pilih edit html atau script,

6.Pastekan script tadi

7.Lalu save.. “pasti akan langsung  muncul animasi yang anda pilih tadi” 

selamat mencoba..

1.helicopter

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif"  alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

2. Ekspresi muka

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/742/th/74214.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Ekspresi</a></center></small></div>

 

3. Kodok mata gede

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/466/th/46606.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

4 Spiderman

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/3/th/312.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

5.Pig

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

6. Muka senyum

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/197/th/19769.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

7. monyet

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

 8.Doraemon

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

9.Spongebob

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

10.Panda

 

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

11.Monyet loncat

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

12.Anime cewek

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

13.Saringgan

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

14.Naruto berubah

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

15.Gajah loncat

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget-Animasi</a></center></small></div>

16. Lumba lumba

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>

17.Kucing tidur

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>

18.Ayam betelur

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020541.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget</a></center></small></div>