Cara mudah mengaktifkan komentar Google+ di Blogger

Cara mudah mengaktifkan komentar Google+ di Blogger

blogger tutorial blogart   19:41

Sebenarnya perpaduan komentar Google+ di Blogger sudah lumayan lama diterbitkan oleh Google, namun baru kali ini saya sempat menuliskan tutorial cara mudah mengaktifkan komentar Google+ di Blogger, karena banyak kesibukan Offline akhirnya saya baru bisa update. Maaf ya :-)

Sebelum saya menuliskan tutorial cara membuat komentar Google+ di Blogger saya ingin memperlihatkan bagaimana penampilan komentar Google+ tersebut di Blogger

Membuat kommentar Google+ di Blogger

Langkah pertama.
Setelah login ke blogger klik menu Google +

Langkah kedua
Setelah itu beri centang pada bagian Gunakan Google+ Komentar di blog ini

Selanjutnya klik tab Template > Edit HTML kemudian klik menu Kembalikan template widget ke default atau Revert Widget Templates to default. Beri centang Blog1 dan klik tombol Kembalikan widget yang dipilih atau Revert Selected widgets

Selesai.
Nah itulah cara mudah untuk membuat komentar Google+ di Blogger.

Cara manual mengaktifkan komentar Google+ di Blogger

Gunakan cara ini jika kamu lebih suka mengedit template sendiri (dengan cara manual).

cara pertama dan cara kedua sama saja dengan cara yang sudah saya tuliskan di atas, jika kedua cara tersebut sudah dilakukan silakan ikuti langkah selanjutnya berikut ini:

Klik tab Template > Edit HTML kemudian cari kode

setelah itu ganti kode tersebut dengan kode yang diberi tanda/highligh berikut ini

<b:include data='post' name='comment_picker'/>

Simpan pengaturan template dan selesai.

Selamat mencoba mengaktifkan komentar Google+ di Blogger kamu dan semoga bermanfaat.

Blogger Update Tampilan Template HTML Editor

Blogger Update Tampilan Template HTML Editor

html editor blogart   21:17

Belum lama ini blogger update tampilan template html editor (html editor untuk edit template). Dengan tampilan baru ini kita lebih mudah untuk edit template kita.

Berikut tampilan terbaru dari template html editor blogger.

Pada tampilan tersebut terdapat banyak kode ►, kode tersebut menyimpan kode-kode html lainnya pada masing-masing elemen, dan jika kita klik kode tersebut maka kita dapat melihat seluruh elemen bagian tersebut.

Misalnya kita ingin mengedit bagian posting (artikel) template kita, maka kita cukup mencari element "Blog1" atau langsung gunakan menu drop-down Jump to widget / Langsung ke widget dan pilih menu "Blog1". Maka kamu akan dibawa ke elemen posting artikel / Blog1.

Selanjutnya klik kode ► untuk menampilkan elemen / bagian dari widget Blog1 tersebut.

Untuk mengedit bagian posting, yang perlu kita lakukan selanjutnya adalah mengklik kode ► pada bagianincludable id='post' var='post' maka akan keluar kode-kode bagian posting template kita, dan silakan edit sesuai keperluan.

Nah itulah sekilas info tentang tampilan edit html / template html editor terbaru dari blogger.

4 Kode Search Box (Kolom Pencarian) Buat Blogger - Keren

4 Kode Search Box (Kolom Pencarian) Buat Blogger - Keren

blogger widget blogart   22:05

4 Kode Html + CSS Search Box Keren Untuk Blogger / Kolom Pencarian

Pada tutorial kali ini saya akan menuliskan cara pasang kolom pencarian yang keren buat blogger. Dengan memasang search box atau kolom pencarian di blog kita maka pengunjung dapat mencari artikel yang ada di blog kita sesuai dengan kata kunci yang mereka tulis.

Di sini saya memuat 4 kode search box keren (menurut saya) yang bisa kamu pilih, urutan kode search box (kolom pencarian) saya tulis sesuai dengan urutan gambar.

Sebelum saya menuliskan kode search box, saya akan menuliskan cara pasang search box tersebut dahulu.

Cara Pasang Search Box / Kolom Pencarian di Blogger

1. Login ke Blogger
2. Pilih menu Tata Letak
3. Klik tambah Gadget
4. Pilih Gadget Html/JavaScript
5. Masukkan kode search box
6. Simpan.

Nah itulah cara pasang search box, adapun kode search box silakan pilih salah satu dari kode html + css berikut:

Kode 1

<style type='text/css'>
input{
font-family: cursive;
}
form.search1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgjuImDklGNWO9TzkHJiJVDCZt9Wdgd8C_7ZrxeBo1H0Wt4D5-tRRhtIrSNoi8i6lR6kB3Q8D5Xn7CQBiiqpMFhJo7oMsImOqUqByVWafzWi1ug3aiv8LC5Lnixgr4ArnF6oKJW92ipw/s1600/1.png);
width: 320px;
height: 38px;
}
.text1 {
background: transparent;
width: 275px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit1 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 41px;
top: -12;
cursor: pointer;
}
</style>
<form class="search1" action="/search" style="method="get">
<input class="text1" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit1" type="submit" value="" />
</form>

Kode 2

<style type='text/css'>
form.search2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEKeIq96HMh8HCMY-i5K0m8Z3rpKeybMSMrfTBZrvjrQsGp5SOFdyjMFPJxLisR4x_5bamRXp-Mhaaie96mQtz8oS-sZmk90y_2qPkele3lwAv91Eqh9RIbC2ERrG-vZbGmjEo6RBZaQ/s1600/2.png);
width: 320px;
height: 38px;
}
.text2 {
background: transparent;
width: 270px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit2 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 45px;
top: -12;
cursor: pointer;
}
</style>
<form class="search2" action="/search" style="method="get">
<input class="text2" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit2" type="submit" value="" />
</form>

Kode 3

<style type='text/css'>
form.search3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HqZe8e4-H0znyPmoe-5aq7RSwG_dA8NJOkKSLX6poPk34ViomK2b94l97mKpWSJLFwpjWAyoSDOxQL1X2MGSNIQcD0zKri7n5Aw84ER3BMt9Z8aX2QB_YJ_D_xV2hv5gs9R7N8jRMYY/s1600/3.png);
width: 320px;
height: 38px;
}
.text3 {
background: transparent;
width: 260px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit3 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 50px;
top: -12;
cursor: pointer;
left: 5px;
}
</style>
<form class="search3" action="/search" style="method="get">
<input class="text3" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit3" type="submit" value="" />
</form>

Kode 4

<style type='text/css'>
form.search4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggFzWX4XJWcH8TldfZe46giMnAJpufFGVqGSojmKIEIPbP-XLFY5pxVyZA00efZuLszDN4kw9MSDLtvHPHQ66NVt-6eFPrtvCqAlYtl5l7iKrpqNaP5t2uVLsVNleAv-qkCX8RkR76EEE/s1600/4.png);
width: 334px;
height: 49px;
}
.text4 {
background: transparent;
width: 290px;
height: 38px;
border: 0px;
outline: 0px;
padding: 10px 0 0 10px;
font-size: 20px;
}
.submit4 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 40px;
top: -12;
cursor: pointer;
}
</style>
<form class="search4" action="/search" style="method="get">
<input class="text4" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit4" type="submit" value="" />
</form>

Silakan letakkan kode search box yang kamu pilih di Gadget Html/JavaScript. Ingat, urutan kode kolom pencarian sesuai dengan urutan gambar di atas.

Cara Pasang Widget Jejaring Sosial : Facebook, Twitter, G+ & RSS

Cara Pasang Widget Jejaring Sosial : Facebook, Twitter, G+ & RSS

blogger tutorial blogart   21:40

Kali ini saya akan mencoba menuliskan tutorial cara pasang widget jejaring sosial facebook, twitter, G+ dan RSS di blogger.

Sebelum membuat widget jaringan social keren yang satu ini ada baiknya jika kita lihat dahulu bagaimana penampilannya, agar tidak mengecewakan karena salah pasang widget, berikut gambarnya :

Berikut demo widget facebook, twitter, G+ dan RSS

• Follow me on Twitter
• Follow me on Facebook
• Find me on Google+
• Subscribe via RSS

Bagaimana, widget jaringan sosialnya keren apa tidak?

Jika tertarik ingin memassangnya di blog kamu, maka silakan ikuti panduan cara memasangnya berikut ini.

Pasang Widget Jejaring Sosial : Facebook, Twitter, G+ dan RSS

1. Login ke blogger
2. Klik menu Tata Letak

3. Klik Tambah Gadget, pilih gadget Html/JavaScript


4. Masukkan kode yang sudah saya sertakan di bawah di dalam nya
5. Simpan & Selesai

Berikut script yang harus dipasang :

<style>#iconizr li {font-size:18px;font-family:shaun the sheep !important;
color:#cccccc;text-shadow:0px -1px 0px #000;cursor: pointer;height:41px;position: relative;border-top:none;border-bottom:none;list-style:none;}
#iconizr .icon {background: #d91e76 url('http://codecbd.googlecode.com/files/iconizers.png') 3px 0 no-repeat;background-color: rgba(217,30,118, .42);-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;border-radius:20px;display: block;color: #141414;float: none;height: 40px;line-height: 40px;margin: 5px 0 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 250px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;box-shadow: rgba(0,0,0, .28) 0 1px 3px;width:40px}
#iconizr li:after {color: #141414;content: attr(data-alt);display: block;height: 38px;line-height: 38px;position: absolute;left: 55px;top: 0;z-index: 2;}
#iconizr .icon {color: #fafafa;overflow: hidden;text-decoration: none;}
#iconizr .facebook {background-color: rgba(65,131,196, .42);background-position: 3px 0;}
#iconizr .twitter {background-color: rgba(74,191,226, .42);background-position: 3px -40px;}
#iconizr .gplus {background-color: rgba(206,26,29, .42);background-position: 3px -80px;}
#iconizr .rss {background-color: rgba(255,109, 0, .42);background-position: 3px -160px;}
#iconizr li:hover .icon {width:99%;}
#iconizr li:hover .icon {background-color: #d91e76;}
#iconizr li:hover .facebook {background-color: #2d76b9;}
#iconizr li:hover .twitter {background-color: #29b8e5;}
#iconizr li:hover .gplus {background-color:#E0181C;}
#iconizr li:hover .rss {background-color: #ff6d00;}</style>
<ul id="iconizr"><li data-alt="Follow me on Twitter"><a rel="external" href="#Twitter" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="#Facebook" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="#G+" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external" href="#Feed" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul>

Keterangan :

Ganti kode #Twitter dengan alamat twitter kamu.
Ganti kode #Facebook dengan alamat facebook kamu.
Ganti kode #G+ dengan alamat G+ kamu.
Ganti kode #Feed dengan alamat feed blog kamu.

Fibox Shoutbox Script Buku Tamu Gratis Buat Blogger

Fibox Shoutbox Script Buku Tamu Gratis Buat Blogger

blogger tutorial blogart   18:01

Tutorial Blogger kali ini saya ingin berbagi info tentang Fibox.

Fixbox merupakan salah satu penyedia script buku tamu gratis yang bisa dijadikan sebagai alternatif buku tamu gratis selain Cbox.ws situs penyedia Shoutbox Script (script buku tamu) gratis yang sudah saya share dulu.

Sama dengan script buku tamu lainnya, script buku tamu Fibox nantinya juga bisa kita buat menjadi tersembunyi.

Cara Mendaftar Di Fibox Penyedia Script Buku Tamu Gratis

Cara Pertama.

1. silakan buka situs www.fibox.ws kemudian klik Sign Up

2. Masukkan email address dan password. Beri centang pada term of service kemudian klik continue.

3. Maka akan kamu akan menemukan halaman seperti ini

4. Nah langkah selanjutnya silakan buka inbox email kamu untuk melakukan konfirmasi, yaitu dengan cara mengklik link konfirmasinya.

5. Selesai. Selamat, kamu sudah memiliki akun di Fibox dan sudah bisa login dan menggunakan script buku tamunya.

Cara Kedua
Oh ia, selain dengan cara di atas kamu juga bisa mendaftar menggunakan akun facebook kamu, yaitu dengan cara mengklik tombol login menggunakan akun facebook.

Cara Membuat Popular Post Warna Warni Di Blogger

Cara Membuat Popular Post Warna Warni Di Blogger

blogger widget blogart   21:50

Kemarin ada yang bertanya tentang cara membuat popular post warna warni, sehingga akhirnya saya putuskan untuk menuliskan tutorial cara pasang widget popular post warna warni di blogger pada postingan kali ini.

Sebenarnya cara membuat popular post warna warni di blogger tidak sulit kok, dan kita tidak perlu menambahkan script apapun, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada template kita.

Untuk lebih jelasnya silakan ikuti tutorial berikut.

Cara Pasang Popular Post Warna Warni Di Blogger

Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:

1. Klik menu Tata Letak / Layout
2. Klik Tambahkan Gadget / Add a Gdget
3. Pilih Widget Popular Post / Entri Populer

Cara Setting Widget Popular Post :

• Pada bagian Most viewed, silakan tentukan sendiri apakah ingin menampilkan artikel populer sepanjang waktu, dalam 1 bulan atau dalam satu minggu.
• Pada bagian Show ada bagian image thumbnail dan snippet serta Display up to, nah pada bagian Display up to silakan tentukan berapa artikel populer yang mau ditampilkan, sedangkan pada image thumbnail dan snippet JANGAN DIBERI CENTANG.
• Setelah itu silakan Simpan

Sampai tahap ini widget artikel populer sudah bisa dilihat pada blog kita, namun artikel populer nya belum warna warni, agar popular post menjadi warna warni silakan lanjutkan baca tutorial ini , he heeee.

Ada 2 cara, silakan pilih yang menurut kamu lebih mudah.

Cara Pertama

Karena kamu sudah berada pada bagian Tata Letak / Layout, maka kamu cukup klik tambah gadget lagi, dan pilih gadget HTML/JavaScript, setelah itu masukkan kode css berikut di dalamnya

<style type='text/css'>
/*----- POPULAR POST WARNA WARNI -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
</style>

Selanjutnya simpan.

Cara Kedua

Klik menu Template (letak menunya di sebelah kiri)

Di sana kamu akan bisa melihat tampilan blog kamu sekarang, nah di bawahnya ada tulisan Edit HTML, silakan klik tulisan Edit HTML tersebut, kemudian klik Lanjutkan.

Cari kode ]]></b:skin> setelah itu pasang kode berikut di atasnya. Agar lebih mudah menemukan kode tersebut silakan baca Cara Mudah + Cepat Mencari Kode Html di Blogger

/*----- POPULAR POST WARNA WARNI -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Simpan pengaturan template kamu.

Nah itulah tutorial cara membuat / pasang widget popular post warna warni di blogger, semoga bermanfaat.

Cara Membuat Sitemap Blogger + Submit Ke Google

Cara Membuat Sitemap Blogger + Submit Ke Google

SEO blogart   21:30

Pada tutorial kali ini saya akan mencoba menuliskan panduan cara membuat sitemap blogger dan cara submit sitemap blog kita ke Google.

Sitemap sangat perlu kita submit / daftarkan ke Google, karena dengan mengirimkan sitemap ke Google maka blog kita akan lebih mudah ditemukan oleh Google. Namun agar bisa membuat sitemap blog kita di Google, kita harus tahu terlebih dahulu alamat sitemap blog kita.

Biasanya sitemap atau peta situs berbentuk .xml, misalnya /sitemap.xml

Nah karena kita membahas tentang blogger, maka saya akan memperkenalkan sitemap blogger saja, agar lebih fokus.

Saat ini blogger sudah memiliki sitemap sendiri, dan inilah sitemap yang asli dari blogger, selain itu sitemap ini bukan sitemap biasa karena Skema yang digunakan berdasarkan skema (XLMNS) yang disusun oleh sitemaps.org, berikut sitemap xml blogger yang sebenarnya

sitemap.xml

contoh :

http://buzz.blogspot.com/sitemap.xml

Nah, jika kamu ingin membuat sitemap di Google, maka kamu hanya perlu masukkan sitemap.xml pada kolom isian sitemap.

Namun sayang sitemap.xml blogger belum bisa digunakan pada blogger custom domain seperti blog saya ini, jika dibuka maka yang keluar hanya halaman 404.

Lalu bagaimana submit sitemap blogger yang menggunakan custom domain ?

Caranya yaitu menggunakan feed blog kita, saya rasa tidak perlu panjang lebar, berikut alamat feed yang harus kita masukkan pada kolom isian sitemap.

feeds/posts/default?max-results=9999&amp;amp;alt=json-in-script&amp;amp;callback=loadtoc
atau
atom.xml?redirect=false&amp;start-index=1&amp;max-results=500

Oke, kita sudah mengenal sitemap blog blogger kita, sekarang saatnya kita membuat sitemap blog kita di Google.

Cara Submit Sitemap Blog Ke Google

Pertama silakan kunjungi Google Webmaster Tools Jika belum login silakan login dahulu di sana.
Kemudian klik pada blog yang ingin kita submit sitemapnya.

 Disebelah kanan ada bagian sitemap / peta situs, silakan klik tulisan tersebut.

Klik  TAMBAHKAN/UJI PETA SITUS, setelah itu masukkan peta situs / sitemap blog kamu di sana.

 Jika blog blogger kamu belum menggunakan custom domain maka yang lebih baik adalah sitemap.xml yang kamu masukkan di sana.

Nah itulah tutorial cara membuat sitemap blogger dan cara submit sitemap blog ke Google, semoga kedepannya blogger yang menggunakan custom domain juga ada sitemap.xml nya.

semga bermanfaat.

Cara Mengisi Menu Dengan Artikel Kita

Cara Mengisi Menu Dengan Artikel Kita

blogger tutorial blogart   20:16

Bagaimana Cara Mengisi Menu Dengan Artikel Kita ?

Pertanyaan tentang cara mengisi menu dengan artikel kita tersebut ternyata ditanyakan oleh beberapa orang teman kita, dan setelah saya pikir-pikir mungkin saya harus tuliskan tutorial cara mengisi menu dengan artikel yang kita inginkan.

Sebenarnya hampir semua blogger selalu menyertakan keterangan singkat tentang cara mengisi menu dengan artikel (link artikel), namun sepertinya itu masih belum cukup bagi sebagian teman-teman kita.

Oke mari kita mulai belajar isi menu dengan artikel yang kita mau.

Cara Mengisi Menu Dengan Artikel Yang Kita Mau

Pertama pastikan bahwa artikel tersebut sudah online dan bisa di akses.

Kunjungi / buka halaman artikel tersebut.

Sekarang coba lihat di address bar kamu, maka kamu akan melihat alamat / link artikel tersebut.

Link / url tersebutlah yang harus kita pasang

Contoh :

Saya mau pasang artikel Cara Membuat Recent Post Berjalan Gaya Slide menggunakan menu horizontal (baca : Cara Membuat Menu + Sub Menu Tanpa jQuery)

Saya buka halaman artikel tersebut, dan pada address bar saya temukan link artikel tersebut, maka itulah yang harus saya pasang.

Biasanya pada tutorial membuat menu ada keterangan seperti ini :

<li><a href='#'>Menu</a></li>

Ganti kode pagar (#) dengan link / url yang kamu mau, dan ganti tulisan Menu dengan nama yang kamu mau.

Nah jika saya mau pasang artikel yang sudah saya sebutkan di atas pada menu tersebut, maka saya harus mengganti tanda paga (#) dengan alamat link / url artikel tersebut yaitu : http://blog.ahmadrifai.net/2012/08/cara-membuat-recent-post-berjalan-slide.html

Dan mengganti tulisan Menu dengan nama yang saya mau, misalnya saya ingin beri nama Menu Horizontal, maka kodenya menjadi seperti ini

<li><a href='http://blog.ahmadrifai.net/2012/08/cara-membuat-recent-post-berjalan-slide.html'>Menu Horizontal</a></li>

Selesai

Nah begitulah cara mengisi menu dengan artikel kita, kita bisa pasang link / url artikel (post), label, situs lain, dsb sesuai tujuan pembuatan link.

Semoga ini bisa membantu dan bermanfaat.

Cara Membuat Link Download / Klik Di Sini

Cara Membuat Link Download / Klik Di Sini

blogger tutorial blogart   20:37

Beberapa hari yang lalu ada yang bertanya bagaimana cara membuat link klik di sini, download, lihat detail, dsb. Atau bisa juga disebut cara menyisipkan link pada tulisan sehingga bisa di klik pengunjung blog kita.

Sebenarnya cara membuat link download / klik di sini itu bukan lah hal yang sulit, namun bagi pemula kadang ini menjadi lumayan susah, wajar lah, namanya juga masih belajar. Walaupun cara membuat link download / klik di sini tersebut kelihatannya sepele, namun sangat bermanfaat lho. (Bagi yang sudah tahu cara menyisipkan link pada tulisan saya rasa tutorial ini mungkin akan membosankan)

Ok mari kita muali.

Tutorial Cara Membuat Link Download / Klik Di Sini

1. Buat artikel seperti biasanya
2. Blok tulisan yang ingin kita sisipkan link, misalnya tulisan Klik Di Sini, dsb.
3. Klik menu yang bertulisan link, lihat gambar berikut

4. Masukkan link (alamat url) yang kita tuju

5. Klik Ok
6. Selesai

Jika artikel yang kamu tulis sudah sempurna dan siap diterbitkan, maka silakan terbitkan tulisan tersebut.

Nah itulah cara mudah untuk membuat link download / klik di sini pada posting blogger.

Bagaimana cara membuat link download di sidebar blogger? 

Untuk pasang link di sidebar caranya agak berbeda dengan cara membuat link pada posting, yaitu dengan cara menyisipkan kode html secara manual.
Kode yang harus dipasang adalah

<a href="#">Text Link</a>

Cara menggunakannya
Ganti kode pagar (#) pada kode tersebut dengan link (alamat url) yang kamu mau, contoh :

http://blog.ahmadrifai.net/
atau
http://blog.ahmadrifai.net/2012/08/cara-membuat-link-download-klik-di-sini.html

Ganti tulisan Text Link dengan tulisan yang kamu mau, misalnya Kilik Di Sini, dsb. Contoh saya pakai tulisan Blogger Tutorial menggunakan link http://blog.ahmadrifai.net/ maka kode yang harus saya pasang adalah

<a href="http://blog.ahmadrifai.net/">Blogger Tutoria</a>

Hasilnya seperti ini : Blogger Tutorial

Nah itulah cara membuat link download / klik di sini pada posting dan sidebar blogger, untuk cara pasang link di sidebar, tutorial di atas hanya salah satu cara saja lho.

Selamat mencoba, dan semoga bermanfaat.

Cara Membuat Recent Post Berjalan Gaya Slide

Cara Membuat Recent Post Berjalan Gaya Slide

blogger widget blogart   19:27

Pada tutorial blogger kali ini saya akan menuliskan cara membuat recent post berjalan di blogger dengan gaya slide. Sebenarnya tutorial cara membuat recent post berjalan di blogger ini sudah lama ada, namun baru saya muat di blog ini.

Ada banyak cara membuat recent post / widget artikel terbaru di blogger, dan sebagian sudah saya tuliskan, yaitu :

• Membuat Recent Post dan Coment Di Blogger
• Bikin Recent Post by Label With Thumbnail Script
• Membuat Recent Post by Label Thumbnail Saja

Bagi teman-teman yang ingin pasang widget recent post berjalan diblognya silakan baca terus ya :-)

Oh ia, sebelumnya mungkin teman-teman ingin melihat bagaimana sih tampilan nya nanti, agar tidak seperti beli kucing dalam karung silakan lihat gambar berikut, atau klik link demo di bawah

Klik Di Sini Untuk Melihat Demo Langsung

Cara Membuat Recent Post Berjalan Di Bogger

Tutorial ini sebenarnya tidak jauh berbeda dengan tutorial blogger lainnya, perbedaannya hanya pada script yang dipasang saja, yaitu script recent post berjalan. Dan bagi kamu yang sudah hafal betul cara menambahkan widget di blogger maka kamu bisa lewati beberapa langkah berikut dan langsung ambil scriptnya saja.

Langkah-langkah pasang recent post berjalan di blogger

1. Login ke blogger
2. Klik menu Tata Letak

3. Klik Tambah Gadget, pilih gadget Html/JavaScript


4. Masukkan kode yang sudah saya sertakan di bawah di dalam nya
5. Simpan & Selesai

Berikut script yang harus dipasang :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#rp_plus_img{height:282px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/recentpostslidethumbnails.js"></script>
<script type="text/javascript">var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">var numposts = 25;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Keterangan :

1. Untuk mengatur tinggi widget silakan ganti lah angka 282 pada height:282px.
2. Untuk mengatur kecepatan slide silakan ganti angka 400 pada var speed = 400;.
3. Ganti angka 5 pada kode var numposts = 25; untuk mengatur jumlah posting yang ditampilkan.
4. Ganti angka 75 pada kode var numchars = 75; untuk mengatur jumlah karakter artikel.
5. Feed sobat harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh" atau sobat bisa langsung masukkan feeds sobat dalam script tersebut.

Keterangan Tambahan : 

Pada script tersebut ada kode

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Letaknya paling atas, jika pada template kamu sudah ada script jQuery 1.42 maka kamu tidak perlu menyertakan script tersebut (silakan hapus) karena 1 saja sudah cukup, walaupun letaknya tidak berdekatan.

Untuk mengetahui kode tersebut ada atau tidak silakan lihat sumber halaman atau source code blog kamu (baca : 2 Langkah Mudah Melihat Source Code WebBlog), kemudian cari kode tersebut (baca : Cara Mudah + Cepat Mencari Kode Html di Blogger).


Nah itulah tutorial cara membuat recent post berjalan atau recent post gaya slide di blogger, selamat mencoba dan semoga bermanfaat.

Cara Membuat Facebook (FB) Like Widget Tersembunyi

Cara Membuat Facebook (FB) Like Widget Tersembunyi

blogger widget blogart   23:08

Facebook Like (Fb Like) widget bisa juga kita sembunyikan seperti buku tamu, saya yakin teman-teman sudah sering melihat facebook like widget tersembunyi ini di blog lain.

Nah pada tutorial kali ini saya akan menuliskan cara membuat fb like widget tersembunyi, dengan menyembunykan widget facebook like ini maka kita bisa menghemat tempat di sidebar dan bisa memasang widget lain.

Ok saya rasa tidak perlu panjang labar, mari kita langsung katopik utama kali ini.

Cara Pasang Fb Like Tersembunyi (Facebook Widget)

Untuk memasang widget yang satu ini di blog kamu silakan ikuti langkah-langkah berikut:

1. Login ke blogger
2. Klik menu Tata Letak

3. Klik Tambah Gadget, pilih gadget Html/JavaScript


4. Masukkan kode yang sudah saya sertakan di bawah di dalam nya
5. Simpan & Selesai

Berikut kode yang harus dipasang :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".fblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.fblikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1LdKYP6cwWgSFS5d9tG0Z10mmAc7P8-CAMt9xQIP6rDh_ggbaQ98bEfbwjCb-7X11N9LKl2P4zaoS-81M9FXb2VzHxcJrTuEuZgt7wNaq7g6c-n4RNH3G6lRW1KZqsEnlXsbS6ZJFME/s1600/fblikewidget.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.fblikebox div{background:#ffffff;border:none;position:relative;display:block;}
</style>
<div class="fblikebox">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAhmad-Rifai%2F342112850625&amp;width=245&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:245px; height:270px;" allowtransparency="true"></iframe>
</div>
</div>

Silakan ganti kode yang saya beri warna merah (Ahmad-Rifai & 342112850625) dengan alamat facebook fans page milik kamu, berikut contoh link lengkap halaman facebook milik saya.

http://www.facebook.com/pages/Ahmad-Rifai/342112850625

Nah 2 kode yang saya beri warna BIRU itulah yang harus dipasang pada script fb tersembunyi di atas, dua kode tersebut dipisahkan oleh garis miring (/).

Oh ia, pada script widget di atas ada kode

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Saya letakkan paling atas. Nah ... Jika pada template kamu sudah ada kode jQuery 1.6.1 tersebut maka kamu tidak perlu lagi menyertakan nya pada facebook like tersembunyi ini, silakan hapus kode jQuery 1.6.1 nya, karena 1 saja sudah cukup.

Bagaimana cara mengetahui kode jQuery 1.6.1 tersebut ada atau tidak?

Caranya mudah kode, silakan lihat sumber halaman atau source code blog kamu (baca : 2 Langkah Mudah Melihat Source Code WebBlog), kemudian cari kode tersebut (>baca : Cara Mudah + Cepat Mencari Kode Html di Blogger).

Nah itulah cara membuat facebook like (fb like) widget tersembunyi di blogger, selamat mencoba dan semoga bermanfaat.

Cara Cek Keyword Density + Tools Untuk Blogger

Cara Cek Keyword Density + Tools Untuk Blogger

SEO blogart   21:25

Pada artikel sebelumnya saya sudah menuliskan pengertian keyword density, dan kali ini saya akan menuliskan bagaimana cara cek keyword density yang ada pada artikel yang kita tulis menggunakan beberapa tool gratis.

Sebagaimana yang sudah disebutkan oleh pakar seo bahwa keyword density yang ideal / bagus dalam sebuah artikel adalah berkisar antaraa 3% sampai 5% saja, dan maksimal adalah 6% tapi yang lebih bagus adalah tidak lebih dari 5%.

Nah setelah kita tahu berapa persen keyword density yang ideal untuk sebuah artikel maka kita perlu tahu bagaimana cara cek keyword density yang ada pada artikel yang sudah kita tulis.

Bagi pengguna wordpress yang dibuat pada hosting sendiri cara mengetahui berapa persen keyword density yang ada dalam artikel sangat mudah, dan ini bisa dilakukan sebelum artikel tersebut diterbitkan, yaitu dengan menggunakan tool gratis untuk wordpress atau lebih tepatnya Plugin SEO-Tool - Keyword Density Checker, namun untuk pengguna blogger saat ini belum ada tool untuk cek keyword density, pengguna blogger hanya bisa mengecek nya setelah artikel tersebut diterbitkan, itu pun menggunakan tool / bantuan dari situs lain. Tapi tidak apa, yang penting kita pengguna blogger juga bisa cek walaupun setelah artikel diterbitkan.

Di sini saya akan sertakan beberapa situs yang bisa kita gunakan untuk cek keyword density, yaitu:

1. http://www.keyworddensity.com/
2. http://www.seochat.com/seo-tools/keyword-density/
3. http://www.webconfs.com/keyword-density-checker.php
4. http://www.seocentro.com/tools/seo/keyword-density.html
5. http://www.internetmarketingninjas.com/seo-tools/keyword-density/
6. http://www.webuildpages.com/seo-tools/keyword-density/ 

atau kamu bisa juga menggunakan tool berikut:

URL Valid URL Results Number of keyterms to display All Terms5 Terms10 Terms25 Terms50 Terms75 Terms100 Terms Elements to include Select from below Include Meta? Include Alts? Include Title? Include numerals E.g. '2004' would count as a keyword Yes No No. words Number of words per phrase 3 words 2 words 1 word Enter Captcha To Continue To prevent spamming, please enter in the numbers and letters in the box below Report Problem with Tool.

Nah itulah beberapa tool yang bisa kita gunakan untuk cek keyword density yang ada pada artikel yang kita tulis, selamat mencoba.

Cara Mengetahui Posisi Blog Di Google

Cara Mengetahui Posisi Blog Di Google

SEO blogart   11:56

Sudah tahu belum cara mengetahui posisi blog di Google?

Jika belum silakan baca cara mengetahui posisi blog di google yang akan saya tuliskan di sini, caranya mudah kok.

Berikut cara mengetahui posisi blog kita di Google :

1. Kunjungi http://www.seoserp.com/web_tools/google_top_1000_serps_checker.asp
2. Pilih Target Google terlebih dahulu, misalnya Google.co.id

3. Masukkan keyword tersebut , misalnya : "Cara Mengetahui Posisi Blog Di Google"
4. Masukkan URL blog , atau domain blog, misalnya : http://blog.ahmadrifai.net
5. Tekan tombol SERP, Tunggu sejenak.

Maka akan muncul hasilnya yang terbagi tiap urutan 1-100 , kemudian 101 sampai 200 dan seterusnya.

Nah itulah cara mudah untuk mengetahui posisi blog kita di Google, selamat mencoba dan semoga bermanfaat.

Tutorial Cara Pasang Burung Twitter Terbang Melayang

Tutorial Cara Pasang Burung Twitter Terbang Melayang

blogger tutorial blogart   22:10

Tutorial Blogger kali ini adalah tutorial cara pasang animasi burung twitter terbang melayang di blog, sebenarnya cara membuat / pasang burung twitter terbang ini sudah banyak ditulis oleh teman-teman blogger lainnya, dan ini mudah (asal kita tahu caranya).

Walaupun tutorial cara pasang animasi burung twitter terbang ini sudah banyak ditulis oleh blogger lain, tapi tidak ada salahnya kan jika saya tuliskan lagi di blog ini, siapa tahu ada pengunjung blog ini berminat ingin memasang burung twitter terbang di blog nya juga, namun belum tahu cara membuatnya.

Ok deh, saya rasa tidak perlu panjang lebar.

Cara Pasang Burung Twitter Terbang

Untuk memasang animasi burung twitter terbang di blog kamu silakan ikuti langkah-langkah berikut:

1. Login ke blogger
2. Klik menu Tata Letak

3. Klik Tambah Gadget, pilih gadget Html/JavaScript


4. Masukkan script animasi burung twitter terbang di dalam nya (script saya sertakan di bawah)
5. Simpan & Selesai

Berikut script animasi burung twitter terbang yang harus kamu pasang:

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2cjS7XDXWKUiRhmFLxROtf80p6-F-j4kQTpgXf6dms0dzq8CUcBIBg-8lKIiZ_h_nZy2ygKE6Cvz1i_YO3komOayOmFB8h6lrQDQnL5AioTuzGwIqGdtVq8_nbMr8umZ5gcQqA_5IQ4k/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/AkunTwitterKamu";
var tweetThisText = "Twitter - UserID";
tripleflapInit();
</script>

Keterangan

Silakan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2cjS7XDXWKUiRhmFLxROtf80p6-F-j4kQTpgXf6dms0dzq8CUcBIBg-8lKIiZ_h_nZy2ygKE6Cvz1i_YO3komOayOmFB8h6lrQDQnL5AioTuzGwIqGdtVq8_nbMr8umZ5gcQqA_5IQ4k/s1600/burung+twitter+terbang.png dengan warna burung yang kamu inginkan (pilihan warna burung saya sertakan di bawah) dan jika tidak kamu ganti maka burung twitter nya berwarna biru muda.
Ganti http://twitter.com/AkunTwitterKamu dengan alamat twitter kamu

Berikut beberapa pilihan warna burung twitter yang bisa kamu pilih
Burung Twitter Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTdj6ajoVJVJQVrjL3d-cD_XDQelkbtJ6OzqO0_mMOllf5MDzHxhj67m01esABXIU3wpk-jXdsWcTnxz8s424fwWIIVduVJpmTWKvf_Hlf-wLChC9bITMrVIBsZPmHbOsnpL8ptj9IRg/s1600/yellow+bird.png

Burung Twitter Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoyoWYoqHkuKFYkrRDnqgDdGbGNvw20ZKww0bf2s2of2EE7UxbiQkiS7-hOLnhcbzKXgGqqKlcGsVKrG-nARAswCG_EN5-SWasDhQ1NkvYT2vP10X7TlkB_ZJVbO3rn0M6R2Sdn-mnM8I/s1600/black+bird.png

Burung Twitter Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6aGhpb-1gzMkIffCTy6PwRvhmYIEVJ5PBWDKHI51K96VpHhof_rxw5BeiETBNTEcLYpGZS-ajqdAqyh_55G5dIBy62dTYUFBXFpQ_gKHeQuJECKAWKdMYZ6y3F4EpxLES75ODT1loNP4/s1600/brown+bird.png

Burung Twitter Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hmvcFhtpIG0m58oF3qLQikP3WQfJu7TRHemh-G9g-QkS-VOoeUe4EwAG1TuhaIh-VNQspz6Q4IJtGSfk9Je2nvaWOXctSptHN5vs81BS6awwKAoQVOgttKA-PCn3_uIa4qjzKhjYSSg/s1600/Green+bird.png

Burung Twitter Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVm43-iFLlbf8Du6l0WeyvbAy_xOlo6qLzTb6pUB278fjB7r_cwUgLxvLJ1GrRI3QFZ3fAOFh4Y2djRXl4gblBNpSMP66Hv8MaU-YN3kEbM3Otl8-rDV05NzRCLTrb711sAafRtnGSp7w/s1600/purple+bird.png

Burung Twitter Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9tx5y39tX5QonsjuPlQCzRCjdvFHbOAVAceBt3_z00-CaeDNgxQ-gFX1wrxyVr58PS9HdS5KaJUF8nuvr8yt0VTa4_hYmwE6qVpxEGB2tdGjjawFRB8JW8RJ_RGGQ9WWsp3Vexublp8A/s1600/white+bird.png

Burung Twitter Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAG3-DPYMz28AhM2oGTDaQUMNci4b7GvwpujgEXr94RlUjcypvlJPI5Z6GyL4BrIKUT5xSFTXJIiAS2Ooqvgq37SyoKSwDF9Y8-OrNlDD693t58n2hkoKa7DDuWiZbdLSChToKntesAhU/s1600/red+bird.png

Nah itulah beberapa warna burung twitter terbang yang bisa kamu gunakan. Sebaiknya hati-hati dalam mengganti alamat akun twitter dan warna burung, karena jika ada kode yang terhapus secara tidak sengaja saat kita menggantinya maka kemungkinan burung terbang tidak terlihat.

Selamat mencoba pasang burung twitter terbang di blog kamu, semoga bermanfaat dan semoga berhasil.

Cara Membuat Menu Terus Berada Di Atas (Floating Menu)

Cara Membuat Menu Terus Berada Di Atas (Floating Menu)

kode html blogart   21:53

Beberapa hari yang lalu ada yang bertanya bagaimana cara membuat menu horizontal yang selalu berada di atas seperti yang ada di blog ini.

Sebenarnya cara membuat menu horizontal yang terus berada di atas tersebut tidak terlalu sulit, namun terkadang menu tersebut tidak sesuai dengan template yang kita gunakan, karena struktur template nya yang berbeda, tapi karena salah satu pengunjung blog ini minta buat kan tutorial nya akhirnya saya putuskan untuk menuliskan cara membuat menu yang selalu berada di atas.

Cara Membuat Menu Terus Berada Di Atas

Langkah pertama yang harus dilakukan sudah pasti kita harus masuk dahulu ke dasbor blogger, kemudian:

1. Klik Tata Letak

2. Klik Tambah Gadget / Add A Gadget

3. Pilih Gadget Html/JavaScript

4. Masukkan kode berikut di dalamnya

<style media='screen' type='text/css'>
/*----- TOP -----*/
#top {background:#eee; color:#666; font-size:11px; line-height:30px; border-bottom:1px solid #ECEDE8;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#333; color:#fff; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #ddd; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#fff; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#999; line-height:12px; border:1px solid #ECEDE8; }
#search input:focus { background:#fff; border:1px solid #ddd; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_l1omek23N4KPQ-GdzHNDa7LJlgxGkM-c4Im9rbA_5Ez07Ulxb1FlnAJcgIioxO8rQDcfrGNtI-WN6Q17Vz-IpZ1eYanOwWKAYg5UX27zRUpUfKkKjJgNDN2iGS0ftO4nYwnaF7tgwg/s1600/iconsearchr.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>   
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
</ul>               
</div>
<div class='clear'/>
</div>

5. Simpan & Selesai.
Keretangan

Silakan ganti tanda pagar (#) dengan link / url halaman yang kamu mau.
Dan gantu tulisan Edit Menu Ini dengan nama menu yang kamu mau.

Bagaimana cara mengganti warna latar menu tersebut? 

Pada kode di atas ada kode #top {background:#eee;

Silakan ganti kode #eee dengan kode warna yang kamu mau, untuk menemukan kode warna silakan lihat di Daftar Kode Html Warna.


Nah itulah tutorial cara membuat menu horizontal yang selalu berada di atas yang bisa saya tuliskan. Selamat mencoba dan semoga bermanfaat.


Oh ia, jangan lupa baca juga Cara Membuat Menu Serta Sub Menu Tanpa jQuery

Cara Mendapatkan Script Buku Tamu Di Cbox.ws

Cara Mendapatkan Script Buku Tamu Di Cbox.ws

blogger tutorial blogart   20:34

Tutorial kali ini akan membahas panduan cara mendapatkan kode script buku tamu di cbox.ws dan memasangnya di blogger.

Tutorial ini sengaja saya buat untuk menjawab pertanyaan dari beberapa teman kita yang kesulitan untuk mendapatkan kode script buku tamu dari cbox.ws, dan sebenarnya ini tidak terlalu susah, asalkan kita mau teliti, dan juga tutorial ini khusus bagi mereka yang belum tahu bagaimana cara mendapatkan kode buku tamu atau di mana letak kode buku tamu cbox.ws, jadi bagi kamu yang sudah hafal dimana letaknya script buku tamu cbox.ws mungkin artikel ini akan membosankan, karena tidak ada perbedaan kok.

Oh ia .... Sebelum kamu mengikuti tutorial ini pastikan kamu sudah mendaftar di situs yang saya maksud, yaitu www.cbox.ws dan jika belum silakan daftar dahulu di sana. Untuk langkah-langkah pendaftarannya tidak saya tuliskan di sini.

Next...

Tutorial Cara Mendapatkan Script Buku Tamu

1. Silakan kunjungi www.cbox.ws kemudian Login di sana dengan akun yang sudah kamu miliki.

2. Klik Menu Publish!

3. Scrol ke bawah maka kamu akan melihat kode script buku tamu milik kamu.

4. Silakan kopi dan paste kode script buku tamu tersebut ke blog kamu.

Kamu bisa memasangnya di laman atau sidebar (widget) blog kamu, atau baca tutorial berikut ini:

1. Cara Membuat Buku Tamu Tersembunyi Di Sebelah Kanan
2. Cara Membuat Buku Tamu Tersembunyi Di Sebelah Kiri

Tampilan kode buku tamu juga bisa kamu pilih sesuai selera kamu dengan cara mengklik menu Look & Feel. Kemudian ada 3 menu lagi dan klik menu Style presets.

Berikut beberapa desain tampilan buku tamu yang sudah tersedia.

Jika kamu ingin mendesain / modifikasi sendiri tampilan buku tamu tersebut silakan klik menu Colours & fonts yang berada pada sub menu Look & Feel tadi.

Nah itu lah tutorial cara mengambil / mendapatkan kode script buku tamu di cbox.ws, selamat mencoba dan semoga bermanfaat.