Cara Mengganti Icon Blog Dengan Mudah

Hellyeah. . . . .!! Teman-teman, ada yang mau tau nggak cara buat mengganti Icon blog yang ada di atas ntu tu!! Dulu sih aq kirain sussa yea!! Ternyata gampang beudh koq!! Dulu aq kira icon blog ntu musti punya extensi *.ico, tapi sebenernya icon blog ntu extensi apa adjah juga bisa koq, asal berbentuk gambar, langsung adjah yea. . .!?

Pertama, kamu siapin gambar icon blog kamu!! Mau buat sendiri ato cari di tempat mbah GugeL, Terserah kamu dhe. . . .

Kedua, Upload gambar kamu, misalnya ke Image Hosting.

Kalo udah copy alamat gambar kamu, lalu masukkan code HTLM dibawah ini di atas code </head> di template kamu!!



<link href='alamat gambar icon kamu' rel='SHORTCUT ICON'/>
Selamat mencoba dan moga sukses...!!!

Cara Membuat Readmore Dengan Mudah

Pungsi/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog tersebut.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Anda, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Anda, ada baiknya perhatikan hal-hal sebagai berikut :

1. Download dan simpan template Anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula;
2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;
3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
4. Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:

1. Login ke Account Blogger Anda;
2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
   
   <script type='text/javascript'>
   var thumbnail_mode = "float" ;
   summary_noimg = 250;
   summary_img = 250;
   img_thumb_height = 120;
   img_thumb_width = 120;
   </script>
   
   <script type='text/javascript'>
   //<![CDATA[
   function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
   }
   
   function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   }
   
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script>
3. Cari dan ganti kode <data:post.body/> dengan semua kode dibawah ini:
   
   <b:if cond='data:blog.pageType != "item"'>
   <div expr:id='"summary" + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
   <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   
   Keterangan:
   
   Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.
4. Simpan/Save Template, selesai.

Keterangan:

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;
5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;
6. READMORE-<data:post.title/>: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini <data:post.title/>.

Cara Membuat Gambar Berjalan

Seperti apa sich yang dimaksud dengan gambar berjalan itu? Kayaknya tidak perlu saya jelaskan panjang lebar, silahkan saja lihat contohnya di bawah ini














Gimana sudah paham khan dengan apa yang dimaksud gambar berjalan tersebut?

OK, kalau sudah paham sekarang mulai bahas Cara Membuat Gambar Berjalan. Cara Membuat Gambar Berjalan pada sidebar atau postingan dalam Blog hanya perlu menambahkan alamat URL gambar yang diinginkan ke dalam kode di bawah ini:

<marquee direction="up" onmouseover="this.stop()" width="180" onmouseout="this.start()" scrollamount="2" height="200">

http://www.facebook.com/photo.php?fbid=205999189433347&set=a.148237451876188.27265.100000698030598&type=1&theater#!/photo.php?fbid=205999189433347&set=a.148237451876188.27265.100000698030598&type=1&theater


</marquee>

Agar lebih mudah akan saya kasih contoh, tapi jangan lupa semua URL gambar pada contoh harus diganti sesuai URL gambar Anda, perhatikan di bawah ini:

<marquee direction="up" onmouseover="this.stop()" width="180" onmouseout="this.start()" scrollamount="2" height="200">

<a href="http://www.serba-tersedia.co.cc" target="_blank"><img src="http://i977.photobucket.com/albums/ae258/SPN_photo/BannerAnimasiBlogST.gif" border="0" alt="blog serba tersedia"/></a>
<a href="http://www.formulabisnis.com/?id=TONO1975" target="_blank"><img src="http://i977.photobucket.com/albums/ae258/SPN_photo/Animasi-ForBis-1.gif" border="0" alt="Formula Bisnis" /></a>

</marquee>

Cara pasang gambar berjalan pada sidebar atau postingan, caranya sama dengan cara pasang teks berjalan, kalau Anda belum tau silahkan baca dulu Cara Membuat Teks Berjalan atau Efek Marquee.

Keterangan:
direction="up" = bisa diganti down (bergerak turun), left (bergerak ke kiri) dan right (berkerak ke kanan).
width="180" = untuk menentukan lebar area
height="200" = untuk menentukan tingginya area dan
scrollamount="2" = untuk menentukan kecepatan gerak.

Cara Membuat teks Berjalan Di Menu Bar

Cara membuat teks berjalan pada blog sebenarnya sudah pernah saya buat postingannya dengan judul Cara Membuat Teks Berjalan di Menu Bar, namun yang membedakannya dengan Cara Membuat Teks Berjalan atau Efek Merquee pada blog adalah code HTML yang digunakan dan cara pemasangannya, dimana jika Teks Berjalan atau Efek Merquee dipasangnya di sidebar atau dalam postingan.

Sebelum saya menerangkan cara mudah buat teks berjalan atau efek merque, terlebih dahulu saya akan mendemonstrasikan apa yang dimaksud dengan efek merquee tersebut, berikut ini contohnya :

1. Contoh Teks Bergerak Bolak-Balik Secara Horizontal Teks Bolak-Balik Horizontal

1. Ini Adalah Code HTML Teks Bergerak Bolak-Balik Secara Horizontal <font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px"> Teks Bolak-Balik Horizontal</marquee></font>

2. Contoh Teks Berjalan Bolak-Balik Secara Vertikal Teks Bolak-Balik Vertikal

2. Ini Adalah Code HTML Teks Bergerak Bolak-Balik Secara Horizontal <font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px"> Teks Bolak-Balik Vertikal</marquee></font>

3. Contoh Teks Berjalan Kekanan Secara Continu Teks Kekanan Continu

3. Ini Adalah Code HTML Teks Berjalan Kekanan Secara Continu <font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px"> Teks Kekanan Continu</marquee></font>

4. Contoh Teks Berjalan Kekiri Sekali Saja Berjalan Kekiri Sekali

4. Ini Adalah Code HTML Teks Berjalan Kekiri Sekali Saja <font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px"> Berjalan Kekiri Sekali</marquee></font>

5. Contoh Teks Berjalan Kekiri Kekanan Tiga Kali Berjalan Kekanan Tiga Kali

5. Ini Adalah Code HTML Teks Berjalan Kekiri Kekanan Tiga Kali <font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="50" bgcolor="red" width="450px"> Berjalan Kekanan Tiga Kali</marquee></font>

6. Contoh Teks Berjalan Efek Bounce Teks Berjalan Efek Bounce

6. Ini Adalah Code HTML Teks Berjalan Efek Bounce <font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2"> Teks Berjalan Efek Bounce</marquee></marquee></font>

7. Contoh Teks Berhenti Jika Mouse Menyentuh Daerah Marquee Teks Berhenti Jika Mouse Menyentuh Daerah Marquee

7. Ini Adalah Code HTML Teks Berhenti Jika Mouse Menyentuh Daerah Marquee <font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue"> Teks Berhenti Jika Mouse Menyentuh Daerah Marquee</marquee></font>

Cara pasang code teks berjalan pada Sidebar blog adalah sebagai berikut :

1. Login ke Blogger, Klik Layout/Tata Letak;

2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;

3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;

5. Klik Tombol Simpan

Jika cara pasang code HTML ke dalam postingan, cukup copy paste kode tersebut ke dalam content postingan Anda.

Keterangan :
Width: Untuk mengatur panjang ruangan teks dalam satuan pixel.
Height: Untuk mengatur lebar ruangan teks dalam satuan pixel.
Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.


Selamat Mencoba, Semoga Sukses!!!