Coffee Break

Cara Membuat Buku Tamu Tersembunyi di Blog

Widget Buku Tamu / Guestbook dapat anda pasang di blog anda dan letaknya akan tersembunyi, namun apabila cursor mouse diarahkan pada tulisan / widget buku tamu maka secara otomatis widget buku tamu / guestbook akan muncul dengan sendirinya. Dengan menyembunyikan widget buku tamu atau guestbook ini akan membuat ruang blog anda semakin irit Jika anda tertarik dengan tutorial blog mengenai cara membuat buku tamu auto hide di blog silahkan simak caranya dibawah ini.

Untuk membuat auto hide buku tamu/shoutbox tentunya anda harus mempunyai widget buku tamu. Anda dapat membuatnya di www.shoutmix.com dan cbox.ws atau penyedia layanan buku tamu lainnya.

Cara membuat buku tamu tersembunyi / auto hide di blogger.
1. Login ke blogger
2. Pilih Tata Letak => Tambah Gadget => Html/javascript
3. Masukkan kode berikut kedalam Html/javascript

KETERANGAAN :
Silahkan anda ubah teks warna merah dengan kode buku tamu anda.

Silahkan diterapkan tutorial blog tentang Cara Membuat Buku Tamu Tersembunyi di Blogger, semoga bermanfaat untuk anda semua, selamat berkarya.

Pasang Emoticon KASKUS di Kotak Komentar blog

Dan yang akan saya jelaskan sekarang adalah bagaimana Pasang Emoticon KASKUS di kotak komentar blog anda. Untuk Emoticon KASKUS begini ini penampakannya

Dengan banyak alternatif emoticon, semoga blog sobat jadi lebih rame dan ekspresif ya. Langsung saja yang pengen pasang emoticon KASKUS diatas, berikut ini langkah-langkahnya
1. Pertama,seperti biasa harus login blogger dulu, trus menuju ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/jempol2.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/bingung.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/hammer.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/najis.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/capede.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/s_sm_maho.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sorry.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngacir2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/cewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/malu.gif' alt='' width='40' class='smiley'/>");
b.item(i).innerHTML = _str;
}
}
}
a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'comment-body-author') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/jempol2.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/bingung.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/hammer.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/najis.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/capede.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/s_sm_maho.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sorry.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngacir2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/cewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/malu.gif' alt='' width='40' class='smiley'/>");

c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

4. Kemudian cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Ketemu kan?Kalo sudah ketemu letakkan kode2 berikut setelah kode
<p class='comment-footer'>
(kalo ada dua buah kode diatas, pilih yang lebih dibawah)

<b><img src='http://uniqueinterestingfacts.com/blog-triks/sundul.gif' width='40'/>

:a:

<img src='http://uniqueinterestingfacts.com/blog-triks/jempol2.gif' width='40'/>

:b:

<img src='http://uniqueinterestingfacts.com/blog-triks/bingung.gif' width='40'/>

:c:

<img src='http://uniqueinterestingfacts.com/blog-triks/ngakak.gif' width='40'/>

:d:

<img src='http://uniqueinterestingfacts.com/blog-triks/hammer.gif' width='40'/>

:e:

<img src='http://uniqueinterestingfacts.com/blog-triks/najis.gif' width='40'/>

:f:

<img src='http://uniqueinterestingfacts.com/blog-triks/capede.gif' width='40'/>

:g:

<br/><img src='http://uniqueinterestingfacts.com/blog-triks/s_sm_maho.gif' width='40'/>

:h:

<img src='http://uniqueinterestingfacts.com/blog-triks/takut.gif' width='40'/>

:i:

<img src='http://uniqueinterestingfacts.com/blog-triks/sorry.gif' width='40'/>

:j:

<img src='http://uniqueinterestingfacts.com/blog-triks/marah.gif' width='40'/>

:k:

<img src='http://uniqueinterestingfacts.com/blog-triks/ngacir2.gif' width='40'/>

:l:

<img src='http://uniqueinterestingfacts.com/blog-triks/I-Luv-Indonesia.gif' width='40'/>

:m:


<img src='http://uniqueinterestingfacts.com/blog-triks/cewek.gif' width='40'/>

:n:

<img src='http://uniqueinterestingfacts.com/blog-triks/shakehand2.gif' width='40'/>

:o:

<img src='http://uniqueinterestingfacts.com/blog-triks/malu.gif' width='40'/>

:p:


</b>

6. Langkah terakhir dan terpenting adalah SAVE TEMPLATE

Kemudian coba akses blog sobat, lalu klik salah satu postingan, kalo di kotak komentar keluar emoticonnya,berarti sobat melakukan langkah2 tersebut dengan benar "MISSION COMPLETE".SELAMAT MENCOBA ya sobat semoga berhasil.

Catatan
@ Kadang-kadang ada beberapa template memiliki kode yang beda. Jika sudah melaksanakan cara2 di atas dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode pada templatenya berbeda atau bisa jadi karena mugnkin hosting untuk upload file emoticon dan javascriptnya sedang bermasalah.

Sumber : http://riskimaulana.blogspot.com/2012/06/pasang-emoticon-kaskus-di-kotak.html#ixzz2fyFN7WbP

Cara Mengganti Cursor Blogspot

Kalau biasanya cursor pada blog kita hanya berbentuk icon tanda panah ya, mau tau bagaimana cara mengganti cursor pada blog,ikuti trus setelah yang satu ini he he he . .
Langsung aja...

Pertama login dulu
2. masuk ke tata letak >> Elemen Laman
3. Tambah Gedget
4. Pilih HTML/JavaScript
Masukkan code Berikut :

<style type="text/css">body {cursor:url("http://document-strings.co.tv/images/gembel-cursor.cur"),default}</style>

anda bisa mengganti cursornya dengan yang di bawah ini:

http://cursor.com/images/10a.gif

http://cursor.com/images/11a.gif

http://cursor.com/images/12a.gif

http://cursor.com/index_07.gif

http://cursor.com/images/19a.gif

http://cursor.com/images/20a.gif

http://cursor.com/images/25a.gif

http://cursor.com/images/33a.gif

http://cursor.com/images/40a.gif

http://cursor.com/images/85a.gif

http://cursor.com/images/103a.gif

http://cursor.com/images/199a.gif

http://cursor.com/images/6385a.gif

http://cursor.com/images/6459a.gif

http://cursor.com/images/8150a.gif

NOTES: Ganti text yang berwana merah dengan alamat cursor tersebut.

5. simpan template , lihat hasilnya . .

Cara Membuat Popular Post Warna Warni Di Blogger

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.

(gambar)

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:

Klik menu Tata Letak / Layout

Klik Tambahkan Gadget / Add a Gdget

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.

(gambar)

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

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 Blog Gratis di Blogger

Cara Membuat Blog Gratis di Blogger - Sebagaimana yang telah kita ketahui bersama bahwa banyak cara atau layanan untuk Blog gratis diantaranya adalah blogger/blogspot, wordpress, joomla, blog detik dan lain-lain. Namun pada kesempatan ini, saya akan membahas bagaimanacara membuat blog khususnya blog yang berplatform blogger. Sebelum membahas lebih jauh tentang cara membuat blog, ada baiknya saya juga menjelaskan sedikit pengertian blog. Blog pada dasarnya disebut sebagai "Web Blog" yang merupakan salah satu aplikasi web yang mana postingan atau artikel yang diposting didalam blog sering sekali berurutan, yaitu dari tulisan terbaru hingga tulisan yang paling lama.

Sebelum blogger/blogspot berkembang seperti sekarang, blog pada umumnya sering dijadikan sebagai diary online yang di isi dengan catatan-catan harian. Namun dizaman modern seperti sekarang ini, blog juga dapat dijadikan sebagai mesin penghasil uang. Hal ini mungkin yang menjadi salah satu alasan mengapa orang mulai membuat blog. Terlepas dari itu, sebenarnya kegiatan blogging adalah tergantung dari niat si pemilik blog, apakan untuk mencari tambahan uang saku atau ada hal yang lainnya.

Cara Membuat Blog di Blogger

Syarat utama sebelum Anda membuat blog di blogger adalah memiliki alamat email yang masih aktif, jika Anda belum membuat email, silahkan baca tutorialnya di cara membuat email di gmail atau membuat email di yahoo. Sekarang saya asumsikan bahwa Anda sudah memiliki alamat emai di gmail, untuk itu kita langsung saja untuk membuat blog.

1. Silahkan Anda kunjungi http://blogger.com/

2. Kemudian lihat di kanan bawah, rubah bahasa menjadi bahasa indonesia agar lebih mudah

3. Masuk/login menggunakan username/nama pengguna serta password gmail anda ( akun email anda bisa juga untuk login ke blogger).

4. Isilah formulir data Anda yang terlampir seperti:

Nama tampilan : isi dengan nama yang akan ditampilkan pada profile blog anda.
Jenis Kelamin : pilih jenis kelamin Anda, misalnya: Pria.
Penerimaan Persyaratan : Ceklis sebagai tanda anda setuju dengan peraturan yang telah di tetapkan oleh pihak blogger. Sebaiknya baca terlebihdahulu persyaratan dan ketentuan yang diberikan pihak blogger agar Anda mengerti.

5. Klik tanda panah bertuliskan “Lanjutkan”. Kemudian klik "Blog Baru"

6. Selanjutnya isi formulir data blog Anda pada form yang disediakan seperti:

Judul : Isi dengan judul blog yang Anda inginkan, misal : Panduan dan Tutorial Blogger
Alamat : isi dengan alamat blog yang di inginkan.
Template : pilih template (tampilan blog) yang Anda disukai

7. Lanjutkan dengan klik tombol “Buat blog!”.

8. Sampai tahap ini blog Anda sudah selesai dibuat, namun untuk menghindari anggapan spam oleh google sebaiknya anda mulai membuat artikel, minimal 1 postingan. Untuk membuat postingan/artikel ikuti tutorial blog berikut ini.

9. Klik tulisan "Mulai memposkan

10. Isi judul dan artikel yang ingin Anda postkan di blog

11. Setelah tulisan Anda selesai lalu klik "pratinjau" untuk melihat hasil sementara, jika sudah sesuai maka klik "publikasikan"

12. Selesai dan saya ucapkan "Selamat" publikasikan juga bog baru Anda pada sahabat atau orang terdekat Anda bahwa sekarang anda sudah memiliki blog.

Demikian yang dapat saya sampaikan mengenai tutorial cara membuat blog gratis di blogger, semoga bermanfaat. Pastikan Anda selalu setia mengunjungi Coffee Breaks

Cara Membuat Buku Tamu Tersembunyi di Blog

Pasang Emoticon KASKUS di Kotak Komentar blog

Cara Mengganti Cursor Blogspot

Cara Membuat Popular Post Warna Warni Di Blogger

Cara Membuat Blog Gratis di Blogger

Cara Membuat Blog di Blogger

Like us On Facebook

Subscribe us

Popular Posts

Labels

Advertise

Contributors

Followers