Tutorial modifikasi posting blog dengan kotak bergaya

Modifikasi Posting Blogger Dengan Kotak Bergaya Menggunakan CSS3

Tutorial modifikasi posting blog dengan kotak bergaya
Salah satu konten yang terdapat pada blog adalah sebuah posting. Posting adalah sebuah konten atau isi dari sebuah blog. dan hal penting dari sebuah blog adalah keindahan dan keunikan dari sebuah blog dan tentunya pembuat blog membuat desain sebagus mungkin dan sejelas mungkin. agar pengunjung bisa membedakan dari konten atau isi blog atau widget blog, dan tentunya lebih nyaman dengan tampilan blog.

Salah satunya dengan memodifikasi posting blogger dengan menggunakan efek CSS3 transisi, dan kotak untuk memembedakan posting yang sebelumnya hanya terdapat  satu terletak di bawah, dan sidebar widget.

Dengan menggunakan kode CSS3 ini anda juga bisa menentukan dari background posting, untuk pelengkap agar menarik Posting dibuat menggunakan efek shadow.

Cara Untuk Memasangnya :


  • Silahkan Masuk Ke Akun Blogger Anda.
  • Setelah itu, Klik Menu Template, Simpan terlebih dahulu template anda, Klik Tombol Edit HTML.
  • Cari Kode .post { dengan menekan CTRL+F.
  • Ganti semua kode dalam kode .post { dengan kode berikut ini:
margin: 10px 10px 40px 7px;
padding: 10px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 0 20px 0 20px;
border-radius: 0 20px 0 20px;
background: #FEFFE6;
-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
  • Contoh Seperti  Berikut:
.post {
margin: 0 0 25px 0;
.......;
................;
......................;
}

Ganti semua kode seperti berikut :

.post {

margin: 10px 10px 40px 7px;
padding: 10px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 0 20px 0 20px;
border-radius: 0 20px 0 20px;
background: #FEFFE6;
-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
  • Kemudian, Tambahkan kode dibawah kode .post{.....;} :
.post:hover {
    -webkit-border-radius: 20px 0 20px 0;
    border-radius: 20px 0 20px 0;
    background: #fff;
}

Seperti kode berikut :

.post {
margin: 10px 10px 40px 7px;
padding: 10px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 0 20px 0 20px;
border-radius: 0 20px 0 20px;
background: #FEFFE6;
-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post:hover {
    -webkit-border-radius: 20px 0 20px 0;
    border-radius: 20px 0 20px 0;
    background: #fff;
}

Keterangan:
  1. Kode yang berwarna merah adalah pembatas dari kotak posting.
  2. Kode yang berwarna kuning adalah ketebalan dan warna garis pembatas kotak posting.
  3. Kode yang berwarna hijau adalah warna background dari kotak posting.
  4. Kode yang berwarna biru adalah warna background setelah di arahkan (hover).

  • Setelah itu, Klik Tombol Simpan Template.