Memasang Emoticon Kaskus di Blog

Emoticon adalah sebuah expresi yang digunakan oleh seseorang untuk mengexpresikan dirinya saat chatting atau menulis sesatu. Nah, Emoticon yang ini beda dari yang lain, yaitu Emoticon Kaskus. Siapa yang tidak tahu emoticon kaskus. Kali ini saya akan mengajak anda untuk meletakkan emoticon di komentar pada blog anda, agar tampak menarik.

Kaskus merupakan salah satu forum online 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, pasti komentar-komentar di blog anda akan terlihat menarik. Sekaligus blog anda akan tampak lebih interaktiv

1. Login ke akun blog anda

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://panji.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/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/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/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/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/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/sorry.gif' width='50'/> :sorry 
<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/rate5.gif' width='50'/> :rate5
<img class='smiley' height='50' src='http://static.kaskus.us/images/smilies/cool2.gif' width='50'/> :cool
</b>
</div>

5. klik Save Template / Simpan. 

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

Cara Memasang Breadcrumbs di Blogspot

Pada kesempata kali ini saya akan membahas tentang feature navigasi yang biasanya terletak di atas judul posting atau bisa juga di bawah posting. Breadcrumbs  dapat diartikan sebagai navigasi yang berisikan kategori-kategori dari posting yang diawali dengan tombol menuju home (halaman depan blog).

Breadcrumbs merupakan navigasi berbasis seo sebaris dengan tautan internal yang membuat pengunjung dapat kembali ke halaman depan blog dengan cepat.  Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.


Langsung saja kita ke tutorial pembuatannya :
1. Login terlebih dahulu ke akun blog anda.
2. langsung saja anda menuju Design => Edit HTML.
3. Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin> 

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}

4. Setelah itu, cari kode seperti ini :

<div class='post hentry uncustomized-post-template'>

5. Kemudian letakkan kode berikut ini tepat setelah kode <div class='post hentry uncustomized-post-template'>

Code Breadcrumbs :

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

6. Simpan Template.
 Semoga setelah memasang breadcrumbs, blog anda semakin seo. sekian dulu semoga bermanfaat.

Membuat Drop Cap pada awal Posting

Drop Cap adalah hurup awal yang diperbesar, mungkin 10x lipat dari huruf biasa. Nah, Drop Cap ini sering di pakai oleh sebagian orang karena menarik dan memperindah sebuah tulisan. Jika, anda berminat untuk membuatnya, silahkan ikuti tutorial di bawah ini. sangat mudah kok dalam pembuatannya.

1. Seperti biasanya Login dulu ke Blog anda.
2. Selajutnya klik Tab Design/Rancangan => klik edit HTML.
3. cari kode birikut ]]></b:skin> (klik CTRL+F lalu ketik ]]></b:skin> untuk mempermudah pencarian)
4. masukkan kode di bawah ini., di atas kode ]]></b:skin>

Copy Kode ini :

/* Drop Cap */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;

5. klik Save Template / Simpan. 
Untuk memakain Drop cap ini, anda harus memasukkannya lewat HTML pada postingan anda, buka lewat edit HTML template anda. ketikkan pada posting anda <span class="awal">huruf awal</span> ganti huruf awal dengan huruf yang ingin anda jadikan Drop Cap. Misalkan <span class="awal">K</span>.

SELAMAT MENCOBA

Membuat Daftar Isi Otomatis

Selamat siang!!! Pada kesempatan kali ini saya ingin membagi sedikit ilmu saya tetang cara membuat Daftar Isi/Site Maps. Daftar isi disini sangat di perlukan oleh sebuah blog. Karena daftar isi/site maps dapat memudahkan pengunjung dalam melihat artikel apa saja yang terdapat di blog anda. Selain itu daftar isi juga dapat meningkatkan seo blog anda. Kita akan membuat daftar isi secara otomatis bukan manual/satu per satu. untuk lebih jelasnya mari kita praktek bersama.

1. Login terlebih dahulu ke blog anda.
2. Selanjutnya klik tab Design/Tata letak
3. Kemudian klik Add Gadget/Tambah Gadget di lokasi yang anda inginkan.
4. Cari dan pilih HTML/Javascript
5. Copy-Paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :

Copy-Paste kode ini :

<div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="trik-panji.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

6. Kemudian klik Save/Simpan.

Keterangan :

• Link yang berwarna HIJAU, silahkan diganti dengan alamat Blog Anda;
• Width: 300px adalah merupakan lebar dari kotak daftar isi otomotis dan boleh anda sesuaikan.
• Height: 200px adalah merupakan tinggi dari kotak daftar isi otomotis dan boleh anda sesuaikan.

Selain itu, anda juga dapat menaruh kode untuk daftar isi pada posting anda. silahkan ikut langkah di bawah ini jika anda ingin menaruh script daftar isi di posting blog anda.

1. Klik Newpost untuk membuat posting baru.
2. Kemdian klik edit HTML (edit HTML disini yaitu html pada posting anda buka html template anda).
3. Selanjutnya Copy-Paste kode di bawah ini pada posting anda.

Copy-Paste kode ini pada posting anda :

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="trik-panji.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

4. klik Publish Post untuk mempublish daftar isi anda.

Nah, Sekarang anda dapat melihat daftar isi pada posting anda. Semoga tutorial kali ini bisa bermanfaat untuk blog anda. Selamat Mencoba.

Membuat Related Post

Related post merupakan salah satu widget yang harus dimiliki oleh sebuat blog. Related post dapat membantu pengujung dalam mengetahui artikel-artikel apa saja yang berhubungan dengan artikel yang sedang ia baca. Nah, pada kesempatan kali ini saya akan memberitahukan kepada anda bagaimana cara membuatnya. langsung saja kita prakter.

1. Tentunya Login ke akun blog anda.
2. Selanjutnya di dasboard klik Rancangan => Edit HTML dan Centang Expand Template Widget
3. Cari tag atau kode </head> dan copy-paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> 
Copy-Paste Kode Ini :

 <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;d
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. klik Save Template / Simpan. 

==========================================================================
1. Untuk menempatkan link related post sebanyak mungkin ganti angka yang berwarna HIJAU di atas dengan angka 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 layanan hosting gambar gratis seperti Photobucket, Imageshack atau blogger sendiri.
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 kode berikut ini :

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

SELAMAT MENCOBA