Cara membuat Widget About US keren

Cara membuat Widget About US keren | Salam Blogger, Masih mencari widget yang menarik untuk blognya? beberapa pakar SEO berpendapat dengan mempercantik tampilan blog dan membuat nyaman kepada pengunjung untuk membaca artikel dapat meningkatkan SEO loh.. Kok gitu ya? Ternyata dengan membuat nyaman pengunjung maka akan mengurangi Bounce Rate suatu website. Bounce Rate adalah algo untuk menghitung ketidaknyamanan pengunjung dengan menghitung lamanya di suatu web atau blog. Jadi semakin lama dan betah untuk membaca artikel maka semakin rendah bounce ratenya dan semakin seo lah dia. Di tambah lagi dengan komentar nya yang banyak. Jadi jangan sungkan untuk berkomentar. :D

Nah... untuk mempercantik blognya. Ane menyarankan untuk memasang ini di blog sobat. Yaitu Cara membuat Widget About US Keren. Kenapa? selain pengunjung dapat mengetahui dari tentang blog sobat. Fitur ini juga dilengkapi dengan widget Google+ . Dan google menjadi lebih senang jika widgetnya dipakai. Kalau sudah senang pastinya akan merekomendasikan blog sobat di pencariannya. Mau? Cek dulu print view widget yang mau dipasang. Demonya dapat dilihat langsung di blog ini.


Contoh : About US Keren 

Gimana? tertarik untuk memasangnya? Caranya gampang... Yukk simak langkah-langkahnya : 

1. Seperti biasa, Sobat harus login dulu diakun blogger nya dan pilih blog yang mau dipasang widget ini.
2.  Masuk pada menu TATA LETAK ==> Pilih ADD WIDGET ==> HTML/JAVASCRIPT.
3.  Copy coding berikut :

<style>.box-author-db {width:auto; height:250px;padding:5px}#thumbnail-author {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;}.Aboute-author {width:auto; font-family:arial,sans-serif; font-size:11px; color:#fff;}.fbook, .gplus, .twit {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}.fbook {background: #3B5998;margin-left:73px}.fbook:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}.gplus {background: #D34836;font-size:11px;margin-left:85px}.gplus:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}.twit {background: #4099FF;margin-left:75px} .twit:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}</style>


<div class='box-author-db'><img alt='Kisah Motivasi | Tutorial Blogger' src='http://3.bp.blogspot.com/-ydTKiTRxz1c/UJ71exUJYxI/AAAAAAAADtM/evaedWyNo1Q/s320/29.jpg' title="Segenggam-harapan.com" id='thumbnail-author' /> <a class='fbook' href='https://www.facebook.com/Segenggam-Harapan/' rel='nofollow' target="_blank">f</a><a class='gplus' href='https://plus.google.com/100176740932283447295' rel='nofollow' target="_blank">G</a><a class='twit' href='http://twitter.com/Genggam_harapan' rel='nofollow' target="_blank">t</a>  <div class='Aboute-author'> <a href="https://plus.google.com/100176740932283447295" title="segenggam-harapan.com" rel='nofollow' target="_blank">Segenggam-harapan.com</a> adalah sebuah situs pendidikan yang membahas mengenai cerita motivasi dan tutorial blogger. Semoga dengan adanya ini memberikan manfaat kepada pembaca sekalian. Follow dan dukung kami di jejaring sosial. <a style="color:#888;" href="http://www.segenggam-harapan.com/2012/03/segenggam-harapan.html" target="_blank"> Read More &#187;</a><br/><div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/100176740932283447295'></div></div></div>
  
Ket : Jangan lupa untuk mengubah kode berikut dengan punya sobat :

Kode warna merah diganti dengan keterangan blog sobat, seperti keyword blog, URL Gambar logo blog, dan Nama blog.  

Kode berwarna biru itu untuk akun jejaring sosial sobat. Ganti dengan alamat Facebook, Google+, dan Twitter sobat.

Kode yang berwana kuning di ganti dengan ID Google+ Sobat. Cara mendapatkan ID Google+, tinggal masuk ke google+ cari deh deretan angka yang ada di adrees bar. :D Kalau ada yang bingung bisa ditanyakan langsung kok.

Kode yang berwarna Ungu dapat diganti dengan penjelasan mengenai Blog sobat. Terserah mau buat apa. :D

Sedangkan Kode yang berwarna Hijau itu untuk URL keterangan selengkapnya mengenai blog sobat.

Selain yang ditandai itu. Sobat juga bisa mengganti CSS pada kode diatasnya. Sesuaikan dengan kemauan dan template blognya ya...

4. Setelah diubah keterangannya, Barulah menekan tombol SAVE
5. Cek deh hasilnya. Gampang kan. :D

Selesai, Terima Kasih

Happy Blogging All... :D



Share this

Related Posts

Previous
Next Post »

2 comments

Write comments
19 Oktober 2013 15.40 delete

mantap banget gan, aku pake ne widgetnya..

Reply
avatar
21 Oktober 2013 19.49 delete

Silahkan di pake gan, semoga membantu... :D

Reply
avatar

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon