0 Membuat 3 Kolom atau halaman Posting

PT - Membuat 3 Kolom atau halaman Posting - Malem sobb,. karang lagi ujan lebat nih,. dimalam yang dingin ini akan saya sempatkan untuk membagikan trik blogger seperti biasanya.
Nah yang akan kita bahas malam ini adalah cara membuat 3 kolom posting pada halaman utama blogspot.
untuk contohnya sobat bisa melihat pada screnshoot berikut ini :

Bagaimana Sobb,.

Menarik, bukan..?? mudah - mudahan sobat tertarik dengan melihat screnshoot tersebut.

ok. langsung saja kita mulai cara pembuatanya :

• Login ke blog
• Masuk ke Template => Edit HTML 
• Cari kode ]]></b:skin> kemudian letakkan kode di bawah ini tepat di bawah kode ]]></b:skin>

/*--------------------------------------------------------------

Kustomisasi Tampilan Posting 3 Kolom Halaman Home Page 

Oleh : M. Rifqi Sucahyo

Blog : Downloadallinfo-:[Download all info]:-

URL : http://Downloadallinfo.blogspot.com/

--------------------------------------------------------------*/

<style type='text/css'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

#main-wrapper {

       width:700px;

       padding-left:5px;

       padding-right:5px;

     }

h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}

#blog-pager {

       width:100%;

       clear:both;

     }

.post {

       -webkit-box-shadow: inset 0px 0px 50px 15px #f9f9f9;

       box-shadow: inset 0px 0px 50px 15px #f9f9f9;

       padding: 10px;

       margin: 10px;

       background:none;

       width:27%;

       height:auto;

       float:left;

       border:1px solid #fff;

       positon:relative;

       overflow:hidden;

       -webkit-box-shadow: 0px 2px 6px 0.1px #555555;

       box-shadow: 0px 2px 6px 0.1px #555555;

       -webkit-border-radius: 5px;

       border-radius: 5px;

     }

.post-body {

       border-top:1px dotted #444;

       margin:0.2em 0 .75em;

       line-height:1.4em;

       font-size:14px;

       color:#111;

       overflow:hidden;

     }

.post h3 {

       text-align: center;

       font-family: &#39;PT Sans Narrow&#39;, sans-serif;       height:32px;

       font-size:12px;

       font-weight:bold;

       line-height:1.3em;

       color:#ff5500;

       text-transform:none;

     }

.post-home-thumbnail img{

       float:left;

       height:100%;

       width:100%;

       margin:2px 10px 2px 0px;

       padding:0px 0px;

       background-color:none;

       border:none !important;

       -webkit-box-shadow:0px 0px 0px 4px white, 0px 0px 3px 4px #bbb;

       -moz-box-shadow:0px 0px 0px 4px white, 0px 0px 3px 4px #bbb;

       box-shadow:0px 0px 0px 4px white, 0px 0px 3px 4px #bbb;

       -webkit-border-radius:100%;

       -moz-border-radius:100%;

       border-radius:100%;

       -webkit-transition:all 1s ease-out;

       -moz-transition:all 1s ease-out;

       -ms-transition:all 1s ease-out;

       -o-transition:all 1s ease-out;

       transition:all 1s ease-out;

     }

.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#000;}

.post h3 strong, .post h3 a:hover {color:#BB0000;}

</b:if>

</style>

• #main-wrapper{ width:700px  : Cocokan dengan #main-wrapper di template blog sobat.
• .post { width: 27%;                  : 27% adalah lebar dari setiap posting yg akan di tampilkan.
•             height: auto;                 : auto adalah tinggi [otomatis menyesuaikan artikel]
 
• Simpan Template.

Sekarang lihat hasil dari pekerjaan sobat pada blog sobat.

jika desain tersebut belum membuat sobat puas, silahkan otak atik sendiri kode tersebut hingga mendapat kepuasan desain tampilan yang terindah menurut sobat.

Namun jika ada yang masih kurang jelas silahkan bertanya pada kolom komentar di bawah ini, insya allah akan langsung saya jawab.

Komentar →