logo blog

Popular Post with rotating title on hover

Popular Post with rotating title on hover
Popular Post with rotating title on hover

Tampilan Popular Post Lebih Menarik


Popular Post. Halo sobat, kali ini saya akan berbagi CSS untuk membuat tampilan Popular Post / Entri Popular lebih menarik dengan efek rotasi pada title atau judulnya.

Widget popular post memang cukup penting untuk ditampilkan pada blog, widget ini akan menampilkan postingan yang paling popular pada blog kita.

Sebelumnya saya juga sudah post tentang widhget popular post dengan 5 style yang lumayan bagus.
Silahkan cek di link 5 Style Popular Post

Nah untuk popular post yang sekarang, saya menambahkan efek hover untuk merubah rotasi pada titlenya.
Sebagai contoh, silahkan klik di link berikut ini.

Nah jika gan tertarik dengan tampilan Popular Postnya Mari kita Langsung saja ke tutorialnya, silahkan ikuti langkah-langkah dibawah ini.
  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 
  • Lalu masukan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style> 

.sidebar .PopularPosts .item-content {font-family:Raleway;position: relative;float: left;max-height: 310px;width: 100%;text-align: center;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);font-size: 20px;margin: 0px auto;background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");overflow: hidden;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.sidebar .PopularPosts .item-content * {-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
.item-content img {max-width: 100%;position: relative;top: 0;left: 0;}
.item-content .item-title {position: absolute;top: 50%;left: 30px;right: 30px;line-height: 1.6em;-webkit-transform: rotate(0deg) translateY(-50%) scale(1);transform: rotate(0deg) translateY(-50%) scale(1);-webkit-transform-origin: center 0;transform-origin: center 0;}
.item-content .item-title a {top: 50%;letter-spacing: -1px;color: #ffffff;text-transform: uppercase;padding: 10px 0;margin: 0;font-weight: 400;}
.item-content .item-title a:hover {color: #fff;}
.item-content .item-title:before,.item-content .item-title:after {background-color: rgba(255, 255, 255, 0.8);width: 100%;height: 2px;position: absolute;content: "";display: block;-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
.item-content .item-title:before {left: 0;top: 0;}
.item-content .item-title:after {bottom: 0;right: 0;}
.item-content:hover .item-title,.item-content.hover .item-title {-webkit-transform: rotate(-45deg) translateY(-50%) scale(0.9);transform: rotate(-29deg) translateY(-50%) scale(0.9);}
.item-content:hover .item-title:before,.item-content.hover .item-title:before,.item-content:hover .item-title:after,.item-content.hover .item-title:after {width: 200%;}
.sidebar .widget{clear:both}
.sidebar .PopularPosts .item-snippet {display: none;}
.sidebar .PopularPosts ul {padding: 0;}
.sidebar .PopularPosts ul li:first-child {width: 100%;max-height: 100%;opacity: 0.9;}
.sidebar .PopularPosts ul li:nth-child(even) {margin-right: 2%;}
.sidebar .PopularPosts ul li:nth-child(2) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(3) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(4) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(5) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(6) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(7) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(8) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(9) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li:nth-child(10) .item-content {font-size: 12px}
.sidebar .PopularPosts ul li {box-sizing: border-box;position: relative;padding: 0px !important;width: 49%;max-height: 120px;opacity: 0.4;overflow: hidden;float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.sidebar .PopularPosts ul li:hover {opacity: 1;}
.sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;}
.sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height: 123px;object-fit: cover;padding: 0; }

Kalau tampilannya error atau tidak rapih, coba hapus css popular post bawaan template agan.
  • Save Template Dan Lihat Hasilnya
  • Selanjutnya atur widget popular post kalian menjadi seperti gambar dibawah ini.

Popular Post with rotating title on hover
  • Selesai deh :) . Kalo ada masalah dalam penerapannya, silahkan tanyakan dikolom komentar ya.

Mampir juga kepostingan lainnya :)

Cukup sekian dan terimakasih, semoga artikel tentang Widget Popular Post. ini bermanfaat ya :)

Mengatur Jarak Spasi Antar Text Dengan CSS

Mengatur Jarak Spasi Antar Text Dengan CSS
Mengatur Jarak Spasi Antar Text Dengan CSS

Cara Mengatur Jarak Spasi Antar Tek Menggunakan Css


Belajar CSS Malam sobat, kali ini saya mau belajar CSS apakah kalian juga mau ikut :3 mari kita belajar dasar css. Pada postinga kali ini saya mau belajar css Mengatur Jarak Spasi Antara Kata / Text menggunakan css.

Magsud dari mengatur jarak spasi antar text itu apa?
Disini kita akan membuat renggang sebuah tulisan, kata / kalimat mengunakan css.
Untuk mengatur jarak antara spasi atau kata dari text disini saya cuma neggunakan :
  • letter-spacing
    Fungsinya untuk mengatur jarak antar huruf supaya menjadi lebih renggang.
  • word-spacing
    Nah Kalau Ini Fungsinya untuk mengatur jarak antar kata supaya menjadi lebih renggang.
#Contohnya
Ingin merenggangkan tulisan antar huruf (letter-spacing)
seperti ini atau
Ingin merenggangkan jarak antar kata (word-spacing)
contoh nya seperti ini, atau
Ingin menggabungkan keduanya. (word-spacing and letter-spacing)
Jadinya Seperti Ini,


Nah sekarang bagai mana cara penerapan (word-spacing and letter-spacing) pada HTML / template blog?

Untuk cara penerapannya, kalian cukup memasukan kode css seperti berikut

/* Mengatur Jarak Text Antar Kata --*/
id atau class {
                word-spacing: 30px;
}

/* Mengatur Jarak Text Antar huruf --*/
id atau class {
                letter-spacing:30px;
}


------------CONTOH------------

/* Mengatur Jarak Text Antar Kata --*/
p { 
    word-spacing: 30px;
}
h1 {
    word-spacing: 30px;

}

/* Mengatur Jarak Text Antar huruf --*/
p{
    letter-spacing:30px;

}
h1 {
    letter-spacing: 30px;

}
p dan h1 adalah id dari css atau class dari sebuah css yang nantinya akan di panggil oleh HTML. Jadi silahkan ganti p dan h1 dengan id css kalian masing-masing Cukup sekian dan terimakasih, semoga artikel tentang Cara Mengatur Jarak Spasi Antar Text Dengan CSSini bermanfaat.

Free Tool Untuk Merapihkan HTML Dan CSS Online

Free Tool Untuk Merapihkan  HTML Dan CSS Online
Free Tool Untuk Merapihkan  HTML Dan CSS Online

Beautifier Online Tools Untuk Merapihkan Html Dan Css


Html, CSS Beautifier Online Tool ini berfungsi untuk merapihkan css dan html yang berantakan, tidak rapih, jarak terlalu jauh dan sebagainya.

Jadi buat kalian yang mempunyai css atau html yang tidak karuan { berantakan } sehingga susah di mengerti jadi bingung mana pembuka dan mana penutup, kadang-kadang salah pilih tag pembuka.

Maka manfaatkan lah tool beautifier ini untuk merapihkan HTML, CSS. di jamin css anda jadi rapih. Tapi jangan gunakan pada javascript karena nanti bisa saja javascript kalian tidak akan berfungsi dengan baik malah blank g ada gunanya.

Lengkapnya
Tools penyusun code ini berguna untuk merapikan kode script atau tag anda sehingga lebih mudah untuk di baca manusia. Terkadang kita sering mengalami kesulitan dalam mengedit kode/tag dikarenakan susunan dari kode tersebut yang tidak teratur.
Apabila anda memasukkan code yang salah, seperti adanya
atau tag lain yang belum tertutup. Maka output dari tools ini juga tidak akan keluar dengan baik.



Seboga tools ini bermanfaat untuk merapihkan css dan html agan yang berantakan.
Mampir juga ke tools lainnya ya :)
Jangan lupa tinggalkan jejak kalian di kolom komentar ya :)