BEBERAPA MACAM TRIK MEMPERCANTIK BLOG

Tips dan Trik Mempercantik Blog

Label : Tips, Tips Blogger, Trik blogger, Trick Blogspot, Belajar membuat blog, cara membuat blog di blogger / blogspot, cara memperbanyak pengunjung blog, meningkatkan traffik blog, langkah-langkah membuat blog, blogger widget, cara pasang buku tamu, blogger template, download free template, apa itu SEO, tips SEO, trik search engine optimization, membuat tombol navigasi di blog, memasang alat penerjemah bahasa di blog, membuat jump menu, memasang emoticon di blog, membuat kotak komentar dengan smile atau icon imut, install buku tamu melayang, membuat tab view terbaru, menampilkan postingan atau artikel yang berkaitan dan berhubungan di bawah postingan, related post di sidebar, tombol share on facebook, menampilkan postingan terbaru otomatis, komentar terbaru otomatis, promosikan blog di facebook, tehnik mencari duit di blog, cara di terima di google adsense, artikel yang berhubungan disertai gambar (thumbnail), recent post berdasarkan label dengan gambar thumbnail.

Meletakkan Widget Hanya Pada Halaman / Postingan / Link / Label Tertentu
Widget atau gadget biasanya di pasang dibagian sidebar (left-sidebar or right-sidebar), dibawah tab menu, atau di bagian bottom. Untuk alasan tertentu mungkin kamu ingin menampilkan widget itu hanya pada halaman utama blog kamu saja atau di halaman postingan saja, atau juga hanya ingin menampilkannya di link-link...

Meletakkan Widget Hanya Pada Halaman / Postingan / Link / Label Tertentu

Posted by Hitsuke at 1:55 AM . Mar 15, 2011

Browse » Home » Tips Blog » Meletakkan Widget Hanya Pada Halaman / Postingan / Link / Label Tertentu

Widget atau gadget biasanya di pasang dibagian sidebar (left-sidebar or right-sidebar), dibawah tab menu, atau di bagian bottom. Untuk alasan tertentu mungkin kamu ingin menampilkan widget itu hanya pada halaman utama blog kamu saja atau di halaman postingan saja, atau juga hanya ingin menampilkannya di link-link tertentu di halaman blog kamu.

Berikut ini akan dijelaskan cara melakukan hal yang demikian. Kode yang berwarna merah adalah kode yang harus kamu tambahkan. Lihat posisinya baik-baik yah^^ klo salah ga bisa di simpan template na. Untuk menemukan kode yang seperti dibawah ini silahkan menuju Dashboard pilih » Design » Edit HTML » Centang Expand Widget

Memasang Widget Hanya Pada Halaman Utama

Dengan menambahkan kode yang berwarna merah dibawah ini Widget atau Gadget yang kamu pasang hanya akan tampil di halaman utama blog kamu contohnya http://hitsuke.blogspot.com/ (perhatikan Recent Comment na dibagian bottom) sedangkan dihalaman postingan tidak akan muncul.

<b:widget id='HTML11' locked='false' title='Judul-Widget type='HTML'>

<b:includable id='main'>

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



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

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

</b:if>

<div class='widget-content'>

<data:content/>

</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Memasang Widget Hanya Pada Halaman Postingan

Kalau yang ini kebalikan dari kode sebelumnya. Kode ini hanya akan menampilkan widget atau gadget di Halaman Postingan blog saja contohnya seperti http://hitsuke.blogspot.com/2010/08/sms-gratis-lewat-internet-sepuasnya.html (perhatikan Buku Tamunya). Sedangkan di halaman Home Page atau halaman utama widget tersebut akan hilang.

<b:widget id='HTML10' locked='false' title='Judul-Widget' type='HTML'>

<b:includable id='main'>

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



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

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

</b:if>

<div class='widget-content'>

<data:content/>

</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Widget Hanya Pada Link atau URL Tertentu Saja

Kalau kamu mempunyai satu halaman blog yang paling sering dikunjungi oleh visitor mungkin kamu ingin meletakkan tambahan iklan yang hanya akan muncul pada halaman itu. Hal yang perlu kamu lakukan hanyalah meletakkan kode yang berwarna merah dibawah ini dan mengganti Blog_Page_URL dengan link blog kamu yang paling banyak diminati tersebut.

<b:widget id='HTML14' locked='false' title='Judul-Content' type='HTML'>

<b:includable id='main'>

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



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

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

</b:if>

<div class='widget-content'>

<data:content/>

</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Memasang Widget di Label Tertentu

Selain memasang widget atau gadget di link atau postingan tertentu kamu juga bisa memasangnya hanya pada label yang kamu inginkan.

<b:widget id='HTML15' locked='false' title='Judul-Content' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == "http://BLOG_NAME.blogspot.com/search/label/LABEL_NAME"'>



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

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

</b:if>

<div class='widget-content'>

<data:content/>

</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Membuat Gambar Selalu Melayang di Pojok

Floating Image - Membuat gambar selalu melayang di blog

Trik yang satu ini lebih dikenal dengan sebutan Floating Image walaupun sebenarnya bukan hanya image / gambar saja yang bisa dibuat mengapung tapi segala bentuk kode HTML termasuk menu yang apabila diletakkan didalam layer (tag) itu akan bisa dibuat selalu melayang mengikuti arah scroll alias selalu berada di bagian paling depan. Trik ini ada juga nama lainnya yang sering di sebut para blogger yaitu diantaranya ada yang mengatakan trik ini "membuat anu selalu di pojok", "menjadikan gambar selalu berada dibagian paling atas dan melayang di blog", "membuat menu / gambar mengapung" dan lain sebagainya. Baiklah langsung saja saya jelaskan cara membuat gambar selalu berada di pojok suatu halaman website kamu.

Langkah 1 : Pastikan kamu sudah login di blogger

Langkah 2 : Pada halaman Dashboard pilih » Design » Edit HTML » Centang Expand Widget

Langkah 3 : Cari kode ]]></b:skin> (gunakan tombal CTRL+F untuk mencarinya)

Langkah 4 : Letakkan kode dibawah ini sebelum kode tersebut

#hitsuke_corner {position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);}

Langkah 5 : Masih dibagian Edit HTML cari lagi kode </body> lalu tambahkan kode dibawah ini sebelum kode tersebut

<div id='hitsuke_corner'>
<a href='http://hitsuke.blogspot.com'>
<img border='0' src='https://lh6.googleusercontent.com/_IjrRiI_bVb0/TXN8NlmsaoI/AAAAAAAAHK8/ZaPFvSXIvAQ/Deidara.gif'/></a>
</div>

Langkah 6 : Save template kamu dan lihat hasilnya. Selanjutnya kamu edit dan pelajari sendiri yah ^^

Keterangan: kode yang dicetak tebal boleh kamu ganti sesukamu

Cara Memasang Flash di Blog

Menambahkan flash (.swf) di blog tentu saja akan membuat blogmu terlihat professional. Selain itu untuk membuat banner dalam bentuk animasi, extensi flash (*.swf) jauh lebh ringan dari pada gambar *.gif . Tidak hanya untuk widget dan gadget saja, flash juga bisa kamu pasang di dalam postingan dengan memasang kode berikut.

<embed src="https://sites.google.com/site/hitsukeproject/Green_Cycle.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>
Keterangan:

src="https://sites.google.com/site/hitsukeproject/Green_Cycle.swf" » lokasi file flash kamu berada
quality="high" » kualitas flash. bisa diganti dengan normal, medium, atau low
bgcolor="white" » untuk merubah warna latar belakang (background) flash tinggal merubah kode warna putih white ke warna yang kamu sukai. Boleh juga diganti dengan kode huruf dan anggka misalnya #ffffff untuk warna putih. Kalau mau pilih warna lain bisa kamu cari untuk merubah background flash menjadi transparan kamu bisa manambahkan kode wmode="transparent"
width="500" » untuk mengatur lebar flash
height="100" » untuk mengatur tinggi flash
pluginpage » ini maksudnya pemutar flash kamu. Boleh juga diganti sama yang lain. misalnya dengan
pluginspage="http://www.adobe.com/go/getflashplayer"

Sekian dulu yah. Oh iya, kalau kamu mau membuat banner, tulisan, photo slideshow, animasi dari flash sendiri ada banyak situs yang menyediakan layanan yang akan membuatmu lebih mudah dalam mengeditnya sesukamu. Mau tau nama situsnya apa? tanya om google aja yah ^^

Cara Mengganti Kursor

Cara Mengganti Kursor

Agar blog atau web mu terlihat lebih menarik, ada baiknya kamu mengganti kursornya. Kursornya bisa kamu design sendiri atau boleh langsung ambil dari sini saja yang penting extensinya harus bisa digunakan untuk dipasang di blog. Kalau aku tidak salah extensi kursor yang bisa dipasang di blog itu ada *.gif, *.ani, *.cur *.png, *.jpg. hm..nah cuma itu yang aku tau ^_^. Langsung saja ku kasih kode css untuk mengganti kursor di blog.

body, a {cursor: url(https://sites.google.com/site/hitsukeproject/kunai.cur), progress;} a:hover {cursor: url(https://sites.google.com/site/hitsukeproject/Pointer.cur), progress;}

Kode yang dicetak tebal bisa kamu ganti dengan gambar kursor sesuai keinginanmu. Image yang kunai.cur itu adalah kursor yang akan aktif sebagai kursor default sedang kang yang pointer.cur berfungsi ketika kamu mengarahkan mouse ke suatu link. Untuk pengguna blogger berikut ini akan aku jelaskan cara mengganti kursor di blog secara mendetail.

Langkah 1 : Pastikan kamu sudah login di Blogger

Langkah 2 : Pada halaman Dashboard pilih » Design » Edit HTML » Centang Expand Widget

Langkah 3 : Cari kode ]]></b:skin> (agar lebih mudah mencari kodenya tekan CTRL + F ) kalau sudah ketemu tambahkan kode yang ku berikan diawal tadi sebelum kode tersebut.

Langkah 4 : Kalau sudah jangan lupa di SAVE.

Merubah Judul Blog Sama Dengan Judul Postingan

Apa itu judul/title blog? judul blog biasanya muncul dihalaman default / utama blog kamu. Contohnya seperti gambar dibawah ini

Pada blogger biasanya judul postingan kamu akan didahului oleh judul/title utama blog lalu dilanjutkan dengan judul/title postingan kamu. Jadi formatnya seperti ini » Title Blog : Title Postingan . Di Search Engine Google akan tampak seperti

Setelah kamu memasang kode ini hanya judul postingan yang muncul di google

Nha tentunya orang akan lebih suka untuk memilih mengklik hasil seperti pada gambar yang kedua dari pada gambar yang pertama, ya kan? dan kalau menurut yang ahli dalam SEO (Search Engine Optimization) katanya cara ini akan membuat blog kita menjadi lebih Search Engine Friendly atau dengan kata lain blog kita lebih mudah mencapai halaman pertama di google atau bahkan bisa menjadi nomor 1 (satu) di Google. OK bagi yang mau mencobanya silahkan ikuti langkah-langkah berikut ini:

Langkah 1 : Masuk ke blogger » Pada Dashboard pilih Design » Edit HTML » Centang Expand Widget

Langkah 2 : Cari kode <title><data:blog.title/></title> biasanya terletak dibagian atas

Langkah 3 : Kalau sudah ketemu kode yang ada diatas tadi ganti kode itu dengan kode dibawah ini

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

<title><data:blog.title/></title>

<b:else/>

<title><data:blog.pageName/></title>

</b:if>

Langkah 4 : Jangan lupa di SAVE

Untuk halaman utama (home page) judul blog kamu akan tetap sama dengan yang kamu buat. Tapi perubahannya akan terlihat ketika kamu mengklik salah satu postinganmu maka yang menjadi judul blog adalah judul postingan itu sendiri. Sekian dulu. Selamat Mencoba ^_^

Cara mengganti logo icon di header bar [favicon]
aukah kamu apa itu favicon? Itu loh, kalau kamu menggunakan blogger maka favicon kamu akan tampak seperti logo blogger yang berlambangkan huruf B berwarna putih dan dikelilingi oleh background berwarna orange pada header bar. Mengerti? Kalau masih blom tau juga apa itu favicon bisa melihat screenshot di bawah ini.

Nah, Untuk merubah icon blogger pada header bar ada dua cara yaitu

1. Dengan menggunakan kode HTML biasa

Langkah 1 : Masuk ke blogger
» Pada Dashboard pilih Design» Edit HTML » Centang Expand Widget

Langkah 2 : Cari kode </b:skin> agar lebih mudah mencarinya tekan CTRL+F

Langkah 3 : Letakkan kode dibawah ini setelah kode </b:skin> tadi

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpuk1hEU1BOGlBSl_GbE3GySTN_tRY7efK_8_lxpRedWFhHqZXVVj3chWJUPps8VfbCxi4sDnrAwGPGDUnj1EfdmDaMauGApCl0-9LUyUwG3frJoygHDHZYn6iaWukG6iWI0twQIZjyXv/' rel='shortcut icon'/>

Langkah 4 : Save Template kamu

Catatan: Kode link yang berwarna merah itu adalah link lokasi gambar itu terletak. Kode itu bisa kamu ganti sesukamu. Tapi ingat ukuran gambarnya harus di sesuaikan.

2. Dengan Menambahkan kode JavaScript

Langkah 1 : Masuk ke blogger » Pada Dashboard pilih Design» Edit HTML » Centang Expand Widget

Langkah 2 : Cari kode </body> . Biasanya kode itu terletak dibagian paling bawah.

Langkah 3 : Letakkan kode dibawah ini sebelum kode </body> tadi

<script type="text/javascript">

//<![CDATA[

/******************************************

Header Link Icon 2.0

Favicon (C)2009 by Vebyo Arson
visit http://hitsuke.blogspot.com to get more cool hacks

********************************************/
//HEADER LINK ICON
var shortc = document.createElement("link");

shortc.rel = "SHORTCUT ICON";

shortc.href = "Image_Source/FavHeader.gif";

document.getElementsByTagName("head")[0].appendChild(shortc);

</script>

Langkah 4 : Ganti kode yang dtebalkan dengan warna merah dengan link gambar yang kamu inginkan.

Langkah 5 : Save Template

Highlight Admin / Author comment fungsinya adalah untuk membedakan komentar Admin / Author / Pengarang / Penulis atau bisa di sebut juga pemilik blog dengan orang lain. Contohnya bisa dilihat dari blog ini. Kalau Admin [hitsuke] yang memberi komenter maka komentar yang muncul ada gambar thumbnail Admin dan juga komennya diberi warna background dan sedikit border, pokoknya ada efek-efek lain githu lah (: . Baiklah, sudah siap semuanya? Berikut akan saya jelaskan bagaimana caranya membuat komentar admin blog berbeda dari komen selain admin.

Highlight AuthorComment

Langkah 1

Login dulu ke blogger terus pilih Rancangan > Edit HTML

Langkah 2

Beri tanda centang pada "Expand Widget Templates"

Langkah 3

Copy script berikut ini sebelum kode ]]></b:skin> atau copy kedalam kode css

.owner-Body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-u8V91KS7cjXXPGQiE3Kf6DN-RDPRA_qtHiIRgCx599Q9GC3QwSnAGVJm7MIjLzHF143CECdAeCrsaKzIspo9lftQlMWrry4mBc_wtpa_yFQVlT2YEy171ONdhQfwYa_p0NR9sZj9jLw/);background-position:top-left;background-repeat:no-repeat;text-align:justify;text-decoration:bold;margin:0;padding:10px 0 35px 90px}

.owner-Body p{background:#ffc;border:1px dotted #f5003d;margin:0 10px 15px;padding:10px 15px 10px 30px}

Ganti URL gambarnya dengan gambar sesukamu. Selebihnya otak-atik aja sendiri yah byar cepat pinter ^^

Langkah 4

Cari kode-kode berikut ini. Mungkin disetiap template kodenya akan berbeda, tapi walaupun berbeda cobalah cari kode yang semirip mungkin dengan kode dibawah ini

<dl id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

said...

</dt>

<b:if cond='data:comment.author == data:post.author'>

<dd class='owner-Body'>

<p><data:comment.body/></p>

</dd>

<b:else/>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

</b:if>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

Langkah 5

Kode yang berwarna Merah adalah kode yang harus kamu tambahkan ke HTML kamu dan posisinya harus benar. Ingat itu yah!!

Langkah 6

Kalau merasa semuanya sudah selesai di Save ya templatenya.
Comment author ini berfungsi berdasarkan profil dari pemilik blog. Jadi supaya efeknya muncul sebelum memberi komentar kamu harus login dulu di blogger. OK. Satu hal lagi yang perlu kamu ingat ini bukan untuk kotak komentar yang Haloscan melainkan yang murni dari blogger.

Cara Memasang Emotion / Smile di Blogger

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?

Emoticon Yahoo : - masih belum tersedia untuk saat ini

Gini nih cara membuatnya :

Langkah 1

Masuk Login ke blogger

Langkah 2

Pada halaman Dashboard langsung pilih Rancangan > Edit HTML

Langkah 3

Jangan lupa memberi tanda centang pada kotak "Expand widget template" lalu letakkan script berikut sebelum kode </body>

<script src="http://sites.google.com/site/hitsukeproject/smile2.js" type="text/javascript"/>

Contoh Punyaku

Langkah 4

Kemudian cari salau satu kode berikut ini :

<div class='comment-footer'>
atau kalau tidak ada

<p class='comment-footer'>

Pokoknya yang mirip itu lah...kalau punya ku seperti ini kodenya

<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
Langkah 5
Kalo sudah ketemu letakkan kode2 berikut setelah kode yang kamu temukan tadi

ne dy codenya yang harus kamu tambahkan

<b><img border='0' src='http://myspaceemoticon.com/image/naruto/naruto_pff.gif'/>
:f
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQPvJnDk0H-mLn0wmhNZ-BHZsSw4Kpi5z9QixTDg34l5BqDtOtuaUXz-EK0nfNKCYo1zdYwKtJPsmQFNIdhtQi4KJGoGzcJj6lxLN9tLVao-3n2aHslq_9xtUpESYAhsmSGutBr3bCjbSc/'/>
:D
<img border='0' src='http://www.onepiecehq.com/images/chibi/luffy.gif'/>
:)
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXoXdZEckr585xSoAW4Qhkp6fDo-LlIkHcTCwykvgpSl8EAkv0XhzG7m8JuLi7N5ykyUNNBQGOyGfrLuVnohhHhg46nHRSC34lVBdNXtTptQkwRdYyCk2CDNAtc9EwEd0NnLzt_eBK84Ox/'/>
;;)
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKppZjdj1j9WkKBIeSIjqAnM77T3Ba-gzVbNVBjSrKfNwgmsUzcn0SKv6LrQF-Qsn4Oy7bbkuw4sd5o22EKV0dDo02YYqLicWRPrtWJcKVCsSRkHdFSL28CM-7MdyOXBt7YjTVkZvLTLzJ/'/>
:x
<img border='0' src='http://msnsmileys.net/g/smileys/Gaara/Ashamed.gif'/>
:$
<img border='0' src='http://msnsmileys.net/g/smileys/Gaara/Scary.gif'/>
xundefined
<img border='0' src='http://myspaceemoticon.com/image/naruto/naruto_question.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJffilbMjiltX_qTjX7ffG8VZRprbjkc7KueAnzE47eIXWpRHddct9JPIiXcwrRA7ltOCTKQCp2cKZETg3H6_liqHDc8p7uzzZHVxyI-5jA7uv3p72A7mKmRI7a3gXVm6aJ0Ffa9QPc-Wx/'/>
:@
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSOKrRVdpYwG2PN_zrEeo3E1maRru-hUulDTIJlCTGJJ_n6jaXDAtUpo7V6wrodLWdIgngUhSJv0gkwOA6y4nL_8jW3OP26Id1k3FuWhtmB1KLPP1wkvdKmYFOz8rs13iDUBI0Bxvpm9T0/'/>
:~
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3CGBH-WhKVyH8vrRdLBUbRSlZ6C9A0W6fFqBD7Y4kGspxxY18GLct3dsfhqF9sl-qjA1acl4spNUm7B7_fjIPsxYUMXJ3HNQMJS70kUZCPZ_E81o8m_K6lFd4nVILYwqrUO2EVdbUe0C/'/>
:|
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGbPdh8v78zZ1bebfcgobiftkYf-xJxhQg4-xPXBB842fFmMZr_Z0nwbGY5V_8htNEJzmRgAsrmPs45qffP6JxG-r22ol97QAYw7wp5NGlZy2BK1aNOJMDb6kHdgRCV-E9DL2QEMBkWtdO/'/>
:))
<img border='0' src='http://lh5.ggpht.com/_IjrRiI_bVb0/TMPuMKpRC5I/AAAAAAAAFcc/qx7TuTHbR2s/sandy.gif'/>
:undefined
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9QsmZ79WRmzuZeXylau_3xJEvPiLRsLhyCe4wv2saC4E3mRgh46Trb2jLnThnFySVw4BWkgrXWAsgm4Sgej5RXghrlj-v0ZfPtV57d7bKWIBsU2XW1wJGSIg_N05_6di7fOjvtRw5qbvc/'/>
:s
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxcEpVy9-RYjpObmdl6sgkR52iAEp1ygxg_H1aHtk3fqU5NRrNOtD_zL6RmXz_bAT5HbCRp58FuvuZRcOOcA7WoIto6ccYMq80qPQc3hDnYJzF9ZtPI-ZH2qI3VedLX-QCP93aJo3w88UL/'/>
:undefinedundefined
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHdOyPe2p2lBIAHs4FGdO74iPmVS_NPtgocAkOXTgbpp9evbUloDZ0l_T2fhGJXzLT5Hn-fXchHB3Z6f91jMtrvSmOpLB_YLQ0yRv97rMzB6bq6bb6Z6ctAkbpDX9zXs7ryP3mAdWPEjf5/'/>
:o </b>

Setelah di tambahkan akan menjadi seperti

Langkah 6

Kalo sudah trus di "SAVE" dan coba lihat hasilnya

Contoh Kotak Komentar dengan Emotion atau Smile

Tambahan

*Biasanya kalau komentar di lakukan oleh pemilik blog itu sendiri icon smilenya tidak muncul. Untuk mengatasi hal ini ada baiknya kamu memasang Highlight Author Comment yang fungsinya untuk membedakan komentar admin blog dengan komentar yang lain.

Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.

Postingan Terbaru Berdasarkan Label [thumbnail]

Contoh Gambar

Recent Post Based on Label with Thumbnail Preview

Ini mungkin adalah inovasi terbaru buat sobat blogger. Bagaimana tidak, script ini akan menampilkan setiap postingan kita yang terbaru berdasarkan label yang kita inginkan secara otomatis disertai dengan thumbnailnya. Baiklah tidak usah banyak intermezo berikut akan saya jelaskan bagaimana caranya menampilkan postingan terbaru (recent post) berdasarkan label atau kategori.

Langkah 1

Pastikan sobat sudah login di blogger (kalau pake wordpress juga bisa kok)

Langkah 2

Pada halaman Dashboard pilih Rancangan > Add Gadget > HTML / Javascript

Langkah 3

Copy-Paste kode dibawah ini lalu edit kode sesuai dengan keterangan selanjutnya lalu masukkan kedalam kotak pop-up seperti gambar dibawah ini

Ini dia code yang harus dimasukkan kedalam kotak diatas

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}
</style><script src="http://sites.google.com/site/hitsukeproject/p-recent-post-thumbnail-v3.js">
</script><script>
var numposts = 8;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 250;
</script><script src="http://namablogkamu.blogspot.com/feeds/posts/default/-/labelname?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>

Langkah 4

Berikut ini adalah kode yang Boleh diganti

http://namablogkamu.blogspot.com/feeds/posts/default/-/labelname

1. Ganti tulisan namablogkamu dengan url blog sobat contohnya: hitsuke

2. Ganti tulisan labelname sesuai dengan label mana yang ingin sobat tampilkan

postingan terbarunya secara otomatis. Contoh: kalau menggunakan satu kata seperti
http://hitsuke.blogspot.com/search/label/Artikel
jadi yang perlu diganti adalah labelname dengan Artikel

tapi kalau menggunakan 2 suku kata seperti
http://hitsuke.blogspot.com/search/label/Photoshop%20Tutorial
maka harus ditambahkan %20 sebagai pengganti spasi.

3. Menampilkan postingan terbaru (recent post) berdasarkan label tinggal ganti feed URL-nya
http://yoursitename.blogspot.com/feeds/posts/default/-/labelname
Tapi kalau ingin menampilkan postingan terbaru tidak berdasarkan label gunakan kode dibawah ini
http://yoursitename.blogspot.com/feeds/posts/default

4. Jumlah postingan dan Panjang ringkasan yang ingin di tampilkan
var numposts = 20 - Angka 20 menunjukkan jumlah postingan yang ingin di tampilkan

var numchars = 320 - Menentukan panjang ringkasan (summary) yang ingin di tampilkan

Langkah 5

Jangan lupa di Simpan (SAVE). Sekarang lihatlah hasilnya. Sobat juga bisa menaruh kodenya didalam postingan seperti contoh berikut ini.

Sekian dulu ya tutorialnya. Mohon maaf atas s

Menghitung Jumlah Klik Suatu Link

Mungkin postingan ini akan menjawab pertanyaan berikut.
Bagaimana cara menghitung jumlah klik suatu link / URL di blog kita secara otomatis?
Bagaimana cara menganalisis setiap klik yang kita letakkan di blog?
Kalau ada orang yang memasang iklan di blog kita, lalu bagaimana cara kita melihat jumlah klik / visitor pada iklan tersebut perharinya?
Bagaimana cara mengetahui jumlah pengunjung yang mengunjungi blog kita khusus melalui buku tamu saja?

Nah, untuk menjawab semua pertanyaan diatas Google telah meluncurkan produk terbarunya yaitu Google Shortener URL. Google Shortener URL ini fungsinya adalah untuk memendekkan link kita yang panjang seperti contoh berikut ini

Link: http://hitsuke.blogspot.com/2010/08/sms-gratis-lewat-internet-sepuasnya.html

dipendekan menjadi (melalu metode 301)

Link: http://goo.gl/3Bh5

Jadi setelah anda memendekkan linknya, maka setiap klik yang terjadi pada link yang sudah anda pendekkan tadi akan dihitung dan dapat anda analisis dengan melihat detailnya. Kalau anda mau blog walking pendekkan saja URL blog / situs / web anda untuk melihat berapa jumlah visitor atau backlink yang anda dapatkan khusus dari blogwalking saja.

Google Shorter URL bukanlah satu-satunya fasilitas untuk memendekkan URL / Link yang panjang, sebenarnya layanan untuk memendekkan link ini ada banyak sekali salah satunya seperti yang anda temukan di twtter. Twitter menggunakan bit.ly untuk memendekkan URL yang di-tweet. Selain itu ada juga cara lain untuk memendekkan URL yang panjang ini sekaligus menghasilkan dollar / duit / uang setiap link itu di klik yaitu adf.ly. Saya sendiri juga menggunakan Adf.ly, lumayan belum satu bulan sudah dapat $12 dollar lebih (hehe sombong dikit). [Panduan Mendaftar di Adfly]

Contoh Layanan Alternative Penghasil Dollar Adf.ly

Bukti Pembayaran Pertamaku dari Adfly | Pembayaran kedua klik disini

Diantara layanan diatas terserah anda mau pakai yang mana semuanya sama-sama menggunakan data statistik untuk menghitung atau menganalisis jumlah klik link tertentu di blog anda. Kalau ada kesulitan dalam menggunakan layanan diatas silakan tanyakan saja melalu Cbox atau kotak komentar. Sekian dulu dan Terima kasih.

Memasang Widget atau Gadget Dasar Ter-POPULE

Maksudnya disini adalah memasang widget-widget yang paling di perlukan oleh blog dan juga paling populer di kalangan peblogger.

1. Yang asli dari blogger

Untuk memasang semua widget yang asli dari blogger ini silahkan pergi ke Rancangan > Element Hamalan > Tambah Gadget

Populer Post

Widget ini adalah widget terbaru dari blogger yang fungsinya menampilkan postingan kita yang paling banyak diminati oleh para pembaca secara otomatis.

Statistik Blog

Ini fungsinya untuk menampilkan jumlah pengunjung yang datang ke blog anda. Setiap pengunjung yang datang akan dihitung dan bisa anda lihat secara update.

Followers

Widget ini memungkinkan orang untuk mengikuti blog kamu dan juga menampilkan berapa banyak orang atau pengguna blogger lainnya yang menyukai blog kamu.

Link List

Widget ini berfungsi untuk memudahkan kamu dalam membuat link yang ingin kamu masukan kedalam blog, baik itu link blogmu sendiri, link situs favorit kamu, atau link blog lain kalau kamu mau bertukar link.

Labels

Menampilkan label di sidebar. Widget ini memudahkan pengunjung membaca blog anda berdasarkan topik yang mereka inginkan.

Arsip Blog

Menampilkan semua postingan atau tulisan anda dari awal ngeblog sampai yang terbaru saat ini.

2. Widget External ( yang bukan dari blogger)

Komentar terbaru [Recent Comment]

Memasang Widget Komentar terbaru di blog otomatis

Bagaimana ya cara menampilkan komentar tarbaru di blog? Nah, Widget ini berfungsi untuk menampilkan setiap komentar terbaru yang masuk di blog anda secara otomatis. Pasang Widget ini!

Postingan terbaru [Recent Post]

Postingan Terbaru di blog muncul otomatis

Kalau yang ini berfungsi untuk menampilkan postingan blog anda yang paling baru secara otomatis di halaman depan blog anda. Widget Recent Post ini ada dua macam, yaitu: Yang pakai gambar dan Yang tidak pakai gambar alias hanya link saja. Pasang Widget ini!

Flash Label

Hm..yang ini widget favoriteku. Widget ini menampilkan label / kategori blog dalam bentuk flash animasi githu. Ketika kita arahkan mouse kesitu labelnya akan langsung bergerak sesuai dengan arah mouse. Pokoknya keran lah. Saya sarankan widget Flash label cloud ini WAJIB di pasang..hehe.Pasang Widget ini!

Artikel yang berhubungan [Related Post]

Postingan yang berkaitan muncul otomatis di bawah postingan blog

Klo widget ini berfungsi untuk menampilkan artikel yang berhubungan dengan postingan anda secara otomatis sesuai dengan label / kategorinya. Kalau anda ingin jumlah page view anda meningkat, pasang saja widget ini, InsyaAllah visitor akan betah berlama-lama di blog anda. Pasang Widget ini!

Artikel yang berhubungan dengan gambar thumbnail

Sama seperti yang diatas. Cuma bedanya klo yang ini letaknya dibawah postingan dengan tampilan preview gambar postingan kita tersebut. Pasang Widget ini!

Semua Widget dan Gadget untuk Blog ada disini...!!

Nah semua widget diatas lah yang menurut saya yang harus kita pasang di blog kita. Mungkin cara pemasangan widget diatas dapat berubah sewaktu-waktu, jadi bila ada kesulitan dalam pemasangan widget tersebut silahkan tanyakan saja melalui kotak komentar di bawah ini. Terima kasih.

Cara Memasang Buku Tamu di Blog
Ada banyak layanan yang bisa digunakan sebagai buku tamu untuk blog kita. Diantaranya adalah shoutmix, cbox, oggix, dan lain sebagainya. Untuk kesempatan kali ini saya akan membuat tutorial mengenai cara memasang buku tamu di blog anda untuk pemula dilengkapi dengan gambarnya agar lebih mudah dimengerti. Dulu para...
Sep-26 - 2010 | 12 Comments | Read more»»

Mendesign Template Sendiri dengan Template Designer
Sekarang anda tidak perlu lagi mendownload template dari situs-situs penyedia template karena belum lama ini blogger telah meluncurkan fitur terbarunya yaitu Template Designer. Dengan adanya Template Designer ini anda bisa membuat template anda sendiri dan tentu saja hal ini memberikan kepuasan tersendiri bagi anda...
Sep-10 - 2010 | 8 Comments | Read more»»

Cara Meningkatkan Traffik Blog
1. BlogwalkingBuku TamuApa anda tau apa itu blogwalking? Blogwalking maksudnya mengunjungi suatu blog dan mengisi buku tamunya lalu pergi ke blog yang lain melalui buku tamu blog yang anda kunjungi tersebut dan begitulah seterusnya. Untuk blog yang masih baru, blogwalking tentu saja sangat diperlukan untuk...
Aug-18 - 2010 | 12 Comments | Read more»»

Mengganti Post Editor yang Lama dengan yang Baru
Seiring dengan berjalannya waktu, blogger terus membuat sesuatu yang baru agar mempermudah para penggunanya dan akhirnya dia meluncurkan post-editor yang baru dengan tampilan yang lebih sederhana dan menarik. Selain itu post editor ini juga banyak mengalami kemajuan seperti tersedianya tombol pengupload video, proses...
Aug-18 - 2010 | 1 Comment | Read more»»

Cara Membuat Textbox Area
Hidup ini untuk berbagi. Textbox Area ini sangat berguna untuk menuliskan text / kode di dalam postingan agar mudah di copy - paste juga untuk menghemat halaman postingan agar tidak terlalu panjang ke bawah. Selain itu textbox area ini juga dilengkapi dengan tombol Hightlight All / Select All yang berfungsi untuk...
Aug-05 - 2010 | 51 Comments | Read more»»

Sms Gratis Lewat Internet Sepuasnya Ke Semua Operator
Free SMSAlhamdulillah ada kabar baik buat sobat yang hobi sms-an. Sekarang sudah ada fasilitas sms gratis (bebas pulsa) alias tanpa bayar via internet tanpa batas ke semua nomor baik itu Telkomsel (Simpati, Halo, dan As), Indosat, (im3 dan Mentari), XL, Flexi, 3(three), Axis, Esia, Star One, pokoke kesemua operator...
Aug-03 - 2010 | 53 Comments | Read more»»

Kode-Kode Warna HTML
Langsung saja saya jelaskan mengenai kode warna pada HTML.Kode dibawah ini merupakan kode-kode warna dasar.Black (Hitam) : #000000White (Putih) : #ffffffBlue (Biru) : #0066ffOld Green (Hijau tua) : #006666Red (Merah) : #ff0000Yellow (Kuning) : #ffff00Green (Hijau Muda) : #00ff00Purple : (Ungu) : #ff00ffBlueSky (Biru...
May-09 - 2010 | 5 Comments | Read more»»

Memasang tombol Share on facebook versi 3
Facebook Developer telah mengembangkan tombol share on facebook sebelumnya dengan tombol share on facebook versi 3 yang dilengkapi dengan penghitung berapa kali halaman postingan blog / web kamu di sebarkan di facebookAda beberapa style yang bisa kamu pilih sesukamu1. Tombol share on facebook di sebelah kanan...
Jan-10 - 2010 | 9 Comments | Read more»»