Cara Memasang Widget HTML

Yaah sepertinya posting-posting selanjutnya akan kembali mengulang dasar-dasar blogging. Maklum ini juga untuk me.... teman blogger yang belum terbiasa alias baru belajar blogging. Sama seperti posting terdahulu Cara membuat laman statis di blogspot, karena banyaknya kata kunci yang ingin tau cara membuat halaman di blogger, nah kali ini kasusnya sama yaitu ada saja kata kunci yang masuk yaitu cara memasang aplikasi di blog. 

Aplikasi di sini mungkin yang dimaksudkan adalah widget atau gadget. Widget atau gadget tadi biasanya  dipasang di sidebar, header ataupun footer. Untuk memasang gadget kita perlu menambahkan kode tertentu seperti javascript ,css ataupun html, itu jika kita ingin menambahkan gadget dari pihak ketiga atau hasil copy dari blog lain. Beda dengan gadget bawaan blogger kita tidak perlu lagi menambahkan kode-kode, hanya tinggal klik 1 atau 2 kali saja, maka widget yang diinginkan sudah masuk ke blog kita.

Gadget default blogger itu antara lain, arsip halaman, popular post, tombol google plus one, kotak pencarian / penelusuran, gambar, slide video dan masih banyak lagi yang lainnya..... hehehe

Oke intinya disini kita akan ketahui cara menambahkan widget atau gadget tadi dengan 2 macam yaitu memasukkan gadget bawaan blogger dan memasang gadget dari blog lain/ hasil download.

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: 8px;text-align:center;"> <a href="http://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="blue">[Cara Membuat]<font></font></font></a></div> </div>

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

Nah, bagaimana sobat, mudahan tutorial bergambar cara menambah gadget ini bisa membantu sobat blogger yang belum tau maupun yang masih bingung. Silakan dicoba.