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.

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.

Cara Membuat Link Otomatis Dalam Postingan Blog

Bagi yang hobbi ngeblog pasti sudah tahu betapa penting yang namanya SEO. Tehnik-tehnik dalam SEO sendiri juga sangat banyak mulai dari keyword atau kata kunci, membuat breadcrumb navigasi, serta bertukar link untuk mendapatkan back link, dan masih banyak lagi, dan salah satunya yang akan kita bahas kali ini yaitu cara membuat link otomatis dalam postingan blog.

Membangun internal link pada artikel juga sangatlah penting karena dengan itu bisa menjadikan artikel itu terkait antara artikel yang satu dengan artikel yang lainnya. Nah untuk itu makanya kita harus membuat link otomatis untuk mempermudah navigasi blog kita bisa terhubung antar artikel yang satu dengan yang lain.

Untuk itu disini kita akan memberi sedikit tips bagaimana cara membuat link otomatis dalam postingan blog agar dalam artikel kita akan terbentuk link secara otomatis sesuai dengan keyword yang kita inginkan. Sehingga setiap kali kita menulis keyword tertentu maka kata itu akan otomatis menjadi sebuah link sesuai dengan url yang kita inginkan.

Cara membuat link otomatis itu dalam postingan blog, coba ikuti langkah-langkahnya berikut ini:
  • Login ke dasbor blog kita dulu.
  • Klik Template.
  • Klik Edit HTML.
  • Pilih Lanjutkan.
  • Centang Expand Template Widget.
  • Copy template lama dan paste di notepad  (untuk backup).
  • Lalu cari kode: </head>
  • Kalau sudah ketemu, lalu copy kode di bawah ini dan pastekan tepat di atas </head> tadi.
<script type='text/javascript'>
//<![CDATA[ function doHighlight(bodyText, searchTerm,link) { var newText = ""; var i = -1; var lcSearchTerm = searchTerm.toLowerCase(); var lcBodyText = bodyText.toLowerCase(); while (bodyText.length > 0) { i = lcBodyText.indexOf(lcSearchTerm, i+1); if (i < 0) { newText += bodyText; bodyText = ""; } else { if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf(">", i)) { if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) { newText += bodyText.substring(0, i) + '<a href="'+link+'">'+ bodyText.substr(i, searchTerm.length) + '</a>'; bodyText = bodyText.substr(i + searchTerm.length); lcBodyText = bodyText.toLowerCase(); i = -1; } } } } return newText; } function highlightSearchTerms(searchText, treatAsPhrase,link,divid) { if (treatAsPhrase) { searchArray = [searchText]; } else { searchArray = searchText.split(" "); } div=document.getElementById(divid); var bodyText = div.innerHTML; for (var i = 0; i < searchArray.length; i++) { bodyText = doHighlight(bodyText, searchArray[i], link); } div.innerHTML = bodyText; return true; } //]]></script>

  • Setelah itu cari kode: <data:post.body/> kode ini biasanya ada 2, dan pilih kode yang ada di bawah. Dan kalau sudah ketemu ganti kode tersebut dengan kode dibawah ini:
<p><div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>
highlightSearchTerms('anchor text keywords',true,'link artikel tujuan','summary<data:post.id/>');
highlightSearchTerms('anchor link keywords2',true,'link artikel tujuan','summary<data:post.id/>');
</script></p>
  • Dan untuk menambahkan keywords yang akan di targetkan, maka coba tambahkan kode berikut:
highlightSearchTerms('anchor tex keywords',true,'Alamat blog sobat','summary<data:post.id/>');

Keterangan:
  • Silahkan ganti tulisan anchor text keywords dengan text/tulisan yang akan kita targetkan sebagai anchor link otomatis nantinya.
  • Lalu ganti pula link artikel tujuan dengan alamat link artikel yang sesuai dengan anchor text keywords yang di bidik.
  • Ganti Alamat blog sobat dengan alamat url blog Anda.
  • Setelah selesai, simpan template sobat dengan mengklik Simpan Template.
Nah itu dia tutorial cara membuat link otomatis dalam postingan blog yang bisa memudahkan navigasi blog kita dan juga untuk membangun internal link.

Software Gratis Untuk Membuat Banner

Software gratis untuk membuat banner memang sangat banyak dan salah satunya yang akan kita bahas kali ini adalah softaware Easy GIF Animator. Software pembuat banner gratis ini memang sangat banyak kelebihannya di banding dengan software pembuat animasi yang lain.

Jadi jika sobat ingin membuat banner atau ingin membuat animasi yang keren, software Easy GIF Animator ini bisa menjadi salah satu pilihan. Adapun beberapa kelebihan dari Easy GIF Animator ini:
  • Mudah dalam membuat banner, animasi, gambar dan tombol.
  • Bisa membuat gambar GIF animasi dari awal.
  • Bisa mengedit dan memodifikasi gambar animasi GIF sobat.
  • Dapat menambahkan efek visual animasi GIF sobat.
  • Dapat membuat efek teks bergerak.
  • Dapat di pakai untuk mengoptimalkan animasi gambar GIF.
  • Gambar GIF animasi di web browser.
  • Bisa meresize seluruh animasi sekaligus.
  • Kita dapat mengelola frame animasi kita.
  • Kita bisa mengatur jumlah loop animasi dan durasi frame.
  • Ekstrak frame animasi terpisah.
  • Reverse GIF animasi atau hanya sebagian saja darinya.
  • Mudah dalam mengatur transparansi.
  • Bisa kita tambahkan suara ke animasi kita.
  • Simpan animasi dalam format Flash SWF.
  • Kita bisa mencari gambar dari Web untuk kita gunakan dalam animasi kita.
  • Kita bisa mengekspor GIF animasi kita ke dalam format AVI.
  • Kita bisa menggunakan gambar GIF, JPG, PNG dan BMP dalam animasi.
  • Setelah siap, akan menghasilkan HTML kode untuk animasi penerbitan di web atau blog kita.
Nah jika sobat sekarang ingin membuat banner atau animasi, softaware gratis untuk membuat banner dan animasi Easy GIF Animator ini bisa menjadi pilihan. Untuk mendapatkannya, silahkan download di sini.

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...... :)

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:


<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


<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.

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.

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.

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

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.

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.

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.

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.

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..... :)

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.

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.

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.

Pengertian dan Cara Membuat Blogroll di Blog

Sebelum kita membuat blogroll di blog, alangkah baiknya kalau sebelumnya kita harus mengetahui dulu pengertian blogroll tersebut. Blogroll dapat didefinisikan sebagai sekumpulan link blog yang diletakkan di halaman blog kita. Blogroll juga kita bisa menfaatkan untuk saling bertukaran link dengan orang lain. Dan ini termasuk salah satu cara untuk meningkatkan traffic dan page rank sebuah blog.

Setelah kita mengetahui pengertian blogroll, maka sekarang saatnya kita kan membahas cara membuat blogroll itu di blog kita. Coba ikuti langkah berikut ini:
  • Silahkan masuk ke dasbor akun blogspot Anda.
  • Klik menu Rancangan.
  • Klik Elemen Laman.
  • Klik Tambah Gadget.
  • Cari HTML/JavaScript, dan silahkan klik tanda "+".
  • Lalu masukkan kode di bawah ini.

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 140px; height: 140px; text-align: Left; background:#ffffff;">

<a href="
http://alamat-url-1/" target="_blank">Nama blog</a><br/>
<a href="http://alamat-url-2/" target="_blank">Nama
blog</a><br/>
<a href="http://alamat-url-3/" target="_blank">Nama
blog</a><br/>
<a href="http://alamat-url-4/" target="_blank">Nama
blog</a><br/>

</div>

  • Dan setelah selesai, silahkan klik Simpan.

Dari kode di atas, yang perlu kita perhatikan adalah:

Pada tulisan width = 140 (ini ukuran lebar blogroll yang bisa di ganti sesuai dengan blog kita) height = 140 (ini adalah ukuran tinggi blogroll yang bisa di ganti sesuai keinginan kita).

Pada tulisan  text-align: Left ini adalah merupakan letak huruf kita. Kalau kita mau hurufnya datar kanan, kita bisa mengganti kata left dengan Right atau kalau kita mau rata tengah kita bisa menggantinya dengan Center

Background = #ffffff (ini adalah merupakan warna latar belakang kotak atau tabel yang bisa kita ganti warnanya sesuai selera).

Teks yang berwarna hijau silahkan ganti dengan alamat url yang akan di masukkan dan nama blog yang ingin di tampilkan.

Sekarang apakah Anda sudah tau pengertian blogroll serta cara membuat blogroll di blog? Moga-moga artikel ini bisa membantu.

Membuat Related Post Dengan Thumbnails

Mempercantik tampilan blog memang sangat banyak caranya dan salah satunya adalah membuat related post dengan thumbnails.

 Related post dengan thumbnails adalah merupakan tampilan artikel terkait bergambar yang di tampilkan di bawah artikel blog kita. Jadi kalau artikel blog kita selau di sertai dengan gambar di awal artikel, maka  related post dengan thumbnails ini sangat bagus untuk blog kita.

Jika Anda tertarik ingin menampilkan artikel terkait yang di sertai dengan tampilan gambar, Anda bisa mencobanya dengan merubah sedikit kode template blogger atau blogspot Anda. Ikuti langkah berikut ini:
  • Login ke account atau dasbor blogger anda.
  • Masuk ke halaman Rancangan.
  • Klik Edit Html.
  • Dan jangan lupa beri tanda centang pada "Expand Widget Templates".
  • Cari dan temukan kode </head>.
  • Gantilah kode tersebut dengan kode dibawah ini :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

  •  Lalu cari dan temukan lagi kode dibawah ini:
<div class='post-footer-line post-footer-line-1'>
  • Lalu letakkan kode dibawah ini persis dibawah kode tersebut di atas.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
 <!-- Related Posts with Thumbnails Code End-->
  • Sekarang simpan template Anda dengan cara klik SIMPAN TEMPLATE.
 Siap dech dan apabila langkah-langkah di atas di lakukan dengan benar, maka silahkan coba lihat hasilnya pada blog Anda. Pasti related post atau artikel terkait dengan thumbnails muncul pada halaman posting blog Anda.

Selamat mencoba!!!

Cara Membuat READMORE Otomatis di Blogspot

Cara Membuat Readmore Otomatis di blogspot atau blogger memang masih banyak yang belum tau caranya. Dan postingan kali ini kita akan membahas tutorial tentang cara membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Karena dengan adanya Readmore otomatis, maka kita bisa menentukan ukuran berapa ketinggian serta lebar penggalan postingan dan gambar yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik di pandang mata.

Trik ini memang sudah banyak yang mengetahui, namun pasti ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis di poastingan blogspot atau blogger, maka bisa mengikuti tutorial berikut ini.
  • Silakan masuk ke acount atau dasbor blogger Anda.
  • Kemudian pilih menus Rancangan.
  • Klik Edit HTML.
  • Lalu berikan tanda ceklis pada bacaan Expand Widget Template dengan cara mengklik kotak tersebut.
  • Setelah itu cari kode </head> 
  • Dan setelah ketemu, silahkan masukkan script di bawah ini persis dibawah kode tersebut.
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>
  • Lalu cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>
  • Lalu ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Keterangan dari script di atas:
  • Tulisan yang berwarna pink adalah merupakan tulisan yang bisa di ganti-ganti.
  • Summary noimg = 430 adalah merupakan tinggi artikel terpenggal tanpa image.
  • Summary img = 340 adalah merupakan tinggi artikel terpenggal dengan image.
  • Readmore bisa diganti dengan kata Baca Selengkapnya, Baca selanjutnya, dll...
Nach seperti inlah kira-kira script html cara membuat Readmore otomatis di blogspot atau blogger yang bisa mempercantik tampilan blog kita.

Membuat Judul Atau Title Blog Berjalan di Blogspot

Berkreasi dengan kode HTML dan php, memang merupakan sesuatu yang sangat mengasyikkan bagi yang mengerti tentang itu. Kita bisa memainkan tampilan website atau blog kita sesuka hati dengan pernak pernik yang menarik.

Kali ini kita bermain-main sedikit tentang kode html untuk membuat judul atau title blog berjalan di blogspot atau blogger. Sebenarnya ini juga bisa di pakai di blog wordpress, hanya saja cara membuatnya tentu agak berbeda dengan blogspot.Caranya begini:
  • Login ke dashboard blogspot Anda.
  • Pilih menu Rancangan.
  • Lalu pilih menu Edit HTML.
  • Klik kotak Expand Template Widget.
  • Cari kode ini: <title><data:blog.pageTitle/></title> (bila susah mencarinya silahkan tekan tombol Ctrl dan tombol F di keybord komputer Anda, lalu perhatikan monitor Anda, nanti akan muncul kotak, maka silahkan masukkan kode tadi ke dalam kotak tersebut. Nanti akan otomatis akan muncul kode yang di cari).
  • Kalo sudah ketemu ganti kode itu dengan kode yang 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>
  • Setelah itu silahkan klik tombol SIMPAN TEMPLATE.
Nach sekarang silahkan buka blog Anda dan silahkan perhatikan tampilan Judul atau title blog Anda di browser Anda.

Dan untuk mengatur kecepatan jalan hurufnya, silahkan ganti angka yang 100-nya sesuka Anda. Semakin besar angkanya maka semakin pelan jalan tulisannya. Begitu juga sebaliknya.

Gampang chan membuat judul atau title blog berjalan di blogspot atau blogger ??? Hanya dengan kode yang sedikit itu, bisa mempercantik tampilan blog kita.

Selamat berkreasi!!!

Cara Memasang Iklan atau Ads di Bawah Judul Postingan Blogspot

Memasang iklan di bawah judul postingan blog, bagi yang masih pemula memang masih banyak yang belum tau. Itu aku tau dari salah satu blog aku yang menggunakan domain costum, masih sangat banyak yang menanyakan gimana caranya meletakkan ads di bawah judul postingan blog. Karena kebetulan di blog aku tersebut, kebetulan juga aku meletakkan iklan di bawah judul postingan blog. Dan ternyata dengan meletakkan iklan di bawah postingan judul blog, ternyata sangat banyak mendapatkan klik dari user yang berkunjung dari pada di tempat lain.

Dan kalau Anda tertarik juga ingin meletakkan ads atau iklan di bawah judul postingan blog Anda, coba ikuti langkah berikut ini:
  • Login ke dasbor blog Anda.
  • Klik menu Rancangan.
  • Klik edit HTML.
  • Lalu cari code <div class='post-header-line-1'/>.
  • Setelah ketemu, silahkan copy code di bawah ini dan pastekan di bawah code di atas.
<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><br/><em>

Tempatkan Di Sini Script Iklan Anda

</em><br/></b:if>
  • Setelah itu klik SIMPAN TEMPLATE.
Siap dech. Sekarang blog Anda sudah bisa menampilkan iklan atau ads di bawah judul postingan blog Anda.

Membuat Floating Iklan Bergerak Mengikuti Kursor

Pernah Anda berkunjung ke blog seseorang dan melihat ada sebuah iklan bergerak yang mengikuti arah gerak kursor? Itulah yang dinamakan floating ads bergerak.

Nach kalau Anda tertarik ingin membuat floating ads bergerak mengikuti kursor di blog Anda, kita silahkan copy code javascript di bawah ini dan tempatkan di blog Anda.

Berikut cara membuat floating ads bergerak:
  • Masuk atau login ke dasbor blog Anda.
  • Klik menu Rancangan.
  • Klik Tambah Gadget.
  • Pilih HTML/Java Script dan silahkan klik tanda "+".
  • Lalu copy code di bawah ini dan pastekan di dalamnya: 
<style type="text/css">
#topbar{
position:absolute;
background:#ffffff;
z-index:+1000;
}
</style>
<script type="text/javascript">
/***********************************************
* Floating Top Bar script- &#169; Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 100 //set x offset of bar in pixels
var startY = 75 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.center=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<div align="right">
<center><span style="background-color:#ffffff;"><font color="black"><b>KLIK SALAH SATU IKLAN UNTUK MENUTUP</b></font></span></center>
</div><div id=layerba" onclick="closebar(); return true">
<center><div style="overflow:hidden;width:800px;height:400px;padding:50px; border: 20px solid #ffffff">

SCRIPT IKLAN ANDA LETAKKAN DISINI

</div></center>
  • Simpan dan lihat hasilnya.
Beginilah cara  membuat floating ads bergerak yang mengikuti arak kursor dimana di gerakkan. Dan berdasarkan pengalaman, dengan menggunakan script ini penghasilan kita akan berlipat ganda. Apalgi kalau ads yang kita tempatkan adalah merupakan iklan PPC (paid per click).

Tapi pesan saya hati-hati dalam memakai atau menggunakan script ini karena bisa-bisa nanti akun Anda di banned oleh tempat anda mendaftar. :)

Memasang Widget Kirim SMS Gratis di Blog

Anda pasti pernah melihat di blog seseorang yang memasang widget pengiriman SMS gratis ke semua operator? Artinya kita bisa kirim SMS secara gratis kesemua operator tanpa harus kita mengetik pesan di hp kita dan tentu saja tanpa memotong pulsa kita juga. Sekarang ini penyedia jasa seperti itu di internet memang sudah sangat banyak

Nach jika Anda juga tertarik ingin memasang widget pengiriman SMS gratis ini di blog Anda, sebenarnya sangat gampang koq. Tinggal copi scriptnya, lalu tempel di blog Anda.

Behubung di Indonesia juga sudah ada penyedia jasa seperti itu, maka kita manfaatkan layanan yang di Indonesia saja. Cara begini, copy script di bawah ini:

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>

Lalu tempel atau paste di widget blog Anda. Silahkan widgetnya di simpan dan silahkan buka halaman blog Anda sekarang sudah tersedia widget pengiriman SMS gratis yang bisa di manfaatkan oleh user yang berkunjung ke blog kita. Sehingga memungkinkan user untuk selalu mengingat blog kita supaya dia bisa mengirim SMS ke tman-temannya tanpa harus mengeluarkan biaya. Dan ujungnya pengunjung blog kita semakin banyak. Bukankah begitu??? :)