Postingan

Menampilkan postingan dari Agustus, 2014

Membuat Banner Flash dengan CSS

Gambar
Bagaimana cara membuat banner flash atau flash banner hanya dengan CSS? Ikuti langkah-langkah sederhana berikut. Artikel ini pesanan dari Adri Baraka Putra Arinda. Dia menanyakan cara membuat membuat banner seperti di JelasinBlog Blue Jeans.

Efek itu sebenarnya tidak menggunakan Flash melainkan hanya CSS3 @keyframes. Dengan aturan keyframes, Anda dapat membuat animasi. Animasi ini dibuat secara bertahap berubah dari satu set gaya CSS ke gaya yang lain. Selama animasi, Anda dapat mengubah set gaya CSS berkali-kali.

Mudahnya letakkan CSS berikut dalam template Anda, kemudian simpan.

 .container {     } .container .banner {     max-width: 500px;     height: 140px;     margin: auto;     overflow: hidden;     background-color: #DDDDDD;     position: relative; } .container .banner:hover {     background-color: #2d3538; } .container .kotak-1 {     position: absolute;     z-index: 1; } .container .kotak-1 {     border-radius: 35px;     background-color: rgba(45, 53, 56, 0.2);     width: …

Recommended Random Posts Blogger

Gambar
Recommended random posts yang disertai gambar adalah tema artikel kali ini. Widget recommended ini dibuat dengan jquery yang lebih sederhana sehingga akan lebih mudah dipahami dan gampang dalam penulisannya. Widget ini akan terbuka (slide) di sisi blog ketika halaman postingan di-scroll atau digulung dan disembunyikan kembali dengan menekan tombol close. Silahkan lihat demonya pada link di bawah ini.

DEMO

Bagaimana membuat Recommended Random Posts Blogger? Silahkan ikuti langkah-langkah berikut.

CSS

.slidebox { position:fixed; bottom:100px; right:-300px; width:290px; height:150px; font-size:30px; color:white; background: -moz-linear-gradient(center top , #FFF, #EEE) repeat scroll 0% 0% transparent; transition:all .4s ease-in-out; padding-right:10px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius:3px 0 0 3px; } .header-slidebox{ position:absolute; top:0; left:0; text-align:left; font-family:Arial; font-size:18px; font-weight:400; background:#505050; border-bottom:1px solid …

Post Terbaru Berdasarkan Kategori

Gambar
Artikel bagaimana membuat post terbaru atau recent posts berdasarkan kategori atau label tertentu. Ikuti langkah-langkah sederhana berikut untuk memasangnya di blog sobat.

Sobat membutuhkan hal berikut.

CSS

<style type='text/css' scoped='scoped' > #simplesidepost{margin-bottom: 30px; padding-bottom: 15px; background: #FFF; overflow: hidden; } .cbrnewponew a.imagethubnailwithtagin { display: block; border: 1px solid #E6E4E4; padding: 4px; width:60px; height:60px; float:left; margin:0 5px 5px 0; } .cbttaglistco.h .a0 a.imagethubnailwithtagin, .cbttaglistco.v .a0 a.imagethubnailwithtagin, .cbttaglistco.s a.imagethubnailwithtagin { float: none; height: auto; margin: 0 0 5px; padding: 5px; width: auto; } .cbttaglistco.s a.imagethubnailwithtagin { height: 140px; } .cbrnewponew img { width: 100%; height: 100%; } ul.cbrnewponew, ul.cbrnewponew li { padding: 0; margin: 0; list-style: none; border: 0 none; } ul.cbrnewponew, ul.cbrnewponew li:hover { margin: 0; padding: 0; }…