Widget Blog - Cara Membuat Widget Label Blog Keren

Widget label atau kategori blog merupakan widget yang wajib dipasang di blog kamu guna mempermudah para visitor menemukan konten yang dia inginkan. Tapi, biasanya ni guys, tampilan widget label bawaan blog biasanya kurang menarik. Nah, untuk itu Gomu Gomu Ku akan share ke kamu cara membuat widget label blog keren..

Untuk tampilan widget yang akan kita buat, seperti dibawah ini guys...ok langsung saja ke langkah pertama...

Style 1

1. Login ke dashboard blog kamu

2. Plih menu Tata Letak => Tambah Gadget => Label

3. Kemudian setting sesuai keinginan kamu (catatan : tamilan wajib "cloud")

4. Kemudian Save/Simpan

5. Kemudian kembali ke dashboard blog kamu

6. Pilih menu Template => Sesuaikan => Tingkat Lanjut => Tambahkan CSS

7. Tempatkan Kode Script dibawah ini pada kolom yang telah disediakan

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:8px inset #0572F8;background:#0572F8;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

8. Klik Terapkan Tema dipojok kanan atas
9. Refresh halaman blog kamu untuk melihat hasilnya..

Style 2

Untuk style ke-2 langkah-langkahnya sama dengan yang diatas, tinggal kamu ganti kode scriptnya dengan kode dibawah ini...

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{background:#08A2FA;border-radius:30px;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

Style 3

Untuk style ke-3 langkah-langkahnya sama dengan yang diatas, tinggal kamu ganti kode scriptnya dengan kode dibawah ini...

.label-size a { font-size: 14px!important; padding: 1px 6px; border-top: 1px solid #CACACA; border-left: 4px solid #00A8FF; margin-bottom: 5px; float: left; margin-right: 5px; background: #F5F5F5; border-right: 1px solid #CACACA; border-bottom: 1px solid #CACACA; } .label-size a:hover { border-left: 2px solid #222222; border-right: 3px solid #222222; background: #fff; }

Catatan : di dalam kode script tersebut kalau kamu perhatikan ada kode "#" yang diikuti dengan angka atau hurif. Itu merupakan kode warna tampilan label. Kamu bisa menggantinya dengan code warna sesuai selera kamu. Untuk kode warna akan Gomu Gomu Ku bagikan dilain waktu..

Ok guys, sampai disini dulu Artikel kali ini, jangan lupa dishare ya...
Sampai ketemu di Artikel selanjutnya...
Salam.. Happy Blogging...

Widget Blog - Cara Membuat Widget Subscription

Salah satu widget yang wajib kamu pasang di blog adalah Subcription box. Widget ini sangat bermanfaat guna meningkatkan visitor blog kamu, karena dapat mengingatkan pengunjung untuk berlanggangan artikel di blog kamu.

Baca Juga : Cara Membuat Widget Flag Counter

Selain itu jika blog kamu memiliki banyak pelanggan otomatis akan meningkatkan Page Rank kamu, dan juga dapat memperoleh banyak Backlink. Blogger.com sebenarnya sudah menyediakan widget ini, tapi mungkin kamu kurang suka dengan model defaultnya. Nah, untuk tampilan Subscription box yang akan Gomu Gomu Ku berikan, seperti berikut..

Sebelumnya, kamu harus memiliki akun feedburner terlebih dahulu, jika kamu belum punya silahkankan daftar DISINI..

Ok, jika kamu sudah memiliki akun feedburner, kamu tinggal ikutin langkah-langkah berikut ini..

1. Login ke akun blogspot kamu

2. Kemudian masuk ke menu Tata Letak

3. Klik Add Gadget diposisi yang kamu inginkan

4. Pilih HTML/JavaScript 

5. Setelah itu masukkan kode dibawah ini

<style>

.ujangyoyo-email{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2i6RRXzDGtCmn413qgu-Y3FuWzvBJrvEkTr66uCfCrE5KZi6E4Wc_CTXvejKeYx3hIZpXXTtL9kN8ypeZT6gAohrBztov7jCm92I3I5rR7XHqHnlPrGCVFR7KuhuBRZfMJzCwzTcA5vI/s1600/shinemat-email-icon.jpg) no-repeat 25px 1px ;

width: auto;

float: left;

font-family: Arial;

font-size: 1.2em;

font-weight: bold;

margin: -1px 10px -5px -20px;

color: #686B6C;

}

.ujangyoyo-emailsubmit{

background: #131313;

border: 1px solid #000000;

cursor: pointer;

color:#ffffff;

padding: 4px;

text-shadow: 0 -1px 1px #080000;

-moz-border-radius: 6px;

border-radius: 6px;

font:15px "Arial";

font-weight: bold;

}

.ujangyoyo-emailsubmit:hover{

background: #3C3B3B;

border:1px solid #000000;

-moz-box-shadow: 0 0 5px #3A3A3A;

box-shadow: 0 0 5px #3A3A3A;

}

.ujangyoyo-textarea{

padding: 4px;javascript:void(0)

margin: 6px 2px 6px 2px;

background: #f9f9f9;

border: 1px solid #BFBBBB;

resize: none;

-moz-box-shadow: 0 0 5px #3A3A3A;

box-shadow: 0 0 5px #3A3A3A;

font-size: 13px;

width: 160px;

color: #FF7D00;

}

.ujangyoyo-textarea:hover{

border-color: #000000;

-moz-box-shadow: 0 0 5px #3A3A3A;

box-shadow: 0 0 5px #3A3A3A;

}

.ujangyoyo a{

padding: 3px 3px 3px 3px;

display: inline-block;

background: #F4F1F1;

border: solid 1px #C9C9C9;

border-radius: 4px;

-moz-border-radius: 4px;

}

.ujangyoyo a:hover {

border-color: #727171;

-moz-box-shadow: 0px 0px 3px #7C7C7C;

box-shadow: 0px 0px 3px #7C7C7C;

}

.ujangyoyo-followbox{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7kmm5gQRcL_Bmpb_XMPo7f7RDTAOtCnAPedVfC9mMXFJ8iDuC5hbQilwsgpeyeh7a1aZXscLxtRm0Slm0R4jB1XQZJf2_9gtNr3IgLPhLWv01rrHkXsYgVqjLQc19ejtn3aF24jYU0g/s1600/fb-twitter-shinemat.png) no-repeat 237px 53px ;

padding: 5px;

border: 1px solid #C9C9C9;

-moz-border-radius: 8px;

border-radius: 8px;

color: #686B6C;

}

.ujangyoyo-followbox:hover{

background: #F5FCFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCMD3MMGgNA0IQ_F3ou0ZdNlGRt6xGJfDRYO3t07ZnvcXB_x_Zlrhd8f7CJcN_LuwtVBZtEC3vle-jeNwmpgwCggG99F21U7HBk_0GcMJbbcjaJ0dRDNv4D9P8rFVCqdWENHcZkYA0vE/s1600/fb-twitter-shinemat-hover.png) no-repeat 237px 53px ;

padding: 5px;

border: 1px solid #727171;

-moz-border-radius: 8px;

border-radius: 8px;

-moz-box-shadow: 0px 0px 3px #7C7C7C;

box-shadow: 0px 0px 3px #7C7C7C;

}

</style>

<center>

<div class="ujangyoyo-email">

Subscribe via Email

<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=gomugomuku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="ujangyoyo-textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /><input type="hidden" value="gomugomuku" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="ujangyoyo-emailsubmit" value="Submit" type="submit" />

</form></div><br /><br /><br />

<b><font size="2" face="Arial" color="#686B6C">...and receive awesome posts to your mail inbox</font></b>

</center>

6. Ganti tulisan merah (Judul Widget) dengan kalimat pendukung yang kamu suka.
7. Ganti tulisan berwarna biru (Username Feedburner) dengan username akun feedburner kamu.
8. Ganti tulisan berwarna coklat (Tulisan dalam kotak Subscription) dengan kalimat pendukung yang kamu suku.
9. Terakhir simpan widget kamu.. dan reload page blog kamu untuk melihat hasilnya.

Ok, sampai disini dulu Artikel Gomu Gomu Ku kali ini, jangan lupa dishare ya.
Sampai ketemu di Artikel selanjutnya.
Salam... Happy Blogging...

Widget Blog - Cara Membuat Widget Flag Counter

Hello guys, saya mau nanya ni, kira-kira kamu tahu gak berapa jumlah visitor blog kamu ??? Bagi kamu yang belum tahu, wajib nih memasang widget yang satu, Flag Counter.

Flag Counter merupakan widget yang menggunakan algoritma untuk menghitung visitor blog kamu berdasarkan negara visitor berasal dengan memberikan simbol Flag (Bendera) pada tampilannya.

Baca Juga : Cara Membuat Widget Subscription Blog

Kira-kira gimana ya cara membuatnya ? gak usah pakai mikir, Gomu Gomu Ku akan ngejelasin cara membuatnya satu per satu...  langsung saja ke langkah yang pertama...

1. Kunjungi dulu halaman Flag Counter

2. Kamu akan menemukan tampilan halaman seperti gambar diatas.

3. Kemudian kamu dapat mengatur tampilan widget sesuai keinginanmu.

Keterangan :

• Maximum flag to show merupakan jumlah bendara yang akan ditampilkan
• Columns of flag merupakan jumlah kolom
• Label on top of counter merupakan nama dari Flag Counter
• Background color merupakan warna latar dari Flag Counter
• Text color merupakan warna tulisan
• Border color merupakan warna garis tepi dari Flag Counter
• Show country flag merupakan tampilkan kode negara
• Show pageview merupakan tampilkan jumlah halaman yang dikunjungi

4. Setelah kamu selesai mengedit tamilan widget, klik Get Your Flag Counter disebelah kanan halaman.
5.Kemudian akan muncul tampilan halaman seperti dibawah.

6. Pilih Skip/Loncat, dan copy paste code Counter Flagnya di dashdor blog kamu.

7. Pilih Tata Letak =>Tambah Gadget => HTML/JavaScript 

8. Paste kode yang telah kamu dapatkan tadi.

9. Klik Save/Simpan.

10. Setelah itu reload halaman blog kamu untuk melihat hasilnya.

Ok, sampai disini dulu Artikel Gomu Gomu Ku kali ini, jangan lupa dishare ya.

Sampai jumpa di Artikel selanjutnya.

Salam... Happy Blogging...