Backlink

                                           بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Banyakin backlink kalau mau dapat ranking bagus di search engine! Submit ke social bookmark untuk dapat backlink!

Namun sebenarnya, makhluk apa sih backlink itu? Sejenis undur-undur-kah? Atau masih ada hubungannya dengan spesies monyet biru? Bagi yang sudah mengenal jauh tentang SEO tentu akan manggut-manggut saja.

Tapi bagi newbie, mendengar kata backlink mungkin akan sama membingungkannya dengan pada saat mereka mendengar nama domain “llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch.com“. Nah supaya gak bingung lagi, mari kita intip bersama sosok sebenarnya dari backlink.

Apa Itu Backlink?

Bahasa sederhananya, backlink atau tautan balik adalah link atau tautan yang didapat oleh situs kita dari situs lain. Misalnya, situs A memberikan link ke situs B, ini berarti situs B baru saja mendapat backlink dari situs A. Berarti pula, situs B saat ini memiliki 1 buah backlink. Tidak susah kan konsepnya? 

Macam Backlink

Dari arusnya, backlink dapat dibedakan menjadi 3 bagian:

• One-way backlink

• Two-way backlink

• Three-way backlink

Yang pasti menjadi pertanyaan, mana di antara ketiganya yang paling baik? Jawabannya tergantung dari dua skenario berikut ini:

• Apabila situs yang memberikan backlink sudah terkenal dan memiliki posisi bagus di mesin pencari, maka backlink yang baik adalah tipe One-Way.
• Apabila situs yang memberikan backlink belum terkenal dan belum memiliki posisi bagus di mesin pencari (atau termasuk dalam dummy blog), maka backlink yang baik adalah tipe Three-Way.

Natural Backlink

Kondisi Natural Backlink atau backlink alami terpenuhi apabila backlink disisipkan dalam konten atau artikel dan dalam bentuk kalimat sehingga terkesan natural. Kebanyakan pemula mengira bahwa untuk mendapat backlink cukup dengan menyertakan link ke situs yang bersangkutan di bagian sidebar, padahal ini tidak tepat dan kurang optimal hasilnya. Selain itu, rawan dianggap sebagai paid link.

Text vs Banner

Satu lagi yang perlu diperhatikan, yang dihitung sebagai backlink oleh mesin pencari adalah link yang berupa teks (atau text link), bukan link yang ada dalam bentuk banner (banner link).

PageRank vs SERP

Apa sebenarnya tujuan dari mengumpulkan backlink? Menaikkan PageRank? Atau mendapatkan posisi yang baik di mesin pencari? Kedua jawaban tersebut memang benar, namun pada prakteknya ada sedikit perbedaan implementasi.

Untuk menaikkan PageRank, backlink yang kita miliki harus:

• Berasal dari situs dengan topik sejenis.

• Berasal dari situs yang PageRank-nya lebih tinggi. Namun tidak ada salahnya mengumpulkan backlink dari situs ber-PR berapapun karena tetap akan diperhitungkan dalam penilaian PageRank.

Sedangkan apabila tujuan kita adalah untuk menaikkan ranking di search engine, maka:

• Backlink dapat dikumpulkan dari berbagai situs. Tapi tetap saja, utamakan backlink dari situs bertopik sejenis. Backlink usahakan berupa Natural Backlink.

• Backlink harus menggunakan variasi keyword yang dibidik pada anchor text. Usahakan pula untuk melakukan deep linking atau link ke halaman-halaman lain pada situs yang bersangkutan.

Sumber Backlink

Pokok bahasan terakhir, darimana saja kita bisa mengumpulkan backlink? Atau, bagaimana caranya mendapatkan backlink sebanyak-banyaknya?

• Submit situs kita ke situs-situs social bookmarking. Yang perlu diingat, tidak semua situs social bookmark sekarang menghasilkan backlink.

• Membuat dummy blog.

• Berkomentar di blog yang atribut NoFollow-nya dimatikan.

• Membuat artikel menarik yang dapat memancing backlink.

Sebetulnya masih banyak lagi, jadi silahkan berkreasi sendiri saja. Yang jelas, HINDARI menggunakan tool-tool yang mengklaim bisa menghasilkan ribuan backlink bagi situs sobat dalam hitungan jam atau hari. Selain tidak efektif, juga 99% berpotensi dianggap spam oleh mesin pencari. Semoga bermanfaat .. 

Sumber kode : http://miscah.blogspot.com/2009/05/backlink.html

Judul : Backlink di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Tips Promosi Blog

                                             بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Tips Promosi Blog - Sebelumnya pasti sudah ada yang pernah membahas bagaimana tips promosi blog ke berbagai situs directory dan melakukan pendaftaran blog ke beberapa mesin pencari. Kali ini sebenarnya hampir sama, tapi saya akan menjelaskan lebih banyak cara promosi blog yang bisa dilakukan. Tips ini saya tulis untuk blogger yang benar - benar peduli untuk meningkatkan SEO di mata mesin pencari seperti Google, Yahoo, Bing. 

Baiklah, buat blogger pemula..berikut sedikit tips dari saya untuk promosi blog sobat. 

Promosi Blog lewat situs Social Bookmark

Situs Social Bookmark adalah tempatnya para blogger pamer blog, mereka para blogger senior pun pasti pernah mendaftar di situs social bookmark. Karena jumlahnya sangat banyak, maka kesempatan blog sobat untuk di baca oleh pengunjung yang juga para blogger semakin kecil. Tapi tidak apa, terus perbanyak postingan dengan content yang menarik dan saran saya lakukan promosi segencar - gencarnya. Situs social bookmark ini juga memberikan kita backlink. Berikut beberapa situs social bookmarknya : 

1. http://www.technorati.com
2. http://www.mybloglog.com
3. http://digg.com
4. http://delicious.com
5. http://www.scribd.com
6. http://www.stumbleupon.com
7. http://www.squidoo.com/squidoo
8. http://www.bibsonomy.org
9. http://www.propeller.com
10. http://www.reddit.com

Silahkan daftarkan blog sobat pada situs diatas, semoga blog sobat cepat dikenal dan naik popularitasnya.

Daftarkan blog ke situs Article Submission

Apa itu article submission? dari namanya saja sebenarnya sobat sudah bisa menebak artinya. Situs ini menyediakan tempat untuk para blogger menulis artikel tentang blog mereka. Tidak usah terlalu panjang lebar dalam menginput artikelnya, yang penting isinya dapat diterima dan di mengerti. Situs ini juga bisa memberikan sobat backlink, jika sobat tertarik, berikut ada beberapa situs yang bisa sobat kunjungi :

1. http://www.ezinearticles.com
2. http://www.articlebiz.com
3. http://www.articledashboard.com
4. http://www.approvedarticles.com
5. http://www.articletrader.com
6. http://www.articlecube.com
7. http://www.a1-articledirectory.com
8. http://www.earticlesonline.com
9. http://www.myarticlemall.com
10. http://www.articlecity.com

Silahkan daftarkan blog sobat pada beberapa situs diatas dan input artikel sobat sesuai dengan tema blog sobat.

Ping Service

Ping service adalah layanan untuk memudahkan kita mengirim update data terbaru blog kita ke beberapa situs dalam satu kali input. Sangat mudah, sekali klik blog sobat langsung terkirim ke banyak situs ternama. Layanan ini bagus dan penggunaanya pun sangat mudah, bisanya yang diperlukan hanya nama blog dan url blog sobat dalam nge-ping. Berikut beberapa layanan ping service favorit saya yang bisa sobat coba :

1. http://www.mypagerank.net/service_pingservice_index
2. http://pingomatic.com
3. http://pingoat.com
4. http://rpc.weblogs.com
5. http://autopinger.com
6. http://pingmyblog.com
7. http://www.kping.com
8. http://bitacoras.com/agregador/enviar
9. http://feedshark.brainbliss.com

Saran saya : lakukan ping setelah sobat update blog, lakukan ping setelah sobat posting artikel terbaru, lakukan ping seperlunya dan jangan terlalu sering melakukan ping karena bisa di anggap spam.


Berkomentar pada blog yang dofollow

Tentu ini merupakan promosi blog yang paling mudah, karena cuman memberi komentar pada blog yang kita kunjungi kita bisa dapat backlink. Cari blog ber PR tinggi, kemudian beri komentar dan jangan terlalu sering karena bisa dianggap spam. Beri komentar yang baik, jangan terlalu banyak mengkritik postingan yang empunya blog, apalagi sampai menghina karena komentar sobat bisa - bisa dihapus dan di blacklist sama yang empunya blog.

Tukeran Link / Link Exchange

Lakukan pertukaran link atau banner dengan blogger lain. Tentunya dengan blog yang sudah punya PR, apalagi PR-nya tinggi. Karena dengan bertukar link atau banner, blog sobat akan ikut terdongkrak posisinya di mata google atau istilah lainnya numpang beken. Lakukan tuker link sebanyak-banyaknya untuk menigkatkan PR blog sobat, dan tukeran link dengan blog yang sejenis atau 1 tema dengan blog sobat.

Cari link dari PR tinggi

Berburu link PR tinggi salah satu cara kita mengetahui jumlah PR pada suatu blog/website. Tidak ada salahnya kita berburu link PR tinggi sekalian tukeran link. Untuk mengetahui nilai link pada sebuah blog sobat bisa menggunakan layanan tools gratis yang di sediakan oleh iwebtools. Caranya sangat mudah :

1. Masuk ke iwebtools.
2. Isi alamat blog yang sobat inginkan
3. Kemudian contreng radio button pada tulisan Show links with rel="nofollow" dan Show external links
4. Kemudian klik tombol Check.
   
   
   
   Sobat bisa lihat hasilnya, nah ada banyak angka - angka pada sisi setiap sidebar atau postingan.
   
   
   
   
   Sobat bisa lihat daerah mana yang bisa memberikan kita backlink, kemudian lakukan tuker link dengan yang empunya blog. Blog diatas hanya contoh dari blog saya dan saya sengaja tidak memperlihatkan halaman blogroll atau tempat tuker link pada blog saya. Cari halaman blogroll pada blog yang sobat cari visual pagerank nya untuk melihat link - link dari blogger lain. 

Itu saja tips yang saya bisa berikan kali ini, sebenarnya masih ada lagi beberapa tips sederhana cara promosi blog. Tapi nanti saja saya lanjutakan lain kali, Karena terlalu banyak menulis, tangan saya agak sedikit pegal nih..

Sumber kode : http://miscah.blogspot.com/2009/07/tips-promosi-blog.html

Judul : Tips Promosi Blog di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Mengganti Background Blog Dengan Gambar

                                    بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Mengganti Background Blog Dengan Gambar - Sebuah blog yang cantik dan enak dilihat tentu akan sangat membantu dalam meningkatkan traffic blog kita, karena saya sendiri lebih tertarik mengunjungi sebuah blog yang warnanya cerah dan enak dilihat, daripada blog yang warnanya gelap dan bentuknya tidak karuan alias acak kadut. Walaupun postingannya menarik tetapi membuat sakit mata, lebih baik saya pelototi blog saya selama berjam - jam.

Saya akan berbagi tips sedikit yang saya tahu tentang merubah warna background blog atau mengganti background dengan gambar yang sudah sobat upload ke tempat penyimpanan online, misalnya di Google Sites atau Photobucket. 

Berikut langkah - langkahnya :

• Login ke Blogger.
• Klik Tata Letak --> Edit HTML.
• Kemudian cari kode yang mirip seperti ini :
  body { background: #FFFFFF;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: center }
  
  Atau jika bingung silahkan klik Ctrl + F kemudian ketikkan body {, biasanya letaknya diatas.
  
• Untuk mengganti background dengan warna lain tinggal mengganti kode #FFFFFF dengan kode lain, untuk kode warna bisa dilihat disini. Contoh saya mengganti background dengan warna abu - abu, hasilnya akan menjadi seperti berikut :
  body { background: #D8D8D8;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: justify }
• Untuk mengganti background dengan image atau gambar, misalnya gambar yang sudah saya simpan di blogger, kode url-nya seperti ini :
  
  http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800
• Sehingga hasilnya menjadi seperti berikut ini :
  
  body { background:#FFFFFF url(http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800) repeat-x;
  margin:0; color:#000000; font:12px trebuchet ms;
  text-align: justify}
• Jika sudah selesai kemudian Simpan Template sobat.

Untuk gambar yang continuous sobat tambahkan repeat-x setelah kode url gambar. Lebih jelasnya sobat bisa baca postingan saya tentang cara mengganti backgroud blog dengan gradient image disini.

Sumber kode : http://miscah.blogspot.com/2009/06/mengganti-background-blog-dengan-gambar.html

Judul : Mengganti Background Blog Dengan Gambar

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Menampilkan Judul Postingan Setelah Melakukan Pencarian

                                             بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Menampilkan Judul Postingan Setelah Melakukan Pencarian - Perhatikan gambar disamping, terlihat jelas blog hanya menampilkan judul postingan saja setelah kita melakukan pencarian / search di blog. Jika sobat bingung maksud saya, silahkan sobat ketik keyword “blogspot” pada kotak search milik saya, terlihat blog hanya menampilkan judul – judul dari postingan saja. Secara default atau bawaan dari template standard, jika kita melakukan pencarian, maka yang akan kita temukan adalah judul postingan berserta urainnya yang panjang lebar, sehingga hasilnya kurang efisien dan memakan tempat. Dan biasanya pengunjung menjadi jenuh dan enggan mengklik halaman selanjutnya untuk mencari kata kunci yang di maksud.

Sekarang sobat sudah paham maksud dan tujuan untuk melakukan hasil pencarian dalam bentuk judul postingan. Jika tertarik, silahkan ikuti langkah – langkahnya berikut ini :

1. Login ke blogger dengan ID sobat.
   
2. Klik Tata Letak.
   
3. Pilih Edit HTML.
   
4. Silahkan klik Download Template Lengkap, untuk jaga – jaga jika gagal dan template jadi rusak.. just kidding sob.
   
5. Kemudian klik Expand Template Widget.
   
6. Cari kode <b:include data='post' name='post'/>
   
7. Hapus kode diatas dan ganti dengan kode berikut ini :
   
   <b:if cond='data:blog.homepageUrl !=
   data:blog.url'>
   <b:if cond='data:blog.pageType != "item"'>
   <a expr:href='data:post.url'>
   <data:post.title/></a><br/><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   
   
8. Kemudian Simpan Template.

Silahkan lihat hasilnya, jika berhasil maka akan tampak seperti gambar diatas. Untuk variasi judul postingannya, saya punya 2 variasi yang mungkin bisa sobat terapkan :

1. Bentuk hasil pencarian dengan garis putus – putus dibawah setiap judul postingan.
   
   Jika sobat tertarik dengan variasi yang seperti ini, sobat tinggal menyisipkan kode <hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/> diantara </br>……..</br>, sehingga hasilnya menjadi seperti berikut ini :
   
   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <a expr:href='data:post.url'>
   <data:post.title/></a><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   
   Kode warna #CCCCCC adalah warna abu - abu, untuk mengubah warna garis dengan warna lain sobat bisa lihat disini.
   
2. Bentuk hasil pencarian dengan judul didalam kotak - kotak (seperti di blog saya ).
   
   Untuk hasil yang seperti ini, silahkan sobat ubah kode diatas menjadi seperti berikut :
   
   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div style="border: 2px outset #CCCCCC; width: 500px; padding: 10px; background-color: #FBF5EF; text-align: left;">
   <a expr:href='data:post.url'>
   <data:post.title/></a></div><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   
   
   Untuk kode width:500px, sobat sesuaikan dengan lebar main menu atau lebar kolom postingan sobat. Jika lebar kolom post 500px maka sebaiknya buatlah sebesar 400px saja agar terlihat lebih bagus. Dan untuk kode #FBF5EF adalah background judul post, atur sesuai dengan keinginan. 

Sumber kode : http://miscah.blogspot.com/2009/09/menampilkan-judul-postingan-setelah.html

Judul : Menampilkan Judul Postingan Setelah Melakukan Pencarian di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Cara Membuat Tulisan Besar Pada Awal Postingan di Blog

                                                بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Sekedar info buat yang baru, huruf ini akan tampil besar dan berbeda sendiri dengan huruf lain yang ada di blog kita. Biasanya bisa kita lihat di koran atau majalah. Untuk membuatnya sangat mudah, karena hanya butuh satu kode css dan sedikit sentuhan pada saat membuat postingan.

1. Setelah masuk blogger, silahkan klik Edit HTML.
2. Tambahkan kode berikut sebelum kode ]]>< /b:skin>
   .huruf {
   float:left;
   color:#000;
   line-height:60px; 
   padding-right:5px;
   font-family:trebuchet ms,verdana;
   font-size:60px; 
   }
3. Simpan Template.

Cara Posting

Tambahkan kode <span class="huruf"> sebelum huruf pertama dan </span> setelahnya. Contohnya seperti ini :

<span class="huruf">K</span>emarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini.

Sumber kode : http://miscah.blogspot.com/2010/11/cara-membuat-tulisan-besar-pada-awal.html

Judul : Cara Membuat Tulisan Besar Pada Awal Postingan di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Membuat Menu Horizontal Rounded Corner

                                             بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

 

Membuat Menu Horizontal Rounded Corner - Bagi pengguna browser mozilla, safari atau opera membuat menu horizontal dengan garis melengkung (rounded corner) memang tidak ada masalah. Namun hal ini tidak berlaku pada browser IE. Untuk mengatasinya, ada satu cara yang bisa diterapkan, yaitu dengan menambahkan gambar rounded corner dalam css menunya. Saya menggunakan template gris amarillos sebagai demo, bisa dilihat disini.

Langkah pertama yang harus sobat lakukan adalah membuat gambar rounded corner terlebih dahulu. Ada 4 gambar yang harus sobat buat, left tab, right tab, left tab hover, right tab hover.

	left tab
	right tab
	left tab hover
	right tab hover

Kemudian upload gambar-gambar tersebut ke tempat penyimpanan online. setelah itu baru kita lanjutkan pada pemasangan kode css untuk menu horizontalnya.

1. Masuk ke Tata Letak.
2. Klik tab Edit HTML.
3. Tambahkan kode berikut ini sebelum kode ]]></b:skin>

   #nav {
   width: 980px;
   height:34px;
   position: relative;
   float:center;
   margin:0px;
   padding:0px;
   }
   #nav left{
   float:left;
   display:inline;
   width:980px;
   }
   #nav a {
   color:#222;
   background:#dba72d url(http://lh5.ggpht.com/_7Y9pl24WpQY/S92v2xGQZ6I/AAAAAAAADqs/ajeGLWXobuE/left-tab_thumb%5B4%5D.png) left top no-repeat;
   text-decoration:none;
   padding:7px 0 6px 12px;
   }
   #nav a span {
   background:#dba72d url(http://lh3.ggpht.com/_7Y9pl24WpQY/S92v4-cWJvI/AAAAAAAADq0/F3FEArdJEg8/right-tab_thumb%5B2%5D.png) right top no-repeat;
   padding:7px 12px 6px 0; 
   }
   #navigation a, #navigation a span {
   display:block;
   float:left;
   }
   #nav a:hover {
   color:#222; 
   background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkCZSIonI/AAAAAAAADtg/yyvKetEpy4w/left-tab%20hover_thumb%5B3%5D.png) left top no-repeat;
   padding-left:12px;
   }
   #nav a:hover span {
   background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkE2Ya06I/AAAAAAAADto/JbhOEh9o7ak/right-tab%20hover_thumb%5B1%5D.png) right top no-repeat;
   padding-right:12px;
   }
   #nav ul {
   list-style:none;
   padding:0;
   margin:0;
   }
   #nav li {
   float:left;
   margin:0;
   }

4. Cari kode HTML bagian Header blog :
   

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='JUDUL BLOG (Header)' type='Header'/>
   </b:section>
   </div>

   
   
5. Kemudian tambahkan kode berikut ini dibawahnya :
   

   <div id='nav'>    
   <b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
   <b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
   <b:includable id='main'>
   <div class='widget-content'>
   <b:if cond='data:title'/>
   <div id='nav left'>   
   <ul>
   <li><a href='/'><span>Home</span></a></li>
   <b:loop values='data:links' var='link'>
   <li><a expr:href='data:link.target'><span><data:link.name/></span></a></li> </b:loop>
   </ul>
   </div>  
   </div>
   </b:includable>
   </b:widget>
   </b:section>   
   </div>

6. Simpan Template.

Keterangan :

• Kode yang berwarna biru adalah url tempat sobat menyimpan gambarnya, sekarang coba blok url tersebut satu persatu dan lihat gambarnya pada browser.
• Yang berwarna merah adalah kode dari warna, sesuaikan dengan gambar yang dibuat.
• Kode yang berwarna hijau adalah lebar menu horizontal, sesuaikan dengan lebar template.

Sumber kode : http://miscah.blogspot.com/2010/05/membuat-menu-horizontal-rounded-corner.html

Judul : Membuat Menu Horizontal Rounded Corner di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Membuat Slider Menu Image

                                            بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Slider Menu Image - langsung aja deh, Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif. Sebagai contoh bisa sobat lihat pada contoh demo slide-nya disini.

Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.

• Silahkan download terlebih dahulu kode javascript-nya disini dan disini.
• Kemudian upload file js tersebut ke google sites atau google code.
• Setelah selesai upload, lihat url atau link dari file yang sudah di upload, seperti contoh link yang sudah saya upload bentuknya seperti ini :

  http://miscah.googlecode.com/files/jquery-1.3.1.min.js
  http://miscah.googlecode.com/files/jquery.scrollTo.js

• Sekarang bagian edit template, masuk ke Tata Letak –> Edit HTML.
• Tambahkan kode berikut ini setelah kode ]]></b:skin>
  
  <script src='http://miscah.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
  <script src='http://miscah.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'/>
  
  <style type='text/css'>
  #slider {width:320px;height:200px;padding:5px;margin:0;position:relative;overflow:hidden}
  #slider a:link, #slider a:active {color:#FFF;text-decoration:none}
  #slider a:hover {color:#F00}
  #mask-gallery {overflow: hidden}
  #gallery {list-style:none;margin:0;padding:0;z-index 0;width:900px;overflow:hidden}
  #gallery li {float:left;padding:0px;margin:0px}
  #mask-excerpt {position:absolute;top:0;right:0;z-index:500px;overflow:hidden}
  </style>
  <script>
  $(document).ready(function() {
  var speed = 5000;
         $(&#39;#mask-gallery, #gallery li&#39;).width($(&#39;#slider&#39;).width());
         $(&#39;#gallery&#39;).width($(&#39;#slider&#39;).width() * $(&#39;#gallery li&#39;).length);
         $(&#39;#mask-gallery, #gallery li, #mask-excerpt, #excerpt li&#39;).height($(&#39;#slider&#39;).height());
         var run = setInterval(&#39;newsscoller(0)&#39;, speed);
         $(&#39;#gallery li:first, #excerpt li:first&#39;).addClass(&#39;selected&#39;);
         $(&#39;#btn-pause&#39;).click(function () {
                clearInterval(run);
                return false;
         });
         $(&#39;#btn-play&#39;).click(function () {
                run = setInterval(&#39;newsscoller(0)&#39;, speed);
                return false;
  });
         $(&#39;#btn-next&#39;).click(function () {
                newsscoller(0);
                return false;
         });
         $(&#39;#btn-prev&#39;).click(function () {
                newsscoller(1);
                return false;
  });
         $(&#39;#slider&#39;).hover(
                function() {
                       clearInterval(run);
  },
                function() {
                       run = setInterval(&#39;newsscoller(0)&#39;, speed);
                }
         );
  });
  function newsscoller(prev) {
         var current_image = $(&#39;#gallery li.selected&#39;).length ? $(&#39;#gallery li.selected&#39;) : $(&#39;#gallery li:first&#39;);
         var current_excerpt = $(&#39;#excerpt li.selected&#39;).length ? $(&#39;#excerpt li.selected&#39;) : $(&#39;#excerpt li:first&#39;);
         if (prev) {
                var next_image = (current_image.prev().length) ? current_image.prev() : $(&#39;#gallery li:last&#39;);
                var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $(&#39;#excerpt li:last&#39;);
                } else {
                       var next_image = (current_image.next().length) ? current_image.next() : $(&#39;#gallery li:first&#39;);
                       var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $(&#39;#excerpt li:first&#39;);
  }
         $(&#39;#excerpt li, #gallery li&#39;).removeClass(&#39;selected&#39;);
                next_image.addClass(&#39;selected&#39;);
                next_excerpt.addClass(&#39;selected&#39;);
                $(&#39;#mask-gallery&#39;).scrollTo(next_image, 800);
                $(&#39;#mask-excerpt&#39;).scrollTo(next_excerpt, 800);
  }
  </script>
• Simpan Template.

Keterngan :

1. Kode yang berwarna merah adalah kode js yang sudah sobat upload ke hosting google site atau google code, jika malas mengupload silahkan gunakan saja milik tetangga.
2. var speed = 5000 adalah kecepatan slide image-nya, semakin tinggi angkanya, maka akan semakin lambat.
3. Untuk width:320px dan height:200px masing-masing untuk lebar dan tinggi menu, sesuaikan dengan lebar sidebar sobat.

• Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
• Pilih Tambah Gadget –> pilih yang HTML/Javascript.
• Sekarang masukkan kode berikut :

  <div id="slider">
  <div id="mask-gallery">
  <ul id="gallery">

  <li><a href="http://miscah.blogspot.com/2010/03/roten-herzen-template.html"><img src="http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

  <li><a href="http://miscah.blogspot.com/2010/03/smart-gradient.html"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

  <li><a href="http://miscah.blogspot.com/2010/02/blue-light-template.html"><img src="http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

  </ul>
  </div>
  </div>
  <div id="buttons">
  <a href="#" id="btn-prev">prev</a>
  <a href="#" id="btn-pause">pause</a>
  <a href="#" id="btn-next">next</a>
  <a href="#" id="btn-play">play</a>
  </div>

• Kemudian Simpan.

Keterangan :

1. Kode yang berwarna hijau adalah url yang akan di tuju.
2. Kode yang berwarna ungu adalah url dari gambar.

Sumber kode : http://miscah.blogspot.com/2010/03/slider-menu-image.html

Judul : Membuat Slider Menu Image di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Cara Pasang Banner di Blog

Misalnya jika sobat terdaftar di suatu situs bisnis online, pastinya sobat akan mendapatkan banner untuk mempromosikan link url sobat di tempat sobat mendaftar. Banner yang diberikan berupa kode HTML yang bentuknya agak sedikit ribet, tapi jika setelah kita copy paste ke blog kita, jadinya akan berupa gambar atau banner yang kita maksud.

Seperti ini contohnya, gambar berikut saya dapat setelah mengikuti program bisnis online yang dikenal dengan nama paid to click atau PTC.


dan biasanya akan diberikan kode html yang nantinya akan kita pasang di blog kita, seperti ini contoh kode html-nya :
<a href="http://www.buxp.net/?r=miskahiper"><img src="http://buxp.net/banner1.gif" alt="" /></a>
dan bagaimana cara memasangnya di blog kita? silahkan ikuti panduannya berikut ini :

1. Login ke Blogger dengan ID sobat.
   
2. Klik Tata Letak.
   
3. Klik Elemen Halaman.
   
4. Kemudian klik yang bertuliskan Tambah Gadget, bisa di sidebar, header atau bagian bawah template.
   
5. Kemudian pilih yang HTML/Java Script
   
6. Copy paste kode HTML sobat kedalamnya, sobat bisa menambahkan judul diatasnya jika mau.
   
7. Lalu klik Simpan.
   
8. Selesai.

Membuat banner sendiri

Bagaimana jika sobat ingin memasang banner atau gambar sendiri ke dalam blog sobat dan jika di klik akan menuju ke situs atau blog sobat yang lain? saya akan berikan contohnya berikut ini.

Saya punya gambar kecil dengan bentuk seperti ini :

Bagaimana membuatnya menjadi banner yang mempunyai link didalamnya?

• Upload gambar tersebut kedalam situs penyimpanan online, sobat bisa upload ke Photobucket atau Google Sites
• Anggap saja sobat ingin menggunakan jasa Photobucket, pada halaman depan silahkan sobat klik Join Now It’s Free! untuk menjadi anggota
• Ikuti saja langkah-langkah pendaftarannya sampai selesai.
• JIka sudah selesai register, klik login untuk masuk ke halaman utama Photobucket
• Bagaimana cara upload gambarnya? pada bagian atas coba cari tulisan Upload images & videos, klik dan upload gambar yang sudah sobat siapkan.
• Setelah selesai upload gambar, kemudian sorot pada gambar tersebut dan klik yang HTML Code
  
• Sekarang copy paste saja dulu kedalam notepad, misalnya kode html untuk gambar yang saya upload ke Photobucket seperti ini :
  
  <a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=BANNER2.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/BANNER2.jpg" border="0" alt="blogspot tutorial,blog,tips blogging"></a>
• Hapus kode yang berwarna merah dan ganti dengan kode url blog sobat atau situs yang ingin sobat beri link, sehingga jadinya seperti dibawah ini :
  
  <a href=http://miscah.blogspot.com" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/BANNER2.jpg" border="0" alt="blogspot tutorial,blog,tips blogging"></a>
• Kode tersebutlah yang sekarang bisa sobat copy paste ke blog sobat.

Sumber kode : http://miscah.blogspot.com/search/label/Tutorial%20Blogspot

Judul : Cara Pasang Banner di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Cara Membuat Widget Member Aktif Di Blog

 بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Cara Membuat Widget Member Aktif Di Blog  - Assalamualaikum, jumpa lagi dengan saya disini, tahukah anda apa fungsi  widget member aktif di blog ??? menurut saya widget member aktif di blog untuk memberikan apresiasi kepada pengunjung yang sering berkomentar di blog kita atau salah satu trik dari kita agar pengunjung blog makin aktif berkomentar agar mendapat nomer satu di member aktif.

Widget member aktif ini bisa untuk memberikan backlink kepada pengunjung blog yang aktif berkomentar, tetapi peluang yang paling besar mendapat backlink menurut saya adalah pengunjung yang aktif berkomentar nomer satu, karena pengunjung yang lain mesti kepingin tahu lebih dalam tentang pengunjung yang aktif berkomentar tersebut.

Widget member aktif ini mempunyai banyak sekali fitur-fitur yang tentunya berpenampilan keren juga dinamis serta elegan, saya sendiri memasang widget member aktif di blog untuk membuat pengunjung blog senang, karena foto ganteng / cantiknya terpampang , hehehehe

Cara Membuat Widget Member Aktif di Blog :

1. Login ke blogger anda.
2. Pilih Laman > Laman Kosong
3. Masukan kode ini di HTML bukan Compose

<style type="text/css">
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
.comments {display: none;}
</style>
<script type="text/javascript">
//<![CDATA[
var homepage = 'http://www.mas-arul.com/',
  maxTopCommenters = 56,
  minComments = 1,
  numDays = 0,
  excludeMe = true,
  excludeUsers = ["Anonymous", "Nama Author"],
  maxUserNameLength = 42,
  txtTopLine = '[image] [user]',
  txtNoTopCommenters = 'No top commentators at this time.',
  txtAnonymous = '',
  sizeAvatar = 80,
  cropAvatar = true,
  urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdu7prFujrjpuw_emMXmo7m15e3tbg5sHnK3OaTE-1C9X7rf6dx6JkwUbhclgYi_MrphI5qICAmju2OvAjxj6-9U4Ic_QuKpMgpD-9tBL_ml81E-IK0LGQSW-wT0L7wavsBrdo2OgffI/' + sizeAvatar + '/avatar_blue_m_96.png',
  urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
  urlMyProfile = '',
  urlMyAvatar = '';
if (!Array.indexOf) {
  Array.prototype.indexOf = function (obj) {
    for (var i = 0; i < this.length; i++) if (this[i] == obj) return i;
    return -1
  }
}
function replaceTopCmtVars(text, item, position) {
  if (!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {
    avaimg = author.gd$image.src
  } else {
    var parseurl = document.createElement('a');
    if (authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname
    }
  }
  if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
  if (avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;
  var newsize = "s" + sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");
  if (cropAvatar) newsize += "-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");
  var authorName = author.name.$t;
  if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;
  var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';
  if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';
  if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";
  var authorcode = authorName;
  if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[count]', item.count);
  return text
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day = 1000 * 60 * 60 * 24;
  var today = new Date();
  if (urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for (var i = 0; i < elements.length; i++) if (expr.test(elements[i].className)) {
      urlMyProfile = elements[i].href;
      break
    }
  }
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if (numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
      var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));
      if (days > numDays) break
    }
    var authorUri = "";
    if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
    if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;
    var authorName = entry.author[0].name.$t;
    if (excludeUsers.indexOf(authorName) != -1) continue;
    var hash = entry.author[0].name.$t + "-" + authorUri;
    if (topcommenters[hash]) topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter
    }
  }
  if (json.feed.entry.length > 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    return
  }
  var tuplear = [];
  for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function (a, b) {
    if (b[1].count - a[1].count) return b[1].count - a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1
  });
  var realcount = 0;
  for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {
    var item = tuplear[i][1];
    if (item.count < minComments) break;
    document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));
    realcount++
  }
  if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script>  

4. Pubikasikan
5. Lihat Haslilnya.

Itulah Cara Membuat Widget Member Aktif di Blog , cukup mudah bukan ??? tentunya dong, semoga tutorial ini bisa dimengerti dan bisa bermanfaat bagi kita semua, jangan lupa komentarnya, Wassalamualaikum.

Sumber kode : http://www.tipstrikblogging.com/

Judul : Cara Membuat Widget Member Aktif di Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**