2 Cara Membuat Effect Terang dan Gelap Pada Gambar

 Setelah sebelumnya Saya sudah pernah bahas tentang Kumpulan Efek Transisi Pada Gambar, maka kali ini Saya akan bahas tentang Cara Membuat Effect Terang dan Gelap Pada Gambar. OK kita masuk ke langkah-langkahnya. 

1. Pertama pastinya Login dulu ke Blog Kalian.

2. Dari Dasbor, cari Rancangan --> Edit HTML.

3. Cari Code ]]></b:skin>

4. Kalo sudah ketemu, Copy dan Paste-kan Code di bawah, tepat di atas Code ]]></b:skin>

''Dari Gelap Menjadi Terang''

.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

''Dari Terang Menjadi Gelap''

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

5. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga Bermanfaat...!!! Jangan lupa tinggalkan Komentar Kalian Ya...!!! 

4 Cara Membuat Blockquote Hover

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang "Expand Widget Template"
4. Untuk keamanan lebih baik kita "Download Template Lengkap"
5. Gunakan Ctrl+F or F3 untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatas kode ]]></b:skin>

 blockquote {       
         padding: 10px; height: auto;
         margin: 10px 0 10px 20px;
         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhehshs2MRmKz0OVy9wISvY97yzfF5p0jXK642a0RyZLWept34ee7Bq8n_Sie-_iX13uoFxDUbxNywsD46rcbyH5K0GekOu294UfcMBDkJillkVF7dZYlZbLZVoKadjUwojhNvTxKQZkC0z/s1600/papers.jpg);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;
         text-shadow: 1px 1px 1px #000;
         border: 1px ridge  #0099FF;
         border-radius: 20px 10px 20px 10px;
        -moz-border-radius: 20px 10px 20px 10px;
        -webkit-border-radius: 20px 10px 20px 10px;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
         color: #eee;
        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
        -o-transform: rotate(1090deg) scale(1.1);
        -moz-transform: rotate(1090deg) scale(1.1);
        -webkit-transform: rotate(1090deg) scale(1.1);
} 

8. Simpan ....

"Selamat Mencoba"

2 Cara Membuat Read More Otomatis di Blog

Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot:

1. Login ke Blog anda
2. Buka halaman design > Edit HTML > centang Expand template widget
3. Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
4. Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

5. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
6. Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Finish simpan template dan lihat hasilnya...


Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

0 Cara Mengganti Kursor Di Blog - New !!

Mungkin anda ingin merubah cursor pada blog anda dengan cursor yang anda inginkan . Apakah Anda menginginkan sesuatu seperti itu?

jika anda ingin, saya mungkin dapat memberikan tips untuk Merubah Cursor Pada Blog.

Bagaimana Merubah Cursor Pada Blog :
1. Login ke Blog dan memilih layout (tata letak)
2. Pilih EDIT HTML
3. centang Expand widget template
4. Kemudian cari code </head> setelah ketemu, silahakan copy code dibawah ini dan pastekan di atas code </head>

<style type='text/css'>body HTML,BODY{cursor: url(&quot;ALAMAT CURSOR DISIMPAN&quot;), url(&quot;ALAMAT CURSOR DISIMPAN&quot;), auto;}</style>

Contoh :

<style type='text/css'>body HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/cursor_files/blackglitter.ani&quot;), url(&quot;http://downloads.totallyfreecursors.com/thumbnails/blackglitter.gif&quot;), auto;}</style>

ganti text yang berwarna biru dengan url cursor pilihan sobat.
5. klik simpan..

untuk kursor pilihan Anda, dapat mencarinya di sini atau di sini..