Cara Membuat Efek Kursor Diikuti Bintang

Cara Membuat Efek Kursor Diikuti Bintang – Membuat efek kursor memang gak pernah ada matinya. Setiap saat pasti ada-ada saja kreasi baru dalam memprcantik tampilan blog kita. Dan salah satunya yang dibahas kali ini adalah Cara Membuat Efek Kursor Diikuti Bintang.

Wach beruntung kita. Sekarang ini dalam mempercantik tampilan blog kita sangat gampang sekali. Walaupun yang baru belajar ngeblogpun bisa mempercantik tampilan blognya yang tak kalah cantiknya dengan blog para mastah.

Dan kabar gembiranya lagi adalah karena efek kursor yang satu ini bisa kita pasang di blog kita yang bermesin Blogspot dan juga WordPress. Karena kode scriptnya cukup di letakkan atau di pastekan di widget blog kita sehingga kita gak perlu lagi utak atik HTML blog kita.

Nah, untuk menghemat waktu nich agar jangan penasaran terlalu lama berikut langkah Cara Membuat Efek Kursor Diikuti Bintang.

• Login ke dasbor blog Anda baik yang Blogspot maupun yang WordPress.
• Langsung ke widget blog Anda (bisa ditambah baru atau edit aja widget yang sudah ada).
• Silahkan copy kode berikut ini dan pastekan di widget blog Anda.

<script type=”text/javascript” src=”http://cayunkatel.googlecode.com/files/rainbows.js”></script>

• Jika sudah selesai, silahkan disimpan.
• Sekarang silahkan buka blog Anda dan lihat hasilnya pasti akan sangat banyak bintang-bintang yang berkilauan mengikuti kursor mouse Anda.

Nah, begitu dia Cara Membuat Efek Kursor Diikuti Bintang berkilauan yang akan mengikuti gerak kursor di blog Anda.

Title: Cara Membuat Efek Kursor Diikuti Bintang

Read More

Pengertian Backlink dan Anchor Text

Di dunia blog, ada sangat banyak istilah-istilah yang kadang membuat kita yang masih newbie jadi bingung sendiri. Dan salah satu yang sering kita dengar adalah tentang istilah dan pengertian backlink dan anchor text.

Untuk itu berikut ini aku akan memberikan sedikit gambaran tentang pengertian backlink dan anchor text.

Pengertian Backlink
Backlink adalah merupakan jumlah link website atau blog kita yang ada di webblog orang lain. Jadi semakin banyak backlink suatu website atau blog, maka semakin bagus posisinya di search engine. Untuk mendapatkan backlink, ada yang gratis dan ada juga yang berbayar. Karena backlink itu sangat penting bagi popularitas webblog kita.

Pengertian Anchor Text
Anchor text ini hampir sama pengertiannya dengan backlink yaitu kalau link itu di klik akan menuju ke website kita juga. Hanya saja anchor text itu adalah nama link yang jika diklik akan mengarah ke salah satu link yang lain.

Seperti ini: mungkin kita pernah mengunjungi website atu blog seseorang dan biasanya mereka menuliskan: “untuk keterangan lengkapnya silahkan klik di sini”. Nach kalau kita klik kata klik di sini itu, maka kita akan di arahkan ke alamat sebuah link yang mengarah ke suatu website atau blog lain. Dan itulah yang dinamakan anchor text. Atau ketika kita blog walking dan meninggalkan komentar di sana, maka sewaktu kita meninggalkan komentar itu kita di haruskan untuk mengisi nama, email, url serta isi komentar. Nach ketika komentar kita di approve oleh pemilik blog tersebut, apabila kita mengklik nama pemilik komentar tersebut maka otomatis akan terbuka link yang mengarah ke website atau blog pemilik komentar tersebut. Dan nama yang kita klik  itulah yang di namakan anchor text.
Gimana sudah mengerti apaitu pengertian backlink dan anchor text? Yach mudah-mudahan bisa di mengerti karena aku sendiripun susah menjelaskannya. :)

Read More

Membuat ArtikeL Terkait (Related Post) Di Blogspot

Membuat artikel terkait (related post) di blogspot, sebelumnya memang pernah kita bahas di sini. Namun artikel terkait (related post) yang kita bahas waktu itu adalah dengan fungsi thumbnails. Jadi agak beda dengan yang satu ini walau tujuan sebenarnya memang sama.

Dan berikut ini kita akan membahas tentang cara membuat artikel terkait (related post)dengan border melengkung dan fungsi scroll. Namun fungsi dan kegunaannya memang sama. Oke kita langsung aja perhatikan caranya seperti berikut ini:

• Login ke Akun Blogspot sobat.
• Klik Template.
• Klik Edit HTML.
• Pilih teruskan.
• Centang Expand Template Widget.
• Lalu cari kode ]]></b:skin> (Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat).
• Copy kode di bawah ini dan pastekan tepat di atas  ]]></b:skin> tadi.

.rbbox{-moz-box-shadow: inset 0 0 20px #f10c0c;
-webkit-box-shadow: inset 0 0 20px #f10c0c;
box-shadow: inset 0 0 20px #f10c0c;
.rbbox:hover{background-color:#000000);}

• Selanjutnya, cari lagi kode <data:post.body/>
• Lalu copy lagi code ini di bawah ini dan pastekan tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) { ( #f10c0c; )
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

• Setelah itu silahkan simpan template blog sobat dengan mengklik Simpan Template.

Notes:
Back warna groundnya  ( #f10c0c; )  juga boleh dirubah sesuai dengan selera sobat tentunya.

Itu dia tutorial atau tips cara membuat artikel terkait atau related post di blogspot dengan fungsi scroll, dan semoga artikel ini bisa membantu sobat.

Read More

Cara Memasang Tombol Google Plus +1 Di Blogspot

Cara memasang tombol google plus one (+1) diblogspot atau bloggger sangatlah mudah dan tidak memerlukan pengetahuan khusus tentang itu. Hanya saja bagi yang masih newbie, mereka belum tau dimana sript itu di letakkan. Dan kalau kita berusahapun kita bisa tau tanpa harus berpedoman pada tutorial cara memasang tombol google +1 seperti ini. Betul klhan??? :)

tapi okelah kita langsung saja ke pokok bahasan tutorial cara memasang tombol google plus one di blogspot atau blogger:

• Login ke Akun Blogspot sobat.
• Klik Template.
• Klik edit HTML.
• Pilih teruskan.
• Centang Expand Template Widget.
• Cari kode </head> (Biar gampang pake CTRL+F aja).
• Dan letakkan script di bawah ini tepat diatas kode </head> tersebut.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'id'}
</script>

• Kemudian letakkan Script di bawah ini ditempat yang anda inginkan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone size='standard'/>
</div>
</b:if>

• Selesei dech. Dan sekarang silahkan simpan template Anda dengan mengklik Simpan Template.

Ket:
Script ini bisa diletakkan dimana saja seperti di sidebar maupun postingan blog sobat. Dan kalau sobat berniat meletakkanya di bawah postingan, maka coba cari kode <data:post.body/> dan letakkan kode yang berwarna hijau di atas tepat di bawah <data:post.body/>.

Betulkan cara memasang tombol google plus one (+1) diblogspot atau bloggger sangat mudah, jadi gak banyak sript yang harus di sematkan di dalam HTML blog kita.

Read More

Cara Membuat Tulisan Berjalan (Marquee) di Blogspot

Pernahkah sobat melihat blog seseorang yang tampilannya sangat keren yang di hiasi dengan tulisan berjalan atau yang sering di sebut dengan marquee??? Pasti tampilannya sangat kerenkan dan sangat menggoda hati tentunya. :)

Nah jika sobat tertarik dengan tampilan seperti itu maka kali ini aku akan membagi rahasia cara membuat tulisan berjalan (marquee) di blogspot kita. Caranya coba ikuti langkah-langkah berikut ini: 

• Login ke dasbor Blogspot sobat.
• Kemudian klik Tata Letak.
• Terus klik Tambah Gadget.
• Lalu pilih HTML/JavaScript dan klik tanda +
• Dan silahkan copy salah satu kode di bawah ini yang anda inginkan dan paste di situ, dan setelah itu silahkan klik Simpan.

1. Teks berjalan dari kanan ke kiri

 <marquee direction="left" scrollamount="2" align="center"> Cara Membuat Tulisan Berjalan (Marquee) </marquee>

hasil: Cara Membuat Tulisan Berjalan (Marquee)

2. Teks berjalan dari kiri ke kanan

 <marquee direction="right" scrollamount="2" align="center"> Cara Membuat Tulisan Berjalan (Marquee) </marquee>

hasil : Cara Membuat Tulisan Berjalan (Marquee)3. Teks berjalan bolak balik

 <marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Cara Membuat Tulisan Berjalan (Marquee) </marquee>

hasil : Cara Membuat Tulisan Berjalan (Marquee)

4. Teks berjalan dari atas ke bawah

 <marquee direction="down" scrollamount="2" align="center"> Cara Membuat Tulisan Berjalan (Marquee) </marquee>

hasil : Cara Membuat Tulisan Berjalan (Marquee)5. Teks berjalan dari bawah ke atas

 <marquee direction="up" scrollamount="2" align="center"> Cara Membuat Tulisan Berjalan (Marquee) </marquee>

hasil : Cara Membuat Tulisan Berjalan (Marquee)6. Teks berjalan mondar-mandir

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Cara Membuat Tulisan Berjalan (Marquee) </marquee>

hasil : Cara Membuat Tulisan Berjalan (Marquee)7. Teks berjalan zig-zag nembus

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Cara Membuat Tulisan Berjalan (Marquee) </marquee></marquee></center>

hasil :





Cara Membuat Tulisan Berjalan (Marquee)8. Teks berjalan zig-zag mantul

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Cara Membuat Tulisan Berjalan (Marquee) </marquee></marquee></center>

hasil :




Cara Membuat Tulisan Berjalan (Marquee)Selanjutnya yang perlu diperhatikan dalam cara membuat tulisan berjalan ini adalah mengganti tulisan Cara Membuat Tulisan Berjalan (Marquee) dengan teks atau kata-kata yang sobat inginkan.

Ket :

• # direction="left/right/up/down" --> itu berguna untuk engatur arah gerakan teks.
• # scrollamount="angka" --> itu berguna untuk mengatur kecepatan gerakan dalam pixel, semakin besar angka yang kita pasang, maka gerakannya semakin cepat.
• # behavior="scroll/slide/alternate" --> ini fungsinya untuk mengatur perilaku gerakan :

Scroll --> teks bergerak berputar

Slide--> teks bergerak sekali lalu berhenti

Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

• <center> ............. </center> tujuannya adalah agar tulisan tersebut selalu berada di tengah.

Gampangkan sobat cara membuat tulisan berjalan (marquee) di blogspot? Nah begitu dia caranya dan moga-moga tulisan ini bisa beguna.

Read More

Cara Membuat Refresh Otomatis Di Blogspot

Cara membuat refresh otomatis di blogspot adalah merupakan tutorial gratis atau tips gratis yang akan kita bahas kali ini. Karena menurut saya merefresh blog itu secara otomatis sangat penting karena bisa memperbaharui selalu tampilan blog kita di komputer user. Dan selain itu, kata para mastah kita nich bisa menaikkan traffic blog kita. :)

Apakah tertarik dengan tutorial atau tips di atas? Berikut caranya:

• Login di dasbor blogspot sobat.
• Klik Template.
• Klik edit HTML.
• Pilih teruskan.
• Centang Expand Template Widget.
• Lalu cari kode ]]></b:skin>
• Setelah ketemu copy kode di bawah ini dan taroh tepat di bawah kode ]]></b:skin> tadi.

<meta content='240' http-equiv='refresh'/>

• Silahkan simpan template sobat dengan mengklik Simpan Template.

Catatan:
pada angka 240 di atas, itu menunjukkan bahwa setiap 300 detik blogspot kita akan merefreshnya secara otomatis dan angka ini bisa kita ganti sesuai selera. :)

Nah begitu dia cara membuat refresh otomatis di blogspot yang tentu saja cara ini bisa kita terapkan di blogspot kita.

Read More

Cara Membuat URL Link Redirect Pada Blogspot

Cara membuat URL link redirect pada blogspot mungkin masih banyak di antara sobat yang masih belum tau caranya serta apa arti URL link redirect  itu sendiri.

Oke sebelum kita lanjut pada pokok bahasan kita, alangkah baiknya kalau aku kasih tau sedikit tentang  URL link redirect itu.

Pengertian URL link redirect adalah pengalihan user dari URL yang satu ke URL yang lain. Misalnya nich kita mempunyai dua blog yaitu blog A dan blog B. Dari kedua blog tersebut kita bisa mengalihkan semua pengnjung dari blog A itu ke blog B atau sebaliknya, dan itulah yang dinamakan  URL link redirect.

Dan cara membuat  URL link redirect di blogspot, berikut caranya:

• Login ke dasbor blogspot sobat.
• Klik menu Template.
• Klik edit HTML.
• Centang Expand Template Widget.
• Lalu cari kode </head>
• Dan kalau sudah ketemu copy kode di bawah ini, dan taruh di atas kode </head> tadi.

<meta content='5; URL= URL Blog/Web' http-equiv='refresh'/>

• Setelah itu silahkan disimpan dengan mengklik Simpan Template.

Keterangan:
Angka 5 pada kode di atas adalah merupakan waktu dalama detik yang kita berikan untuk beralih ke alamat blog yang kita tuju. Sedangkan pada URL Blog/Web adalah merupakan alamat webblog yang akan di tuju nanti, jadi ganti URL Blog/Web dengan alamat blog yang di tuju.

Begitu dia cara  membuat URL link redirect di blogspot serta pengertian URL link redirect itu sendiri.

Read More

Cara Membuat Menu Icon Social Media Melayang

Menu icon social media melayang yang sering kita lihat di blog-blog para mastah kita, kadang membuat kita iri melihatnya dan gimana cara membuatnya. Pengen rasanya menampilkan yang seperti itu di blog kita tapi kita gak tau cara membuatnya.
Untuk itu kali ini kita akan bahas cara membuat  menu icon social media melayang yang bisa kita praktekkan di blogspot kita. Caranya:

• Login ke dasbor blog sobat dulu.
• Klik menu Rancangan.
• Klik Edit HTML
• Jangan lupa centang Expand Template Widget.
• Lalu cari kode ]]></b:skin>
• Terus copy kode di bawah ini dan taruh tepat di atas kode ]]></b:skin>

#socialLinks { float:right; height:151px; margin:0; padding:26px 0 0 8px; position:fixed; right:0; text-align:right; top:40%; width:50px; } #socialLinks a { display:block; float:left; padding-right:10px; border:none; } #socialLinks a img { border:medium none; margin:0 0 10px; }

• Setelah itu cari lagi kode <body>, lalu copy paste kode di bawah ini tepat di bawah kode   <body>

<div id='socialLinks'> <a href='http://www.twitter.com/Username' target='_blank' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvVL_-zgUhEEMhvqlPmLA2mT1znO_ul-Zw6SMLgMFmQxgUpushVOP1GbhTInEmS62kpbDQywFNiQ8AF_PbpgppT-_esvnXe6Lmt0fV6fAjbsfMajY-TNaZ9Iwor9TBcFShuIV-Diih4dX/s0/ico_twitter.png'/></a> <a href='http://www.facebook.com/username' target='_blank' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMj9YqQ1JKUpXMvDug_6GSzY_n92eA_QnWJ4C1YB2M9hrSop2NLvGq9uAWttpLZxRO7SEZmiuRtkG2IikhPjFgtFTyr8SRAy_vB5oHJky_EWzTha8XdoZgb2sYuinjvV-wfBDBiPULGufk/s0/ico_facebook.png'/></a> <a href='/feeds/posts/default' target='_blank' title='RSS'><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Jv7F8KqvXP5a2z_ZNHKeCH8lHX-H7PuQSPtOhkyd11p-GyS0398rbCerYl-tE8GaeId3rcgVJCvjwUinC2_T_uhgk7Q2xkr0CLuBXEQl7SUCVf8AROoFXiHdSFfi5PCHGuxieddgL8rs/s0/ico_rss.png'/></a> </div>

Keterangan:

• Kode link yang berwarna pink di atas silahkan tukar dengan user name yang sobat pakai di masing-masing media tersebut.
• Dan yang berwarna merah silahkan di tukar dengan alamat feed blog sobat.

Nah begitu dia  cara membuat  menu icon social media melayang yang bisa kita pasang di blog kita agar blog kita bisa bersaing dengan blog para mastah kita. Hahahahahahhhh...... :)

Read More

Cara Membuat Text Area Di Blog

Cara membuat text area di blog sebenarnya sangat gampang (bagi yang sudah tau), namun bagi blogger yang masih newbie pasti bingung tujuh keliling. :)

Oke kita gak usah berpanjang lebar lagi, langsung aja kita bahas tentang cara membuat text area di blog yang bisa di terapkan baik dalam postingan maupun di widget.

Cara pertama:

ISI TEXT AREA

<p align="center"><textarea name="code" rows="5" cols="20"> ISI TEXT AREA </textarea></p>

Keterangan:
rows="5" adalah merupakan tinggi text area yang bisa dirubah dengan angka yang lebih besar atau lebih kecil.

cols="20" adalah merupakan lebar text area yang juga bisa dirubah lebih besar atau lebih kecil.


Cara Kedua
Cara kedua ini adalah merupakan cara membuat text area di blog dengan memakai HighLight

ISI TEXT AREA

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"> ISI TEXT AREA </textarea></p></div></form>

Keterangan:

• <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi tulisan ini gak boleh di rubah.
• Value="Highlight All" kata Highlight All adalah kata yang akan muncul di dalam kotak tombol, jadi jika anda ingin merubah kalimat ini silahkan ganti dengan kata yang anda inginkan misalnya Klik di sini untuk mengcopy, dll.
• Ukuran text areanya boleh di tukar sesuai keperluan.

Sekian dulu tutorial  cara membuat text area di blog yang bisa di pakai baik dalam postingan maupun di widget blog kita.

Read More

Cara Menampilkan Judul Posting Saja Ketika Label Di Klik

Di blogspot kadang kita direpotkan kala kita mengklik label atau kategory blog karena semua postingan dalam label tersebut akan di urai dalam satu halaman yang panjang sekali. Dan tentu ini sangat menggangu loading blog yang begitu lama. Selain itu user juga bingung artikel mana yang di pilih karena banyak dan panjang sekali.

Nah untuk menghindari hal tersebut dan agar tampilan blog kita nampak rapi dan enak di pandang mata, maka kita bisa mengakali dengan hanya menampilkan judul postingan saja ketika label atau kategori di klik.

Berikut cara menampilkan judul postingan saja ketika label atau kategori di klik:

• Pertama login dulu ke dasbor blog sobat.
• Klik menu Rancangan.
• Klik Edit HTML.
• Dan jangan lupa centang Expand Template Widget.
• Lalu cari kode <b:include data='post' name='post'/>
• Kemudian ganti kode tersebut dengan kode di bawah 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>

• Simpan template dengan mengklik SIMPAN TEMPLATE.

Begini dia cara menampilkan judul postingan saja ketika label atau kategori di klik dan sekarang coba cek blog sobat dan silahkan klik salah satu label/category sobat dan lihat hasilnya.

Read More

Cara Mematikan Klik Kanan Pada Blog

Cara mematikan klik kanan pada blog, ini adalah merupakan salah satu cara untuk menghindari blog kita dari copas (copy paste). Sehingga isi artikel kita gak bisa di curi alias dicopy paste.

Namun untuk memasang sistem ini di blog kita mastinya kita harus perhatikan dulu isi blog kita. Maksudanya kalau blog kita berisi tips-tips blog yang ada html-nya rasanya gak mungkin kita mematikan klik kanan di blog kita karena user gak bisa mengcopy html yang kita tulis tersebut. Tapi kalau blog kita berisi tutorial dan tips-tips yang tidak perlu di copy paste maka klik kanan boleh di matikan.

Nah, jika sobat ingin mematikan klik kanan pada blog sobat, berikut caranya:

• Pertama login dulu ke dasbor blogspot Anda.
• Klik menu Rancangan.
• Klik Elemen Laman.
• Pilih Tambah Gadget.
• Cari  HTML/JavaScript  dan klik tanda +.
• Lalu copy co de di bawah ini dan paste di gadget tadi.
  
  <script language="JavaScript">
  <!--
  //Disable right mouse click Script
  //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
  //For full source code, visit http://www.dynamicdrive.com
  var message="Dilarang Copas Boss";
  ///////////////////////////////////
  function clickIE4(){
  if (event.button==2){
  alert(message);
  return false;
  }
  }
  function clickNS4(e){
  if (document.layers||document.getElementById&&!document.all){
  if (e.which==2||e.which==3){
  alert(message);
  return false;
  }
  }
  }
  if (document.layers){
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown=clickNS4;
  }
  else if (document.all&&!document.getElementById){
  document.onmousedown=clickIE4;
  }
  document.oncontextmenu=new Function("alert(message);return false")
  // -->
  </script>

Catatan:

• Ganti kalimat yang berwarna pink di atas dengan kalimat keinginan sobat sendiri, misalnya ”dilarang klik kanan”, "dilarang Copas" dan lain-lain.
• Kadang script di atas juga gak berfungsi karena di blokir oleh script template yang kita pakai (namun itu sangat jarang terjadi).

• Setelah itu silahkan klik Simpan. Sekarang buka blog sobat dan coba klik kanan.

Nah itu dia script cara mematikan klik kanan pada blog atau cara menonaktifkan klik kanan pada blog, dan mudah-mudahan tutorial ini bisa membantu.

Read More

Cara Membuat Page Number Di Blogspot

Untuk mempercantik blog kita di blogspot memang kita melakukannya secara manual. Dan kali ini untuk mempercantik tampilan blog kita, kita akan membahas cara membuat page number di blogspot atau cara membuat halaman blog di blogspot.

Sobat pasti tau sendiri kalau pada template Blogspot umumnya hanya menggunakan navigasi Previous dan Next atau Posting lebih baru dan Posting Lama yang di selipkan dibagian bawah postingan blog, dimana fungsinya adalah untuk membantu pembaca/pengunjung berganti halaman postingan menuju tulisan sebelum atau setelah dari tulisan yang sedang dibaca tanpa ada keterangan nomor halaman berapa kita berada. Contohnya perhatikan pada bagian bawah blog sobat yang hanya ada tulisan Previous dan Next atau Posting lebih baru dan Posting Lama.

Tapi kalau page numbernya sudah di pasang maka tampilannya akan berubah seperti gambar di bawah ini:

Nah, cara membuat page number di blogspot atau blogger, ikuti langkah-langkah berikut ini:

• Seperti biasa, Login ke dasbor blogger sobat.
• Klik menu Rancangan.
• Klik Edit HTML.
• Lalu klik Expand Template Widget.
• Cari kode  ]]></b:skin>
• Kemudian masukan kode script yang ada di bawah ini tepat di atas kode: ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

• Selanjutnya cari lagi kode </body>
• Lalu masukan kode script berikut tepat di atas kode: </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>


Keterangan :

• Kode pageCount di atas adalah menunjukkan jumlah tulisan/posting/artikel yang akan ditampilkan dalam satu halaman.
• Kode displayPageNum adalah menunjukkan jumlah nomor halaman yang ditampilkan (jika diisi dengan angka 7 berarti nomor halaman yang muncul ada 8, ditambah satu untuk halaman satu).
• Kode upPageWord adalah untuk mengarahkan kita ke halaman yang lebih baru (tulisan Previous bisa diganti sesuai dengan keinginan).
• Kode downPageWord adalah untuk mengarahkan ke halaman yang lebih lama (tulisan Next bisa diganti sesuai dengan keinginan).

• Terakhir kita cari kode script berikut: 'data:label.url'
• Gantilah kode script di atas dengan kode dibawah ini:

'data:label.url + &quot;?&amp;max-results=5&quot;'

• Setelah selesai maka silahkan simpan template sobat dengan mengklik SIMPAN TEMPLATE.

Keterangan :
Fungsi dari script di atas adalah untuk mengganti tampilan default Blogspot yang akan menampilkan 20 postingan setiap halamannya. Namun karena pada pageCount di atas kita isi angka 5, maka pada script ini juga kita harus isi dengan dengan angka 5 (menampilkan 5 posting per halaman). Dan kalau kita ganti dengan angka lain, maka kita juga harus mengganti semua angka 5 di atas.

Nah, inilah dia tutorial atau tips  cara membuat page number di blogspot atau cara membuat halaman blog di blogspot. 

Read More

Cara Menambah Emoticon Di Komentar Psotingan Blogspot

Mempercantik blog memang sangat banyak caranya dan salah satunya adalah dengan menambah emoticon di komentar postingan blogspot sobat. Karena emoticon di komentar ini gak pernah ada di semua template kecuali kalau si empunya blog menambahnya secara terpisah.

Nah, jika sobat tertarik juga menambah emoticon di komentar postingan blogspot sobat, berikut caranya:

• Login ke dasbor blogger Sobat.
• Klik menu Rancangan.
• Klik Edit HTML.
• Jangan lupa centang Expand Widget Template.
• Cari kode </body>

Lalu letakan kode css berikut, dan taruh di atas kode: </body>

<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>

• Selanjutnya cari kode berikut, Lengkapnya perhatikan kode sibawah ini, (pehatikan kode yang berwarna pink) :

<p class='comment-footer'>

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

<b:include data='post' name='comment-form'/>

<b:else/>

• Kalau sudah ketemu, lalu copy dan pastekan kode di bawah ini tepat dibawah kode: <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

:D

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

:p

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

:)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

:(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

:|

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

Terus kadang juga ada template yang sudah di optimasi sehingga emoticon-nya gak muncul. Nah untuk mengatasinya silahkan perhatikan cara di bawah ini:


Coba cari kode dibawah ini :
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Kalo sudah ketemu, taruh kode emoticon di atas tadi tepat di atas kode: <b:include data='post' name='comment-form'/>

Dan taruh java script berikut, tepat di atas kode: </body>
<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>

• Setelah itu silahkan klik Simpan Template, dan lihat hasilnya.

Nah, begini dia cara menambah emoticon di komentar postingan blogspot, dan kode di atas juga masih bisa di tambah dengan emoticon yang lain yang sobat sukai.

Read More

Cara Memasang Tombol Tweet Di Setiap Postingan Blog

Tanpa perlu aku jalaskan di sini, bagi para blogger pasti sudah tidak asing lagi apa manfaat ngetweet blognya di twitter.

Kalau kita ngeblog di wordpress, pasti tombol tweet ini bisa di pasang hanya dengan mengnstall dan mengaktifkan salah satu pluginnya aja. Tapi bagi kita pengguna blogger atau blogspot, cara memasang tombol tweet di setiap pastingan blog kita harus memasangnya secara manual.

Berikut langkah-langkah memasang widget tombol tweet di setiap postingan di blogger atau blogspot:

• Login ke dasbor blogger sobat.
• Klik menu Rancangan.
• Klik Edit HTML.
• Centang Expand Widget Template.
• Carilah kode: <data:post.body/>
• Selanjutnya copy dan paste code di bawah ini tepat sebelum kode di atas.

<div style='float:right; padding:10px 0 0 5px'><script type='text/javascript'>tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_service = &#39;bit.ly&#39;;</script><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>

• Setelah itu klik Simpan Template dan lihat hasilnya.

Nah, beginilah dia cara memasang widget tombol tweet di setiap postingan di blogger atau blogspot dan semoga tutorial atau tips ini bisa membantu.

Read More

Membuat Label Tag atau Tag Cloud Animasi di Blogger

Di blogspot atau di blogger, kalau kita melihat tampilan label tag-nya biasanya tampilannya hanya biasa saja yang hanya menmpilkan widget yang berisi daftar label tag atau tag cloud blog pada umumnya.

Tapi kali ini kita akan berkreasi sedikit dengan kode HTML untuk membuat tampilan blog kita tambah keren dan menarik tentunya yaitu kita akan coba membuat label tag animasi di blogspot. Label tag animasi ini  istilah lainnya adalah blogumus maksudnya adalah jika widget label tag blog kita terkena kursor mouse maka tag blog kita akan bergerak dan berputar dengan sendirinya.

Berikut ini adalah merupakan contoh dari label tag

Oke jika sobat tertarik juga dengan label tag atau tag cloud (blogumus) animasi ini, berikut cara membuatnya:

• Login ke dasbor blog sobat.
• Klik menu Rancangan.
• Pilih Edit HTML.
• Beri tanda centang "Expand Template Widget"
• Sebelum kode ini di masukkan, tolong copy template blog lama Anda dulu, dan pastekan di notepad untuk menjaga-jaga siapa tau template blog sobat tidak mendukung kode ini.
• Cari kode ini: <b:section class='sidebar' id='sidebar' preferred='yes'> (untuk kode, mohon untuk disesuaikan saja, karena tidak semua template memiliki kode yang sama).
• Selanjutnya letakan kode berikut, tepat di bawah kode diatas:

 <b:widget id='Label99' locked='false' title='Label Tag' type='Label'>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

<script type='text/javascript'>

var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Perhatikan code di atas yang di beri warna, warna biru itu adalah merupakan judul label blog Anda nantinya, warna merah itu adalah merupakan ukuran lebar dan tinggi label cloud atau label tag, warna pink, adalah untuk merubah warna backgroud label tag cloud, dan warna hijau adalah untuk merubah besar kecilnya tulisan di tag/label cloud tersebut.

Catatan!!

Masalah yang sering kali muncul dalam pembuatan label tag atau tag cloud ini, yaitu:

Disebabkan karena file.swf yg sudah error.

Terus tidak semua template mendukung dibuatkan label tag atau tag cloud ini. 

Coba perhatikan link file swf di atas yang di beri warna orange, jika link tersebut error atau tidak berfungsi maka coba diganti dengan file.swf berikit:

http://www.swfcabin.com/swf-files/1275932799.swf

Nah, begitulah dia cara membuat label tag atau tag cloud atau istilah lainnya blogumus, dan sekarang silahkan percantik tampilan blog Anda dengan label tag animasi ini.

Read More

Kode HTML Warna

Kode HTML warna aku rasa masih banyak di antara sobat yang belum tau (wach tentu saja siapapun dia pasti gak mungkin menghafal kode HTML warna itu satu persatu). :) Nach untuk itu kalau sobat mau mengedit warna backgroung blognya atau warna teks blognya, berikut ini adalah merupakan kode HTML masing-masing warna.

Cara menggunakan atau cara mengetahui apa kode HTML warna tersebut, silahkan klik warna yang di kehendaki, lalu perhatikan di bagian bawahnya nanti akan tertulis kode HTML warna apa yang sobat klik.

Kode warna yang terpilih :

Nah itulah dia kode HTML warna untuk mengedit backgroud, tulisan atau gambar blog kita. Sekali lagi cara menggunakannya, silahkan klik warna yang di inginkan lalu perhatikan di bagian bawah tepatnya di dalam kotak Kode warna yang terpilih.

Read More

Pengertian dan Manfaat SiteLink

Diantara sobat pasti ada yang belum tau apa itu pengertian sitelink serta manfaat sitelink. Oke untuk lebih jelasnya biar aku paparkan sedikit di bawah ini.

Arti atau pengertian sitelink adalah merupakan kumpulan beberapa link dari situs atau blog yang ditampilkan di halaman pencari seperti google. Sitelink ini akan muncul kalau sobat mencoba searching di google dengan mengetikkan nama domain sobat saja tanpa tanda titik .(dot)com pada kotak pencarian.

Manfaat sitelink yaitu dengan adanya sitelink, maka bisa memberi kita dominasi keyword tertentu, yang artinya posisi blog kita akan paling teratas dengan keyword tertentu yang akan sulit digeser oleh blog lain. Dan dengan adanya sitelink itu, itu berarti google menganggap kalau blog kita itu banyak konten-konten yang di anggap penting, dan termasuk dalam golongan blog yang rajin posting.

Biasanya blog yang mendapat sitelink adalah blog yang sudah mempunyai umur. Dan menurut para blogger, sitelink itu adalah merupakan sebuah gengsi tersendiri bagi para webmaster/blogger itu sendiri.

Nah itu dia pengertian sitelink serta manfaat sitelink di blog yang sangat didamba-dambakan oleh blog baru. Hahahahahahhh..... :)

Read More

Membuat Internal Link Otomatis di Blogspot

Membuat internal link otomatis pada postingan blog, bukan hanya bisa di lakukan di wordpress melainkan  membuat internal link otomatis di blogger atau blogspot juga bisa. Hanya saja bedanya kalau di wordpress bisa di lakukan dengan cara menginstal plugin seperti plugin ALRP, sementara di blogger atau blogspot kita harus melakukannya secara manual.

Mungkin blogger yang masih pemula pasti belum tau apa guna atau manfaat internal link. Internal link sangat penting yaitu disamping untuk memperkuat keyword pada suatu postingan, internal link juga sangat bagus untuk tehnik SEO.

Salah satu cara membuat internal link otomatis pada blogger sebagai berikut:

• Login ke dasbor blogger atau blogspot Anda.
• Klik menu Rancangan.
• Lalu klik Edit HTML.
• Centang Expand Widget Templates.
• Cari kode <data:post.body/>

Lalu masukan kode Internal Link Otomatis di bawah ini tepatnya di bawah kode di atas: 

<b:if cond='data:blog.pageType = &quot;item&quot;'>Terima kasih atas kunjungan Anda pada postingan:<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>. Mungkin Anda tertarik ingin membaca artikel &#169;<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> yang lainya?</b:if>

• Setelah itu silahkan klik SIMPAN TEMPLATE.

Nah sekarang silahkan buka salah satu judul artikel Anda dan lihat hasilnya. Mudahkan membuat internal link otomatis di blogger atau blogspot?

Ket: Anda juga bisa mengkreasikan dengan kata-kata Anda sendiri dengan mengganti tulisan " Terima kasih atas kunjungan Anda pada postingan" dan  "Mungkin Anda tertarik ingin membaca artikel" serta  "yang lainya?" di atas sesuai dengan keinginan anda.

Read More

Membuat Tampilan Link Bergerak Saat di Lewati Kursor

Sobat pasti Anda pernah melihat di blog seseorang diman apabila link tersebut tersentuh kursor maka link tersebut akan bergerak..

Nah, untuk membuat tampilan link bergerak saat di lewati kursor seperti itu, kali ini, kita akan membahas cara membuatnya.

• Pertama login ke Blogspot anda.
• Klik menu Rancangan.
• Kemudian klik Edit HTML.
• Jagan lupa untuk Centang Expand Template Widget.
• Silahkan cari kode ini </head>.
• Setelah ketemu, silahkan copy kode berikut dan letakkan diatas kode </head> di atas.

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

$(document).ready(function() {

$(&#39;a&#39;).hover(function() { //mouse in

$(this).animate({ marginLeft: &#39;12px&#39; }, 400);

}, function() { //mouse out

$(this).animate({ marginLeft: 0 }, 400);

});

});</script>

• Setelah itu silahkan klik SIMPAN TEMPLATE.

  Sekarang silahkan buka blog Anda dan coba arahkan kursor Anda di salah satu link yang ada di blog Anda dan lihat perubahannya. Sekian cara  membuat tampilan link bergerak saat di lewati kursor dan ini hanya berlaku di blogspot atau blogger.

Read More

Cara Membuat Judul Posting Berjalan di Blogspot

Cara Membuat Judul Posting Berjalan di Blogspot atau blogger sebelumnya pernah kita bahas di sini, namun sekarang kita akan bahas dalam versi lain. Cara ini hanya berfungsi untuk blogspot atau blogger, sementara di wordpress tentu saja caranya lain.

Berikut cara membuat judul teks berjalan pada postingan atau artikel bergerak di blogger:

• Pertama log in dulu di blogger.com.
• Pilih menu Rancangan.
• Pilih Edit HTML.
• Centang Expand Template Widget dan back up dulu template dengan cara copy seluruh template lama Anda dan simpan di Notepad, dan baru Anda paste code yang di bawah ini.
• Cari kode seperti di bawah ini :

<b:if cond='data:post.title'> <h3 class='post-title entry-title'><b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3></b:if>


Atau seperti kode di bawah ini:



<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
 </b:if>

• Lalu ganti dengan kode di bawah ini :

<b:if cond='data:post.title'> <h3 class='post-title entry-title'><marquee behavior='alternate' onmouseout='this.start()' onmouseover='this.stop()'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/> <data:post.title/> </b:if> </b:if> </marquee> </h3></b:if>

• Setelah itu silahkan klik SIMPAN TEMPLATE. 

Nach demikian tutorial singkat tentang cara membuat judul posting berjalan di blogspot atau blogger, dan semoga tutorial ini bisa bermanfaat untuk sobat semua.

Read More