Trick n Tips Blogger | Widget Blogger | Template Blogger

Modifikasi Posting Blogger Dengan Kotak Bergaya Menggunakan CSS3

by Irsyad Aslam , at 5/19/2013 , has 3 komentar
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.


Selamat Mencoba,
Salam Sukses,




Your-BelajarBLOG





Irsyad Aslam
About
Modifikasi Posting Blogger Dengan Kotak Bergaya Menggunakan CSS3 - written by Irsyad Aslam , published at 5/19/2013, categorized as Efek , Trik Blogger , Widget . And has 3 komentar
3 komentar Add a comment
gimana cara bikin kotak komentar kaya gini
Bisa Dilihat Tutorial http://your-belajarblog.blogspot.com/2013/06/cara-menambahkan-gaya-warna-warni-pada.html ,

Selamat Mencoba,
Salam Sukses,



Your-BelajarBLOG
Delete
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger