Cara mengganti tulisan poskan komentar dengan gambar/icon

Pada artikel saya sebelumnya kita telah membahas bagaimana cara membuat gambar atau animasi berada di pojok blog, kali ini kita akan coba mengganti tulisan poskan komentar yang terletak di atas kotak komentar dengan gambar  atau tulisan lain. Baiklah, tanpa panjang - panjang lagi mari kita langsung ke TKP.

1. Log ini dulu ke akun blog sobat.
2. Klik Rancangan --> edit HTML --> centang kotak Expand template widget.
3. Cari kode berikut:

<data:postCommentMsg/>

Biasanya kode tersebut ada 2. ganti ke dua kode tersebut dengan kode berikut.

<img src='http://i1108.photobucket.com/albums/h405/christian410/sderd.jpg' alt='Gambar Komentar'/> 

untuk menggantinya dengan tulisan lain, cukup mengganti kode berwarna biru dengan kata atau kalimat yang sobat inginkan.

Kode berwarna merah adalah Url gambarnya. bisa di ganti dengan Url gambar milik sobat.

Semoga membantu.

Colorpic | Software Untuk Mengetahui Kode Warna HTML

Colorpic software untuk mengetahui kode warna HTML, Colorpic adalah sebuah desktop color picker software atau alat (tools) untuk mengetahui kode warna html yang sangat berguna bagi web designer ataupun blogger untuk meng-edit website atau blog khususnya dalam hal pengetahuan dan edit warna. Bagi saya sendiri colorpic adalah software kode warna yang wajib saya miliki di komputer saya karena sangat membantu di saat saya kesulitan untuk mengetahui kode warna yang saya inginkan untuk meng-edit blog.

Cara kerja colorpic ini juga sangat mudah dan saya kira sobat juga pasti akan cepat bisa memahaminya, setelah selesai meng-instal sobat bisa langsung menggunakannya dengan hanya mengarahkan kursor atau mouse ke warna pilihan yang ada di desktop maka kode warna tersebut akan otomatis diketahui, mudah bukan? untuk screenshot nya sobat bisa lihat gambar yang ada dibawah, gambar ini adalah contoh untuk mengetahui kode warna kuning dari Yahoo Messenger emoticons.

Gambar diatas adalah contoh pengambilan kode warna kuning dari YM buddy, hanya dengan meletakkan kursor ke warna tersebut maka kodenya pun dapat diketahui, mudah kan? nah bagi sobat yang ingin download software colorpic ini silahkan langsung menuju ke situs Iconico dan bagusnya lagi software ini gratis tanpa bayar sepeser pun.

Memasang Widget "Berapa Harga Blog Anda" di Blog

Tahukah berapa harga blog anda?? Jika belum, apakah sobat ingin tahu?? kalo begitu mari kita langsung saja.
1. Kunjungi situs http://bizinformation.org/id.
setelah sobat masuk, sobat akan melihat tampilan seperti berikut.

2. Masukan URl blog sobat kedalam kotak yang di sediakan.
kemudian sobat akan melihat tampilan berikut.

3. Copas kode yang di dapat dan tampilkan di blog dengan cara.

4. Login ke akun blog sobat.
5. Klik rancangan --> Elemen Laman --> add gadget ( Tambah Gadget )
6. Pilih HTML/Javascript.
7. Pastekan kode tadi di dalamnya.
8. Beri nama widget sesuai keinginan anda. Misalnya, "Harga blogku" dll
9. Selesai..


SEMOGA MEMBANTU

Cara Mengganti Tulisan Older Post, Newer Post dan Home dengan Icon

Pernahkan sobat memperhatikan pada bagian paling bawah halaman posting sobat?? di situ sobat akan melihat tulisan "Posting lebih baru, beranda, posting lama ( Blog berbahasa indonesia ) atau Previous, Home dan next ( blog berbahas inggris )"  atau lebih tepatnya sobat bisa lihat gambar berikut.

Kali ini kita akan coba mengganti 3  tulisan tersebut dengan atau icon. Oke! kita langsung saja:
Untuk menganti tulisan posting lebih baru, beranda dan posting lama dengan icon, ikuti langkah - langkah berikut.
1. Login dulu ke akun blog sobat.
2. Klik rancangan --> Edit HTML
3. Cari dan ganti kode yang berwarna biru dengan kode yang telah disediakan.

<data:newerpagetitle> ganti dengan <img src="http://i1108.photobucket.com/albums/h405/christian410/dfer.png" alt="Next" />

<data:olderpagetitle> ganti dengan <img src="http://i1108.photobucket.com/albums/h405/christian410/Actions-media-seek-backward-icon.png" alt="Previous" />

 <data:homemsg> ganti dengan <img src="http://i1108.photobucket.com/albums/h405/christian410/home-icon.png" alt="Home" />

Kode yang berwarna merah bisa di ganti dengan Url gambar sobat..

4. Klik simpan template dan selesai.

Catatan!
Jika Template anda tidak men-support cara di atas atau kode yang di cari tidak di temukan di template blog sobat, maka ada baiknya sobat mencoba cara yang satu ini.

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> centang kotak Expand Template Widget.
3 Temukan 3 kode berikut ( Gunakan Ctrl F atau F3 )
   Cari ke 3 kode ini secara terpisah.


1

expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

2

expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

3


<b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>

 4. Ganti kode yang berwarna biru seperti cara yang pertama.

SEMOGA BERMANFAAT

Yahoo Messenger Emoticons (Smileys) di Blogspot

Cara membuat/memasang Yahoo! messenger emoticons di kotak komentar Blogger, YM emoticons adalah kumpulan smileys / ikon yang dimiliki oleh yahoo untuk menggambarkan atau mengekspresikan suasana perasaan kita pada saat kita chat sama teman-teman kita, ikon tersebut bisa dalam bentuk gambar yang bergerak maupun tidak, mungkin dari sobat blogger sudah tidak asing lagi dengan emoticons ini bukan? Yahoo emoticons ini bisa kita lihat pada software Yahoo messenger, bagi yang belum punya software YM bisa di download di situsnya Yahoo! biasanya sih online installer sama seperti aplikasi Windows Live Writer saat di-instal minta koneksi internet tapi yang full installer juga ada kok tinggal search aja di om Google

Cara Memasang Yahoo Messenger Emoticons di Kotak Komentar Blogger

Secara default kotak komentar (form comment) Blogger platform tidak dilengkapi dengan emoticons, tapi sobat jangan khawatir dengan sedikit tips dan trik kita bisa mengakalinya dengan memasang dan menambahkan sedikit script yang berisi beberapa kumpulan Yahoo messenger emoticons yang umum dipakai dalam chat.

Langkah-langkahnya adalah :

• Login di Blogger > Template > Edit HTML
• Centang pada Expand Widget Templates
• Cari kode dibawah ini

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Copy kode dibawah ini kemudian letakkan (paste) diantara kode diatas

<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 #2b2b2b; padding: 5px; height:86'>
<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>

Kemudian cari kode </body>

Copy kode dibawah ini dan paste tepat diatas kode </body>

<script src="https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/smiley.js" type="text/javascript"/><noscript><a href="http://blooger.co.id" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Terakhir simpan dan sobat sudah bisa menggunakan emoticon dari Yahoo ini.

Note

Trik memasang YM emoticon diatas tidak bisa diterapkan pada sistem komentar yang baru (threaded comment), tetapi kalau anda masih memasang sistem komentar yang lama pada blog anda tidak ada salahnya mencoba trik diatas

Tujuan blogging

Apa yang pertama kali terlintas ketika sobat membuat sebuah blog? Apakah sobat menghendaki kunjungan atau hanya sekedar ikut ramainya saja?? Saya rasa kita semua sepakat bahwa tujuan utama blogging itu adalah untuk menulis kemudian tulisan itu di baca oleh orang lain ( pengunjung ). Ada pertanyaan lagi untuk sobat blogger..

1. Jika sobat sudah punya blog, sudahkah sobat menulis di blog milik sobat ( tidak kopas )??
2. Adakah pengunjung di blog sobat? ( dari search engine )
3. Pernahkah sobat berpikir untuk mencari uang dari aktivitas blogging??

Tiga pertanyaan di atas, mewakili Tujuan utama di ciptakannya blog.

Kesimpulan dari 3 pertanyaan di atas adalah, ketika sobat membuat sebuah blog, isilah blog tersebut dengan konten orisinil yang asli dari ketikan jari sobat. kemudian optimalkan SEO onpage dan off page untuk mendapatkan pengunjung dari search engine. Dengan konten yang orisinil dan berkualitas, blog sobat pasti akan di sukai pengunjung dan om google. Dengan kata lain, pengunjung blog sobat akan semakin banyak dan sobat akan memiliki pengunjung tetap. Nah .. saat itulah sobat bisa mencari uang dari aktivitas blogging, entah itu dari jasa adsense ataupun jasa - jasa lainnya yang sobat bisa tawarkan di internet.

Semoga bermanfaat.

SEKIAN..!!

Membuat logo header secara online versi 2

Banyak hal yang bisa sobat lakukan di blog. Blog di ibaratkan sebuah kertas kosong yang harus sobat isi dengan sesuatu. Sesuatu itu seperti apa?? nah... kali ini ane akan kasih sesuatu untuk sobat blogger. Sebagai kelanjutan dari postingan sebelumnya yaitu membuat logo secara online versi 1, dengan kata lain, kali ini postingan ane tentu masih seputar header.
Langsung saja ya!!!

1. Pertama kunjungi situs Supalogo.
    Sobat akan melihat tampilan seperti berikut.

2. Masukkan judul blog sobat atau kata apapun yang sobat inginkan di kotak yang di sediakan.

3. Klik tombol Options. kemudian akan muncul tampilan berikut.

4. Atur sesuai keinginan sobat.
5. Klik generate.
6. Kemudian Klik DOWNLOAD
7. Selesai......


Untuk mengaplkasikannya di template sobat, sobat hanya perlu beberapa langka kecil saja. mau tahu??
1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman.
3. Lihat Gambar berikut.

4. Klik Edit. Kemudian muncul tampilan berikut.

5. Klik Browse kemudian pilih gambar yang di download tadi.
6. Tunggu beberapa detik hingga proses upload selesai.
7. Ketika proses upload selesai, beri tanda pada tulisan " SELAIN JUDUL DAN KETERANGAN.
8. Yang terakhir, sobat tinggal simpan templatenya.

Nah...!! Saatnya berkata.. SEMPURNA

Windows Live Writer | Menulis Artikel Blog Post Offline

Menulis artikel blog post dengan Windows Live Writer secara offline, Windows Live Writer adalah sebuah aplikasi desktop publishing blog yang dikembangkan oleh Microsoft yang merupakan bagian dari Windows Live, kegunaan aplikasi ini salah satunya adalah sobat bisa menulis artikel langsung dari desktop tanpa harus masuk ke dashboard editor blog untuk menulis artikel post

Selain itu sobat juga dapat menulis dan memasukkan foto secara offline dengan aplikasi Windows Live Writer (WLW) ini, hal itu sangat menguntungkan bagi sobat yang mempunyai koneksi internet yang lambat apalagi kalau hanya mengandalkan WIFI gratisan  untuk koneksi internet, jadi sobat bisa menulis banyak artikel dan disimpan di draft kemudian sobat bisa publish artikel post nya kapan saja sobat sempat, sangat menghemat waktu dan biaya bukan? sobat juga bisa memasukkan link (hyperlink), maps, tabel (table), video, tags dan masih banyak lagi yang lainnya. Tidak salah kenapa aplikasi ini banyak dipakai oleh para blogger diseluruh dunia karena kemudahannya itu, dan mungkin menjadi salah satu tools yang wajib dimiliki oleh penulis ataupun blogger.

Apakah Windows Live Writer Application berguna untuk SEO?

Jawabannya adalah “IYA” aplikasi ini juga bermanfaat untuk SEO, secara default Blogger platform tidak mendukung Self Pinging Service yang berguna untuk memberitahukan search engine bahwa sobat telah mempublikasikan artikel baru atau meng-edit artikel, tetapi dengan WLW hal itu bisa sobat lakukan. Itulah sebabnya kenapa sobat harus mencoba menggunakan aplikasi gratis ini.

Cara kerjanya adalah setiap kali publish artikel post baru lewat WLW, sobat bisa langsung ping artikel sobat dan dengan cara itu akan mempercepat artikel post sobat ter-index oleh search engine, dan juga service ini akan memberikan posisi yang lebih baik di SERP (Search Engine Result Page), tetapi selain itu sobat juga harus optimasi SEO onpage seperti menambahkan navigasi breadcrumb atau optimasi SEO offpage agar blog sobat lebih mantap di SERP, WLW ini hanyalah faktor kecil untuk optimasi SEO khususnya format penulisan artikel post yang benar dan SEO friendly

Cara untuk ping artikel post adalah buka Windows Live Writer kemudian Tools > Options > Ping Servers. Kemudian centang pada “Send pings to the url below”. Copy list url yang dibawah ini kemudian paste di kolom yang tersedia

http://rpc.pingomatic.com
http://rpc.twingly.com
http://api.feedster.com/ping
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://www.blogdigger.com/RPC2
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://blogsearch.google.co.za/ping/RPC2
http://blogsearch.google.com.au/ping/RPC2
http://blogsearch.google.com.br/ping/RPC2
http://blogsearch.google.com.do/ping/RPC2
http://blogsearch.google.com.vn/ping/RPC2
http://blogsearch.google.hr/ping/RPC2
http://blogsearch.google.ie/ping/RPC2
http://blogsearch.google.nl/ping/RPC2
http://blogsearch.google.pl/ping/RPC2
http://ping.kutsulog.net/
http://bulkfeeds.net/rpc
http://www.newsisfree.com/xmlrpctest.php
http://ping.blo.gs/
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://blo.gs/ping.php
http://www.pingerati.net
http://www.pingmyblog.com
http://geourl.org/ping
http://ipings.com
http://www.weblogalot.com/ping

Url ping servers diatas hanyalah beberapa saja dan sobat bisa mencari (search) list ping servers ter-update lainnya di Google

Cara Instal Windows Live Writer di Komputer

Untuk instal / pemasangan WLW ini juga sangat gampang, sobat hanya download aplikasi nya di situs Microsoft Windows Live Essentials dan langsung di-instal di komputer sobat pada saat online (online installer). Dibawah ini adalah sedikit contoh screenshot instalasi-nya yang saya ambil ketika saya memasangnya di komputer saya

Setelah sobat download dan instal maka akan mucul pemberitahuan aplikasi apa saja yang ingin di pasang, saya sarankan centang pada “writer” saja, tapi kalau sobat juga ingin memasang aplikasi lainnya sobat bisa pilih sesuai dengan keinginan sobat

Setelah proses instalasi selesai kemudian sobat masukkan blog sobat beserta username dan password blog sobat

Untuk pengguna wordpress sebelum mengisi semuanya diatas sobat harus login masuk ke dashboard terlebih dahulu. Masuk ke Setting > Writting dan turun kebawah dan centang pada XML-RPC seperti gambar dibawah, dan kemudian sobat lanjutkan dengan mengisi form seperti diatas

Kemudian terakhir klik finish dan sobat telah siap menggunakan aplikasi Windows Live Writer ini, bagi sobat yang sudah menggunakan aplikasi ini mungkin bisa sharing sedikit kelebihan-kelebihan lainnya atau kekurangannya. Kebetulan saya juga masih baru dalam menggunakan aplikasi ini jadi belum sempat menjelajahi kelebihan atau kekurangan lainnya

Good Luck Sob..!!

Membuat Gambar atau Animasi Berada di Pojok Blog

Sebelumnya saya sudah pernah memposting cara membuat gambar berada di pojok tanpa edit HTML, namun kali ini sobat di haruskan mengedit HTML blog sobat. Caranya cukup mudah.. Hanya beberapa langkah kecil saja dan dapat dipastikan pasti berhasil.
Sebenarnya Trik ini sudah banyak di posting oleh sobat - sobat blogger lainnya, tapi guna melengkapi postingan saya sebelumnya yang memiliki kekurangan, maka di tulislah artikel ini.
Oke sob, tanpa berlama - lama lagi mari kita langsung ke tutorialnya.

1. Pertama, Log in ke akun blog sobat.
2. Klik Rancangan --> edit  HTML
3. Kopas kode berikut di atas kode ]]></b:skin> ( Gunakan CTRL + F untuk memudahkan pencarian)

#trik_pojok {
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); }

4. Kode di atas akan membuat gambar berada di pojok kiri bawah (Bottomleft). Letakkan sesuai keinginan sobat.
Bottom = Bawah
Top      = Atas
Left      = Kiri
Right    = Kanan

5. Letakkan kode berikut sebelum kode </body>

<div id="trik_pojok">
<a href="http://www.blooger.co.idm/2011/11/membuat-gambar-atau-animasi-berada-di.html">
<img src="http://i1108.photobucket.com/albums/h405/christian410/Indonesia-icon.png" border="0" /></a>
</div>

6. Ganti tulisan berwarna merah dengan Url gambar sobat. Bisa juga sobat ganti dengan jam, kalender dan lain - lain.

atau bisa juga gunakan animasi ini 

http://i.mnpls.com/59/5990.gif

http://i.mnpls.com/1/162.gif

http://i.mnpls.com/167/16778.gif
7. Simpan template sobat dan lihat hasilnya.

GOOD LUCK

Membuat gambar berada di pojok tanpa edit HTML

Hai sobat!! Setelah sebelumnya IDE BAGUS memposting tentang  cara membuat link bergoyang, kali ini akan kasih tips bagaimana membuat sebuah gambar atau animasi berada di pojok blog tanpa edit html.


Trik ini sering juga disebut trik pojok atau trik sudut. Pada dasarnya sama saja dengan trik pojok lainnya, tapi bedahnya kali ini sobat tidak perlu meng utak - atik template blog sobat, dengan kata lain nggak ribet bro!!
Sebeleumnya mohon maaf ya.. karena script ini saya ambil dari blogger lain yaitu dari adiwidget, maka otomatis gambar tersebut kan mengandung link dari adiwidget. Tapi bagi yang tertarik memasangnya yuk kita meluncur ke TKP.

Klik  DEMO

1. Pertama, sobat log in dulu ke akun blog sobat.
2. Klik Rancanagn --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut kedalam kotak yang di sediakan.

<script language="JavaScript" src="http://entry44.googlecode.com/files/entry44bottomright.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrEK46vT6BiXPYRjfv7gZLqRVdinsypXLm_ivfcV9EAHeSqDvz6mdyhUriDYp4NuyZ77egbSewVutJnmaHKu2_gCIuHPnYFyxqiH46k07no3B3TyG44-ZWFoI3UENOdlAbvpTZMVvbMM/")</script>

4. Jangan beri nama widget.
5. Klik simpan.

Mudahkan???
Nb:
Ganti tulisan yang berwarna merah dengan letak widget yang sobat inginkan. misalnya topright, widget tersebut akan tampil di kanan atas blog sobat.
Ganti tulisan yang berwarna biru dengan Url gambar sobat atau bisa juga memakai url gambar di atas.

GOODLUCK

Membuat link bergoyang ketika di lewati pointer

Untuk sobat blogger yang hoby utak - atik blog, kali ini CHRIS akan kasih satu tips mantap untuk sobat. Masih seputar tips menghias blog, kali ini ane akan kasi tau cara membuat link bergoyang atau tak jarang juga di sebut Link senggol. Cara kerjanya seperti biasa yaitu ketika pointer mouse menyentuh link, link tersebut akan bergoyang. Kita langsung saja sob...!

Klik DEMO.

1. Pertama login dulu ke akun blog sobat .
2. Klik Rancangan >edit HTML

3. Letakkan kode berikut di atas kode </head>. ( Gunakan Ctrl + F untuk memudahkan pencarian. )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
 slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
 // creates the target paths
 var list_elements = navigation_id + " li.sliding-element";
 var link_elements = list_elements + " a";

 // initiates the timer used for the sliding animation
 var timer = 0;

 // creates the slide animation for all list elements
 $(list_elements).each(function(i)
 {
  // margin left = - ([width of element] + [total vertical padding of element])
  $(this).css("margin-left","-180px");
  // updates timer
  timer = (timer*multiplier + time);
  $(this).animate({ marginLeft: "0" }, timer);
  $(this).animate({ marginLeft: "15px" }, timer);
  $(this).animate({ marginLeft: "0" }, timer);
 });

 // creates the hover-slide effect for all link elements 
 $(link_elements).each(function(i)
 {
  $(this).hover(
  function()
  {
   $(this).animate({ paddingLeft: pad_out }, 150);
  },
  function()
  {
   $(this).animate({ paddingLeft: pad_in }, 150);
  });
 });
}

//]]>
</script>

<style type='text/css'>
ul.listpanah {list-style-image:url(&#39;http://i1108.photobucket.com/albums/h405/christian410/ty3-1.jpg&#39;);}

a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#669CFF;text-decoration:none;}
</style>

4. Klik Simpan.
5. Klik Rancangan > Klik ELEMEN LAMAN

6. Klik Tambah Gadget >

7. HTML/Javascript

8. Masukkan kode berikut kedalamnya.

<div class  id="sliding-navigation">  
<ul class="linksenggol">
  
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   1</a></li> 
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL  2</a></li>
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   3</a></li> 
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   4</a></li> 
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   5</a></li>
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   6</a></li>
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   7</a></li>
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   8</a></li>
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL   9</a></li>
<li class="sliding-element"><a href="GANTI URL"target="_blank">JUDUL 10</a></li>
 
</ul></div>

9. Klik simpan

N/b
Ganti Huruf yang berwarna biru dengan warna yang di inginkan. Untuk kode warna klik di sini!
Ganti huruf yang berwarna merah dengan URL yang sobat inginkan. ( URL artikel , Link Teman dll)
Ganti huruf yang bercetak tebal dengan judul yang sobat inginkan.

Sekian dulu ya gan!!!

TETAP SEMANGAT

Cara Buat Breadcrumb Seo Friendly di Blog

Breadcrumb navigation adalah sebuah menu yang dipakai untuk navigasi halaman sebuah website atau blog, sehingga akan memudahkan visitor atau pembaca untuk me-navigasi halaman blog atau website sobat. Dalam SEO, pemasangan breadcrumb adalah wajib yang sangat berguna untuk mempermudah seacrh engine untuk menjelajah atau crawling halaman blog sobat sehingga blog akan menjadi SEO friendly dan disenangi oleh search engine bot, dan juga blog sobat akan cepat ter-index oleh search engine ( Google khususnya )

Gambar diatas adalah contoh breadcrumb navigation yang saya ambil dari screenshot blog saya ini, kebetulan judul post-nya waktu itu adalah tentang burung twitter terbang, untuk membuat dan memasang breadcrumb saya kira tidak begitu sulit jadi sobat bisa membuat nya dengan tutorial blogger yang saya berikan berikut ini:

Cara Membuat Navigasi Breadcrumb Seo Friendly di Blogspot

• Login di Blogger
• Pilih Design 
• Pilih Edit Html
• Centang pada Expand Widget Templates
• Cari kode ]]></b:skin>
• Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

• Kemudian cari kode seperti di bawah ini

<div class='post hentry uncustomized-post-template'>
Kalau kode diatas tidak ada, coba sobat cari kode yang seperti dibawah ini
<div class='post hentry'>

• Letakkan kode dibawah ini tepat diatas salah satu kode biru diatas

<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,nofollow'><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>

• Klik save dan sobat sudah berhasil membuat Breadcrumb yang SEO friendly

Update

Membuat Breadcrumbs ter-index Google