Cara Membuat Kotak Scrollbar Pada Blogger

Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga bisa menghemat ruangan pada blog kita.

Untuk membuat kotak ini caranya sangat mudah:

1. Buka Blogger. Klik menu Design -> Page Elements
2. Klik Add a Gadget lalu klik HTML/Javascript

3. Masukkan kode yang dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Tambahkan teks atau kode script disini</div>

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.

Sebagai contoh, saya memasukkan:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div>

Maka hasilnya akan seperti ini:

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog

Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar Anda" />

Catatan:
Ganti teks biru yang dicetak tebal dengan alamat alamat gambar anda contoh http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif


Sebagai contoh saya memasukkan:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/s400/herman%20blog%20headline%20v6.gif" /></div>

Maka hasilnya akan seperti ini:

4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya

Selamat Mencoba..!!

Cara Membuat Daftar Posting Pada Kotak Scroll

Mungkin suatu waktu anda ingin menampilkan semua judul postingan anda dihalaman depan blog , sehingga pengunjung yang datang ke blog anda tidak susah untuk mencari artikel-artikel yang dibutuhkannya.

Bila jumlahnya masih sedikit mungkin tidak menjadi masalah. Tapi coba bayangkan jika jumlahnya sudah mencapai puluhan bahkan ratusan, tentu membuat tampilan blog kita kurang menarik karena dipenuhi oleh judul-judul tersebut..

Mungkin ini adalah salah satu solusi supaya judul-judul postingan bisa ditampilkan seluruhnya tanpa memenuhi halaman blog anda, yaitu dengan membuat daftar judul postingan dalam kotak yang bisa di scroll. Contohnya seperti ini :

Istilah Dalam Dunia Internet

Apa Itu Google Wave

Anti Virus Asli Indonesia SMADAV

Aplikasi Mempercepat Startup Photosop

Wallpper Shifter

Start Killer Tool Penyembunyi Tombol Start

Aplikasi Dekstop 3D PhotoJoy

Aplikasi Konversi Image Dan Audio

MyUninstaller Aplikasi Add / Remove

Dengan cara ini meskipun judul yang ingin ditampilkan mencapai ribuan tidak akan membuat halaman anda menjadi penuh dengan judul, pengunjung tinggal men scroll jika ingin mencari artikel yang dibutuhkan. Jika anda ingin membuatnya silahkan copy kode di bawah :

<style>.
list {background: url("http://i566.photobucket.com/albums/ss106/Albaniyu/gambar-label.jpg") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;}</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:295px; height:210px; background-color: #ffffff;font-size: 13px; border:1px solid #7ca2d5;">

<div class="list"> <a href="http://cariilmumu.blogspot.com/2009/11/istilah-dalam-dunia-internet.html#more">Istilah Dalam Dunia Internet</a></div>
</div>

  Kemudian anda paste, mau di sidebar, mau di bawah header tergantung mau anda dan tersedianya kolom widget di template anda .

Sedikit penjelasan : 

Jika anda ingin menampilkan icon kecil buatan anda sendiri disamping daftar yang dibuat, silahkan ganti alamat link image yang diwarnai merah dengan link image url anda. Yang diwarnai orange adalah ukuran dari kotak, silahkan anda rubah ukurannya, sesuaikan dengan ukuran blog anda. Kemudian yang diwarnai biru, itu adalah alamat link posting anda. jadi anda ganti dengan alamat link posting anda yang ingin di buat daftarnya.

Mudah-mudahan sedikit keterangan ini bisa membantu anda semua.

**** Semoga Bermanfaat ****

Membuat Judul Posting Dalam Kotak Scroll

Oke,,, Kita bertemu lagi Sobat. Hari ini tepatnya saya akan memandu anda dalam membuat judul posting dalam kotak scroll

Dengan adanya kotak scroll yang berisi seluruh judul postingan blog anda, maka pengunjung akan lebih mudah mencari dan membaca seluruh tulisan yang telah anda posting. Saya akan memberikan Trik bagaimana postingan dalam menu sroll kita dapat tampil secara manual atau kata lainnya anda yang harus mengeditnya maupun yang secara otomatis. Yuk kita langsung praktek ,,

A. Cara Manual :

1. Masuklah ke halaman Dashboard > Tata Letak > Elemen Laman > Tambah Gadget/Javascript.

2. Klik tanda plus pada HTML/Jaxascript.

3. Copy kode dibawah ini

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 280px; height: 270px; text-align: left;">

<li> <a href="http://alamat posting blog anda" target="new">1.sesuaikan pada judulnya.</a></li>

<li> <a href="http://alamat posting blog anda" target="new">2.sesuaikan pada judulnya.</a></li>

</div>

4. Untuk besar serta panjang kotak scroll ubahlah kode berwana biru pada bagian width & height, anda dapat menyesuaikannya dengan blog milik anda sendiri.

5. Jangan sampai lupa untuk mengganti teks yang berwarna merah ( url alamat posting blog anda ) dan juga sesuaikan pada judulnya.

6. Untuk menambahkannya cukup anda copy-pastekan kode berikut :

<li> <a href="http://alamat blog anda" target="new">3.sesuaikan pada judulnya</a></li>

7. Simpan dan lihat hasilnya.

B. Cara Otomatis :

Cara ini langkahnya sama seperti contoh diatas ( cara manual ) hanya kodenya saja yang berbeda dan lebih mudah juga praktis karna postingan yang baru kita buat akan otomatis masuk ke kotak scroll setelah kita menyelesaikan entri baru tanpa harus di edit, akan tetapi judul postingan juga sudah pasti mengikuti urutan isi dari entri Anda dan tidak bisa disesuaikan . copy paste, ganti kode manula dengan kode otomatis dibawah ini :

 <div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee"><script src="http://anas.ku93.googlepages.com/post-terakhir.js"></script><script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script><script src="http://AlaMatBloG.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"></script></div>

jangan lupa untuk mengganti tulisan AlaMatBloG dengan url alamat blog Anda dan untuk menginginkan banyaknya posting yang bertengger di kotak scroll  ubahlah angka/jumlah var numposts = 15, misalnya Anda menginginkan Seratus Posting maka gantilah angka/jumlah 15 dengan 100.

Terimakasih,

Memasang Widget Terjemahan/Google Translate di Widget Bawaan Blogspot.

Memasang Widget Terjemahan/Google Translate di Blog.
Dalam memasang Widget terjemahan ini yang saya tau ada dua mode, yaitu Widget Bawaan Blogspot dan mode HTML/Javascript. Dua mode tersebut akan saya bahas nanti saja OK. Sekarang kita mulai untuk Memasang Widget Terjemahan/Google Translate di Blog.

• Widget Bawaan Blogspot.

 1.Terlebih dahulu Masuk kedalam Blog Anda.
 2. Lalu Masuk ke Bagian Tata Letak pada Blog yang diinginkan.

3. Klik Tambahkan Gadget di posisi yang sobat inginkan

4.Lalu kilik terjemahan pada daftar Gadget seperti gambar dibawah ini.

 5. Pilih gaya widget

• Vertikal
• Horizontal
• Hanya Tarik-Turun.

Untuk Pratinjau gaya widget adalah sebagai berikut:

Vertikal
Horizontal
Hanya Naik-Turun

Memasang Google translate Mode HTML/Javascript

Mungkin kalian bertanya, mengapa memakai mode HTML padahal ada cara yang lebih mudah dan sudah tersedia yaitu widget bawaan dari Blogspot?

Pada setiap widget bawaan dari Blogpot, widget-widget tersebut umumnya hanya berdiri sendiri dan tidak bisa digabungkan dengan widget lain. Nah, dengan adanya widget mode HTML ini sobat bisa menggabungkan widget ini dengan widget lainya yang tentunya widget mode HTML juga. Sehingga bisa menghemat ruang pada Blog sobat.

Langsung saja pilih HTML/Javascript.

Lalu judul yang sobat suka dan masukan kode HTML berikut ini.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    multilanguagePage: true,
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Untuk mengubah gaya widget, sobat ubah kode berwarna merah dengan kode dibawah ini:

VERTIKAL
HORIZONTAL
SIMPLE

5. Setelah selesai menentukan mode widget berikut pengaturanya, langsung saja klik simpan.

 Selesai semoga bermanfaat.

Membuat Title Bar Berjalan 2

Ingin Punya title bar berjalan bergerak - gerak ?? Caranya mudah, ikutilah beberapa langkah berikut ini :

1. Masuklah ke halaman Dashboard > Tata Letak > Edit HTML dan carilah kode seperti di bawah ini :

<title><data:blog.pageTitle/></title>

2. Jika sudah ketemu, hapus kode di atas dan gantilah dengan kode di bawah 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>

3. Angka 100 diatas merupakan kecepatan dari proses jalannya teks. Jika menurut anda terlalu cepat, silahkan ganti sesuai dengan keinginan Anda.

4. Simpan dan lihatlah hasilnya.

Semoga bermanfa'at.

Cara Membuat Judul Blog Berjalan Pada Address Bar

Cara ini adalah bagian dari pernak pernik blog yang tujuannya untuk mempercantik tampilan blog kita pada browser. Banyak cara untuk membuat blog kita tampil menawan, cantik dan kreatif. Yah selagi cara yang di lakukan tidak membuat loading blog tambah berat.Salah satunya membuat judul blog berjalan di title bar.Letaknya paling atas sebelah kiri yang ada tulisan mozila firefoxnya,bila anda pengguna firefox.

Caranya mudah sekali,ikuti saja langkah-langkahnya seperti dibawah ini: 
1. Login ke akun blogger anda
2. Masuk Dasbor > Tata Letak (layout) > Edit HTML.
3. Kemudian cari kode dibawah ini dengan tombol F3 atau CTRL + F pada keyboard.

<title><data:blog.pageTitle/></title>

yang letaknya di bagian awal.

3. Kemudian ganti kode di atas tersebut dengan kode di bawah ini.

<script language='JavaScript'>

var txt=" Text judul yang dibuat berjalan ";

var kecepatan=120;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout("bergerak()",kecepatan);}bergerak();

</script>

Catatan : Angka 120 menunjukkan kecepatan gerakan, Anda dapat menggantinya dengan angka yang lebih kecil atau lebih besar, semakin besar nilainya maka kecepatan bergeraknya semakin lambat dan berlaku sebaliknya.
Teks yang berwarna merah bisa sobat ganti dengan kata-kata sobat 

4. Klik Pratinjau terlebih dahulu untuk melihat hasilnya.
5. Jika sudah berjalan dengan baik kemudian Simpan Template.

Cara Membuat TitleBar Berjalan pada Blog

Pertama, masuk Tata Letak => Tambah Gadget => HTML/JavaScript dan masukan script ini:

*NOTE : TEXT BERWARNA MERAH DAPAT DI GANTI SESUAI KEINGINAN ANDA

<script> function tb8_makeArray(n){ this.length = n; return this.length; } tb8_messages = new tb8_makeArray(3); tb8_messages[0] = "WELCOME TO MY WEBSITE"; tb8_messages[1] ="HADI HIDAYATULLAH"; tb8_messages[2] = "AND THANKS FOR VISITING"; tb8_rptType = 'infinite'; tb8_rptNbr = 5; tb8_speed = 125; tb8_delay = 1000; var tb8_counter=1; var tb8_currMsg=0; var tb8_tekst =""; var tb8_i=0; var tb8_TID = null; function tb8_pisi(){

Cara Menambah Gadget di bawah Header 2

Selama ini mungkin kita hanya tahu bagaimana cara menambah Gadget di halaman bagian samping atau bagian bawah. Tapi bagaimana caranya kalau kita pingin menambah Gadget di bagian atas...?

Untuk mengetahuinya, silahkan ikuti langkah-langkah berikut ini :

1. Login ke blog anda
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari kode berikut ini di dalam template anda
 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
 
6. Jika sudah ketemu, silahkan ganti semua kode tersebut dengan kode berikut ini


<b:section class='header' id='header' preferred='yes'>
 
7. Klik Simpan Template

8. Selesai
 
Selamat mencoba, semoga bermanfaat, jangan lupa berikan komentar.

Cara Membuat Kolom Widget di Bawah Header Blog

Template yang sobat gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan sobat? Kolom widget di bawah header blog sobat hanya tersedia satu kolom sedangkan sobat membutuhkan yang tiga kolom? Tenang, bisa sobat buat dengan cara ini.

Kolom widget di bawah header ini bisa dibuat dengan mudah. Jumlahnya bisa 1, 2, atau 3 pilih sesuai keinginan sobat, atau mau pasang ketiga-tiganya juga tidak apa-apa. Untuk ukuran juga bisa diatur dengan mudah jika sobat ingin mengganti ukuran yang saya tetapkan.
Oke, tak usah panjang lebar. Mari sobat simak langkah-langkahnya.

Cara Membuat Kolom Widget di Bawah Header pada Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Cari kode ]]></b:skin>. Gunakan Tombol ctrl+F
4. Masukan kode berikut diatas kode ]]></b:skin>.

#underheader { clear:both; } .underheader-widget {
padding:0px 10px 10px 10px; }

5. Kemudian cari kode <div id='main-wrapper'> atau <div id='main-wpr'> atau sejenisnya. Setiap template memiliki elemen yang berbeda. Namun pada umumnya ditulis dengan kode <div id='main-wrapper'>. Sobat harus berusaha mencari elemen ini jika memang kode elemen pada template sobat berbeda  dengan kode elemen yang saya contohkan.
6. Pilihlah beberapa kode di bawah ini dan kemudian letakan di atas kode <div id='main-wrapper'> atau <div id='main-wpr'>.

• Satu Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 100%; float: left;
margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes'
style='float:left;'/>
</div>
</div>

• Dua Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
</div>

• Tiga Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col3' preferred='yes' style='float:left;'/>
</div>
</div>

#Keterangan, untuk ukuran sobat bisa ubah pada nilai "width".

7. Klik simpan, selesai dan sobat lihat hasilnya.
Contoh hasil pemasangan dua kolom widget.

 

Cara Membuat Text Area di Blog

Cara Membuat Text Area, sebenarnya ini sudah smilliar di publik, tapi kali ini saya akan mengulas dan me'Share untuk pemula(Newbie). Anda tinggal Copy & Paste saja. Simple kan?

1. Normal Text Area
<*textarea name="text1" cols="12" rows="4">TEXT DISINI<*/*textarea>

2. Text area berBackground
<*textarea name="code" rows="3" cols="10" style="background:#000;color:#fff;border:2px inset #ccc;line-height:1.5em;padding:0 7px;">ISI TEXT/KODE<*/*textarea>


3. Text Area + Border
<*textarea name="code" rows="3" cols="10" style="background:#fbefff;color:#CA3DD9;border:1px solid #CA3DD9;border-left:20px solid #CA3DD9;line-height:1.5em;padding:5px;">ISI TEXT<*/*textarea>

4. Text Area border Warna-Warni
<*textarea name="code" rows="3" cols="20" style="background:#bffaff;color:#FF0000;border-bottom:4px solid #40FF1F;border-right:4px solid #40FF1F;border-top:4px solid #FFE900;border-left:4px solid #FFE900;line-height:1.5em;padding:5px;">ISI TEXT/KODE<*/*textarea>

5. Text Area Dashed
<*textarea name="code" rows="3" cols="10" style="background:#daffbf;color:#295F00;border:2px #295F00 dashed;line-height:1.5em;padding:5px;">ISI TEKS/KODE<*/*textarea>

6. Text Area Dotted
<*textarea name="code" rows="3" cols="20" style="background:#ef0090;color:#FFEFF9;border:3px dotted #FFEFF9;line-height:1.5em;padding:5px;">ISI TEKS/KODE<*/*textarea>

NOTIFICATION!
- Hapus tanda "*" (bintang) agar Text area berhasil
- cols dan rows bisa anda ubah(ukuran)
- Background & Color bisa anda rubah dengan code COLOR HTML
sekian postingan dari saya.

Cara membuat marquee 2

Program html marquee ini berguna bukan saja untuk menarik tamu yg datang agar memperhatikan apa yg tertulis di dalamnya tapi juga berfungsi untuk menghemat ruang (space) sidebar kita sehingga lebih efektif dan efisien. Bagaimana cara membuat marquee?

Cara membuatnya mudah. Cukup Anda copy dan paste code html berikut ke sidebar blog atau di manapun sesuai keinginan Anda:

<MARQUEE align="center" direction="up" height="200" scrollamount= "2"
onmouseover='this.stop()' onmouseout='this.start()' width="80%">
(teks atau link tulis di sini)</MARQUEE>

Contoh Marquee untuk link (copy & paste dan ganti contoh link sesuai keinginan Anda):

<MARQUEE align="center" direction="up" height="200" scrollamount= "2"
onmouseover='this.stop()'
onmouseout='this.start()' width="100%">
<a href="http://fatihsyuhud.com" target="new">- Blogger Indonesia -</a>
<a href="http://afatih.wordpress.com target="new">- Refleksi dan Blog Tutorial -</a>
<a href="http://www.jobvacancycareer.com/ target="new">- Jobs Info -</a>
<a href="http://www.beasiswas.com/ target="new">- Beasiswa -</a>
<a href="http://www.beasiswas.net/ target="new">- Beasiswa -</a>
<a href="http://www.beasiswas.info/ target="new">- Beasiswa -</a>
<a href="http://www.beasiswas.org/ target="new">- Beasiswa -</a>
<a href="http://lowonganbeasiswa.com/ target="new">- Beasiswa -</a>
<a href="http://beasiswa.blogs.ie/ target="new">- Beasiswa -</a>
<a href="http://www.lowongankerjas.com/ target="new">- Loker -</a>
<a href="http://www.lowongankerjas.net/ target="new">- Loker -</a>
<a href="http://www.lowongankerjas.org/ target="new">- Loker -</a>

 </MARQUEE>

Catatan:
1. Kode <br /> adalah singkatan dari (line break) atau ganti garis, supaya setiap link tidak numpuk dalam satu baris. Bila jarak satu link dg link yg lain dianggap terlalu sempit, bisa ditambah dg kode <br /> lagi. Sesuai selera.
2. Kode target="new" atau target="_blank" berfungsi agar supaya tercipta window baru ketika ada yg mengklik link yg ada dalam marquee sehingga pengunjung tidak meninggalkan blog Anda.
Contoh Marquee untuk teks:

<MARQUEE align="center" direction="up" height="200" scrollamount= "2"
onmouseover='this.stop()' onmouseout='this.start()' width="100%">Mengutip sebagian
atau keseluruhan isi blog ini ke blog Anda dipersilahkan ASAL menyebut URL
sumber tulisan dan/atau permanent link artikel yg dikutip.
<br>

Komentar, saran atau pertanyaan dapat diajukan melalui bukutamu, kotak komentar
blog atau email ke: admin@jasaadsense.com.
</MARQUEE>

Catatan:
1. Jangan lupa untuk menyelipkan kode <br /> untuk ganti garis atau paragraf.
TIP PENTING:
1. tag atau kode: direction=”up” artinya tulisan/teks bergerak ke atas seperti di blog ini, jadi kode “up” bisa diganti dg “down” bila ingin link/teks bergerak ke bawah; dan ganti menjadi “left” supaya bergerak ke kiri dan “right” supaya bergerak ke kanan.
2. Marquee hanya dapat digunakan di blogspot, self-hosted wordpress, dll.
3. a.Untuk di blogspot, klik Elemen -> Teks -> pasang kode marquee di atas.
b. Untuk self-hosted wordpress -> aktifkan widget -> naikkan widget text -> pasang kode marquee.
c. blogsome.com, blogs.ie dan self-hosted wordpress: klik manage -> files -> pasang kode marquee di sidebar.

Salam nge-Blog!

Cara Membuat Tulisan Berjalan dengan Efek Marquee

Marquee adalah efek yang dapat diisi tulisan atau angka sehingga dapat bergerak atau berjalan pada satu baris. Seperti garis horizontall, line vertical, dan diagonal namun yang kita lihat lebih sering berjalan dalam bentuk horizontall.

Langsung ke tutorial cara membuatnya, seperti berikut ini :

Cara Membuat Tulisan Berjalan dengan Efek Marquee :
1. Silahkan anda isi/edit pada bagian "Tulisan Anda" dengan kata atau angka yang ingin dibuat berjalan.
2. Kemudian copy paste script codenya.
3. Tambahkan pada Gadget/Widget di Blog anda dengan cara Tambah Gadget > HTML/Javascript > Masukkan kode > Save.

- Efek Marquee sederhana ( Berjalan Terus Menerus )
<marquee> Tulisan Anda </marquee>

- Jika ingin tidak terlihat bosan, kita dapat menambahkan background dibelakang baris tulisan yang berjalan, dengan kode :
<marquee bgcolor="blue">Tulisan Anda dengan Latar Belakang berwarna Biru </marquee>

- Untuk mengatur Arah Gerakan ( top / left / bottom / right )
<marquee direction="up">Tulisan Disini ke Atas</marquee>

- Membuat Text Berjalan berdasarkan perulangan yang ditentukan. Akan berhenti jika perulangan selesai.
<marquee loop"5"> Text ini berjalan dan AKAN BERULANG 5x  </marquee>

- Membuat Text berjalan pada setengah bagian lebar halaman / media / lebar layar.
<marquee width="50%">TEXT BERJALAN DALAM 50% Bidang</marquee>

- Tulisan Berjalan dengan Kecepatan
<marquee scrollamount="10">TULISAN ANDA BERJALAN DENGAN KECEPATAN 10 </marquee>

- Membuat Text Berjalan ke Kanan atau Kiri.
<marquee direction="right">TEXT BERJALAN KE KANAN</marquee>
kalau ke kiri tinggal ganti right dengan left.

- Berjalan Bolak Balik Terus Menerus
<marquee behavior="alternate">TEXT BERJALAN BOLAK BALIK</marquee>

- Script selanjutnya, adalah menampilkan tulisan berjalan muncul dari atas lalu bergerak ke arah bawah.
<marquee direction="down" height="50">TEXT BERJALAN KE BAWAH</marquee>

Untuk mengatur ukuran tingginya ganti angka 50 dengan ukuran tinggi keinginan anda.

- Tulisan berhenti ketika tersentuh mouse.
<marquee behavior"alternate" onMouseOver="this.stop()" onMouseOut="this.start()">TEXT BERJALAN MENUNGGU MOUSE</marquee>

- Text berjalan disertai URL Link, contohnya untuk registrasi, login dan pemberitahuan lain.

<marquee><a href="http://impoint.blogspot.com">Nama Linknya / Nama Halaman Anda</a></marquee>

Anda juga dapat memodifikasi tampilan text berjalan marquee ini dengan elemen html lainnya yang dapat dikombinasikan. Contohnya seperti memberi warna tulisan, merubah ukuran huruf, membuat text berkedip-kedip, membuat tulisan huruf tebal, miring, dan bergaris bawah, serta masih banyak lagi.

Contohnya dengan menambahkan kode style disertai kode css apa yang akan digunakan.
<blink><marquee style="font-size: 30px; color:black; font-style:italic;">Kombinasi Tulisan Berjalan Efek Marquee</marquee></blink>

Sekian dahulu artikel cara membuat tulisan berjalan, semoga bermanfa'at.

Cara Membuat Tulisan Berjalan (Marquee)

Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita. mungkin sebagian besar sudah mengetahuinya. tapi disini ade mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

berikut cara pembuatannya :

1. Login ke Blogger
2. Kemudian klik Tata Letak dan Elemen Halaman
3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
4. Lalu pilih HTML/JavaScript
5. Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :

1. Teks berjalan dari kanan ke kiri

kode :

<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

2. Teks berjalan dari kiri ke kanan

kode :

<marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

3. Teks berjalan bolak balik

kode :

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

4. Teks berjalan dari atas ke bawah

kode :

<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

5. Teks berjalan dari bawah ke atas

kode :

<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

6. Teks berjalan mondar-mandir

kode :

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

7. Teks berjalan zig-zag nembus

kode :

<center> <marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

 8. Teks berjalan zig-zag mantul

kode :

<center> <marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

 Langkah Selanjutnya adalah mengganti tulisan

Contoh Tulisan Berjalan

dengan tulisan atau kata-kata yang anda inginkan.

Ket :
# direction="left/right/up/down" --> Mengatur arah gerakan teks.

# scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

# behavior="scroll/slide/alternate" --> 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)

# Fungsi dari :

<center> ............. </center>

adalah agar tulisan tersebut selalu berada di tengah.

SEMOGA BERHASIL

Demikianlah artikel mengenai Cara Membuat Tulisan Berjalan (Marquee)
Semoga Bermanfaat..

CAra Mudah membuat Menu Arsip Blog di blogspot

Berikut Tutorial dengan sedikit gambar yang berhasil saya rangkum untuk " CAra Mudah membuat Arsip Blog dalam Format Tahun" berikut

1. Yang pastinya seperti biasa, bukalah Akun Blogger Sobat
2. Pilihlah Layout >> Tambah Gadget
3. Lalu pilihlah Arsip Blog
4. lalu pilihlah model * Dropdown- Menu

5. dan yang terakhir tekanlah OK/ Save maka hasilnya akan seperti ini

 

 Semoga bermanfa'at.

Cara Membuat Menu Drop Down dengan Edit Html

Bagi yang masih belum mengerti apa itu Drop Down saya akan menjelaskan sedikit mengenai Menu Drop Down

Menu Drop Down adalah Menu link yang apabila disentuh dengan Mouse nanti akan ada menu link yang jatuh kebawah.Contohnya Nanti akan saya tampilkan di bawah tulisan ini.

Membuat Menu Drop Down juga bisa menambah peningkatan SEO Friendly Blog,karena dengan adanya menu Drop Down pengunjung blog anda akan lebih gampang mencari Informasi yang dia butuhkan.

Untuk Membuat menu Drop Down silahkan anda Copy Kode di bawah ini:

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a>
<ul>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a>
<ul>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>

Setelah anda Copy silahkan anda masuk ke dasbor dan pilih >> Tata Letak dan Pilih Gadget HTML.lalu Paste Kode diatas.Lalu letakkan gadget HTML di tata letak header.Lalu simpan.
Untuk mengubah warna silahkan anda berkreasi sendiri.
Sekian Cara Membuat Menu Drop Down dengan Edit Html semoga bermanfaat.

Cara buat Arsip pull-down di Blogspot

Kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Lalu bagaimana kalau dua dan tiga tahun lagi?

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar.

Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:

- Archives – January 2004 February 2004 March 2004 April 2004 May 2004

Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama “Archives”, baru setelah diklik, akan muncul nama bulan arsip-arsip kita.Caranya mudah.

(1) Login ke blogger.com dg id Anda
(2) Klik Template
(3) Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

<BloggerArchives>
<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></BloggerArchives>
(4) Nah, ganti kode di atas dg kode html di bawah ini:
<select name="archivemenu" onchange= "document.location.href=this.options[this.selectedIndex].value;"> <option selected>- Archives -</option> <BloggerArchives> <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option> </BloggerArchives> </select> 
(5) Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
(6) Selesai.

 Selamat mencoba.

CARA MUDAH MEMBUAT READ MORE OTOMATIS DI BLOG

Manfaat readmore  untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Untuk demonya silahkan klik link dibawah ini.

                                            CONTOH READ MORE
Cara membuat readmore otomatis dengan gambar

• Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
• Cari Kode </head>, dengan meneka  CTRL+F pada key board untuk melakukan pencarian  kode </head> dengan cepat.
• Copy paste kode dibawah ini tepat di atas kode </head>

<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[
/******************************************
Auto-readmore link script, (for blogspot)
by: http://trikseosimple.blogspot.com/
********************************************/
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>

• Save Template anda.
• Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

• Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
• Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

• Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
• Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
• selanjutnya akan terbuka kode kode yang lain.
• geser atau scrol ke bawah dan cari kode 

 <data:post.body/>

•  Setelah ketemu hapus kode diatas dan ganti dengan 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat.

Cara Mencari Kode Template di Menu Edit HTML yg Baru dengan cara mudah

Cara Mudah Mencari Kode Template di Menu Edit HTML Baru - Sebelum adanya perubahan pada tampilan menu edit HTML Blogger, saya sudah menjelaskan cara mencari kode template yang dengan mudah bisa kita temukan hanya dengan melakukan CTRL+F pada keyboard dan memasukkan kode yang dicari kedalam kolom pencarian yang berada di pojok kiri bawah dangan mencentang Expand Template Widget yang akan memunculkan semua kode template, sehingga dari sini kita bisa menemukan kode yang di cari.

Namun tidak demikian dengan tampilan menu edit HTML dalam template blogger, saat kita mencari kode template, fitur centang Expand Template Widget sudah ditiadakan sehingga mau tidak mau kita harus mencari cara termudah dalam mencari kode template yang kita inginkan.
Nah bagi yang belum tau Berikut panduannya...

1. Tentukan terlebih dahulu kode yang ingin di cari, sebagai contoh saya akan mencari kode <data:post.body/>
2. Tekan tombol CTRL+F pada keyboard laptop anda
3. Muncul kolom Search di pojok kanan atas
4. Masukkan kata kunci kode didalam kolom tersebut, contoh <data:post.body/>
5. Tekan Enter  pada keyboard laptop anda

Kode ditemukan!...... mudah kaaan.
Semoga membantu
trima kasih

Cara cepat mencari kode edit HTML Template

Posting ini tentu saja khusus buat sobat yang baru menggunakan blogger (tidak mengenal HTML Editor lama) atau yang masih belum bisa memaksimalkan atau mengenali fitur-fitur baru di dalam HTML Editor baru (sebab sudah terlalu nyaman dengan yang lama). Jadi, buat sobat yang sudah cukup mengenalinya tentu posting ini kurang penting, tapi silahkan saja jika ingin ikut menyimak; plus jika berkenan, boleh menambahkan masukan.

Akses ke HTML Editor adalah:

Dashboard (home) Blogger > Template > Klik button "Edit HTML".

HTML Editor baru memiliki beberapa perbedaan mendasar, 3 yang penting di antaranya adalah:

1. Dihapusnya fitur "Expand Widget Templates". Pada HTML editor lama, fitur ini digunakan untuk menampilkan tag-tag widget yang secara default disembunyikan, demi keamanan, untuk menghindarinya teredit secara tidak sengaja. Oleh karena itu, untuk menampilkan tag-tag widget tertentu, harus mencentangnya dan baru bisa mengeditnya.

2. Tag-tag widget di HTML editor baru kini ditampilkan (default), namun dalam wujud tertutup di antara tag inti, dan harus klik tanda expand (►) untuk melihat isinya. Masing-masing tag inti bisa langsung dicari dengan menggunakan menu dropdown "Jump to widget", dimana di dalam menu tersebut terdapat nama-nama tag inti yang ingin dituju. Urutan nama widget dari atas ke bawah sesuai urutan widget di dalam template.

3. Poin paling penting adalah ditambahkannya fitur baru pada HTML Editor baru, yaitu fungsi "Search". Jika dulu kita biasa menggunakan fitur search (CTRL+F) milik browser, dan memasukkan kode untuk menuju bagian tertentu di dalam editor, kini tidak bisa lagi sebab HTML Editor baru ditampilkan dalam frame, search milik browser tidak bisa digunakan untuk "menggali" isi frame. Nah untuk mengatasi hal itu, Blogger menambahkan fitur "SEARCH" khusus di dalamnya.

Itu adalah 3 inti yang kemudian mengubah cara lama yang biasa kita gunakan untuk mengedit HTML Blogger. Untuk poin 1, fitur itu sudah tidak ada lagi, jadi jika ada tutorial saya atau yang lainnya yang meminta "expand widget templates", abaikan. 

Cara Mencari Tag Widget Dengan ID Tertentu di HTML Editor
Di antara ketiga poin perubahan tersebut, poin nomer 2 memang agak sulit, karena anda harus mengenal semua nama ID widget (widget bukan hanya yang ada di sidebar loh, melainkan termasuk post, header, dll; elemen template blogger terdiri dari widget-widget). Untuk widget sidebar, biasanya namanya menggunakan ID HTML, misalnya HTML1, HTML2, dll, sesuai urutan widget sidebar yang ditambahkan. Untuk mencari ID widget sidebar, simak caranya di post Cara Menampilkan Widget hanya di Halaman tertentu.

Setelah menemukan ID widget yang dimaksud, lalu:
1. Klik menu dropdown "Jump to Widget".
2. Klik nama widget (ID) seperti yang sudah ditemukan.
3. anda akan dibawa meluncur ke bagian tag widget sesuai dengan nama yang diinginkan.
4. Klik tanda ► di sebelah kiri widget yang dimaksud sehingga tag terbuka dan memperlihatkan elemen-elemen di dalamnya.
5. Lakukan editing/modifikasi sesuai kebutuhan atau tutorial.

Cara ini tentu hanya efektif juga apabila tag widget mudah dicari sesuai nama dan dapat dilihat dengan mata telanjang. Bagaimana jika kode yang dicari merupakan tag khusus dan bukan merupakan widget? Tentu sangat ribet jika harus membuka masing-masing tag dengan klik ►. So kita butuh "jalan pintas", yaitu: mencari sekaligus expand tag dengan hanya sekali klik!

Cara Mencari Kode di HTML Editor Menggunakan Fitur "Search"

1. Untuk memunculkan fitur "search" milik Blogger, anda tidak bisa langsung menekan Ctrl+F, sebab yang muncul nantinya fitur search milik browser. Arahkan kursor terlebih dahulu ke dalam HTML Editor, klik di bagian manapun di dalam editor, baru tekan CTRL+F, maka search bar Blogger akan muncul di pojok kanan atas.

2. Next, untuk mencari kode tertentu sesuai dengan petunjuk tutorial, copy dan paste atau ketikkan kode tersebut ke dalam kolom "search", lalu klik enter. Kode yang anda cari akan muncul di baris paling bawah pada kode-kode yang nampak di post editor, dan di-highlight dengan warna tertentu. Tag widget dimana kode tersebut berada otomatis akan expanded dengan sendirinya. Sebagai contoh, saya mencari kode <data:post.body/> seperti contoh berikut:

3. Jika kode yang sama lebih dari satu sesuai yang telah disampaikan oleh tutorial, klik enter satu atau dua kali lagi hingga menuju kode yang dimaksud.

4. Jika anda diminta mencari kode yang ternyata telah dimodifikasi sedemikian rupa oleh pembuat template, cari kode pokoknya saja. Contoh, jika harus mencari kode <body>, dan tidak ketemu, maka tag body tersebut biasanya telah dimodifikasi, misalnya: <body (beberapa atribut tag di belakang).>, maka cari saja <body (tanpa penutup).

5. That's it!

Jika masih ingin mempelajari beberapa tips dan trik dalam menghadapi HTML Editor Blogger, simak tips edit template HTML Blogger. Itu adalah tutorial tua, jadi ada beberapa hal yang tidak perlu diikuti karena tidak sesuai lagi dengan HTML editor baru, tapi beberapa poin masih sangat penting.

Hopefully bisa memberikan sedikit pencerahan bagi yang baru berkenalan dengan blogging, HTML Editor Blogger, maupun yang masih pusing dengan kehadiran fitur HTML Editor baru karena sudah cukup nyaman dengan yang lama.

Cara Mengganti Warna Pada Template Bawaan Blogger

Banyak alasan sehingga teman2 ingin merubah warna template salah satunya karena ingin tampil beda dengan blog yang lain. Oke langsung saja cara mengganti warna pada template blog bawaan...

I. Seperti biasa masuk ke blog

II. Pilih Dashboard---Template---EDIT HTML

III. Kemudian carilah kode yang hampir sama di bawah ini, gunakan CTRL+F atau F3 untuk mempermudah pencarian

1. Untuk mengganti warna background header pada blog cari kode #header-wrapper

#header-wrapper {
background:#000000;

2. Untuk mengganti warna background body pada blog cari kode body {

body {
background:#000000;

3. Untuk warna background halaman postingan / main body pada blog cari kode #main-wrapper {

#main-wrapper {
background:#000000;

4. Untuk warna background sidebar di blog cari kode #sidebar-wrapper

#sidebar-wrapper
background:#000000;

5. Untuk Merubah warna background footer di blog cari kode #footer {

#footer {
background:#000000;