Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Saturday, May 3, 2014

Membuat Popular Post Keren dan Berwarna

Icon Popular Post
Popular post/artikel populer adalah artikel yang banyak dilihat oleh pengunjung. Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik dan enak untuk dilihat. Untuk tampilan popular post akan terlihat seperti gambar dibawah ini.
Popular Post Warna - warni

Memasang Popular Post Keren dan Warna - Warni

1. Silakan masuk pada akun blogger Anda
2. Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja.
Pengaturan Popular Post
3. Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode ]]></b:skin> atau </style> dan Simpan

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
Selamat sekarang Anda mempunyai tampilan popular keren, unik, warna - warni dan menarik. Anda juga bisa mengganti warna tersebut dengan mengubah nilai pada CSS Pengaturan Warna ;)

Tuesday, April 1, 2014

Mari Mengenal Base64

Sebelumnya Saya memberikan artikel tentang Emoticon Wordpress Untuk Blogger, dalam artikel tersebut ada kata base64. Kalian sudah mengenal base64 atau baru mengenalnya sekarang. Yuk, mari Kita ulas mengenai base64.

Pengertian Base64

Base64 adalah metoda yang digunakan untuk melakukan encoding (penyandian) terhadap data binary sehingga menjadi “printable” atau pendek katanya data binary disandikan menjadi format 7-bit character semacam bagian isi email.

Saya hanya akan menjelaskan arti inti dari sebuah base64, karena apabila kita jelaskan akan sangat panjang atau Anda juga bisa membacanya lengkap di Wikipedia http://en.wikipedia.org/wiki/Base64.

Intinya Base64 adalah kode yang disusun oleh 64 karakter, dimana karakternya ( berdasarkan : RFC 1421 ) terdiri dari ( A-Z, a-z, 0-9, +, /)  atau “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/”. Tapi ada satu karater tambahan yaitu “=”, yang fungsinya untuk menggenapkan atau istilahnya sebagai pengisi pad.

Contoh Penggunaan Base64

Untuk lebih memahami Base64 Saya akan memberikan contohnya dengan mengubah gambar ke Base64. Misalkan Anda mempunyai gambar dengan ukuran 10 Kb, maka apabila Anda merubahnya ke base64 ukurannya akan sama 10 Kb tetapi dirubah ke dalam sandi yang sulit diterjemahkan. Apabila Anda menyimpan data base64 tersebut ke Template Anda, maka ukuran file template Anda akan bertambah 10 Kb. Berikut adalah gambar
Logo Kang Mousir
Ini adalah URL dari gambar diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKHaBM-qQcfym1Xp_It295X_zJCB2cYp84IGIgjsLGgvLyiqwYSoRI_TmytjXJDz-1USfpMnqKz-FmmKdbyg6HABKZUAKGUZzNEgnxcEMuxoyuzp3fJnZeZtDq2a7v9D0Ur3TXQLWxfsA/s1600/KM+Icon.png
Kemudian Saya rubah ke data Base64 String, menjadi seperti ini.
data:image/png;base64,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
Coba Anda buka kedua data tersebut di browser Anda, keduanya akan terlihat dengan gambar yang sama. Namun coba Anda bandingkan kecepatan kedua data tersebut. Pada URL pertama saat dibuka browser harus membaca data tersebut kemudian diproses dahulu dimana gambar tersbut di unggah. Sedangkan pada data base64 gambar langsung terbuka, karena semua data diproses dalam satu kali.

Support

Base64 tentunya tidak dapat dibaca di semua browser, oleh karena itu base64 hanya support pada browser dibawah ini.
  • Internet Explorer 8+
  • Google Chrome
  • Opera Mini
  • Firefox
  • Safari
Kita juga bisa merubah file ke base64 seperti Gambar, Font, File HTML, CSS, JS dll.

Alat Untuk Merubah File Ke Base64

  • www.motobit.com/util/base64-decoder-encoder.asp‎
  • www.base64decode.org
  • webcodertools.com/imagetobase64converter‎
  • www.freeformatter.com/base64-encoder.html‎
  • www.opinionatedgeek.com/dotnet/tools/base64encode/
Dari alat diatas Saya sering menggunakan webcodertools.com/imagetobase64converter‎ karena lebih mudah dan cepat ( menurut Saya ).
Itulah penjelasan yang dapat Saya berikat tentang Base64. Semoga dengan adanya artikel ini Anda dapat memahami tentang Base64. :D