Senin, 26 Desember 2011

Membuat Title Blog Berjalan

Apa bisa membuat title blog berjalan? tentu bisa ! Caranya sangat mudah anda hanya perlu mengikuti langkah-langkah dibawah ini. Ok!Ikuti Demoonya:
  1. Masih seperti biasa pastikan anda login ke blog anda
  2. Pilih Rancangan >Edit HTML
  3. Cari kode
    <title><data:blog.pageTitle/></title>
  1. Ganti kode tersebut dengan kode dibawah ini
<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
Keterangan:
  • Pastikan kode <b:include data='blog' name='all-head-content'/> haya ada satu
  • Kode var kecepatan=100 anggak 100 adalah angka yang menujukan kecepatan title blog berjalan. Bisa anda ganti sesuai dengan selera anda

  1. Klik simpan 
  2. Lihat hasilnya (Jika berhasil title blog anda akan berjalan)

Membuat Kotak Search Engine Di Blog


Membuat Kotak Search Engine juga bisa dikatakan penting. karena dengan adanya kotak pencarian ini, para pengunjung tidak perlu mencari satu persatu postingan yang ada di blog kita. Cukup dengan menulis kata kunci yang ingin dicari lalu klik enter dan ketemu. Bagaimana, tertarik untuk mencobanya? 

Cara untuk memasang kotak pencarian di blog kita adalah sebagai berikut:
1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Tambah Gadget >> JavaScript/HTML, dan isikan kode berikut:

<form action="http://alpine-corporation.blogspot.com/search"method="get"><input class="textinput" name="q" size="25" type="text"/><input value="Search In Blogger" class="buttonsubmit"name="submit" type="submit"/></form>


Keterangan:
Biru=Ganti dengan alamat blog anda.
Merah=Adalah panjang kotak pencarian, silahkan disesuaikan.
Orange=Nama Tampilan Tombol Pencarian.
4. Simpan hasil kerjaan anda.
5. Selesai.
Hasilnya kurang lebihnya seperti ini: 

Memberikan Link Menjadi Efect Pelangi


Kali ini, saya akan memberikan tutorial cara membuat link di blog kita jadi kayak pelangi. Seperti biasa, Ikuti Demonya:

1. Buka dulu Blog anda.
2. Masuk ke tata letak.
3. Masuk ke Edit HTML.
4. cari kode berikut :

<head>

5. Paste kan kode berikut

 <script src='http://sites.google.com/site/gudangfathur/kode/rainbowlink.js'/>

  diatas kode  <head> tadi.


Hasilnya:

Menambahkan Emoticont Di Kotak Komentar


Contoh emoticonnya adalah seperti ini :



1. Masuk ke akun bloggermu
2. Tata Letak >> Edit HTML
3. Jangan Lupa backup dulu Templatmu dan beri centang Expand Template Widget
4. Copy script dibawah ini dan pastekan di atas kode </body>

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


 5. Carilah kembali kode <b:if cond='data:post.embedCommentForm'> 

Tips: Gunakan tombol Ctrl+F untuk mencarinya

6. Kemudian taruh kode dibawah ini persis di atas kode berwarna merah diatas :

<b><table width='100%'>
<tr>
<td align='center' rowspan='3' valign='center' width='50%'><img height='32' src='http://emonizer.googlepages.com/drinking24.gif' width='72'/><br/>Silakan Bekomentar.!!!<br/><br/>
<img height='50' src='http://img171.imageshack.us/img171/5241/57040296.gif' width='50'/><img height='50' src='http://img171.imageshack.us/img171/5241/57040296.gif' width='50'/><br/>Semakin banyak berkomentar, semakin banyak backlink, semakin cinta Search Engine terhadap blog anda </td>
<td width='40%'><img height='66' src='http://img15.imageshack.us/img15/8923/734003001266246989.gif' width='186'/></td>
<td valign='center' width='10%'>:a:</td></tr>
<tr><td width='40%'><img height='66' src='http://img175.imageshack.us/img175/5466/880746001266247042.gif' width='186'/></td>
<td valign='center' width='10%'>:b:</td></tr>
<tr><td width='40%'><img height='66' src='http://img52.imageshack.us/img52/4918/528602001266247199.gif' width='186'/></td>
<td valign='center' width='10%'>:c:</td></tr>
<tr><td align='center' colspan='3'>
<table border='3px'>
<tr><td align='center' border='3px'>
<img height='32' src='http://img63.imageshack.us/img63/3787/waaaht.png' width='32'/>:1:
<img height='32' src='http://img251.imageshack.us/img251/9843/toothgrin.png' width='32'/>:2:
<img height='32' src='http://img99.imageshack.us/img99/4905/samoaner.png' width='32'/>:3:
<img height='32' src='http://img199.imageshack.us/img199/9031/sadpx.png' width='32'/>:4:
<img height='32' src='http://img186.imageshack.us/img186/4016/hugging.png' width='32'/>:5:
<img height='32' src='http://img7.imageshack.us/img7/1382/grinder.png' width='32'/>:6: <br/>
<img height='32' src='http://img413.imageshack.us/img413/4439/dribble.png' width='32'/>:7:
<img height='32' src='http://img38.imageshack.us/img38/8361/byebyen.png' width='32'/>:8:
<img height='32' src='http://img705.imageshack.us/img705/9408/burnjossstick.png' width='32'/>:9:
<img height='32' src='http://img715.imageshack.us/img715/6470/beatbrick.png' width='32'/>:10:
<img height='32' src='http://img230.imageshack.us/img230/3364/adoren.png' width='32'/>:11:
</td></tr></table></td></tr>
</table>
</b>

7. Kemudian tinggal Simpan Template deh.
8. Selesai

Anti CoPas (Copy Paste)


Jika anda merasa bahwa postingan anda tidak boleh di CoPas orang lain, menurut saya sich sah-sah saja.
Tapi di balik itu, kita semua tahu bahwa membahagiakan orang lain adalah amal ibadah. Jadi kalau orang lain menjiplak postingan anda, berarti anda telah membantu/membahagiakan orang lain.
Alangkah bijaknya bila kita minta izin kepada yang punya blog atau setidaknya meninggalkan komentar, bahwa kita telah menCoPas karyanya. Dan lebih bijak lagi bila kita menyertakan nama si Pembuat karya tersebut apabila kita juga mempostingkannya.

Jika anda memang tidak ingin karya anda di CoPas orang lain, silahkan ikuti langkah-langkah berikut :

1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode <head>
6. Persis setelah kode tersebut, copypastekan script berikut ini
<script>
var message="Maaf, Klik Kanan Tidak Diperbolehkan !";
///////////////////////////////////
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>

7. Klik Simpan Template
8. Selesai

Cara Membuat Kursor Di Ikuti Text

Karna sebuah Blog akan Cantik Bila kita bisa menghias nya,dan itupun cara untuk membuat pengunjung blog kita Betah berlama-lama di dalam Blog kita.
Ini Contohnya:


Kita mulai saja tutorial nya...
Silahkan Sobat Copy scrip Di bawah ini.


<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;



/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style><br />
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Nama  sobat";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

Untuk cara Memasukan Kode di atas ini adalah sebagai berikut :

1. Pilih tataletak rancangan
2.Tambah Gadget > pilih HTML/java Scrip.
3. Kemudian Copy Scrip di atas ini.
 4. Sobat Bisa Lihat Kode yang seperti ini di dalam scrip,Ubahlah yang bertulisan "Nama Sobat"sesuai dengan Keingin sobat sendiri... // Your message here (QUOTED STRING)
var msg = "Nama  sobat";...
5. Kemudian Simpan...

Saya rasa Sudah cukup Jelas Untuk tutorial Cara Membuat Kursor Di Ikuti Teks ini.

Menambahkan Fitur Translate Di Blog


Menambahkan Fasilitas translate akan sangat membantu pengunjung blog anda terutama pengunjung yang dari luar. Maksutnya orang dari negara lain yang mengunjungi blog anda. Selain itu dengan adanya fasilitas translate juga dapat meningkatkan jumlah pengunjung blog anda. kanapa bisa ?, karena orang dari negara lain akan mengerti apa yang anda tulis dengan menerjemahkan bahas tulisan anda. dengan demikian orang luar akan lebih sering mengunjungi blog anda. Fasitas tanlate yang akan kita buat adalah fasilitas tranlate dengan logo bendera seperti ini:

Gambar
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Cara menambahkan fasilitas tranlate kedalam blog anda langkah-langkahnya adalah :
  1. Login ke blog anda
  2. Pilih Rancangan >Tata letak/Elemen halaman >Tambah  gadget > pilih HTML/java Scrip.
  3. Muncul halaman seperti ini
 
4.Copas kode berikut kedalam box yang tersedia.

<center>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/inggris.gif" height="20" title="English" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/francis.gif" height="20" title="French" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/jerman.gif" height="20" title="German" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/spnyol.gif" height="20" title="Spain" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/italiab.gif" height="20" title="Italian" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/belanda.gif" height="20" title="Dutch" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/rusia.gif" height="20" title="Russian" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/brazilia.gif" height="20" title="Portuguese" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/jepang.gif" height="20" title="Japanese" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/koreautara.gif" height="20" title="Korean" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/saudiarabiab.gif" height="20" title="Arabic" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="http://i1211.photobucket.com/albums/cc432/Aldi96/cina.gif" height="20" title="Chinese Simplified" align="absbottom" /></a>
</center>

5.Klik simpan dan lihat hasilnya
6.Selamat mencoba dan Trima kasih.

Cara Menghilangkan Nomor Di Label Blog

Ketika Sobat melakukan trik blogger memasang label postingan dalam blog. Kamu akan melihat jumlah postingan yang mengikuti label atau kategori terkait yang ditunjukkan dengan angka dalam tanda kurung. Nah, apabila Sobat kurang suka dengan tampilan angka jumlah label tersebut, maka Sobat bisa menghilangkannya dengan melakukan trik tertentu.

Contoh : 
Tutorial Blog (8)
Trik Blog (10)
Tips Blog (12)

Menjadi :
Tutorial Blog
Trik Blog
Tips Blog

Agar lebih menghemat waktu, mari kita mulai mantra trik blogger untuk menghilangkan angka jumlah label tersebut. Eit, hampir lupa trik ini dapat di gunakan jika kamu telah memasang widget atau gadget label dalam blog.


  •     Login dulu ke account blogger kamu.

  •    Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".


Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template sobat yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Sobat sudah memiliki back-up untuk mengembalikannya seperti semula.

  •     Cari kode (<data:label.count/>).


Tips : Kalau susah mencarinya, coba tekan CTRL+F di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox) Jika Sobat Menggunakan Google Chrome,sama saja cara pencarian nya,hanya saja letak nya ada di atas,lalu sobat tinggal memasukkan kata yang ingin dicari.

  •     Jika sudah ketemu, hapus kode tersebut.

  •     Jangan lupa disimpan

Selesai.
Mudah kan,Hanya Itu saja Tips dan Trik Blogger Kali ini,semoga bermanfaat buat sobat semua.
Selamat menghilangkan angka jumlah label.

Cara Menghapus Label Blogger

Cara menghapus sebuah label (How to remove label) blogger adalah sbb:
1. Dashboard - Posting - Edit Posts
2. Di bagian kiri, klik label yang ingin Anda hapus. Misalnya Anda ingin menghapus sebuah label bernama "Tutorial".

3.Klik "Label Actions" arahkan kebawah hingga Anda menemukan Remove Label yang dibawahnya ada sebuah label bernama "Tutorial". Klik label yang akan dihapus tersebut (label bernama "Tutorial").

4. Selesai.

Halaman Maintenance

Kali ini saya akan kembali membahas tentang tips dan trik blogspot. Biasanya saat kita sedang meng-edit blog (apapun itu) pasti gak mau kan keliahatan kalau blog kita sedang diperbaiki, syukur-syukur kalo gak keliatan errornya waktu edit, lah kalo ada? malu n gak enak dilihat kan? Nah, untuk mengatasi hal tersebut kita sebagai blogger setia (Blogspot) tentunya ada caranya, yaitu dengan Mode Maintenance.

Oke, silahkan lihat demonya. Cara membuatnya-pun cukup mudah, hanya menggunakan kode CSS, pasti mudah dan gak ribet!  bila sobat memasang kode maintenance-nya, maka akan muncul creenshot seperti dibawah ini:
 

Bila tertarik untuk membuat Halaman Maintenance Pada Blogspot, silahkan ikuti langkah-langkah berikut:


1. Login ke akun blogger.
2. Masuk ke rancangan/design.
3. Pilih Tata Letak.
4. Edit HTML.
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>


html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; }

6. Jangan lupa Simpan Template.

Sampai disini anda sudah bisa membuat Halaman Maintenance Pada Blogspot
Keterangan:
Silahkah ganti link image diatas (http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) sesuai dengan kreasi .