Sabtu, 31 Maret 2012

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

Salam hangat untuk sahabat pengunjung sekalian. Kaloborasi antara tampilan, tata letak, warna dan fungsi yang dirancang semenarik mungkin khusus untuk desain yang memang patut untuk diperhatikan. Memiliki desain yang menarik gak neko-neko dan terlihat elegan, simple tapi pas. Gak harus gunakan Animasi, Flash dan sebagainya yang terlalu berlebihan, justru akan membuat pengunjung merasa bosan karena dampaknya akan menjadikan Objek Desain tersebut tidak lagi terlihat menarik dan terasa akan lebih berat disini khususnya adalah desain Blog. Sesuai dengan tema pada kesempatan kali ini Saya ingin share sebuah Tips Tutorial Blogger yaitu Rancangan Web Log untuk Buat Home Page Posting Blog Menjadi 2 Kolom Agar Terlihat Lebih Rapi Dan Menarik. Seperti yang Anda ketahui setiap Template default blog menggunakan hanya 1 kolom saja untuk Home Page Postingan, disini Saya coba untuk merubahnya menjadi 2 kolom.

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 auto 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.

0 komentar:

Posting Komentar