TIPS untuk Blogger

Cara Membuat Text Berjalan Pada Blog (Marquee)

2014-06-27T02:09:00.000-07:00

Marquee adalah teks berjalan dalam bahasa html. Kalo kita lihat marquee menurut semantik sepertinya ga ada hubungan dengan teks berjalan, tapi kalo diperhatikan lagi… mmmmh memang ga ada hubungannya ^_^ (sepertinya). Tapi kalo kita mau perhatikan lebih dalem, Marquee mempunyai arti “Tenda Besar,” atau “tempat berteduh seperti atap dimuka pintu masuk sebuah gedung” Mmmmh… apa hubungannya dengan marquee sebagai teks berjalan…? Setidaknya menurut saya memang ada, melalui “tenda” tersebut orang lalu lalang berjalan
Berikut ini Macam-macam untuk tulisan berjalan.

1. Teks Berjalan dari kanan

Selamat Datang di Blog TTB

Berikut kodenya:

<marquee>Selamat Datang di Blog TiUBlog</marquee>

2. Teks Berjalan dari kanan (Bisa diStop)

Selamat Datang di Blog TiUBlog

Berikut Kodenya:

<marquee onmouseover="this.stop()" onmouseout="this.start()">Selamat Datang di Blog TiUBlog</marquee>

3. Teks Berjalan dari Kanan

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee direction="right">Selamat Datang di Blog TiUBlog</marquee>

4. Teks Berjalan Bolak-Balik

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee behavior="alternate">Selamat Datang di Blog TiUBlog</marquee>

5. Teks Berjalan Bolak-Balik dengan Cepat

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee behavior="alternate" scrollamount="18">Selamat Datang di Blog TiUBlog</marquee>

6. Teks Berjalan Bolak-Balik (Bisa diStop)

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">Selamat Datang di Blog TiUBlog</marquee>

7. Teks Berjalan ke Atas

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee direction="up">Selamat Datang di Blog TiUBlog</marquee>

8. Teks Berjalan ke Atas (Bisa diStop)

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Selamat Datang di Blog TiUBlog</marquee>

9. Teks Berjalan di Tengah Ruang Kasat (ke Atas)

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Selamat Datang di Blog TiUBlog</marquee>

10. Teks Berjalan ke Bawah

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee direction="down" width="100%" height="100">Selamat Datang di Blog TiUBlog</marquee>

11. Teks Berjalan dengan Variasi Huruf Berwarna Latar

&ltFONT FACE="georgia" color="White">
Selamat Datang di Blog TTB

Berikut kodenya:

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

Selamat Datang di Blog TiUBlog

</MARQUEE></b></FONT></div>

12. Teks Berjalan dengan Link

Selamat Datang di Blog TTB

Selamat Datang di Blog TTB

Selamat Datang di Blog TTB

Berikut kodenya:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://kelolablog.blogspot.com" target="new">Selamat Datang di Blog TiUBlog</a><br/>

<a href="http://kelolablog.blogspot.com" target="new">Selamat Datang di Blog TiUBlog</a><br/>

<a href="http://kelolablog.blogspot.com" target="new">Selamat Datang di Blog TiUBlog</a><br/>

</marquee>

13. Teks Berjalan Bolak-Balik Vertikal dengan Warna Latar

Selamat Datang di Blog TiUBlog

Berikut Kodenya:

<font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">
Selamat Datang di Blog TiUBlog</marquee></font>

14. Teks Berjalan dari Kanan dengan Warna Latar

Selamat Datang di Blog TiUBlog

Berikut Kodenya:

<font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px">Selamat Datang di Blog TiUBlog</marquee></font>

15. Teks Berjalan kekiri kekanan 3 Kali

Selamat Datang di Blog TiUBlog

Berikut Kodenya:

<font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="50" bgcolor="red" width="450px">Selamat Datang di Blog TiUBlog</marquee></font>

16. Teks Berjalan dengan Efek Bounce

Selamat Datang di Blog TiUBlog

Berikut Kodenya:

<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">Selamat Datang di Blog TiUBlog</marquee></marquee></font>

17. Teks Berjalan dengan Efek Berhenti Jika Disentuh Kursor

Selamat Datang di Blog TiUBlog

Berikut Kodenya:

<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">Selamat Datang di Blog TiUBlog</marquee></font>

18. Teks Berjalan dengan Link disertai dengan Warna Latar

Selamat Datang di Blog TTB
Selamat Datang di Blog TTB

Selamat Datang di Blog TTB
Selamat Datang di Blog TTB
Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#ffff00" scrollamount="2" direction="up" width="100%" height="100" align="left">
<a href="http://kelolablog.blogspot.com">Selamat Datang di Blog TiUBlog</a><br/>
<a href="http://kelolablog.blogspot.com">Selamat Datang di Blog TiUBlog</a><br/>
<a href="http://kelolablog.blogspot.com">Selamat Datang di Blog TiUBlog</a><br/>
<a href="http://kelolablog.blogspot.com">Selamat Datang di Blog TiUBlog</a><br/>
<a href="http://kelolablog.blogspot.com">Selamat Datang di Blog TiUBlog</a><br/></marquee>

19. Teks Berjalan 4x, Kemudian hilang

Selamat Datang di Blog TTB

Berikut Kodenya:

<marquee bgcolor="#f2f5a9" loop="4">Selamat Datang di Blog TTB</marquee>

Selesai deh Teman-teman, saya sudah cape. Udah dulu yah?. Sebenarnya masih banyak lagi macam-macam dari tek berjalan ini. Tapi say pikir sampai si sini dulu. Lain kalilah kita perpanjang.

Untuk pengeditan, silahkan ganti tulisan Selamat Datang di Blog TiUBlog dengan Keinginan anda, dan tulisan http://kelolablog.blogspot.com dengan alamat link yang anda tuju.

Membuat Menu Navigasi "Green Library"

2013-08-15T01:51:00.000-07:00

Berhubung saya baru memberikan tips tentang menu navigasi, jadi saya ingin memberikan tips lagi nih buat sobat blogger cara untuk membuat menu navigasi "Green Library". Bentuk menunya ini secara vertikal dengan background warna hijau.

Untuk membuatnya, silahkan teman-teman ikuti langkah berikut. Tidak jauh berbeda ko dari cara-cara sebelumnya.

Langkah Pertama
1. Login ke blogger dengan akun anda sendiri
2. Pada Dasbor, pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Letakkan kode Script berikut tepat diatas kode ]]></b:skin>

/* vertikal menu hijau di mulai
---------------------------------------- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#menu-hijau{

border-bottom-width: 0;
}

#menu-hijau ul{
margin: 0;
padding: 0;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */
}

#menu-hijau a{
display: block;
padding: 3px 0;
padding-left: 9px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: white; /*warna hurup */
background-color: #28952D; /*warna background */
border-bottom: 1px solid #B6EDB9; /*warna border bawah */
border-left: 7px solid #245926; /*warna border samping kiri */
border-right:1px solid #000000; /*warna border samping kanan */
}

#menu-hijau a:hover {
background-color: #3BC642; /*warna background */
border-left-color: #357838;
}

#menu-hijau div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

Jika anda ingin mengeditnya, silahkan saja. Secukupnya.
6. Kemudian anda Simpan Template.

Langkah Kedua
1. Pilih Elemen Laman
2. Pilih Tambah Gadget
3. Sekarang Pilih HTML/JavaScript
4. Kopi Paste kode script Berikut

<div id="menu-hijau">
<div class="menutitle">CSS Lybrary</div>
<ul>
<a href="http://css-lybrary.blogspot.com">Home</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html">Blue menu</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html">Blue menu 2</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html">Double Line Menu</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html">Flip menu</a>

</ul>

<div class="menutitle">Unique Template</div>
<ul>
<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column</a>
<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Minima 3 column (beta)</a>
<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1st template unik</a>
<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column</a>
<a href="http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html">Blu Lover</a>
<a href="http://template-unik.blogspot.com/2007/08/gray-lover-template.html">Gray Lover</a>

</ul>

<div class="menutitle">Blog Tutorial</div>
<a href="http://kolom-tutorial.blogspot.com/2007/09/buat-daftar-isi-blog.html">Buat daftar isi</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-buku-tamu-di-sidebar.html">Pasang buku tamu</a>
<a href="http://kolom-tutorial.blogspot.com/2007/07/pasang-kode-tuker-link.html">Kode tuker link</a>
<a href="http://kolom-tutorial.blogspot.com/2007/07/pasang-jadwal-sholat.html" style="border-bottom-color: black">Jadwal sholat</a>

</div>

Silahkan anda ganti link dengan Link yang akan anda tuju.Coba anda perhatikan tulisan yang berwarna-warni di atas.

Jangan Lupa di Save yah...

SoftWare Untuk Membuat Gambar dalam Bentuk gif.

2013-08-15T01:45:00.000-07:00

Software ini sangat berguna bagi para blogger. baik untuk membuat banner ataupun gambar tukeran link.Software yang bernama Easy Gif Animator ini sangatlah mudah untuk digunakan. Jenis Gif lebih sederhana dibandingkan dengan flash karena tanpa harus menambahkan plugin pun gambar gif animasi sudah bisa terbaca. Berikut ini tips bagaimana membuat gambar gif animasi dengan mudah dan cepat, tanpa harus mahir.

Tetapi sebelumnya anda bisa Download SoftWarenya di sini.

Nah cara Menggunakan Program ini, silahkan ikuti langkah-langkah berikut.

Jalankan aplikasi buat halaman baru dengan animasi baru

Masukkan gambar/photo yang akan dibuat animasi, untuk contoh saya menggunakan 2 gambar berikut

Karena sifatnya gambar yang bergantian, maka masukkan gambar/photo sesuai keinginan tergantung berapa gambar yang akan ditampilkan dan bergantian

Kemudian untuk menambahkan efek pergantian gambar / photo, gunakan fasilitas efek pada software

Setelah selesai, save as gambar dengan format gif, sehingga didapat hasil sebagai berikut

Selain itu juga anda dapat membuat kreasi baru.

Sumber: tipsntrick.net

Cara Membuat Efek Zoom pada Gambar

2013-08-04T03:39:00.001-07:00

Efek Zoom merupakan efek yang menyebabkan gambar membesar pada saat kursor memilih gambar. Efek ini sangat menarik untuk ditampilkan pada blog. Untuk lebih jelasnya bisa anda lihat jika anda telah membuatnya pada blog anda.
Sekarang mari kita lihat langkah-langkahnya, kita mulai dengan:

1. Login ke blogger dengan akun kita sendiri
2. Pilih Rancangan
3. Pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Letakkan kode script ini dibatas kode ]]></b:skin>

/* Zoom Efek */
.thumbnail{position:relative;z-index:0}
.thumbnail:hover{background-color:transparent;z-index:50}
.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}
.thumbnail span img{border-width:0;padding:2px}
.thumbnail:hover span {visibility: visible; top: 0; left: 60px}

6. Jangan Lupa Simpan Template anda.
Apabila sobat ingin menggunakan efek zoom pada gambar ini, silahkan gunakan kode script ini:

Untuk text, gunakan kode script seperti ini:

<a class="thumbnail" href="#thumb">Lihat Gambar<span><img src= http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg /></span></a>

Catatan:
Sobat tinggal merubah ukuran gambar yang sobat inginkan, tinggal mengganti angka di width dan heigh sesuai dengan selera.

Sedangkan untuk mengatur letak tinggi dan rendah gambar hasil zoom, sobat bisa merubah ukuran pada kode yang diletakkan di atas ]]></b:skin> (yang berwarna Biru)

Ok..selamat mencoba.

Membuat Halaman Intro di Blog

2013-08-03T08:03:00.000-07:00

Apa yang dimaksud dengan intro disini? mungkin yang dimaksud oleh si penanya adalah pada website-website tertentu, apabila website tersebut dikunjungi tidak langsung ke halaman utama, namun terlebih dahulu disuguhkan oleh sebuah halaman yang umumnya adalah ucapan selamat datang atau navigasi, ada juga yang berupa gambar animasi ataupun dalam bentuk flash.
Untuk mempersiapkan file flash sebagai intro-nya, ada beberapa cara yang dapat teman Sobat blogger lakukan. di antaranya menggunakan program populer seperti adobe flash, swish dll. - pastikan file yang kita buat ukuran byte nya sekecil mungkin, jika ingin menggunakan sound/suara sebagai musik latar belakang atur format-nya ke midi file, jika menggunakan format Mp3 atau Wav kompresi file –nya dengan tool cool edit dll.

Tertarik dengan topik ini?. jika tertarik saya akan menjelaskan tipsnya.

1. Login ke blogger
2. Pilih Template
3. Pilih Edit HTML
4. Cari kode]]></b:skin>, dan letakkan kode script berikut di atas kode ]]></b:skin>

#intro{
background:#CAD8C9 url(http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg) repeat-x top left fixed;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}

5. Kemudian anda cari kode seperti ini </head> dan letakkan kode script berikut tepat diatas kode</head>

6. Kemudian cari kode <body> pada blog anda, kemudian letakkan kode script berikut di bawah kode <body>

<div id="intro">
<div class="welcome">
Welcome to my blog</div>
<a href="http://www.blogger.com/post-create.g?blogID=3865666885036770997" onclick="closebar(); return false"><img alt="go to my homepage" src="http://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif" title="go to my homepage" /></a>
<div class="gohome">
<a href="http://www.blogger.com/post-create.g?blogID=3865666885036770997" onclick="closebar(); return false">Go to homepage</a></div>

7. Silahkan anda edit sendiri, sesuai dengan keinginan anda. Dan jangan Lupah Simpan Template

Cara Membuat Efek Blur pada Gambar dengan JavaScript

2013-08-03T07:51:00.000-07:00

Efek blur adalah membuat gambar yang disorot dengan mouse menjadi blur atau transparan, kemudian apabila pointer mouse sudah lewat maka gambar akan kembali seperti semula. Sangat menarik bukan?. Mungkin sobat tbelum mengerti akan maksud dari artikel ini. Nah untuk itu sobat blogger harus mencobanya.
Oke kita lansung saja Membuat Efek Blur pada Gambar.

1. Login ke blogger dengan akun sobat
2. Pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode ini ]]></b:skin> dan letakkan kode berikut diBawah kode ]]></b:skin>

5. Lalu Simpan Template
Nah sekarang kita dapat memilih untuk membuat efek blur pada gambar tertentu pada postingan. Kita juga dapat membuat efek blur pada semua gambar yang terdapat pada blog.
Sekarang tinggan piliha nada.

Cara Membuat Efek Blur pada Gambar Tertentu Pada Postingan.
Caranya adalah:
Tinggal menyisipkan kode class="efekanimasi" pada gambar yang akan kita beri efek Blur.
Contoh kode gambar Biasa:

Kode Gambar yang diberi efek Blur:

Memberi Efek Blur pada Semua Gambar yang Terdapat pada Blog Secara Otomatis.
Caranya adalah:
1. Silahkan masuk ke Menu Rancangan, dan pilih Edit HTML lagi
2. Letakkan kode berikut di bawah kode ]]></b:skin> atau di bawah kode yang sudah kita letakkan tadi.

3. Klik Simpan Template dan selesai
Semoga bermanfaat.

Download Opera Mini 5 Beta untuk HP

2013-08-03T07:49:00.000-07:00

For Java-enabled phones

Transfer these files to your phone, and install them according to your phone's installation procedure.

*Opera Mini 5 beta for J2ME JAD
*Opera Mini 5 beta for J2ME JAR

For BlackBerry phones

Transfer the file corresponding to your BlackBerry OS version to your PDA, and install it.

*Opera Mini 5 beta for OS 4.2.x
*Opera Mini 5 beta for OS 4.3.x
*Opera Mini 5 beta for OS 4.7.x

Menambah Elemen di Bawah Header

2013-08-03T07:33:00.000-07:00

Menambah elemen di bawah header akan membuat blog kita menjadi "multi element". Yang akan dibahas kali ini adalah untuk menambah elemen di samping header blog. Masih ada yang belum tau Header?. Header adalah bagian atas blog kita, diman header adalah merupakan bagian tempat judul blog berada.
Saya mencoba memberikan tips ini karena saya ingin memberikan elemen di samping header saya, tetapi karena bertepatan rencana itu halaman Edit HTML saya lagi bermasalah, maka rencana itu saya tunda dulu. Dan saya akan terlebih dahulu memberikan tipsnya. Untuk mengetahui elemen itu seperti apa, mari kita lihat gambar di bawah ini:

Contoh Element pada Blogspot

Sekarang kita sudah mengenal apa yang namanya elemen pada blogspot. Tibalah waktunya untuk menambahkan elemen tersebut di bawah header blog kita. Untuk gambar header bisa kita lihat pada gambar di bawah ini:

Perhatikan gambar di atas

Melihat gambar di atas, saya rasa semua sudah jelas untuk tujuan dari tips ini. Jika masih ada yang masih bingung, saya mohon lebih dipelajari lagi.
Untuk membuat elemen di samping Header, silahkan ikuti langkh-langkah berikut ini.

1. Login ke blogger dengan akum kamu
2. Pilih Rancangan pada halaman Dasbor blog kamu
3. Kemudian pilij Edit HTML
4. cari kode ]]></b:skin> (tekan Ctrl+F atau tekan F3), lalu letakkan kode script ini di atas ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

5. Cari kode yang mirip seperti kode berikut

6. Kopi kode berikut, dan letakkan persis di bawah kode yang tadi

7. Klik tombol SIMPAN TEMPLATE. Dan tunggu beberapa saat.
8. Setelah template tersimpan, silahkan pilih Tambah Elemen Laman
9.Nah, tampilan elemen anda akan seperti gambar di bawah ini

Hasilnya akan seperti gambar di atas.

Nah..sekarang blog anda sudah mempunyai elemen yang langsung berada persis di bawah header blog anda. Sekarang terserah anda akan mengisi apa di sana.

10. Sekarang tipsnya sudah selesai.
Semoga bermanfaat.

Membuat Menu Vertical Dilengkapi Dengan Icon

2013-08-02T07:35:00.000-07:00

Sebelum melakukan aktifitas sehari-hari yaitu kuliah dan kuliah, saya menyempatkan sebentar untuk memberikan tips dan trik kepada sobat blogger dengan sebuah tulisan yang membuat blog anda lebih menarik. Pada tips kali ini kita akan membuat barisan menu dengan tipe vertikal yang dilengkapi dengan ikon yang dapat kita edit sendiri. Sebelumnya tips ini saya dapat dari sobat blogger yang tidak sengaja saya jalan-jalan ke blognya beliau.

DEMO

Menu vertikal merupakan salah satu cara pintas yang bisa diterapkan pada blog untuk link favorit agar mudah mengaksesnya, membuat menu vertikal dengan icon ini cocok digunakan pada template blog yang memiliki sidebar blog yang tidak terlalu lebar.

Mungkin sobat blogger tertari dengan menu navigasi ini untuk ditampilkan di dalam blog anda. Oke langsung saja kamu ikuti langkah berikut.

1. Login dengan akun anda sendiri

2. Pilih Rancangan

3. Pilih Elemen Laman

4. Pilih Tambah Gadget kemudian pilih HTML/JavaScript

5. CoPas kode berikut ini pada kotak Scriptnya

<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="http://1.bp.blogspot.com/-blhPS6EkPTA/TXnHCD-Rj3I/AAAAAAAABUg/l5cSTY_mWOs/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://http://kartajaya25.blogspot.com/2010/08/daftar-isi-lengkap-karta-jaya-web.html">Daftar Isi</a></li></td>
</tr>

<tr>
<td width="3%"><div align="center"><img src="https://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn3rqu6OI/AAAAAAAABT8/kyXgbv8sbmM/blogger.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kartajaya25.blogspot.com/2010/04/banner-tutorialnet.html">Link Exchange</a></li></td>
</tr>

<tr>
<td><div align="center"><img src="https://lh3.googleusercontent.com/_yF0--u7KSSI/TXmn4T1QynI/AAAAAAAABUM/PvCS8GxeJpE/rss.png" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/endafivers?format=xml">Live Bookmark</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh5.googleusercontent.com/_yF0--u7KSSI/TXmn3iKpe3I/AAAAAAAABUE/J1Rg9kY17PA/email.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.gmail.com">Mail</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn3gOy2oI/AAAAAAAABUA/cfUmuLowAq8/facebook.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.facebook.com/jaya karta">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn4Snr7BI/AAAAAAAABUQ/LQ-EYuN02hg/twitter.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.twitter.com/jaya_karta">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh4.googleusercontent.com/_yF0--u7KSSI/TXmn4KgKSTI/AAAAAAAABUI/HovNiKUlKn0/google.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2010/03/followers.html">Followers</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh3.googleusercontent.com/_yF0--u7KSSI/TXmn4lUjGtI/AAAAAAAABUU/prH9aYoaXPU/yahoo.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.yahoo.com">Yahoo</a></li></td>
</tr>
<tr>
<td><div align="center"><img alt="Five Minutes" src="http://3.bp.blogspot.com/-9BxQknaXTO8/TXoVs0dfQSI/AAAAAAAABWA/dCjVsyMkCaE/s1600/Fivers.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.fivers-pekanbaru.com">Fivers</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://1.bp.blogspot.com/-6o9VTWUNbTQ/TXoVtDKIYFI/AAAAAAAABWI/mvSQknF_icA/s1600/music.png" width="18" height="18" /></div></td>
<td><li><a href="http://mp3-laris.blogspot.com">Music</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-OAXkM22_ELA/TXoVt1viD5I/AAAAAAAABWg/z0M319lpntk/s1600/video.png" width="18" height="18" /></div></td>
<td><li><a href="http://kelolablog.blogspot.com">Video</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-w5urf_m-J5A/TXoVtRLo8AI/AAAAAAAABWY/JIR1Esypfdc/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/kartajaya25">Feedburner</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://1.bp.blogspot.com/-kxkZU3ns51U/TXoVtYlTsyI/AAAAAAAABWQ/M1cso09SCEQ/s1600/chat_2.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2011/04/chating-sepuasnya.html">Chat Room</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://3.bp.blogspot.com/-TDnSQxENPIQ/TXogEJIa5jI/AAAAAAAABXI/VunWYTIgtkI/s1600/download_folder.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/search/label/Software%20Gratis">Download</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://4.bp.blogspot.com/-bR0bshQhnck/TXogD9W4gKI/AAAAAAAABXA/z0kc3aA74RE/s1600/google_youtube.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.youtube.com/user/kartajaya25">Youtube</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://1.bp.blogspot.com/--HB6IETxdWI/TXoeX8oZP5I/AAAAAAAABWo/33X-1JBiRok/s1600/radio.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2010/12/radio-online.html">Radio</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-KRX9jVbT1nI/TXoke5aGJjI/AAAAAAAABXQ/_fddU5bf1Uo/s1600/tv.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2010/08/tv-online.html">Tv </a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://3.bp.blogspot.com/-G9gUSRNuC1s/TXokfF4675I/AAAAAAAABXY/PnBrhywjOJM/s1600/widget_badge.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/search/label/Widget">Widget</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-OwUcJhDqEKI/TXw1dfWCM_I/AAAAAAAAAKA/8v4XGb7mf5I/s1600/people_online.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2011/04/chating-sepuasnya.html">User Online</a></li></td>
</tr>
</table>
</ul>

Tulisan Berwarna Merah adalah Alamat URL ikon yang akan anda pasang. Silahkan anda ganti sesuai dengan selera anda.
Tulisan yang berwarna Ungu adalah alamat URL yang akan dituju. Ganti dengan alamt yang akan anda tuju.
Tulisan yang berwarna Hijau adalah judul dari menu navigasi blog anda.

6. Setelah selesai melakukan pengeditan, silahkan diSave.

Selesai, semoga bermanfaat.

[http://kartajaya25.blogspot.com/]

Cara Membuat Daftar Isi Berdasarkan Label Tertentu

2013-08-02T07:22:00.002-07:00

Setelah lama berkecimpung lama di dunia blogger, mungkin sudah lumayan banyak pengetahuan kita para blogger dengan yang namanya daftar isi. Demikian juga dengan bentuk atau macam-macam daftar isi yang dapat didesain untuk setiap blog. Setelah sebelumnya saya telah memberikan tips untuk membuat daftar isi blog berdasarkan label dan bulan, sekarang ada perbedaan tips yang akan say berikan. Pada tips kali ini kita dapat bebas untuk mengatur peletakan label pada daftar isi yang akan kita buat. Kita bisa menampilkan label yang kita inginkan, mengurutkan berdasarkan abjad label yang berurutan. seperti pertanyaan sobat saya yang menanyakan "gan, klau untuk label tertentu saja + menurut abjad gmn ya??". Nah demikian saya akan berikan tipsnya kepada sobat blogger.

Untuk menampilkan daftar isi seperti ini, tentunya sobat blogger harus mengikuti langkah-langkah yang akan saya berikan seperti berikut ini.

1. Login ke blogger dengan ccount anda
2. Pilih Tata Letak
3. Piliha Tambah Gadget ==> HTML/JavaScript
4. Setelah itu, silahkan Paste kode berikut ini kedalam kotak scriptnya.

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script>
<h3>Tutorial Blogspot</h3>
<ol><script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://tips-untuk-blogger.blogspot.com/feeds/posts/default/-/Tips%20blogspot?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>Tutorial Facebook</h3>
<ol><script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://tips-untuk-blogger.blogspot.com/feeds/posts/default/-/Tips%20facebook?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Catatan :

Untuk tulisan yang berwarna merah, ganti dengan label yang akan anda tampilkan.
Untuk tulisan yang berwarna biru, silahkan ganti dengan link blog anda.
Untuk tulisan berwarna hijau, silahkan ganti dengan "Label yang akan ditampilna". Harus sesuai dengan yang tertera pada blog anda.
Jangan lupan %20 adalah menunjukkan spasi. Jika label anda membutuhkan spasi, makan ganti dengan %20.

Untuk menambahkan lebih banyak lagi label yang akan ditampilkan, maka tambahkan kode berikut sebelum kode </ol>.

<br/>
<h3>Tutorial Facebook</h3>
<ol><script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://tips-untuk-blogger.blogspot.com/feeds/posts/default/-/Tips%20facebook?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>

demikian juga berikutnya jika anda ingin membuat lebih banyak label lagi. Nah setelah selasai, silahkan anda Simpan dan lihat perubahan yang terjadi pada blog sobat.

Jquery MultiLevel Menu Navigasi

2013-07-28T00:44:00.000-07:00

Begitu banyak model dari menu navigasi ini. Sampai-sampai kita bingung untuk membuatnya dalam blog. tetapi itu semua tergantung sobat blogger. Yang manapun anda coba, pasti itulah yang terbaik untuk anda.

Masih dalam membuat menu navigasi, saya sebelumnya sudah pernah memberikan tips yang berhubungan dalam menu navigasi. Untuk membacanya, silahkan BACA DISINI.

Sobat blogger, untuk tampilan dari menu ini lebih canggih dari yang sebelumnya. Dimana menu ini mempunyai cabang hingga tak terhingga, menurut keinginan kita.

Oke jika sobat ingin membuatnya dalam blog, silahkan ikuti tips ini sampai selesai, jangan tanggung-tanggung.

Berikut langkah-langkah dari membuat menu multilevel ini.

1. Login ke blogger dengan akun anda
2. Pilih Rancangan
3. pilih Edit HTML
4. Cari kode <head> dan letakkan kode berikutdi bawah kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

5. Lalu letakkan kode css berikut di atas kode ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Kode tersebut adalah tampilan dari menu navigasi anda. Silahkan anda edit sesuai kebutuhan anda.

6. Nah sekarang kita menuju kebawah untuk menemukan kode seperti ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>

</div>

Pastikan kode yang kita temukan seperti kode yang berwarna Biru. Karena kode yang berwarna hitam berbeda-beda setiap template.

7. Lalu letakkan kode berikut di bawah kode yang tadi

8. Kalau sudah, silahkan Simpan Template.

Pekerjaan belum selesai, sekarang kita menuju Elemen Laman.
Terlihat pada "Elemen Laman" muncul tempat gadget baru, lalu klik aja "Tambah Gadget" dan pilih HTML/JavaScript dan masukkan kode dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah kode diatas adalah kode dari widgetnya silahkan di edit sesuai kebutuhan Anda.
Jika sudah selesai, silahkan anda SAVE.

semoga bermanfaat

Membuat Menu Dtree

2013-07-23T03:50:00.000-07:00

Hai sobat blogger? apa kabar?. Setelah sekian lama saya tidak memberikan tips, kali ini saya akan memberikan anda tips yang menyangkut dengan tips untuk membuat barisan Menu. Setelah sebelumnya saya sudah memberikan tips yang hampir sama dengan tips ini, yaitu:

1. Jquery Multilevel Menu Nagigasi

2. Menu Navigasi Green Library

3. Membuat Menu Navigasi Horizontal

4. Atau lihat DISINI.

Nah judul pembahasan kita kali ini adalah cara membuat menu Dtree. Mungkin sobat blogger masih ada yang belum mengerti apa itu menu Dtree. Oke sekarang saya ingin memberikan sedikit penjelasan tentang menu Dtree. Menu Dtree adalah menu yang memiliki struktur seperti pohon, yang punya cabang-cabang. Seperti Kalau misalnya kitamembuka windows Explorer.

Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Oke dengan penjelasan yang kurang jelas ini, sobat blogger dapat mengerti yah?. Untuk lebih jelasnya, ikuti langkah-langkah berikut:

1. Login ke blogger dengan Akun anda.
2. Pilih Rancangan pada dasbor blog anda.
3. Kemyudian pilih Edit HTML
4. Cari kode seperti ini <head> dan letakkan kode berikut di atas kode tersebut

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" /> <script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

5. Terus Simpan Template
6. Setelah itu, silahkan anda pilih Elemen Laman
7. Pilih Tambah Gadget
8. Pilih lagi HTML/Javasript
9. Letakkan kode berikut ini dalam kotak scriptnya.

<div class="dtree">
<script type="text/javascript">

</script>
</div>

Hal yang harus dilakukan:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).

- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash.gif’);

ganti kode yang berwarna merah di atas dengan ikon yang akan anda gunakan.
10. Kemudian Save.
Selesai. Semoga bermanfaat.

Cara Membuat Page Number-Navigasi Halaman

2013-07-23T03:45:00.000-07:00

Page Number atau Navigasi Halaman dengan menggunakan nomor atau angka adalah sebagai alat navigasi yang berfungsi selain dapat mempercantik tampilan halaman utama juga dapat memudahkan pengunjung dalam menjelajahi content sebuah website atau blog. Lihat contohnya pada gambar di bawah :


Contoh Website yg menggunakan Page number-Navigasi

Nah, jika sobat t'Net berminat, silahkan ikuti langkah-langkah berikut.

1. Login Dengan akun anda

2. Pilih Rancangan

3. Kemudian Edit HTML

4. Cari kode berikut ini ]]></b:skin>

5. Pastekan kode berikut tepat diatas 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;
}
6. Lalu cari kode seperti ini </body>
7. Jika sudah ketemu, letakkan kode berikut ini di atas kode </body>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

8. Selanjutnya, cari kode seperti ini 'data:label.url'

9. Jika sudah ketemu, hapus kode terbut dan ganti dengan kode berikut ini

'data:label.url + "?&max-results=5"'

10. Simpan Template, dan lihat hasilnya.

Semoga bermanfaat dan mohon maaf jika terjadi kesalahan dalam penulisan trik berikut ini.

Dari Berbagai Sumber.

Membuat Background dan Fungsi Scroll Sebuah Tulisan

2013-07-23T03:35:00.000-07:00

Dalam tips kali ini saya ingin berbagi dengan sobat blogger untuk membuat background suatu tulisan. Lebih tepatnya kita akan membuat tulisan kita mempunyai latar yang berbeda dari tulisan lain. Selain itu juga kita akan membuat fungsi scroll pada tulisan yang terlalu panjang dalam suatu blog.
Jika sobat blog ingin membuatnya, silahkan ikuti trik berikut ini.

I Membuat Background Suatu Tulisan.

Anda hanya butuh kode nerikut ini.

<div style="-moz-border-radius: 5px 5px 5px 5px; background-color: #ddf2fc; border: 1px solid rgb(204, 204, 204); height: auto; margin: 5px 10px; overflow: auto; padding: 10px; text-align: left; width: auto;">

TULISAN ANDA DI SINI

</div>

Tulisan Auto di atas adalah ukuran dari Backgroundnya. Maksudnya tinggi maupun lebar backgroundnya adalah otomatis sesuai dengan leabar maupun tinggi teks anda.
Warna latarnya dapat anda ganti dengan warna lain. Lihat kode warna DISINI.

II Membuat Fungsi Scroll pada Tulisan yang Panjang

Anda hanya butuh kode berikut ini.

<div style="-moz-border-radius: 5px 5px 5px 5px; background-color: #ddf2fc; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 7px 0px; overflow: auto; padding: 10px; text-align: left; width: auto;">

TULISAN ANDA DI SINI

</div>

Ganti tulisan #ddf2fc dengan warna keinginan anda. Untuk melihat kode warna, silahkan lihat DISINI.
Setelah selesai, anda bisa mempublikasikan tulisan anda dengan warna background yang berbeda dari tulisan yang lainnya. Silahkan anda gunakan dengan kreasi anda sendiri. Semoga bbermanfaat dan mohon maaf jika ada kesalahan dalam penulisan trik ini.

Membuat Banner Iklan 125x125 dengn Kode CSS3

2012-11-21T01:00:00.000-08:00

Dengan membaca judulnya mungkin sobat blogger kepikiran untuk menampilkan banner iklan 125x125 dengan bentuk kotak (persegi). Namun dalam tips yang akan saya berikan kali ini sebenarnya akan menampilkan animasi budar/bulat. Dimana saat pengunjung blog anda mengarahkan kursor ke banner ini, maka bannernya akan berubah bentuk menjadi kotak (persegi). Cukup menarik kan?. Banner ini sedikit menggunkan sentuhan kode CSS3 yang tentunya akna menghasilkan tampilan yang menarik buat sobat blogger. Untuk pratinjau dari tips ini silahkan lihat di situs kami di bawah ini:

DEMO

Nah mungkin sobabt blogger sudah lebih jelas dengan melihat contoh bannernya dalam Demo Situs kami tersebut. Jika sobat blogger memnginginkan banner ini, caranya cukup mudah ko.

Berikut cara-cara menampilkan banner iklan 125x125 dengan sentuhan kode CSS3:

1. Login ke blogger dengan account anda
2. Pada dasbhoardblog anda, silahkan pilih Template => Edit HTML=> Lanjutkan.
3. Letakkan kode berikut ini di atas kode ]]></b:skin>

#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c0c0c0;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;}
#kotak-iklan-125x125 img:hover {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c33f00;-webkit-border-radius:0px;-moz-border-radius:0px;-o-border-radius:0px;border-radius:0px;}

4. Kemudian Simpan Template blog anda.
5. Setelah itu untuk mnemapilkan bannernya pada sidebar blog, silahkan beralih pada Tata Letak => Tambah Gadget => HTML/JavaScript.
6. Letakkan kode CSS berikut kedalam kotak HTML/JavaScript nya

<div id="kotak-iklan-125x125">

<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>

</div>

Note:
Silahkan ganti tulisan yang berwarna merah dengan alamat URL iklan yang anda pasang pada bannernya.

Jika sudah selesai, silahkan Save. Lihat perubhan yang terjadi pad blog anda. Semoga bermanfaat dan mohon maaf jika ada kesalahan. (Jkt/2012)

Membuat Link Pelangi pada Blog

2012-11-12T04:36:00.000-08:00

Terkadang pengunjung betah untuk berkunjung ke blog kita, karena tampilan blog yang begitu menarik. Nah jika sobat ingin membuat blog anda lebih menarik silahkan berikan effek yang menarik pada link blog anda. Yaitu dengan memberikan effek link pelangi pada blog anda.

Dimana nantinya jika salah sati link disorot oleh cursor, maka link akan berubah warna seperti warna pelangi.

Untuk DEMO silahkan lihat Blog Ini. Jika sobat sudah mengerti dengan effek link pelangi ini, silahkan ikuti langkah berikut ini.

1. Login ke blogger
2. Pilih Template
3. Pilih Edit HTML => Lanjutkan
4. Cari kode seperti ini <head> dan letakkan kode berikut ini tepat di Bawah <head>

5. Simpan Template
6. Silahkan lihat blog anda.
Selesai, semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)

Cara Membuat Background Blog Fullscreen

2012-11-12T01:16:00.002-08:00

Cara membuat background fullscreen sangatlah mudah sobat blogger. Pada tips kali ini saya akan memberikan tips bagaimana cara membuat background blog sobat menjadi fullscreen dan yang pasti gambar (backgroundnya akan tetap jika di scroll. Nah tips kali ini saya berikan kepada sobat blogger karena saya sendiri sudah membuatnya dalam blog ini.

Jika sobat blogger berniat atau tertarik, silahkan ikuti langkah-langkah berikut ini:

1. Login ke blogger.com dengan account anda
2. Pada Dasbhoard blog anda, silahkan pilih Template.
3. Cari kode attribut dari background blog anda. Seperti ini .body {
4. Letakkan kode berikut ini dibawah kode tersebut.

background: url(URL GAMBAR KAMU) no-repeat center center fixed; #fff;
        -webkit-background-size: cover;
        -mckground-size: cover;
        backgoz-background-size: cover;
        -o-baround-size: cover;
background-attachment:fixed;

Note:
Jika blog anda telah memasang attribut background, silahkan ganti sepenuhnya dengan kode tersebut. Dan untuk tulisan yang berwarna ungu, silahkan ganti dengan url gambar kamu.

5. Jika sudah selesai, Simpan Template
Silahkan lihat perubahan yang terjadi pada blog sobat. Semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)

Favicon Berbeda antara Homepage dan Postingan

2012-11-10T00:53:00.000-08:00

Sebelumnya mungkin sobat blogger sudah mengerti apa yang dimaksud dengan favicon. Dan saya rasa cara memasang (mengganti) favicon blog mungkin sobat blogger sudah mengerti. Nah jika tidak mengerti dengan kedua hal di atas, silahkan tinggalkan komentar. Memasang favicon blog merupakan sebuah langkah sobat blogger untuk membuat sebuah identitas blog sobat, karena favicon ini akan tampil di address bar browse anda. Kenapa saya mengatakn favicon adalah sebuah identitas blog? Bisa jadi favicon ini adalah objek yang pertama dilihat oleh pengunjung blog anda saat berkunjung ke blog anda.

Ada berbagai macam desain favicon yang bisa anda buat dengan kreasi anda. Nah pada tips kali ini saya akan memberikan bagaimana cara membuat Favicon Homepage (beranda) berbeda dengan favicon Postingan blog anda. Hal ini bukanlah hal yang sulit untuk kita lakukan. Sekarang yang penting anda mengerti dulu favicon ini seperti apa.

Perhatikan tanda panah.

Jika sobat sudah mengerti dengan favicon ini, sekarang kita lanjutkan bagaimana cara membuat tampilan favicon yang berbeda antara homepage dan postingan blog.

Langkah pertama adalah anda harus membuat gambar favicon 2 (dua) buah yang berbeda. Setelah membuat gambar favicon menjadi dua, untuk menampilkan salah satunya antara hopmepage dan halaman postingan, kita hanya menambahkan script untuk memunculkan hanya pada halaman postingan saja, sama halnya waktu kita membuat tampilan homepage berbeda dengan tampilan halaman postingan, yaitu menambahkan script seperti dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
Script Kalian Disini
</b:if>

Sehingga kode script nya menjadi seperti ini:

<link href='url gambar 1' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<b:if cond='data:blog.pageType == "item"'>
<link href='url gambar 2' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
</b:if>

Cara memasang favicon ini, anda cukump meletakkan kode di atas tepat dibawah kode ]]></b:skin> atau diatas kode </head>.

Jika sudah selesai, silahkan Simpan Template anda dan lihat hasilnya pada blog anda. Semoga berhasil dan mohon maaf jika ada kesalahan.

Background Warna Transparan pada Post

2012-11-09T23:57:00.000-08:00

Postingan blog merupakan hal yang paling penting dalam sebuah blog. Jika bisa dikatakan tanpa post rasanya blog itu tidak ada gunanya. Karena dalam post lah kita banyak memberikan informasi kepada pengunjung blog kita. Berbicara soal background, pada postingan juga kita dapat memberikan editan yang berbeda-beda sesuai dengan kebutuhan kita. Pada tulisan kali ini saya akan memberikan bagaimana caranya membuat background post itu berwarna trasparan. Selain itu juga sobat bisa berkreasi nantinya sesuai dengan kebutuhan blog sobat.

Bagaimana cara membuat efek transparan pada background post?.

Dalam pengkodean warna css dalam template blog, biasa menggunakan kode HEX seperti ini #000000 yang merupakan kode untuk warna hitam, jika kita menggunakan kode hex dalam background tidak akan memberikan warna yang transparan terhadap objek teks. Untuk memberikan efek transparan terhadap objek teks, kita harus merubah pengkodean warna hex dengan warna RGBA, warna hitam untuk rgba adalah (0, 0, 0,), dengan pengkodean warna (0, 0, 0,) tidak akan menghasilkan warna yang transparan, kita harus tambah perintah opacity dibelakang kode, sebagai ilustrasi saya gambarkan seperti dibawah ini :

background: rgba(0, 0, 0, 0.2);

Note:
warna merah merupakan kode rgba untuk warna hitam, sedangkan kode tambahan yang berwarna hijau merupakan kode untuk transparansi.

Membuat Link Download dengan Beragam Style

2012-11-07T03:26:00.000-08:00

Buat sobat blogger yang suka membuat link download pada blog, mungkin anda bosan dengan tampilan link yang begitu-begitu aja alias default, tidak ada kreasi. Kali ini TIPS untuk Blogger kembali memberikan tips yang mungkin kurang menarik biat memperindah penampilan blog. Tapi dengan kreasi link download ini saya rasa dapat membuat semangat anda untuk menulis (mempost) pada blog anda akan semakin meningkat.

Oke sobat, sekarang akan saya berikan beberapa kode script untuk membuat link download.

1. Link Download Biasa

<a href="http://adf.ly/EUFJm"><b>DOWNLOAD</b></a>

2. Link Download dengan Gambar

<a href="http://adf.ly/EUFJm" target="_blank"><img alt="Download Button" src="http://2.bp.blogspot.com/-d94UwjQPxh8/T3plWl6fZNI/AAAAAAAAAyw/W_EAtXrMGY0/s1600/download-button.jpg" /></a>

3. Link Download dengan Mengatur Tinggi dan Lebar Gambar

<a href="http://adf.ly/EUFJm" title="Download"><img src="http://farm5.static.flickr.com/4042/4278913170_e7973277d8_o.png" width="216" height="74" alt="download" /></a>

4. Link Download Terbuka di Tab Baru

<a href="http://adf.ly/EUFJm"target="_blank">DOWNLOAD</a>

5. Link Download dengan Gambar dan Terbuka di Tab Baru

<a href="http://adf.ly/EUFJm" target="_blank"><img src="http://i302.photobucket.com/albums/nn113/aburifaie/down.jpg" alt="Download"></a>

6. Link Download Terbuka di Windows Baru

<a href="http://adf.ly/EUFJm" target="new">DOWNLOAD</a>

7. Link Download dengan Gambar dan Terbuka di Windows Baru

<a href="http://adf.ly/EUFJm" target="new"><img src="http://i302.photobucket.com/albums/nn113/aburifaie/down.jpg" alt="Download"></a>

Note:

Untuk tulisan yang berwarna MERAH; anda ganti dengan link Download/URL lainnya yang akan anda tuju.
Untuk tulisan berwarna BIRU; anda ganti dengan alamat URL gambar downloadnya
Untuk tulisan berwana HIJAU; anda ganti sesuai tinggi dan lebar gambar download yang anda suka
Untuk DEMO dari semua style, silahkan LIHAT DI SINI.

Demikian tips membuat link download yang bisa saya berikan. Semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)

Cara Membuat Iklan Melayang di Kiri dan Kanan Blog

2012-11-07T00:20:00.000-08:00

Jika sobat mempunyai blog di blogger.com, kali ini saya akan memberikan tips "Cara membuat Iklan Melayang di Kanan dan Kiri" blog sobat. Mungkin saat anda berkunjung pada beberapa blog, banyak sekali iklan yang tampil pada halaman blog mereka. Mulai dari tampilan iklan yang melayang, fixed (tetap) hingga iklan yang melayang tetapi dilengkapi dengan buttom close.

Nah pada tips kali ini saya akan memberikan tips membuat iklan melayang pada kanan dan kiri blog dengan dilengkapi buttom close yang memungkinkan pengunjung blog anda dapat menutup tampilan iklan anda. Karena sebagian orang tidak senang dengan tampilan iklan-iklan semacam itu. jadi untuk memudahkan pengunjung blog anda untuk berselancar di blog anda, maka anda harus membuatkan buttom close nya.

Untuk lebih jelas seperti apa tampilan buttom close nya biasa anda lihat di blog kami ini, atau lihat demonya di bawah ini:

DEMO

Yupss.... sekarang sudah jelas seperti apa tampilan iklannya. Sekarang saatnya membuat tampilan iklan seperti di atas.

1. Login ke blogger dengan account anda.
2. Pada Dashboard blog anda, pilih Tata Letak.
3. Kemudian pilih Add Gadget (Tambah Gadget)
4. Pilih HTML/JaavaScript.
5. Letakkan kode berikut ini kedalam kotak HTML/JavaScript.

<script type='text/javascript'>
    $(document).ready(function() {
    $('img#closed').click(function(){
    $('#btm_banner').hide(90);
    });
    });
    </script>

    <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
    </script><script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>

    
    <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='http://3.bp.blogspot.com/-gwsFvgzCBDE/UC5jBenZUoI/AAAAAAAACLU/xlY3lJEl2IY/s1600/PhoXo2.png'/></center></a></div>
    
    Masukkan kode Iklan anda disini
    
    </div>
    
    
    <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='http://3.bp.blogspot.com/-gwsFvgzCBDE/UC5jBenZUoI/AAAAAAAACLU/xlY3lJEl2IY/s1600/PhoXo2.png'/></center></a></div>

    
    Masukkan kode iklan anda disini
    

    </div>

Note:

Tulisan Masukkan kode Iklan anda disini yang pertama merupakan letak kode iklan anda yang nantinya berada di sebelah kanan blog anda.
Tulisan Masukkan kode Iklan anda disini yang ke-2 merupakan letak kode iklan anda yang nantinya berada di sebelah kiri blog anda.

6. Terkahir silahkan Save.
Kemudian lihat hasilnya pada blog sobat. Semoga berhasil dan bermanfaat. Mohon maaf jika ada kesalahan (Jkt/2012)

Cara Membuat "Sintax Highlighter" pada Blog

2012-11-02T04:16:00.000-07:00

Tulisan "Cara membuat Syntax Highlighter" ini merupakan satu dari sekian banyak cara membuat tampilan daripada Blockquote pada blog. Adapun versi dari highlighter ini adalah Syntax Highlighter V.3 yang mempunyai berbagai background menarik yang bisa sobat gunakan pada blog sobat. Mungkin dari sobat masih ada yang belum mengerti untuk apa Syntax Highlighter ini digunakan. Berikut sedikit ulasan mengenai Syntax Highlighter ini:

Syntax Highlighter merupakan suatu fitur dari text editor, khususnya editor source code, html, php atau bahasa pemrograman apapun sehingga berbeda dengan tulisan lain di sekitarnya. Fungsinya untuk memudahkan programmer dalam membaca dan menganalisa source code tersebut.

Nah..buat sobat blogger yang sering memberikan post source code seperti html, php, dan lain sebagainya, syntax highlighter ini sangat berguna sekali untuk mempermudah membedakan source code dengan paragraf lain dalam satu tulisan kita. Selain itu juga syntax highlighter ini juga dapat membuat penampilan yang sangat menarik pada Blockquote pada blog anda.

Fungsi syntax highlighter ini sebenarnya tidak jauh berbeda dengan Blockquote pada blog anda. Hanya saja Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namun Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh JQuery. Adapun fitus yang diberikan pada syntax highlighter ini adalah adanya:

Fasilitas Print untuk code
Fasilitas view source yaitu membuka barisan kode dalam popup windows.
Ada 8 (delapan) jenis Themes yang bisa kamu gunakan

Baiklah, mungkin sudah cukup jelas dengan penjelasan yang sudah saya berikan. Sekarang kita akan belajar bagaimana membuat Syntax Highlighter ini pada blog. Sekarang silahkan ikuti langkah-langkah di bawah ini:

1. Login ke blogger dengan account anda

2. Pada Dashboard blog anda, silahkan pilih Template => Edit HTML => Lanjutkan.

3. Cari kode <head> dan letakkan kode berikut dibawahnya.

<<link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<script src='http://tutorialforyou.googlecode.com/files/shCore.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushCss.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushJScript.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Note:
Perhatikan kode berwarna HIJAU, kode tersebut merupakan kode pembentuk background dari syntax highlighter anda nantinya. Biar variatif, silahkan anda ganti kode tersebut dengan memilih kode jenis-jenis background yang saya berikan di bawah.

4. Setelah selesai, silahkan Simpan Template.

Cara Menampilkan Syntax Highlighter pada Postingan

1. Pada kotak postingan blog, anda harus berada pada Edit HTML.
2. Silahkan gunakan (paste-kan)kode berikut ini:

<pre class='brush:js'>
LETAKAN KODE SCRIPT YANG AKAN DIPASANG DISINI
</pre>

Note:
Setiap anda ingin menampilakn kode dalam bentuk syntax highlighter ini, anda harus memasukkan kode di atas pada kotam postingan anda.

3. Setelah selesai, silahkan Terbitkan tulisan anda.
Untuk pratinjaunya, silahakan lihat demo dari syntax highlighter dengan menggunakan background Django.

DEMO

Semoga bermanfaat dan mohon maaf jika ada kesalahan.

Untuk jenis background dari syntax highlighter. Silahkan lihat di sini.

Membuat Rolling Widget Buku Tamu

2012-10-20T22:18:00.000-07:00

Bagi sobat blogger yang ingin buku tamunya tersembuyi, silahkan ikuti tips yang ini nih..!

Buku tamu ini akan disembunyikan dengan cara rolling. Selain membuat tampilan blog ;ebih keren, kita juga menghemat sidebar blog kita.

Nah pada penasaran kan gimana cara membuatnya?

Untuk lebih jelasnya, ikuti tips ini dengan hati-hati, dengan anda hati-hati, maka apa yang anda kerjakan akan berhasil dengan baik.

Berikut Cara Untuk Membuat Buku Tamu Tersembunyi.

Cara Pertama
1. Pertama Login ke blogger.com dengan ID anda
2. Pada Dasbor, pilih Rancangan
3. Kemudian Tata Letak>>>Elemen Laman
4. Kemudian Tambah Gadget>>>HTML/JavaScript
5. Letakkan kode berikut ini pada kotak Scriptnya
6. Setelah anda meletakkan kode di bawah ini, "LAKUKAN PENGEDITAN TERAHADAP KODE YANG BERWARNA MERAH DAN HIJAU SESUAI DENGAN KEBUTUHAN"

<style type="text/css">
#gb{
position:fixed;
top:10px; /*jarak dari atas*/
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px; /*tinggi gambar*/
width:30px; /*lebar gambar*/
float:left;
cursor:pointer;
background:url("http://sites.google.com/site/ruangsc/imgsb/GB1.png") no-repeat; /*gambar*/
}
.gbcontent{
float:left;
border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
background:#F0F0F0; /*warna latar*/
padding:10px 10px 0px 10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"></div>
<div class="gbcontent">

Kode Shoutbox atau Buku Tamu

6. Save, kemudian pilih Edit HTML

Cara Kedua

1. Cari kode </head> pada script HTML blog kamu
2. Lalu letakkan kode script yang tadi di bawah kode </head>
3. Lakukan Pratinjau, jika anda merasa kurang yakin.
4. Jika merasa sudah yakin, silahkan klik Simpam Template.

Keterangan:

Pada widget di atas disetting menggunakan gambar Buku Tamu hijau, seperti ini:
tinggi gambar dengan 100px
lebar gambar dengan 30px
URL gambar dengan
http://sites.google.com/site/ruangsc/imgsb/GB1.png
ketebalan dan warna kotak dengan 2px solid #A5BD51

Tapi jika kamu mengginginkan yang biru (gambar Gueestbook), gantilah tinggi gambar, lebar gambar, gambar, ketebalan dan warna kotak dengan kode-kode di bawah ini:

tinggi gambar dengan 130px
lebar gambar dengan 35px
URL gambar dengan
http://sites.google.com/site/ruangsc/imgsb/GB2.png
ketebalan dan warna kotak dengan 3px solid #003399

Setelah memilih salah satu gambar tersebut, lalu gantilah kalimat Kode Shoutbox atau Buku Tamu dengan script Shoubox Chat yang kamu miliki.

Ubahlah ukuran tinggi (height) Shoutbox sehingga tidak melebihi tinggi halaman blog kamu.

Selanjutnya kamu lakukan salah satu langkah atau cara berikut:

Colorfull jQuery Menu Horizontal

2012-10-12T02:02:00.000-07:00

Huappppssss...Bosan dengan tips yang ini?. Heheh oke sob, jika merasa bosan dengan tips menu navigasi, silahkan baca tulisan kami yang lain di TIPS untuk Blogger. Saya jamin anda akan mendapatkan tips yang lain dan yang pastinya anda suka.

Oke kembali pada tips Membuat menu navigasi horizontal dengan keunikan:

Mempunyai background yang berwarna-warni (Colorfull)
Mempunyai satu cabang cabang (level)
Cabang (level) berbentuk horizontal juga
Yang pastinya sangat elegant jika dipasang pada blog anda.

Oke sobat blogger, mambaca keterangan di atas, saya rasa sobat blogger sudah tertarik untuk membuatnya pada blog anda. Pada tips ini saya akan memberikan sedikit tips kepada sobat blogger masalah menu navigasi ini. Sebenarnya setiap blog itu mempunyai tampilan yang berbeda-beda, sehingga menu navigasi banyak sekali macamnya. Maka untuk itu sobat blogger harus menentukan menu navigasi yang pas dengan tampilan blog sobat, supaya singkron kaya gitu maksud saya. Untuk memilih menu navigasi lainnya silahkan lihat macam-macam menu navigasi.

Untuk menampilkan menu yang ini anda hanya butuh mengikuti dan melakukan langkah-langkah berikut ini:

1. Login ke blogger dengan account anda.

2. Pilih Template => Edit HTML => Lanjutkan

3. Jangan lupa centang Expand Template Widget.

4. Silahkan letakkan kode berikut di bawah kode <head>

<script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script>
<script src='http://mybloggertricks.googlecode.com/files/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='http://mybloggertricks.googlecode.com/files/mt-colourful.js' type='text/javascript'></script>

5. Kemudian cari kodeyang mirip seperti ini

body {
----
---
)

6. Kemudian tambahkan atribut berwana biru mnjadi seperti berikut

body {
margin:0px
padding:0px;
---
---
}

Note: Jika kode body { tidak ada silahkan letakkan kode pada langkah 6 diatas kode ]]></b:skin>
7. Kemudian cari kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'>
8. Letakkan kode CSS berikut di bawah kode tersebut:

Note: Silahkan edit menu navigasinya sesuai dengan kebutuhan blog anda.

9. Kemudian Simpan Template dan lihat perubahanny (Jika tidak lakukan pratinjau dulu)
Semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)

TIPS untuk Blogger

Cara Membuat Text Berjalan Pada Blog (Marquee)

Membuat Menu Navigasi "Green Library"

SoftWare Untuk Membuat Gambar dalam Bentuk gif.

Cara Membuat Efek Zoom pada Gambar

Membuat Halaman Intro di Blog

Cara Membuat Efek Blur pada Gambar dengan JavaScript

Download Opera Mini 5 Beta untuk HP

Menambah Elemen di Bawah Header

Membuat Menu Vertical Dilengkapi Dengan Icon

Cara Membuat Daftar Isi Berdasarkan Label Tertentu

Jquery MultiLevel Menu Navigasi

Membuat Menu Dtree

Cara Membuat Page Number-Navigasi Halaman

Membuat Background dan Fungsi Scroll Sebuah Tulisan

Membuat Banner Iklan 125x125 dengn Kode CSS3

Membuat Link Pelangi pada Blog

Cara Membuat Background Blog Fullscreen

Favicon Berbeda antara Homepage dan Postingan

Background Warna Transparan pada Post

Popular Post Animasi Gambar Berputar

Membuat Link Download dengan Beragam Style

Cara Membuat Iklan Melayang di Kiri dan Kanan Blog

Cara Membuat "Sintax Highlighter" pada Blog

Membuat Rolling Widget Buku Tamu

Colorfull jQuery Menu Horizontal