Tutorial Blog

Read More

Isi Animasi

Animasi

Read More

Daftar Isi

Read More

Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse

Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse - Ini tutorialnya sentuhan mouse pada gambar yang ada dalam postingan akan memberikan Efek Zoom, membesar dan berputar 360 derajad. Dan jika sentuhan mouse lepas dari gambar, maka gambar tersebut akan kembali seperti semula.
Untuk melihat efek sentuhan mouse pada gambar sebagaimana dimaksud dalam tutorial ini, sobat arahkan penunjuk mouse pada gambar disamping, maka akan terlihat efek yang terjadi pada gambar tersebut, yakni akan berputar 360 derajad disertai ukurannya membesar.. 


Adapun langkah-langkahnya adalah seperti berikut ini:
1. Login dulu di akun blog anda
2. Klik Template, dan pilih/klik Edit HTML dan lanjutkan
3. Anda cari kode </head> gunakan Ctrl F
5. Setelah ketemu anda copy paste code di bawah ini tepat di atas kode </head>

     <style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
    #oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

   seperti taampak berikut:

6. Klik Save / simpan template.
Langkah selanjutnya untuk penempatan gambar dalam postingan.
1. Sobat harus menambahkan kode  <div id="oktri"> sebelum url gambar dan jangan lupa ditutup dengan kode </div> contoh seperti di bawah ini:

 <div id="oktri">
    <a href="http://memperindahblogku.blogspot.co.id/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNu9sZkMC9UyETVj6-BcjDsoxC-b2fB-Fh8y3D4yf8iyqwLAWjS9zYPKfYJmn0_yGk8ztRVhsXP7tf9kkfq3LDJoUu-q2cXX7PbG4FpmzZUPOdqCSFq5tsZ7FZ2gOmBq-Pn3rxZ1HADy8/s200/Foto024.jpg" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna biru silahkan ganti dengan URL blog Anda dan URL gambar yang ingin Anda pasang di dalam postingan.
3. Jika sudah selesai klik Publikasikan. 
4. Lihat hasilnya.

Demikianlah tips "Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse".
Semoga bermanfaat.

Read More

Cara Menambahkan Garis Bawah Pada Judul Postingan dan Sidebar

Cara Menambahkan Garis Bawah Pada Judul Postingan dan Sidebar. Salah satu cara memperindah tampilan pada postingan adalah menambahkan garis bawah pada judul postingan dan sidebar. Dengan langkah-langkah yang sangat sederhana singkat dan mudah seperti berikut.

Menambahkan Garis Bawah Pada Judul Postingan

1. Login  ke akun blogger sobat
2. Klik Template
3. Pilih Edit HTML
4. Cari kode .post h3{ (cari berdasar kan .post h3)
5. Kemudian tambahkan kode di bawah ini yang berwarna biru seperti contoh berikut:

.post h3{
border-bottom : 4px double #cadaef ;  
margin-bottom:7px;
.........
}

      6. Simpan dan Lihat Hasilnya

Menambahkan Garis Bawah Pada Judul Sidebar

1. Login  ke akun blogger sobat
2. Klik Template
3. Pilih Edit HTML
4. Cari kode .sidebar h2{ (cari berdasar kan .sidebar h2{)
5. Kemudian tambahkan kode di bawah ini yang berwarna biru seperti contoh berikut:

.sidebar h2{
border-bottom : 4px double #cadaef ;  
margin-bottom:7px;
.......
}

    



      6. Simpan dan Lihat Hasilnya
  
Warna biru merupakan jenis garis yang digunakan,  bisa diganti sesuai keinginan seperti kode dibawah ini:

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

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

Demikian Cara Menambahkan Garis Bawah Pada Judul Postingan dan Sidebar,

Read More

Daftar Isi Blog

Membuat Daftar Isi Blog

Langkah-langkahnya:

1. Pastikan sudah berada pada blog yang akan diisi halaman Daftar Isi Blog
2. Entri baru
3. Ketik Judul Halaman
4. Copy paste kode berikut ke halaman HTML dan bukan Compose

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

Catatan:
Warna biru diganti dengan URL blog aktif
Simpan halaman
Jika semuanya sudah silahkan klik Publikasikan.
Jadinya tampilan seperti ini.

Daftar Isi Blog

Read More

Tampilan Daftar Isi Blog

Membuat Daftar IsiBlog

Cara membuat tampilan daftar isi blog menjadi indah dan menarik. Tampilan daftar isi blog banyak ragam model bergantung selera, seperti cara berikut ini lebih bervariatif. Daftar isi blog yang akan ditampilkan, postingan telah tersusun secara berkategori. Artinya beberapa postingan memiliki kategori yang sama.

Daftar isi seperti pada tampilan disamping sengaja dirancang untuk memudahkan dalam penjelajahan semua postingan yang ada pada blog. Beberapa judul postingan mengelompok sesuai dengan kategori yang telah ditentukan. Dengan demikian pencarian judul postingan yang diinginkan akan terasa lebih mudah dan cepat. Karena itu ada beberapa yang harus diikuti sebagaimana berikut.
 

Langkah-langkahnya:

1. Pastikan sudah berada pada blog yang akan diisi halaman Daftar Isi Blog
2. Entri baru
3. Ketik Judul Halaman
4. Copy paste kode berikut ke halaman HTML dan bukan Compose

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://memperindahblogku.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Catatan:
Warna merah pada kode di atas diganti dengan URL blog aktif
Simpan halaman
Jika semuanya sudah silahkan klik Publikasikan.
Dengan demikian tampilan daftar isi blog akan tampil lebih indah dan menarik sebagaimana yang telah direncanakan. 
Jadinya tampilan seperti ini.

Tampilan Daftar  Isi Blog

Read More