Jumat, 04 Mei 2012

Memasang Emoticon Di Kotak Komentar Blogger

Diposting oleh Tebe Mukri di Jumat, 04 Mei 2012 ~ 19.31.00

Cikadueun Kampung Halaman-ku - Memasang Emoticon Di Kotak Komentar Blogger. Emoticon, mungkin inilah yang sering terdengar di telinga kita ketika kita sedang melakukan kegiatan chatting untuk mengungkapkan ekspresi emosi kita terhadap lawan chatting kita.

Emoticon bisa dipasang dikomentar blog dengan cara menambahkan beberapa kode saja pada template kita dan walla emoticon pun sudah bisa kita nikmati keberadaannya di blog kita. Emoticon ini bermanfaat bagi pengunjung yang ingin berkomentar dan ingin mengekspresikan emosinya pada tulisan komentar-nya. Tentunya dengan kita memfasilitasi kotak komentar blog kita dengan emoticon, maka kita akan mengetahui ekspresi pengunjung kita setelah membaca artikel kita. Berikut ini contoh emoticon-nya.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Nah bagaimana apakah sobat juga mau memasang-nya di bog sobat? Jika ya, silahkan ikuti langkah-langkah Memasang Emoticon Di Kotak Komentar Blogger berikut ini.

1.Log in ke blogger dengan akun yang anda miliki.

2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru, klik template » edit HTML » centang kotak Expand Template Widget.

3.Cari dengan menggunakan control+f kode </body> dan kalau sudah ketemu, pastekan kode di bawah ini tepat di atasnya.

<script src='http://colorfullink.googlecode.com/files/smiley_comment.js' type='text/javascript'/></script> 

4.Cari kode <p class='comment-footer'> dan kalau terdapat dua kode yang sama pilihlah kode yang pertama, dan letakkan kode di bawah ini tepat dibawahnya.

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; background: #ffffff; border: 1px solid #cccccc; padding: 5px; text-align: left;">

<b>

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width="18" /> :))

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width="18" /> ;))

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width="18" /> ;;)

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width="18" /> :D

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width="18" /> ;)

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width="18" /> :p

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width="22" /> :((

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width="18" /> :)

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width="18" /> :(

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width="18" /> :X

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width="18" /> =((

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width="18" /> :-o

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width="20" /> :-/

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width="18" /> :-*

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width="18" /> :|

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" width="24" /> 8-}

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" width="31" /> :)]

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" width="44" /> ~x(

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif" width="30" /> :-t

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" width="18" /> b-(

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" width="18" /> :-L

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width="34" /> x(

<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width="30" /> =))

</b>

</div>

5. Save template anda.

Sekian Tutorial cara Memasang Emoticon Di Kotak Komentar Blogger. Mudah-mudahan bisa bermanfaat bagi anda.

Selasa, 24 April 2012

Pasang Menu Navigasi Breadcrumbs Pada Blog

Diposting oleh Tebe Mukri di Selasa, 24 April 2012 ~ 00.46.00

Pada Tutorial Para Master Blogger Blogspot sudah banyak dibahas tutorial ini dengan judul Cara Memasang Menu Navigasi Breadcrumbs Pada Blog Tutorial tersebut ternyata amat berguna dan setelah dicoba memasangnya, sangat membantu menemukan isi blog halaman perhalaman yang dicari. Untuk itu, pengalaman ini Semilyar Trik bagi-bagi ilmu pada yang masih belum berhasil menggunakan trik sajian para Master. Terutama buat agan-agan Blogger yang belum mengeti apa yang dimaksud dengan Menu Navigasi Breadcrumbs Pada Blog dan manfaatnya Untuk SEO silahkan baca selanjutnya dan simak dengan seksama.

Berikut langkah-langkah yang harus agan-agan lakukan :

Pastikan agan-agan sudah masuk ke akun blogger milik agan-agan

Pilih Template

Klik Pada Tombol Edit HTML

Klik pada Tombol Proces atau Lanjutkan

Centang kotak kecil bertulisan Expand Widget Templates

Sebelumnya untuk mengantisipasi kegagalan, lakukan Download Template Lengkap agar tiada kesalahan dalam edit HTML

Cari kode berikut ini ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian Kode)
Setelah Ketemu Copy kode dibawah dan Paste Diatas kode ]]></b:skin>

/*---Navi Breadcrumbs---*/
#navi{padding:0px 5px;
margin:0px 0px 8px 0px;
color:#ffffff;
-moz-border-radius:5px;
font:11px trebuchet ms;
}

Sekarang Cari kode <b:if cond='data:post.title'>

Sudah ketemu <b:if cond='data:post.title'> ini. Copy kode berikut dan letakan tepat dibawahnya, apabila Kode ada dua gunakan kode yang pertama

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<div class='navi'>Location : <a expr:href='data:blog.homepageUrl'>Home</a> »

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'> , </b:if>

</b:loop>

</b:if> » <data:post.title/>

</div>

</b:if>

Sekarang Klik Simpan

Selesai dan lihat hasilnya.

Demikian Tutorial Tentang Cara Memasang Menu Navigasi Breadcrumbs Pada Blog yang bisa Semilyar Trik Blogspot sampaikan pada kesempatan ini semoga bisa membantu agan-agan Blogger beserta sahabat agan-agan blogger yang lainnya.

Senin, 23 April 2012

Cara Memasang Related Post Dengan Thumbnail

Diposting oleh Tebe Mukri di Senin, 23 April 2012 ~ 11.35.00

Memberikan menu navigasi yang sederhana dan mudah diakses oleh pengunjung adalah hal yang sangat baik untuk blog kita. Hal ini karena akan membuat pengunjung berlama-lama pada blog kita, dan menjelajahi satu persatu halaman yang tersedia di blog kita. Ini akan berimbas terhadap page view dan SEO blog kita.

Karena page view blog kita meningkat maka akan mengundang para pemasang iklan untuk memasang iklan-nya di blog kita. Dan efek buat SEO-nya adalah Google akan menyukai blog kita karena google suka blog yang memberikan fasilitas menu navigasi yang mudah di telusuri.

Pada beberapa hari yang lalu saya pernah posting artikel Cara Membuat Related Posts Di Sidebar dan Cara Membuat Related Posts Di Bawah Posting dan kali ini saya akan mengulas kembali artikel tentang related posts, tetapi kali ini berbeda, kita akan menambahkan gambar pada related posts-nya, jadi related post kali ini akan terlihat lebih menarik.

Bagaimana apakah anda juga ingin memasang-nya juga di blog anda? Ikuti langkah-langkah berikut ini.

1. Log in ke blogger.

2. Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru, klik template » edit HTML » centang kotak Expand Template Widget.

3. Cari kode </head> dan letakkan kode dibawah ini tepat diatas-nya.

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts-1 {
float:center;
text-transform:none;
height:100%;
width:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts-1 h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts-1 a{
color:black;
}
#related-posts-1 a:hover{
color:black;
}
#related-posts-1 a:hover {
background-color:#d4eaf2;
}
</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf8pB-BMzLijlfB6mYDPiq-zxZKhOJ01Pks4IJoT91w1oNNYNd6l6t9SU3VLMVb_TMHUR4yvvZYvLQk0LbxQDhs_NBs4CMpGMX9OcwQs8_amt66yL0Q5p6ljdwLYDjpmpH_nSZsVFtU_iI/s1600/no_image.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Bacaan Terkait";
</script>
<script src='http://contents-ente.googlecode.com/files/conten-ente.js' type='text/javascript'/></b:if>

Keterangan:
Kode yang berwana merah adalah jumlah related posts yang akan di tampilkan, anda bisa merubahnya sesuai keinginan anda.
Kode yang berwarna biru adalah judul dari widget related posts-nya, anda bisa merubah-nya sesuai keinginan anda.

4. Cari kode <div class='post-footer-line post-footer-line-1'> (biasanya dalam satu template terdapat dua kode <div class='post-footer-line post-footer-line-1'> , jika ada dua pilihlah yang kedua) Dan letakkan kode dibawah ini tepat dibawah kode <div class='post-footer-line post-footer-line-1'>.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://semilyartrik.blogspot.com/2012/04/cara-memasang-related-post-dengan.html'><img style="border: 0" alt="Cara Memasang Related Post Dengan Thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwvpRHtYM-5FExQd0glEgSLIj8483aDMEPQFbdteu7GOxpyT-qPxDMUVlvh22K14eJBa5jjZNyVuuyJbIsd7PAv7L6mEUL8rJLtzmAs1RdvlrXEeWMkwWVaoKBO4kWQEgCctRCLCzprNJ/s1600/tumbnail.png" /></a>
</b:if>
</b:if>

5. klik save template.

Selesai sudah langkah-langkah Cara Memasang Related Post Dengan Thumbnail bagaimana, mudah bukan? Semoga artikel ini bisa bermanfaat bagi anda.

Cara Membuat Menu Navigasi Slide Horizontal Blogspot

Diposting oleh Tebe Mukri di ~ 10.34.00

Ketika anda membuat blog di blogspot, anda tidak akan menemukan fitur menu navigasi seperti blog pada umumnya. Navigasi menu pada blospot biasanya berupa link list vertikal kebawah dan tidak berupa menu horizontal. Namun anda tidak perlu berkecil hati, karena kita masih bisa membuat menu di blogpsot secara horizontal. Menu ini berfungsi sebagai navigasi pembaca untuk melihat-lihat halaman lain atau kategori lain dalam blog anda. Pada posting ini kita akan belajar cara membuat menu di blogspot.

Sebelum anda mencoba membuat menu navigasi slide horizontal blogspot ini sebaiknya anda backup terlebih dahulu template anda, supaya jka terjadi error anda bisa melakukan restore kembali template blogspot untuk mengganti template blogspot anda.

Ikuti langkah-langkah berikut ini untuk membuat menu navigasi slide horizontal blogspot :

1. Login ke Blogger, masuk ke bagian design, lalu edit html dan berikan tanda centang pada expand widget template

2. Cari kode <div id='content-wrapper'> dan tambahkan kode berikut ini diatasnya. Jika anda tidak menemukan kode ini, usahakan anda taruh kode berikut ini diatas blogpost anda. Ini karena template tiap blog berbeda, dan tergantung template yang dipakai.

<div id='Menumainwrap-agan'>
<b:section id='NavbarMenu-agan'>
<b:widget id='HTML50' locked='false' title='MembuatMenu' type='HTML'>
<b:includable id='main'>



<b:if cond='data:title != ""'>

<h2 class='title'></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

</b:includable>
</b:widget>
</b:section>

</div> 

<div class='clear'/>

3. Lalu tambahkan juga kode berikut di atas kode ]]></b:skin>

#Menumainwrap-agan {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLcOZw2ZvgwyntGd7_xy9jEYKyGnYqXeVHIszNT66f_tz-pREVDNG4aIlVW3ydibXvmHPwwW6zeDx6ugYOOz5HEhDPyUH5Bmi3Y7mokmfstA-CJ4viN9jQZVzFOyIMy9j8ubUYgfI3LAe/s1600/nav-menu.jpg) repeat-x scroll 0 0 #222222;

border-bottom:1px solid #CCCCCC;

height:42px;

margin:0;

padding:0;

}

#NavbarMenu-agan {

width: 950px;

height: 41px;

font-size: 13px;

color:#333333;

margin: 0px;

padding: 0;

font-weight:bold;

font-family:arial;

margin: 0 auto;

}

#NavbarMenuleft-agan {

width: 950px;

margin: 0;float:left;

}

#nav-agan {

margin: 0;

padding: 0;

}

#nav-agan ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav-agan li {

list-style: none;

margin: 0px;

padding: 0;

}

#nav-agan li a,

#nav-agan li a:link,

#nav-agan li a:visited {

height: 22px;

color: #333333;

display: block;

font-size: 13px;

text-decoration: none;

margin: 0;

padding:10px 13px 9px 13px;

border-right: 1px solid #CFCFCF;

}

#nav-agan li a:hover,

#nav-agan li a:active {

color: #333;

margin: 0;

text-decoration: none;

background:#F0F0F0;

}

#nav-agan li li a, #nav-agan li li a:link,

#nav-agan li li a:visited {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWVzw3ukGd_wirv4DYlAJ-DODdEP3cE9-rN8a1vgMrr-697QKdhuvOStvhbvnHC2UoLH1G0BERQUcolQjcGR9jVpnTSVcYIwj7Pj5jhz31bzqBufkZjaMILlnJD_BJ8r1Tpez2IrlAoQE/s1600/nav-menu-1.jpg) repeat-x scroll 0 0 #f5f5f5;

min-width: 150px;

color: #333333;

font-size: 14px;

font-weight: normal;

float: none; margin: 0;

padding: 5px 10px;

font-weight:bold;

font-family:arial;

box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

text-align:left;

}

#nav-agan li li a:hover,

#nav-agan li li a:active {

background: #F5F5F5;

color: #333;

}

#nav-agan li {

float: left;

padding: 0;

}

#nav-agan li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin:0;

padding: 0;

border-top:1px solid #242424;

}

#nav-agan li ul a {

width: 140px;

}

#nav-agan li ul ul {

margin: -41.5px 0 0 176px;

border:none;

}

#nav-agan li:hover ul ul,

#nav-agan li:hover ul ul ul, #nav-agan li.sfhover ul ul,

#nav-agan li.sfhover ul ul ul {

left: -999em;

}

#nav-agan li:hover ul,

#nav-agan li li:hover ul,

#nav-agan li li li:hover ul,

#nav-agan li.sfhover ul,

#nav-agan li li.sfhover ul,

#nav-agan li li li.sfhover ul {

left: auto;

}

#nav-agan li:hover,

#nav-agan li.sfhover {

position: static;

}

Simpan template anda dahulu.

4. Buka page element cari gadget dengan nama ‘MembuatMenu’ yang berada di atas gadget posting blog, lalu klik edit dan masukkan kode berikut pada kotak content.

<div id='navbarmenuleft-agan'>

<ul id='nav-agan'>

<li><a href='/'>Home</a></li>
<li><a href ='#link-agan'>Menu 1</a>
<ul>
<li><a href='#link-agan'>Menu 1.1</a>
<ul>
<li><a href ='#link-agan'>Menu 1.1.1</a></li>
<li><ahref ='#link-agan'>Menu 1.1.2</a></li>
<li><ahref ='#link-agan'>Menu 1.1.3</a></li>
<li><ahref ='#link-agan'>Menu 1.1.4</a></li>
</ul>
</li>
<li><ahref ='#link-agan'>Menu 1.2</a>
<ul>
<li><ahref ='#link-agan'>Menu 1.2.1</a></li>
<li><ahref ='#link-agan'>Menu 1.2.2</a></li>
<li><ahref ='#link-agan'>Menu 1.2.3</a></li>
<li><ahref ='#link-agan'>Menu 1.2.4</a></li>
</ul>
</li>
<li><ahref ='#link-agan'>Menu 1.3</a>

<ul>

<li><ahref ='#link-agan'>Menu 1.3.1</a></li>
<li><ahref ='#link-agan'>Menu 1.3.2</a></li>
<li><ahref ='#link-agan'>Menu 1.3.3</a></li>
<li><ahref ='#link-agan'>Menu 1.3.4</a></li>

</ul>

</li>
</ul>
</li>
</ul>
</div>