twitter
    Find out what I'm doing, Follow Me :)

Sunday, January 8, 2012

Buat Home Page Posting Blog Menjadi 2 Kolom Agar Terlihat Lebih Rapi Dan Menarik


Bicara soal desain kalo tidak dibarengi dengan Manfaat rasanya kurang klik! Untuk manfaatnya sendiri untuk tema kali ini adalah jelas memudahkan Anda untuk lebih memaksimalkan postingan yang tersedia dengan meletakkannya di Home Page Blog Anda, dengan begitu sekiranya pengunjung Anda tahu seberapa banyak jumlah Artikel yang tersedia bermanfaat dan mereka butuhkan. Ok untuk tahapannya sangatlah mudah gak pake ribet dan bikin ngantuk. Untuk Anda yang ingin menerapkannya di Blog lihat dibawah ini.



1. Seperti biasa masuk Blogger.com
2. Pilih icon "Go to post list" atau "Buka daftar entri"
3. Pilih Template ->> Backup/ cadangkan template Anda
4. Edit HTML ->> Proceed/ Proses ->> centang "Expand Widget Templates"
5. Tekan Ctrl+F untuk mencari cepat kode  ]]></b:skin>, kalo sudah ketemu letakkan kode dibawah ini tepat dibawah kode tersebut.

         <b:if cond='data:blog.pageType != &quot;item&quot;'>
         <style>
         .post {
          width:285px;
          height:400px;
          margin-right:5px;
          overflow:hidden;
          float:right; background:#F2F2F2
          border:3px double #808080;
          }
          </style>
         </b:if>

6. Kemudian cari kode css .post {, fokus pada kode yang seperti itu jangan yang lain. Kode postingan pasti selalu seperti kode tersebut gak akan lari jauh so.. asal mirip-mirip itu lah kode css postingan blog Anda. Ingin tau kode css postingan blog ini lihat kurang lebihnya seperti dibawah.

         .post { margin:.2em 0 0.2em;
          border-bottom:1px solid $bordercolor;
          padding-bottom:0.2em; }

7. Kalo udah perhatikan kode margin postingan Anda seperti margin:.2cm 0 0.2cm, nah untuk margin pastinya setiap posting template Anda dan orang lain berbeda-beda, tidak usah hiraukan itu tapi perhatikan kode tauo dan fokus pada margin Anda. Sisipkan kode auto itu diantara kode margin postingan blog Anda, hasilnya akan terlihat seperti seperti dibawah ini

         .post { margin:.2cm auto 0 0.2cm;
          border-bottom:1px solid $bordercolor;
          padding-bottom:0.2em; }

8. Biar lebih abdol preview dulu dah.. jika sukses baru simpan. Jika gagal Clear Edit lalu tanyakan melalui kotak komentar dibawah ini. Ok sekian dan terimakasih Salam.

No comments:

Post a Comment