Memasang Emoticon Kaskus di Blog

nah, saya updat lagi nie. :D . Saya kali ini aka mengajak sobat untuk Memasang Emoticon Kaskus di Blog. jadi, setiap penggunjung yang ingin berkomentar bisa memasang emoticon kaskus pada komentarnya.  

Kaskus merupakan salah satu forumonline terbesar di indonesia. emoticon kaskus ini sangat menarik dan membuat suasana forum terasa sangat hidup. nah, bagaimana kalo seandainya kita 

menaruh emoticon ini di blog sobat, pasting banyak tu yang koment-koment di blog sobat. sekaligus blog sobat jadi lebih interaktiv. :D.

 Langsung aja yuk kita ke TKP..

1. Masuk ke akun blog sobat. 

2. Selanjutnya di dasboard klik Rancangan => Edit HTML dan Centang Expand Template Widget

3. Kemudian cari kode </body> lalu copy-paste kode di bawah ini tepat di atas kode </body>

<script src='http://blogger-download.googlecode.com/files/emoticon-kaskus.js' type='text/javascript'/>

4. Selanjutnya cari kode <b:include data='post' name='comment-form'/> dan letakkan kode di bawah ini tepat di bawah kode <b:include data='post' name='comment-form'/>

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'> <b> <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/s_sm_ilovekaskus.gif' width='50'/> :ilovekaskus <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/I-Luv-Indonesia.gif' width='50'/> :iloveindonesia <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/cewek.gif' width='50'/> :kiss <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/s_sm_maho.gif' width='50'/>:maho <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/najis.gif' width='50'/> :najis <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/nosara.gif' width='50'/> :nosara <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/marah.gif' width='50'/> :marah <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/berduka.gif' width='50'/> :berduka <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/malu.gif' width='50'/> :malu: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/ngakak.gif' width='50'/>:ngakak <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/s_sm_repost1.gif' width='50'/> :repost: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/s_sm_repost2.gif' width='50'/> :repost2: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/sundul.gif' width='50'/> :sup2: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/s_big_cendol.gif' width='50'/> :cendolbig <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/s_big_batamerah.gif' width='50'/> :batabig <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/takut.gif' width='50'/> :takut <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/ngacir2.gif' width='50'/> :ngacir2: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/shakehand2.gif' width='50'/> :shakehand2: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/bingung.gif' width='50'/> :bingung <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/cekpm.gif' width='50'/> :cekpm <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/capede.gif' width='50'/> :cd <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/hammer.gif' width='50'/> :hammer <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/peluk.gif' width='50'/> :peluk <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/toastcendol.gif' width='50'/> :toast <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/hoax.gif' width='50'/> :hoax: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/cystg.gif' width='50'/> :cystg <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/selamat.gif' width='50'/> :selamat <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/jempol1.gif' width='50'/> :thumbup <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/jempol2.gif' width='50'/> :2thumbup <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/angel1.gif' width='50'/> :angel <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/matabelo1.gif' width='50'/> :matabelo <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/mewek.gif' width='50'/> :mewek: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/request.gif' width='50'/> :request <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/babyboy.gif' width='50'/> :babyboy: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/babyboy1.gif' width='50'/> :babyboy1: <img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLG2KKpxJ0ojtbpMF6X2p6rlTNK4NDwkQ62zApjbqClfKBihwZCPZbSo88On_YFWD-Jdwsd7AB1wCLPTLP1i379omY0pcCNVvmR0GgWLYbgYs1x5gvW5jCzJ0Tactp5iQBKVGYlbHvvcU/s1600/bayi+maho.gif' width='50'/> :babymaho <img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2aIzME-WtdXer8FPDuA43E5ediwy0cbupEPbo4hAgDDv8ESeVmA5uQ0c2AmYehC54oWpBbDq3xssjDysZQegTw1UfEfCBEO0Ea7o7e6QQBYpgqoPSnOJas0YYgS7rh9rIKqa2r6R5do/s1600/bayi+ngakak.gif' width='50'/> :babyboy2: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/babygirl.gif' width='50'/> :babygirl <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/sorry.gif' width='50'/> :sorry <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/kaskus_radio.gif' width='50'/> :kr: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/traveller.gif' width='50'/> :travel <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/nohope.gif' width='50'/> :nohope <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/kimpoi.gif' width='50'/> :kimpoi <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/ngacir3.gif' width='50'/> :ngacir: <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/rate5.gif' width='50'/> :rate5 <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/cool2.gif' width='50'/> :cool <img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/bola.gif' width='50'/> :bola </b></div>

5. Simpan Template sobat dan lihat perubahan yang terjadi.

Di atas form komentar sobat sudah terdapat emociton kaskus dan sobat dapat mencoba emoticon tersebut bisa atau tidak. Jika tidak bisa sobat dapat berkomentar di sini agar saya dapat membantu agar masalah sobat dapat teratasi.

Selamat Mencoba

===============================

Source : http://caraonline.blogspot.com

================================

Read More ..

Membuat Related Post

Saya hadir lagi. :D. kali ini saya akan membahas tentang cara Membuat Related Post. Contohnya dapat sobat lihat pada gambar di atas. keren kan.. Gampang aja kok cara membuatnya. asalkan sobat mengikuti dengan baik langkah-langkah yang saya berikan. nah, dari pada kelamaan, langsung aja yuk kita praktek di TKP.

Langkah Membuat Related Post :

1. Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► Layout ► Edit HTML
2. Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
3. Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> 

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot; http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } #related-posts ul li:hover { background-color:#E2EBF8; border-top:1px dotted #cccccc; } </style> <script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>

Cari kode <p><data:post.body/></p> . kode pada setiap template biasanya berbeda beda. kode biasanya seperti ini <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.


Setelah sobat mendapatkan kode <p><data:post.body/></p>, lalu copy-paste kode dibawah ini tepat di bawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

4. Selanjutnya simpan Template sobat

1. Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.

2. Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL  gambar yang berwarna merah dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa hosting gambar gratis seperti photobucket dan imageshack atau di blogger sendiri di sini.

3. Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode

#related-posts ul li:hover { background-color:#E2EBF8; border-top:1px dotted #cccccc; }

SELAMAT MENCOBA

=========================================

Source : http://creatingwebsite-maskolis.blogspot.com

=======================================

Read More ..

Membuat Daftar Isi Otomatis

akhirnya bisa juga update ni blog. udag lama tidak blogging. :D. langsung aja yuk ke topik bahasan. nah, kali ini saya akan membahas bagaimana cara Membuat Daftar ISI Otomatis pada blog. Daftar isi ini akan secara otomatis meng-index artikel kita, jadi kita tidak perlu lagi repot-repot membuat memasukkan artikel kita satu-persatu ke dalam daftar isi. lansung aja yuk ke TKP.

Untuk membuat daftar isi otomatis dapat sobat lakukan dengan cara berikut ini :

1. Masuk ke account blogger anda
2. Pilih tata letak/layout
3. Pilih tambah gadget
4. Pilih HTML/javascript.
5. Beri Judul Dafar isi atau judul sesuai dengan keinginan sobat

Kopas kode di bawah ini

<div style="overflow:auto;width:430px;height:120px;padding:10px;border:1px solid #eee"><script style="text/javascript" src="http://sites.google.com/site/barajajs/listofcontent/contents.js"></script><script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in script&callback=loadtoc"></script> </div>

Ket :
namablog.blogspot.com = Ganti dengan alamat blog sobat.
width:430px : Ganti Lebar sesuai dengan yang sobat inginkan, sesuaikan dengan template.
height:120px : Ganti tinggi nya sesuai dengan keinginan sobat


6. Kemudian save dan letakkan sesuai dengan keinginan sobat.


Jadi, deh daftar isi sobat. Selamat Mencoba.

================================================

Sumber : http://barajakom.blogspot.com

================================================

Read More ..