Main Widget Berkedip

Nah, dengan trik ini maka blog menjadi semakin cantik dan menawan.



1. Membuat Main Widget Berkedip (tempat postingan anda muncul, kotak utama)
- Login ke blogger
- Tata Letak
- EDIT HTML
- Cari kode berikut:



.main .widget{
background:#3D81EE;
border-bottom:0px solid $bordercolor;
margin:0 0 1.0em;
padding:0 0 1.5em;
}

tambahkan kode berikut ini:
.main .widget:hover {
background:#66B5FF;
}

- Lalu klik simpan

2. Membuat Sidebar Berkedip
- Login ke blogger
- Tata Letak
- EDIT HTML
- Cari kode berikut:

.sidebar .widget{
background:#3D81EE;
border:0px solid #6c6b6b;
margin:0 0 1.0em;
padding:0.5em;
}

tambahkan kode berikut ini:
.sidebar .widget:hover {
background:#66B5FF;
}
- Lalu klik simpan

Perhatikan perbedaamn tambahan pada main widget dan sidebar widget di atas, sebenarnya kata kuncinya adalah yang berwarna merah di bawah dan script kita sesuaikan hanya dengan mengganti yang berwarna biru:

.bagianblogkamu .widget:hover {
background:#66B5FF;
}

Kamu juga bisa mengubah footer dan bagian blog yang lain menjadi berkedip
Selamat mencoba!

»»  READMORE...

»»  Read More

MemBuat Foto Berjalan | Image berjalan |

Pengen Banget rasanya Bikin Image berjalan ...
q pikir pikir lama banget..tapi untung saja bisa....hem ni akang mau kasih solusinya,,
Setelah anda memahami kode-kode MarQue.., sekarang anda dapat mengganti huruf dengan gambar/image.

Contoh :

<marquee align="center" direction="left" height="200" scrollamount="3" width="100%" >
<a href="http://s920.photobucket.com/albums/ad46/setiabudi38/?action=view&current=Cute019.jpg" target="_blank"><img src="http://i920.photobucket.com/albums/ad46/setiabudi38/th_Cute019.jpg" border="0" alt="Photobucket" ></a>
</marquee>

Hasilnya seperti dibawah ini:











Perhatikan sederetan banner yang dipasang pada Blog Kang Setia. Coba arahkan mouse pada gambar yang sedang berjalan.



















Untuk membuat kode marquee seperti contoh diatas ( image/tulisan akan berhenti ketika mouse diarahkan diatasnya. Anda hanya perlu menambah kode ini onmouseover="this.stop()" dan kode onmouseout="this.start()"


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

<a href="http://avengedsevenfoldisme.blogspot.com" target="_blank"><img border="0" alt="spyyudhaz" src="http://i696.photobucket.com/albums/vv323/spy_yudhaz/8fa382735bc8a6dc432f0f856ce4b006.gif"/></a>
<br/>
<a href="http://www.masdoyok.co.cc" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5358160416297762450" border="0" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 97px; height: 92px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4hg9XyOysrEXcfddm4fvyOzWaa8WXMTG07bLllbfZi_Alw15Z0xxKvbUrlxr0kquUqhrMWBlApiR_tibj4OdEDrrifctv4aBiaDJYGBh2NcHxyDani-9nYo3nhdSgqQ3f4C8Yq6XES6g/s320/a.jpg"/></a>
<br/>
<a href="http://ktlai.blogspot.com"><img width="60" alt="ktlai" src="http://images.cooltext.com/945106.png" height="35"/></a>
<a href="http://cooltext.com/Logo-Design?LogoID=485696460"></a>
<br/>

<a href="http://kang-setia.blogspot.com" target="_blank">
<img border="0" alt="Blog tutorial " src="http://i920.photobucket.com/albums/ad46/setiabudi38/iconbaner.jpg"/></a>

</marquee>

Selamat Mencoba....Kang setia

»»  READMORE...

»»  Read More

Cara membuat text image berjalan| MarQuee

Teks atau gambar berjalan banyak digunakan oleh para blogger karena disamping dapat menghemat tempat juga menarik untuk dilihat. Program yang demikian dikenal dengan nama Marquee.
Program marquee selalu diawali dan diakhiri dengan kata marquee yang kodenya seperti ini :<marquee>...</marquee>.
Diantara kedua kode tersebut,dapat kita tambahkan beberapa kode lainnya, agar penampilannya lebih menarik, misalnya :

1. Bgcolor="warna" : untuk mengatur latar belakang teks.
2. Direction="left/right/up/down" : untuk mengatur arah gerakan dari teks.
3. Behavior="scroll/slide/alternate" : untuk mengatur perilaku gerakan.
   Scroll = teks bergerak sambil berputar.
   Slide = teks bergerak sekali lalu berhenti.
   Alternate = teks bergerak bolak-balik kekiri dan kekanan.
4. Title="judul" : title akan muncul saat mouse diarahkan ke tulisan.
5. Scrollmount="angka" : untuk mengatur kecepatan dalam pixel, makin besar angkanya makin cepat gerakannya.
6. Scrolldellay="angka" = Untuk mengatur waktu tunda gerakan dalam mili detik.
7. Width="lebar" = Mengatur lebar blok teks dalam pixel atau persen.

Untuk lebih jelasnya perhatikan contoh dibawah ini :

Efek marquee yang bergerak dari kiri kekanan :

<marquee align="center" direction="left" height="100" scrollamount="2" width="75%">
Selamat Datang di Blog Kang Setia
</marquee>kata left bisa anda ganti dengan right, up atau down sesuai dengan keinginan anda.

Hasilnya seperti Ini


Selamat Datang di Blog Kang Setia


Efek marquee dengan perilaku gerakan :

<marquee align="center" direction="right" height="100" scrollamount="3" width="100%" behavior="alternate">
Selamat Datang di Blog Kang Setia
</marquee>

Kode diatas akan seperti ini :


Selamat Datang di Blog Kang Setia


Efek marquee dengan warna pada latar belakang :


<div align="left"><font face="georgia" color="yellow"><b><marquee bgcolor="blue" width="100%" scrollamount="3" behavior="alternate">
Selamat Datang di Blog Kang Setia
</marquee></b></font></div>

HasilNya

Selamat Datang di Blog Kang Setia

Selamat Mencoba...Kang Setia

»»  READMORE...

»»  Read More

Cara Pasang Google Translate Pada blog

Hem...dateng lagi ilmu ni dari akang
seperti punya Akang pojok atas cendiri banyak bendera..
nah itu buat trnaslte artikel..
mesti tau tentang google translate..Cara Pasang Google Translate Pada blog mudah uq

kalau temen temen pengen Cara Pasang Google Translate Pada blog taruh ntu bendera pada blog, mudah saja..tinggal copy aja di bawah ini :


<center><a href="http://pinginbelajar.blogspot.com/2009/05/translate-versi-google.html" target=" blank"><b>Google Translate</b></a></center>
<div style="overflow:no; width:100%px; height:100%px; padding: 5px; background: #FFFFFF;">
<style>
.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }
.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; }
.google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }
</style>
<div style="overflow:no; width:100%px; height:100%px; padding:5px 0px 0px 0px;">
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;margin-right:3px" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" title="Arabic" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" title="Korean" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;margin-right:3px" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" title="Japanese" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;margin-right:0px" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" title="Chinese Simplified" align="absbottom"/></a>
</center>
</div>

<div style="overflow:no; width:100%px; height:100%px; padding:7px 0px 0px 0px;">
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;margin-right:3px" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" title="Russian" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;margin-right:3px" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" title="Portuguese" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" title="English" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;margin-right:0px" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" title="French" align="absbottom"/></a>
</center>
</div>

<div style="overflow:no; width:100%px; height:100%px; padding:7px 0px 0px 0px;">
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;margin-right:3px" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" title="German" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;margin-right:3px" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" title="Spain" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;margin-right:3px" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" title="Italian" align="absbottom"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;margin-right:0px" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" title="Dutch" align="absbottom"/></a>
</center>
</div>
</div>


Caranya tinggal seperti biasanya...oceyy...


selamat mencoba....

»»  READMORE...

»»  Read More

Tutorial Pasang Widget Alexa di Blog

Langkah #1

1. Klik di sini untuk menuju situs alexa.com
2. Masukan alamat blog anda pada kolom yang terdia. Contoh : kolom-tutorial.blogspot.com (tanpa http://), lalu klik tombol “Build Widget”.


3. Ada 3 ukuran widget yang bisa anda pilih, copy kode yang ada di sampingnya lalu paste pada notpad atau text editor lainnya. Simpan kode tersebut di komputer anda untuk nanti di masukan ke blog.


Langkah #2

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Elemen Halaman.
4. Klik Tambah Gadget.
5. Klik tanda Plus (+) di samping tulisan HTML/JavaScript.

6.Paste kode yang tadi ada di notepad kedalam kolom yang muncul.
7.Klik tombol Simpan.
8.Pindahkan elemen yang baru anda buat tadi ke tempat yang anda inginkan, jika mau tentunya.
9.Jangan lupa klik tombol Simpan yang ada di sebelah atas.
10.Selesai.
Mudah-mudahan dengan di pasangnya widget alexa di blog anda, alexa rank blog anda akan cepat bagus (semakin kecil semakin baik rangkingnya).
Sedikit tambahan, alexa rank terbilang cepat dalam melakukan update sehingga hasilnya akan terlihat dalam beberapa hari saja. Satu yang paling utama dalam menaikan ranking alexa adalah dengan mencoba meningkatkan trafik atau jumlah kunjungan ke blog anda.

Selamat mencoba!

»»  READMORE...

»»  Read More