28 April 2013

Bagaimana cara menampilkan setiap postingan dalam kotak terpisah cantik dan keren di blog

Posted at  17.24  |  in  tips dan triks blog



Salah satu bagian utama desain  web adalah membuat desain sejelas mungkin dalam hal pemanfa'atan. Sebagai contoh, pembaca harus dapat dengan mudah mengidentifikasi bahwa ini adalah sidebar dan ini adalah kolom utama di mana semua posting ditampilkan.

Umumnya semua postingan Blog berada dalam kotak besar tunggal dengan hanya Border di bagian bawah setiap postingan di homepage. Border yang digunakan untuk membuat pembaca mengetahui bahwa posting berikutnya adalah posting terpisah

Hal itu sebenarnya sangat normal dan mendasar untuk memisahkan tulisan. Postingan Hari ini kita akan membuat tulisan lebih jelas bagi pembaca dengan menampilkan masing-masing dalam style kotak terpisah. Hal yang paling utama adalah Anda akan belajar bagaimana melakukannya sehingga dapat lebih menyesuaikan.  

Sebagian besar dari sobat blogger/para master mungkin tahu bagaimana melakukan hal ini, tetapi mungkin ada beberapa pemula menunggu untuk mempelajari beberapa trik dasar. Silahkan lihat demo...

View Demo

(LIHAT GAMBAR DIATAS)


LANGKAH-LANGKAHNYA SEBAGAI BERIKUT :
  • Masuk ke akun blogger anda -> Klik Drop down menu 
  • Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML
 
  • Cari tag / kode .post { atau .post{ Gunakan CTRL+F untuk memudahkan pencarian
Ini adalah kode selektor CSS yang biasanya digunakan di sebagian besar template blogger. Jika anda tidak menemukan kode dibawah cari kode yang mirip seperti kode ini, karena struktur template masing-masing sedikit berbeda. Silahkan lihat screenshoot kode berikut:

Silahkan ganti kode tersebut dengan kode berikut dibawah ini:

    margin: 10px 10px 40px 7px;
    padding: 15px;
    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;

Kode anda akan terlihat seperti kode pada screenshoot berikut:


Simpan template dan silahkan di cek blog anda..

STYLE BLOK HOVER PADA POSTINGAN BLOG 

Silahkan tambahkan kode blok efek hover berikut ini: 

.post:hover {
    -webkit-border-radius: 20px 0 20px 0;
    border-radius: 20px 0 20px 0;
    background: #fff;
}

Sehingga akhir kode yang anda tambahkan seperti screen shoot berikut:


Ada beberapa tag/kode dasar yang bisa anda rubah pada kode yang sudah ada. Bahkan anda dapat menambahkannya sendiri style (gaya) terpisah sesuai dengan kreasi anda masing-masing.
  • Aturlah nilai margin 10px 10px 40px 7px jika postingan yang anda buat tidak selaras
  •  Kode #CCCCCC untuk mengubah warna border
  •  Kode #FEFFE6 untuk mengubah background kotak postingan
  •  Kode #fff untuk mengubah background warna hover
Semoga bermanfa'at and keep blogging...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 17.24
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

21 komentar:

  1. Nice gan .. ini yang gue cari cari :D
    jangan lupa kunjungi balik http://satriareformasi.blogspot.com

    BalasHapus
    Balasan
    1. Terima kasih mas atas kunjungannya, cuma live demonya sudah ga saya terapkan lagi di blog ini karena saya udah ganti template. Tapi bisa anda lihat gambar demonya diatas. Insya Allah segera meluncur ke TKP.. :)

      Hapus
  2. super sekali om tutorialnya.
    saya sebagai pemula mudah untuk di memahami dan menerapkannya langsung. makasih om

    BalasHapus
    Balasan
    1. Hehe..kaya ke pak mario teguh aja, sama-sama. terima kasih atas apresiasi dan kunjungannya. :)

      Hapus
  3. uokeh mantap nih... makasih ya sob :D
    Visit Balik www.katagakure-city.blogspot.com

    BalasHapus
    Balasan
    1. sama-sama sobat, insya Allah segera meluncur ke TKP..

      Hapus
  4. tapi kok .post{ nya di saya gada yak? ;((

    BalasHapus
    Balasan
    1. biasanya faktor bawaan struktur template yang sedikit berbeda..

      Hapus
  5. sama gan di ane .post { nya kgk ad ;-(

    BalasHapus
  6. om,kalo memperkecil kotaknya gimana om,saya liat yang udh sy terapkan keliahatan terlalu besar. Mohon petunjuknya Om.

    www.jadolemu.blogspot.com

    BalasHapus
    Balasan
    1. perkecil dan selaraskan saja ukuran nilai marginnya seperti contoh diatas..

      Hapus
  7. master di blog baru yang saya buat kok ga ada yang mirip dg .post{
    margin dll .
    mohon pencerahan..

    BalasHapus
  8. thanks gan, artikel-artikelnya sangat berguna untuk menambah kualitas blog saya... cuma yg nambahin author masih blum bisa :(, klau ada waktu monggo mampir http://www.tupperwareraya.com

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. bagus gan artikelnya :d

    jangan lupa mampir mampir ya

    http://fauzane.blogspot.com

    BalasHapus
    Balasan
    1. Terima kasih banyak mas fauzan atas apresiasinya, insya Allah segera berkunjung.

      Hapus
  11. Terimakasi mas Jalu Pangna, sangat membantu, saya langsung copas aja perubahannya dan cocok di blog saya. sekali lagi terimakasih

    BalasHapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top