Belajar Membuat Gambar Berubah Saat Di Sorot Cursor

Efek setuhan kursor (penunjuk mouse) pada gambar dalam postingan sangat beraneka ragam. Misalnya apabila penunjuk mouse menyentuh gambar dalam postingan, maka gambar tersebut bisa berganti gambar lain, bisa berubah ukuran (zoom), bisa juga berbutar 360º. Dengan demikian tampilan postingan akan terlihat lebih dinamis dan bervariatif.

Gambar yang Jika Disentuh mouae akan berganti wujud gambar  yang lain.

Untuk dapat melakukan maksud tersebut sibutuhkan sedikitnya 2 (dua) macam gambar. Baiklah langsung saja praktek, agar lebih cepat memahami, dan langkahnya adalah:

[1]. Pertama, LogIn dulu ke BLOG .

[2]. Kemudian dari Dasbor, menuju Post, lalu buat sebuah Postingan Baru.

[3]. Lalu pada Mode Edit HTML pada Postingan, sisipkan Code di bawah ini..

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>
<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" />
<img class="image2" src="URL GAMBAR 2" /></a></center>

KETERANGAN :
* Tulisan yg berwarna Biru, ganti dengan URL Tujuan jika Gambar di Klik.
* Dan tulisan yg berwarna Merah, ganti dengan URL Gambar Kalian.
Begini tampilannya jika gambar berikut disentuh penunjuk mouse.

Setiap Gambar yang Ada Pada Blog Akan Berubah Menjadi Besar (Zoom) Disertai Putaran

Dengan teknik berikut ini, setiap gambar yang ada pada blog akan berubah menjadi besar (zoom) disertai putaran secara otomatis. Baiklah ikuti langkah langkah berikut.

1. Pastikah sudah Login ke blogger.
2. Pilih Template,  Klik Edit HTML, kemudian cari kode ]]></b:skin> (gunakan Ctrl F untuk mempermudah pencarian kode).

        3. Setelah ketemu ]]></b:skin>, Copy kode dibawah ini. Lalu Pastekan di Atas ]]></b:skin>.

.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}


 

      4. Klik Save Template (selesai), lihat hasilnya.

Demikianlah sedikit cara-cara/teknik  Membuat Gambar Berubah Saat Di Sorot Cursor agar blog menjadi lebih cantik dan menarik. Semoga saja yang sedikit ini bermanfaat.

Read More

Memasang Random Image Widget Pada Blogspot

Memasang Random Image Widget Pada Blogspot. Untuk menampilkan beberapa gambar secara random bisa mengikuti langkah-langkah berikut.

Langkah-Langkah:

1. Buka blog
2. Klik Entri baru, Masukkan judul halaman
3. Klik HTML bukan Compose
4. Copy paste kode berikut  ke dalam Edit HTML.

Kodenya ini:
<script src="http://yourjavascript.com/53816065231/Database5.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/65160840132/cycle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 50%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<br />
<div id="content-slider">
<img height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilNU4j1xyWEl_MlR9fBLeIqGnOrbssNWAKAYTx8A10o48ui7hf_bpU2lK1jclmGczvQ1x6vQUM63RY0BZwKgf1twPvrA0ZVerDtRkYyW7ytm5BLMliOX7N2BXAc5aPWWGh3GMjNYvKpKMc/s200/AnakTas.jpg" width="200" />
<img height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsLQpzg3gJC9H4qf79A0_hnr6pmqy08Cuoc6ejv-RWyonkNkHpIPxCuQ7YT1osj5wMcYPYkWN81VVtgxJJhwMvv77ltadD3QEa0KfqKO8Z9a1Ew83o20XqjlHD7CQ6Rcipcb6OibQkA4kV/s200/images.jpg" width="200" />
<img height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwaFTO214QhbMxZlhqEvB-_XiF-1rt2l9u9mLikShrtAMDJlaxgSNlPx-wDALiOrzWUrDQ0pdPERgsLJ_kK24tawp0_QQcA_buYi6U9bC7Id7xo6c8IUYabPeNcVFbFBdrB60b-heA9Ug/s200/Foto010.jpg" width="160" />
<img height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWid49MRe_yGpDg2BuMetkLc3jxL4p6znKTx2ceGD7QiG-IbVeDc9b6FSAV0IcSpsApnzJqNgst4D26WZBan_WTapym0mdpCXXoMm-QX4RwADrTF4eZq5dz6oX70VitXI6XKTEYPLOrkpP/s200/Foto024.jpg" width="160" />
</div>
<br />
<br />

Teks warna merah alamat image yang sudah di uplooad, kehingga bisa diganti sesuai selera.

5. Simpan, selesai
Demikianlah cara-cara untuk Memasang Random Image Widget Pada Blogspot.

Hasilnya seperti tampak di bawah ini:

Read More

Cara Membingkai Area Posting dan Sidebar

Cara Membingkai Area Posting dan Sidebar. Dengan memberikan bingkai pada sekelompok teks maupun gambar yang ada pada postingan maupun pada sidebar, maka blog akan tampak menjadi rapi, menarik dan menyenangkan. Hasil yang dimaksud seperti yang ditunjuk oleh panah pada gambar di samping (bingkai pada sidebar). Karena itu, lagsung saja dipraktekkan seperti langkah berikut. 

Dengan cara yang sangat mudah dan sederhana seperti berikut, semua Gadget yang telah ada maupun yang akan ditambahkan pada sidebar akan menjadi berbingkai secara otomatis. Adappun langkah-langkah  Cara Membingkai Area Posting bisa diikuti seperti berikut ini.

Cara Membuat Border / Frame / Bingkai Pada Area Posting (main wrapper)

1)..Pertama login ke akun blogger atau dashboard.

2)..Pilih menu Template –> Edit HTML

3)..Selanjutnya cari code ini : .post { tekan CTRL+F untuk memudahkan mencari

4)..Tambahkan kode dibawah ini tepat dibawah code .post {

padding: 5px; 
Border-top: 3px solid #000000; 
Border-bottom: 3px solid #000000; 
Border-left: 3px solid #000000; 
Border-right: 3px solid #000000; 
Margin-bottom: 10px;

5)..Lakukan preview atau pratinjau dulu, jika sudah ok Lalu simpan template

Cara membuat Border / Frame / Bingkai Pada Sidebar BLOG

1).. login ke akun blogger atau dashboard.

2)..Pilih menu Template –> Edit HTML

3)..Cari code ini : ]]></b:skin>

      Agar lebih mudah mencari tekan control+F (contoh hasil penemuan kode seperti gambar berikut)

4)..Tambahkan kode dibawah ini tepat diatas code ]]></b:skin>

sidebar .widget{

padding:5px 5px 5px 5px;

border:1px solid #C11209;

margin-bottom:5px

5)..Lakukan preview atau pratinjau dulu, jika sudah ok Lalu simpan

Keterangan : Semua angka dan warna bisa diganti sesuai selera

Padding: 5px; = Jarak antara text post dengan garis pinggir 5px; makin tinggi angka jarak dari tepi akan semakin lebar

Border-top: 3px solid #000000; = garis pinggir atas 3px semakin tinggi angka, maka akan semakin tebal garisnya

Border-bottom: 3px solid #000000 ; = garis pinggir bawah 3px

Border-left: 3px solid #000000 ; = garis pinggir kiri 3px

Border-right: 3px solid #000000 ; = garis pinggir kanan 3px

Margin-bottom: 10px; = jarak antar post yang satu dengan lainnya 10px

Code warna #000000 adalah warna hitam

Catatan : Bentuk Frame bisa diganti sesuai selera

solid : bingkai menjadi garis biasa ( ___________ )

dotted : bingkai menjadi titik-titik ( .............................. )

dashed : bingkai menjadi garis putus-putus ( --------------------- )

double : Bingkai 2 garis biasa ( = )

Ridge

Groove

Inset

Outset

Radius ( Sudut melengkung )

dan lain-lain

Demikian artikel mengenai Cara Membingkai Area Posting dan Sidebar, semoga saja bisa memberikan manfaat siapa saja yang memerlukan tutorial ini.

Read More

Kumpulan Artikel Terkait Optimalisasi Blog

Jika ingin memasukkan gambar dari koleksi foto di komputer, pilih upload > Pilih file > cari di

Kunjungi Link berikut:
Cara Menghasilkan Uang Dari Blog
Cara Memasang Banner Iklan Pada Blog Blogger
 Cara Memasang Banner Iklan Dengan Mudah
 Cara Mudah Membuat Slide Show Foto di Blog
Cara Memasang Widget Slide Show Photo Pada Sidebar Blog
Cara Atur Panjang Cuplikan Widget Popular Posts
Cara membuat banner iklan bergantian otomatis di Blogspot
Penawaran Review Produk Di Blog Belajar Search Engine
Gambar Otomatis Berubah Saat Tersentuh Mouse 
Cara Membuat Gambar Berubah Saat Di Sorot Cursor Pada Blog
Cara Membuat Background Entri Berubah Warna Saat Disentuh Mouse
Membuat Bingkai (Kotak) Untuk Sebuah Tulisan 
Modifikasi Tampilan Widget Label Cloud Blogger
Cara Membuat Bingkai/Kotak Pada Sidebar Membuat border/kotak bigkai pada postingan
Membuat Border dan Kotak Pada Postingan
Cara Membuat Frame/Kotak Sidebar
Cara Membuat Bingkai/Kotak Pada Sidebar
Cara Membuat Bingkai Untuk Widget Yang Terdapat Di Area Footer Halaman Blog
Cara mudah buat label berbingkai 
Modifikasi Tampilan Widget Label Cloud Blogger
Membuat Box atau Bingkai Judul Posting
Cara Memberi Frame/Bingkai Pada Artikel Blog
Membuat Menu Vertikal Keren di BLOG dengan CSS 2015
CARA MEMBUAT MENU VERTIKAL DI BLOGGER
CARA MEMBUAT MENU VERTIKAL DI BLOG
CARA MEMBUAT DROP DOWN MENU HORIZONTAL DI BLOG
Cara Membuat Menu Navigasi Horisontal Blog

Read More

Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label Tertentu

Ini kodenya:

<div style="border: 1px solid #000000; height: 500px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="http://memperindahblogku.blogspot.co.id/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Kode tersebut di atas dimasukkan (dicopas) ke mode HTML, jadinya di mode Compose seperti di bawah ini:

Read More

Membuat Tulisan atau Gambar Berbingkai

TULISAN ATAU GAMBAR
Tulissan
atau Gambar
Scriptnyadi bawah ini

Kodenya ini

<div style="background-color: #fbfbee; border: 1px solid #ccc; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
TULISAN ATAU GAMBAR<br />
Tulissan<br />
atau Gambar<br />
Scriptnyadi bawah ini </div>

Read More

Membuat Garis Di Bawah Judul Postingan

Cara Membuat Garis Di Bawah Judul Postingan

1. Login ke blogger

2. Klik template

3. Sebelum mengutak-atik template silahkan backup dulu template untuk tujuan agar jika kita melakukan kesalahan maka kita bisa mengembalikan templatet tersebut.

4. Jika sudah melakukan backup langkah selanjutnya adalah klik Edit Html kemudian klik Lanjutkan

5. Centang Expand Template Widget

6. Carilah kode /* Post (catatan: tekan tombol ctrl+f untuk memudahkan kita dalam melakukan pencarian kode) 

atau lebih tepatnya cari kode seperti kode di bawah ini :

/* Posts
----------------------------------------------- */
h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

7. Jika sudah silahkan pilih salah satu kode di bawah ini. Kemudian pasang diantara bagian kode di atas 

border-bottom:1px dotted silver;
 border-bottom:1px solid black;
border-bottom : 4px double #cadaef ;

Penjelasan kode :
dotted adalah garis yang putus-putus
solid adalah garis yang tidak putus-putus
double adalah dua garis

Apabila kode garis yang sudah saya berikan sudah dipasang maka hasil akhir kode akan seperti ini :

/* Posts
----------------------------------------------- */
h3.post-title {
  margin: 0;
  font: $(post.title.font);
border-bottom : 4px double #cadaef ;
}

Sebelum menyimpan template, lihat dulu pratinjau.

Read More