Memanfaatkan Widget Stats Blogger u Meningkatkan Jumlah Pengunjung

Silahkan lihat demo widget blog's stats di di sidebar kanan. Widget blog's stats blogger tersebut tampilannya berbeda dengan yang selama ini banyak digunakan blogger karena telah mengalami beberapa modifikasi agar terlihat "lebih luwes" dan membuat blog terlihat lebih manis.

Melanjutkan apa yang sudah anda ikuti di gubhugreyot, silahkan lakukan beberapa perubahan pada template agar jumlah pengunjung yang terdata di blog's stats blogger segera meningkat secara drastis dan fenomenal (kaya' thukul: fenomenal!).

Langkah meningkatkan jumlah pengunjung blog:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup templateterlebih dahulu
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC.
   • Berikan nama khusus agar mudah diingat.
6. Klik Expand Widget Template.
7. Cari kode <b:widget id='Stats1'. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
8. Di bawah kode tersebut terdapat sebuah kode seperti berikut:
   
   

   Kode blog's stats yg hrs diganti:

   <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>

9. Ganti dengan kode berikut.
   

   Kode pengganti :

   <span class='counter-wrapper text-counter-wrapper' style='margin-right:-2px;'>,198,527,</span>
          <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
   

10. KlikSimpan Template (Save Template).

Catatan/Keterangan:

1. Semoga anda sudah tahu dan menyadari tipuan yang sudah menimpa anda!
2. Segera buat tipuan ini untuk gantian menipu pengunjung.
3. Tambahkan angka di depan koma yang pertama dan yang terakhir untuk membuat angka stats terlihat "orisinil".

ttd


gubhugreyot

Merubah Tampilan Widget Blog's Stats Blogger

Satu yang terpikirkan ketika ada keinginan untuk menggunakan widget Blog's Stats Blogger adalah "tampilannya yang sangat tidak menarik". Kalau boleh dikatakan secara jujur, bentuk dan tampilannya sangat ndeso tak ubahnya si gubhugreyot" yang "ndeso kluthuk". Berangkat dari dari inilah maka terpikir untuk sedikit mengubah si "widget blog's stats" ini agar terlihat lebih "pantas dipajang di halaman blog". Yah..., biar blog juga nggak terlihat semakin amburadul, gitu, lhoh!

Merubah gaya dan penampilan widget blog's stats blogger dapat dilakukan melalui penggunaan kode css atau xHTML atau sekaligus keduanya. Beberapa perubahan yang dapat dilakukan diantaranya pada jenis font (font-family), ukuran font (font-size), warna font (color), background serta dimungkinkan juga menambah beberapa properti css baru agar tercipta perubahan yang lebih drastis dari aslinya. Dalam posting ini akan kita buat sebuah bentuk kode css baru (mengacu pada kode yang digunakan widget blog' stats blogger) yang bisa anda kembangkan lagi hingga mendapatkan bentuk perubahan tampilan widget lebih maksimal dan mungkin saja lebih fantastis.

Cara merubah tampilan widget blog's stats blogger

Sebelum memulai perubahan pada widget anda wajib mengaktifkan widget blog's stats blogger terlebih dahulu melalui add a gadget di elemen laman (page elements). Panduan cara mengaktifkan widget bisa anda buka dengan klik di sini ! Setelah widget berhasil di tampilkan di halaman blog, silahkan ikuti panduan berikut.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup template dengan cara:
   
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. File yang sudah tersimpan ini berfungsi untuk mengembalikan template ke kondisi sebelum perubahan dilakukan jika terjadi kesalahan yang mengakibatkan kerusakan desain blog. Untuk memulihkan template seperti sebelum perubahan anda bisa klik Browse dan dilanjutkan Upload.
6. Cari kode ]]></b:skin>.
7. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
8. Klik Simpan Template (Save Template).

Kode CSS Widget Blog's Stats (modif):

#Stats1 .widget-content{
       background:#aaa url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-bg-grad-transp-2-50.png) left center repeat-x;
       width:150px;
       padding:4px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
       text-align:center;
       border-radius:6px;  /* by : gubhugreyot, 01 Febuari 2011 */ 
}
#Stats1 .widget-content .counter-wrapper{
       height:30px;
       width:140px;
       padding:0;
       border:1px solid #aaa;
       box-shadow:0 0 6px #000;
       background: url(http://gubhugreyot-images.googlecode.com/files/gubbhugreyot_bg-anima-grad-111-35.gif) center center repeat-x;
       border-radius:4px;
       color:#555;
       font-weight:600 !important;
       font-family:Tahoma;
       letter-spacing:2px;
       font-size:18px;
}

Catatan/Keterangan:

Pilihlah bentuk tampilan widget blog's stats yang hanya berupa teks tanpa background seperti terlihat pada gambar di atas!

Cara Pasang - Mengaktifkan Widget Blog's Stats Blogger

Widget Blog's Stats terhitung sebagai sebuah widget plugin blogger yang baru. Jika sebelumnya untuk monitoring statistik dan perkembangan blog kita harus mencari widget stats ini di berberapa situs penyedia layanan gratis seperti histats.com, red counter atau yang lain, kini blogger dapat langsung menggunakan dan memasang widgetnya hanya dengan beberapa kali klik di page elemen atau elemen laman. Yah... tentu saja ini bagi blogger yang lebih mengutamakan data dibanding penampilan widgetnya. Memang tak dapat dipungkiri bahwa bentuk widget stats blogger plugin sementara ini terlihat sangat sederhana atau bahkan terkesan "kuno dan kurang menarik". Sekalipun demikian meggunakan widget blog's stats blogger akan lebih menguntungkan dibandingkan widget-widget blog's stats lain diluar blogger.

1. Data dan statistik yang diberikan mempunyai akurasi bagus dan dirasa sudah mencukupi untuk monitoring perkembangan blog dari waktu ke waktu.
2. Penggunaan widget tak jadi pengganggu kecepatan loading blog seperti yang biasa terjadi ketika kita gunakan widget blog's stats dari beberapa situs tertentu.

Cara mengaktifkan widget blog's stats blogger.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Elemen Laman (Page Elements).
5. Klik Add a Gadget sesuai dengan posisi dimana widget ingin di tampilkan (dalam box dg garis putus-putus).
6. Akan tebuka window baru dengan nama "Add a Gadget".
7. Pilih dan klik Blog's Stats. Jika diperlukan lakukan setting sesuai opsi yang tersedia. Anda juga bisa merubah titlenya. Berikan nama yang tepat menurut anda!
8. Klik SAVE (Simpan).

Cara Membuat link open in new tab » terbuka di tab atau window baru

Open in new tab adalah sebuah opsi ketika dalam sebuah web/blog menggunakan link. Link sendiri ditandai dengan adanya tag "a" yang di dalamnya memuat sebuah alamat (URL) tertentu yang bisa berupa alamat web/blog lain, alamat sebuah posting, alamat image atau bahkan alamat khusus dalam blog/web itu sendiri. Secara umum link open in new tab diperuntukkan untuk membuka alamat baru diluar blog/web. Agar sebuah link bisa dibuka di tab/window baru dikenal 2 (cara).

1. Hanya menggunakan kode html.
2. Menggunakan javascript

Sebagai tanda link biasanya digunakan:

1. Teks » selanjutnya disebut sebagai text link.
   Contoh :
   Text Link
2. Image » selanjutnya disebut sebagai image link.
   Contoh :
   

Cara membuat link open in new tab:

1. Hanya menggunakan kode html.
   Link open in new tab seperti ini hanya berfungsi pada satu link yang diberi tambahan fungsi open in new tab. Kode untuk menjalankan fungsi ini berupa kode target="_blank" yang ditambahkan di dalam tag "a". Kode dasarnya seperti berikut:
   

   Kode dasar open in new tab (html):

   <a href="URL" target="_blank">Text/image</a>

   Contoh-1:
   Penggunaan open in new tab dalam web/blog dengan penambahan fungsi title.
   

   Text link Open in new tab:

   <a href="http://gubhugreyot.blogspot.com" target="_blank" title="Panduan lengkap blogger Indonesia">Tutorial Blogger</a>

   Image link Open in new tab:

   <a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" target="_blank" title="Penari cantik dengan tarian cantik. Oiii... Bali yang amat cantik!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" width="200" height="150" style="float:left;margin:5px 12px 5px 0;" /></a>

2. Open in new tab menggunakan javascript.
   Penggunaan javascript memungkinkan open in new tab/window berlaku pada semua link yang ada di blog/web. Jadi ketika kita menambahkan fungsi open in new tab melalui javascript, maka blogger tak perlu lagi membuat fungsi open in new tab melalui kode html karena secara otomatis semua link sudah di-setting untuk open in new tab. Javascript open in new tab bisa disimpan di atas kode </body> .

Javascript Open In new Tab

<script type="text/javascript">
//<![CDATA[
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if(anchor.getAttribute("href"))
anchor.target = "_blank";
}}
window.onload = externalLinks;
//]]>
</script>

Cara menyimpan javascript open in new tab:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Cari kode </body>. Anda bisa mencari kode tersebut menggunakan Ctrl + F agar lebih mudah dan lebih cepat.
6. Copy dan paste-kan javascript di atas kode </body>.
7. Klik Simpan Template (Save Template).
8. Selesai!
9. Coba hasilnya dengan membuat posting yang menggunakan link.

Menampilkan Dua Image (Photo) di Widget Profile

Image profile blogger yang ditampilkan dalam widget Profile Blogger Plugin tak lebih dari sebuah thumbnail berukuran kecil berkisar 100px (width). Melalui trik yang dibuat menggunakan kode css setiap blogger dapat menampilkan gambar (image) profile dengan ukuran yang jauh lebih besar. Agar image blogger profile yang berukuran besar ditampilkan lebih atraktif, kode css3 transition dan opacity telah ditambahkan sehingga hover menciptakan sebuah transisi yang disertai fade efek. Jika pada demo di bawah yang ditampilkan bukan sebuah bentuk image profile blogger, ini hanyalah sekedar improvisasi untuk membuat pengunjung tak bosan sekaligus sebagai sebuah informasi bahwa anda tak harus menggunakan image yang sama dengan image profile yang digunakan dalam widget. Gunakan trik ini untuk menampilkan gambar/image sesuka hati anda. Ya..., mo gambar onta, boleh..., mo, gambar kambing, boleh... atau mungkin foto anda yang lagi "e'ok" juga boleh-boleh saja. Pokoknya suka-suka anda, dah!

D e m o

About Me

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

View my complete profile

Kode CSS

.widget-content .dapurku{
       position:absolute;
       display:block;
       z-index:0;
       left:0;
       top:0;  /* orignal code by: gubhugreyot - http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com */ 
       width:0;
       height:0;
       padding:4px;
       border:2px solid #eee;
       opacity:0;
       filter:alpha(opacity=0);
       border-radius:10px;
       box-shadow:0 0 8px #000;
       background-size:0 0;
       transition:1s;-o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.widget-content:hover .dapurku{
       z-index:9999;
       top:-200px;
       opacity:1.0;
       filter:alpha(opacity=100);
       background:red url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshzCbWKb_XqRUg8v6BralI10oKlfdrX3h7c0VPBrUWpJEvjWU1UwpFUWM90xrfE1_w3-07i4yLpgehZi3jdwOzqZcyf8AChbwBYoRW3VTK9DZvvsecS1veDMPkMC861orktBCoPlwXtkY/s400/img_gubhugreyot-gadisku-004.jpg") center center no-repeat; 
       width:220px;
       height:320px;
       background-size:200px auto;
}

Cara menampilkan 2 Photo Blogger

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Pilih dan Klik Rancangan (Design).
4. Pilih dan klik Edit HTML.
5. Lakukan backup template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC.
   • Berikan nama untuk memudahkan anda saat ingin digunakan kembali. File yang sudah tersimpan ini dapat digunakan untuk mengembalikan template kembali ke keadaan awal (sebelum prubahan atau penambahan kode htl bar) dengan cara klik Browse (Upload sebuah template dari sebuah file pada hard drive Anda) dilanjutkan "Unggah (Upload)'.
6. Klik Expand Widget Template.
7. Cari kode ]]></b:skin>.
8. Copy dan paste-kan kode CSS tepat di atas kode ]]></b:skin>.
9. Cari kode <b:widget id='Profile1'. Di bawah kode tersebut terdapat kode :
   <div class='widget-content'>.
10. Ganti kode <div class='widget-content'> dengan Kode HTML Baru di bawah.
11. Klik Simpan Template (Save Template).
12. Buka blog untuk melihat hasilnya.

Kode HTML Baru

<div class='widget-content'>
<div class='dapurku'/>

Catatan/Keterangan:

Ganti image yang digunakan pada background di kode CSS (berwarna merah) dengan image lain sesuai apa yang ingin ditampilkan pada widget profile.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshzCbWKb_XqRUg8v6BralI10oKlfdrX3h7c0VPBrUWpJEvjWU1UwpFUWM90xrfE1_w3-07i4yLpgehZi3jdwOzqZcyf8AChbwBYoRW3VTK9DZvvsecS1veDMPkMC861orktBCoPlwXtkY/s400/img_gubhugreyot-gadisku-004.jpg

Cara Membuat Scroll Box Widget Recent Posts Blogger Plugins

Sama seperti halnya scroll box lainnya, seperti misalnya scroll box widget popular posts blogger plugins, "Scroll Box Widget Recent Posts Blogger Plugins" dapat dimanfaatkan untuk menciptakan efisiensi dan penataan halaman blog. Dengan digunakannya scroll box maka tinggi (height) widget recent posts (daftar posting terbaru) dapat diatur hingga widget ini tidak terlalu memenuhi kolom blog. Membuatnya bisa hanya menggunakan xHTML atau perpaduan antara kode CSS dan xHTML. Karena untuk membuat scroll box tak ubahnya melakukan modifikasi template (modifikasi blog), maka sebelum pembuatan scroll box backup template harus dilakukan terlebih dahulu agar apabila terjadi kesalahan template (desain dasar blog) bisa dipulihkan seperti sedia kala.

Cara Membuat Scroll Box Widget Recent Posts Blogger Plugins

1. Aktifkan/pasang widget recent posts blogger plugin sebelum membuat scroll box. Panduan membuat/mengaktifkan widget recent posts blogger dapat anda ikuti melalui link berikut.
   Panduan Memasang (mengaktifkan) idget Recent Posts Blogger Plugins
2. Login ke Blogger.
3. Halaman Dasbor (Dasboard).
4. Klik Rancangan (Design).
5. Klik Edit HTML.
6. Klik Expand Widget Template.
7. Lakukan backup template. Panduan backup template dapat anda ikuti melalui link di bawah ini:
   Panduan Cara Backup Template Blogger.
8. Cari kode title='Recent Posts' type='Gadget'>. Gunakan Ctrl + F untuk mempermudah pencarian. Panduan mencari kode HTML di template dapat anda buka melalui link berikut.
   Panduan Cara Cepat Cari Kode HTML Template
9. Dibawah kode di atas akan anda temukan kode seperti di bawah ini.

Kode yang harus diganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <data:gadgetSnippet/>
<b:else/>

10. Ganti kode di atas fdengan kode berikut.

Kode HTML pengganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <div style='height:250px;overflow:auto;'><data:gadgetSnippet/></div>
<b:else/>

11. Klik Simpan Template (Save Template).
12. Klik Expand Widget Template.
13. Buka blog untuk melihat hasilnya.

Jika ingin menggunakan kode CSS ganti kode dengan kode berikut:

Kode HTML pengganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <div class='GR_recentposts'><data:gadgetSnippet/></div>
<b:else/>

Tambahkan kode CSS di atas kode ]]></b:skin>

Kode CSS Scroll Box Widget Recent Posts Blogger:

.GR_recentposts{
       height:250px;
       overflow:auto;
}

Cara Membuat - Mengaktifkan Widget Recent Posts Blogger Plugin

Recent Posts Blogger Plugins

Widget Recent Posts pada dasarnya merupakan sebuah fungsi yang digunakan untuk menampilkan daftar posting terbaru dalam sebuah box. Daftar posting terbaru (recent posts) ini berupa buah link yang disertai title posting (judul posting). Widget blogger plugins ini juga menyediakan beberapa pengaturan yang dapat dipilih penggunanya. Mengaturnya juga sangat mudah karena hanya diperlukan beberapa kali "klik" dan semua akan tertampilkan di halaman blog. Di bawah ini beberapa pengaturan widget recent posts yang mungkin dapat digunakan sebagai referensi saat anda mengaktifkannya.

1. Title » Title akan ditampilkan sebagai "nama widget" dan dalam widget ini tertuliskan "Recent Posts". Anda bisa menggantinya dengan teks berbeda seperti misalnya "Daftar Posting Terbaru".
2. Height » Nilai height dlam pixel (px). Semakin besar maka akan semakin tinggi, begitu juga sebaliknya jika semakin kecil maka akan semakin rendah.
3. Number of Posts to Display » Jumlah posting terbaru yang akan ditampilkan dalam widget recent posts. Jumlah maksimal 10 posting. Jika ingin jumlahnya kurang dari 10 posting silahkan ganti angka yang tertera.
4. Display Post Date? » Pilihan untuk menampilkan tanggal posting. Berikan tanda jika ingin menggunakan.
5. Show a summary of your blog posts? » Pilihan untuk menampilkan ringkasan posting.
6. Summary Length » Jika pilihan pada "menampilkan ringkasan posting, maka atur berapa jumlah 'huruf dan/atau angka yang ingin ditampilkan.
7. Preview - Update » Setelah pilihan ditentukan "klik" Update agar kita bisa melihat preview recent posts berdasar pilihan setting yang telah dilakukan.

Setting widget Recent Posts Blogger Plugin

Langkah untuk mengaktifkan widget recent posts:

1. Login ke Blogger.
2. Halaman Dasboard (Dasbor).
3. Klik Rancangan (Design).
4. Elemen Laman - Tambah dan Susun Elemen Laman (Page Elements - Add and Arrange Page Elements).
5. Klik salah satu Add a Gadget.
6. Sebuah window terbuka yang berisi halaman Add a Gadget. Pilih dan klik Featured.
7. Ada banyak widget di sini, cari, pilih dan klik Recent Posts.
8. Silahkan lakukan setting pada widget recent posts berdasar referensi di atas.
9. Klik Simpan (Save).
10. Anda akan kembali di Elemen Laman - Tambah dan Susun Elemen Laman (Page Elements - Add and Arrange Page Elements). Anda bisa memindah posisi widget dengan "men-drag widget ke posisi yang diinginkan.
11. Klik Simpan (Save) yang terletak di kanan atas halaman.
12. Buka blog dan lihat hasilnya.

Cara Menghilangkan Footer (Powered by Blogger) dan Membuat Teks Footer Baru

Diberdayakan oleh Blogger
Powered by blogger

Panduan tentang "Cara menghilangkan footer yang berisikan teks dan link bertuliskan power by: Blogger atau Didukung oleh blogger", hanya dapat diikuti setelah anda membaca tutorial "Cara Membuat Elemen Baru di Footer". Silahkan ikuti panduannya baru kemudian kembali simak tutorial yang ini.

Setelah pembuatan elemen baru di bagian footer selesai, kita langsung akan mencoba "menyulap" widget "Power by Blogger agar segera menghilang dan anda dapat mengisi bagian tersebut dengan widget baru "sesuai selera anda".

Kode CSS

#Attribution1{
       display:none !important;
       visibility:hidden !important;
}

Langkah Menghilangkan "Power by Blogger"

1. Login ke Blogger
2. Halaman Dasbor (Dasboard).
3. Rancangan (Design).
4. Edit HTML
5. Backup Template.
6. Cari kode ]]></b:skin>.
7. Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>
8. Simpan Template (Save Template).

Catatan/Keterangan:

Anda dapat mengikuti panduancara backup template dan cara cepat cari kode HTML template dengan membuka link di bawah ini:

• Panduan Cara Backup Template Blogger
• Panduan Cara Cepat Cari Kode HTML Template

Cara membuat pengganti widget Power by Blogger.

1. Setelah proses Save Template selesai, lanjutkan dengan:
2. Elemen Laman (Page Elements).
3. Add a Gadget di ujung terbawah (footer).
4. Halaman "Add a Gadget"
5. HTML/Javascript
6. Copy dan pastekan xHTML di bawah ini pada box HTML/Javascript.
7. Simpan (Save)
8. Akan lebih baik lanjutkan lagi dengan klik "SAVE" yang terletak di ujung kanan atas halaman.

xHTML

<style type="text/css">
.powerby{
      position:relative;
      height:40px;
      line-height:40px;
      background:#000;
      padding:5px 20px;
      text-align:center;
      margin:0 auto;  
      color:#eee; /* by: http://gubhugreyot.blogspot.com */ 
      font-size:14px;
}
.powerby a{
      color:lightblue;
      text-decoration:none;
      font-weight:bold;
}
.powerby a:hover{
      color:red;
      text-decoration:none;
}
</style>
<div class="powerby">Power by: <a target="_blank" href="http://gubhugreyot.blogspot.com/" title="Hai... hai ... hai ....">gubhugreyot</a>
<div style="float:right;">Template by 'cah Edan</div>
</div>

Demo Hasil penggunaan kode

Seperti inilah hasil akhirya Powered by: 'cah edan!

Catatan/Keterangan:

• Kembangkan kode yang telah tersedia untuk mendapatkan hasil sesuai harapan!
• Tutorial ini berdasarkan kode html dari "Template Blogger Baru (New Blogger Templates) atau Template Designer
• Agar lebih cepat dalam mempelajari semua tutorial sebaiknya buat sebuah blog khusus untuk melakukan berbagai percobaan dan modifikasi.

Cara membuat Scroll Box Widget Popular Posts di Blogger

Scroll Box Widget Popular Posts

Jika anda salah satu pengguna widget popular posts blogger plugin dan setting popular posts dengan jumlah 10 posting maka pasti widget ini akan terlihat sebagai deret meninggi seperti layaknya gedung pencakar langit. Ada beberapa cara untuk membuat tinggi box widget popular posts ini menjadi lebih pendek agar widget popular posts lebih fleksibel penempatannya sekaligus membuat widget ini terlihat lebih rapi. Membuat scroll box adalah salah satu cara yang paling sederhana dan gampang. Kode CSS bisa kita manfaatkan atau dapat juga langsung kita gunakan kode html di bagian body.

Scroll Box Widget Popular Posts Blogger Plugin dg Kode CSS

Jika anda ingin menggunakan kode CSS untuk membuat scroll box, simpan kode CSS di atas kode ]]></b:skin>.

Kode CSS Scroll Box

.popular-posts{
       height:250px;
       overflow:auto;
}

Scroll Box Widget Popular Posts Blogger Plugin dg xHTML

Berbeda dengan ketika kita gunakan kode CSS, saat kita membuat scroll box widget popular posts menggunakan xHTML maka modifikasi/perubahan kode html yang terdapat di antara tag pembuka body (<body>) dan tag penutup body (</body>) harus dilakukan.

Carilah kode berikut ini:

xHTML yang harus dirubah

<div class='widget-content popular-posts'>

Ganti dengan kode berikut:

xHTML Scroll Box Widget Popular Posts

<div class='widget-content popular-posts' style='height:250px;overflow:auto;'>

Catatan/Keterangan:

Jika anda blom mengaktifkan widget popular posts atau mungkin ingin membuat sebuah ticker cantik untuk widget popular posts, silahkan buka tutorialnya melalui link di bawah ini:

• Tutorial Lengkap: Scroll Box Widget Popular Posts
• Cara Mengaktifkan Widget Popular Posts
• Ticker Widget Popular Posts

Cara Menggunakan (mengaktifkan) Widget Popular Post Bolgger Plugins

Add a Gadget di Elemen Laman

Widget Popular Post adalah sebuah widget yang berfungsi untuk menampilkan beberapa posting populer/paling disukai di halaman blog. Setiap popular posts akan ditampilkan dalam bentuk kutipan posting berikut thumbnail (image berukuran kecil) dan title (judul) posting. Prioritas/urutan didasarkan pada tingkat popularitas posting. Jumlah popular post yang ditampilkan dalam widget popular posts blogger plugins dibatasi maksimal 10 popular posts. Anda bisa mengaturnya melalui fitur yang telah disediakan.

Menggunakan/menampilkan widget popular posts blogger plugins dapat dilakukan dengan mudah oleh semua blogger karena widget ini tersedia dalam bentuk siap pakai sebagai sebuah widget plugin. Setelah login ke blogger anda dapat mengaktifkannya melalui Add a Gadget.

Langkah untuk mengaktifkan widget popular posts

1. Login ke Blogger
2. Klik Rancangan (Design).
3. Page Elements » Add and Arrange Page Elements
   Pilih dan klik salah satu Add A Gadget. Pilih saja sembarang karena anda bisa mengatur letak dan posisi widget setelah widget popular post terinstall.
4. Akan terbuka sebuah windows baru Add a Gadget. Cari, pilih dan klik Popular Posts New!
5. Configure Popular Posts
   - Anda bisa merubah title dengan memberi nama lain untuk widget popular posts ini.
   - Ada beberapa pilihan berkaitan dengan tampilan widget silahkan pilih dan beri tanda.
   - Widget ini juga dapat ditampilkan dengan thumbnail (image) atau tanpa thumbnail. Pilih pada pengaturan yang telah tersedia.
6. Klik Save
7. Page Elements » Add and Arrange Page Elements
   Jika posisi/letak widget belum sesuai dengan yang diharapkan, anda bisa klik dan drag ke posisi yang diinginkan.
8. Klik Save di kanan atas!

Selesai!

Catatan/Keterangan:

Untuk membuat widget popular posts lebih menarik atau jika ingin membuat scroll box widget popular posts, anda bisa ikuti tutorialnya melalui link di bawah ini.

• Scroll Box Widget Popular Posts
• Ticker Widget Popular Posts

simple code to animate header background in blogger

Background yang digunakan untuk membuat animasi background

Jika anda mengira animasi background ini bearasal dari gambar animasi gif atau dibuat menggunakan javascript adalah salah besar. Animasi background header blog ini hanya dibuat dari kode CSS yang dipadukan dengan sebuah kode html marquee. Jadi pada dasarnya background bergerak karena efek marquee.

Kode html marquee yang kita gunakan sbb:

xHTML Animated Background

<marquee direction='right' scrollamount='4' width='100%'>
<div id="bgbergerak"></div>
</marquee>

Tutorial:

Tutorial AMembuat Animasi Background