
Cara Menambahkan widget
Blogger telah menyediakan banyak widget menarik yang bisa ditambahkan ke dalam blog. Ini adalah salah satu kelebihan blogspot dibandingkan dengan blog lain seperti wordpress. Sayangnya, terlalu banyak widget bisa membuat loading blog menjadi semakin lama. Karena itu, jangan terlalu banyak menambahkan widget di dalam blog. Jika memang harus menambahkan banyak widget, pastikan widgetnya tidak menggunakan Java Script. Apabila widgetnya menggunakan Java Script, pastikan Java Scripnya tidak lebih dari 1 ( untuk 1 widget ).
Untuk menambahkan widget baru di blog, kita bisa memilih widget yang di sediakan oleh blogspot. Selain itu, kita juga bisa menambahkan widget lain yang tidak disediakan oleh blogspot dengan cara memasukkan kode widget ke kotak HTML/JavaScript yang telah disedikan blogger dot com. Berikut penjelasan tentang kedua cara tersebut :
CARA MENAMBAH GADGET DEFAULT BLOGGER
Sebelumnya perlu diketahui saya memakai tampilan baru dasbor blogger (banyak kelebihan tampilan baru ini) Setelah masuk ke akun blogger, masuk ke dasbor.
Kemudian pilih tata letak lalu klik tambahkan gadget. Sobat bisa melihat 2 gambar di bawah ini.
Pada gambar 1 pilih tata letak
Gambar 1 |
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 |
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.
Gambar 3 |
MEMASANG GADGET DARI PIHAK KETIGA
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 |
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><span style="font-style: italic;"><span style="font-style: italic;"><br /></span></span>
<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><span style="font-style: italic;"><span style="font-style: italic;"><fb:like font="" layout="box_count" show_faces="false"></fb:like></span></span></div>
<div class="sbutton" id="rt">
<span style="font-style: italic;"><span style="font-style: italic;"><a class="twitter-share-button" data-count="vertical" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></span></span></div>
<div class="sbutton" id="gplusone">
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script><span style="font-style: italic;"><span style="font-style: italic;"><g:plusone size="tall"></g:plusone></span></span></div>
<div class="sbutton" id="fb">
<span style="font-style: italic;"><span style="font-style: italic;"><a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></span></span></div>
<span style="font-style: italic;"><span style="font-style: italic;"><br /></span></span>
<div style="clear: both; font-size: 8px; text-align: center;">
<span style="font-style: italic;"><span style="font-style: italic;"><a href="http://www.super-gaptek.com/" target="blank"><span style="color: blue;">[Cara Membuat Blog]</span></a></span></span></div>
</div>
<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><span style="font-style: italic;"><span style="font-style: italic;"><fb:like font="" layout="box_count" show_faces="false"></fb:like></span></span></div>
<div class="sbutton" id="rt">
<span style="font-style: italic;"><span style="font-style: italic;"><a class="twitter-share-button" data-count="vertical" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></span></span></div>
<div class="sbutton" id="gplusone">
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script><span style="font-style: italic;"><span style="font-style: italic;"><g:plusone size="tall"></g:plusone></span></span></div>
<div class="sbutton" id="fb">
<span style="font-style: italic;"><span style="font-style: italic;"><a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></span></span></div>
<span style="font-style: italic;"><span style="font-style: italic;"><br /></span></span>
<div style="clear: both; font-size: 8px; text-align: center;">
<span style="font-style: italic;"><span style="font-style: italic;"><a href="http://www.super-gaptek.com/" target="blank"><span style="color: blue;">[Cara Membuat Blog]</span></a></span></span></div>
</div>
Gambar 5 |
Sekian dulu artikel tentang Cara Menambahkan Widget Baru di Blog, semoga bisa membantu sobat blogger yang belum tau maupun yang masih bingung. Selamat mencoba.
Dari berbagai sumber
0 komentar:
Posting Komentar