Cara Merubah Postingan Menjadi Gaya Gallery

Cara membuat postingan gaya gallery, baik itu foto maupun gallery template.Namun yang akan mas bahas disini adalah membuat postingan gallery seperti postingan home page dengan fitur 3 kolom mirip blog mas gusti Ibtemplate.com.

Memang sih postingan seperti ini jarang di share, namun dengan diwakilkan oleh postingan ini.Mas gusti akan tetap memberikan pentunjuk sederhana sebagai bayangan dalam mendesain template sesuai dengan selera.Seperti contoh bisa anda lihat bentuk postingan Home Page dari blog Zoomtemplate.com , ibtemplate.com dan dhetemplate.com adalah sebagian situs yang memakai tehnik ini.Dengan desain yang sedemikian rupa,maka terbentuklah sebuah blog yang enak dilihat dan nyaman dibaca.

Jika anda berminat,silahkan ikuti langkah-langkah berikut ini :

1. Loggin ke blogger.com dengan akun anda.

2. Klik menu rancangan > edit html > centang Expand Template Widget.












3. Kemudian cari kode ]]></b:skin> ( untuk mepercepat pencarian,gunakan shorcut ctrl+f pada browser anda )

4. Kemudian letakkan kode di bawah ini tepat setelah kode diatas.


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

/*homepage styles
-----------------------------------------------------------------------------------*/

#main-wrapper {
float:left;
overflow:hidden;
width:660px;
}

.post {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Fb9jVzrh5Kj-SIMkM6NeKyZzeHA7ki5CPUA1tzOPIgA3HQlcMUbmp4hdwmltC7V-9ILqHcuHa0ZCy9A_krI1lLDnkhnQraFc62berjGH4LMVkFZbLQI2wkLZtr_Y2LIiDWGKtBqETt8/s1600/box.gif) repeat-x top left;
box-shadow: 0pt 3px 3px -1px rgba(0, 0, 0, 0.1);
border:1px solid #DBDBDB;
width:200px;
height:200px;
margin:0 0 7px 7px;
padding:10px 0 0 10px;
display:inline;
float:left;
overflow:hidden;
position:relative;
-moz-border-radius:4px; 
-khtml-border-radius:4px; 
-webkit-border-radius:4px; 
border-radius:4px;}

.post h3 {
width:210px; height:20px;
padding-bottom:0px;
padding-top:1px;
font-family:arial;
font-size:14px;
text-align:left;
top:183px;
color:#333;
text-shadow:1px 1px #eee;
margin:0;
position:absolute;
}
.post h3 a{color:#333;
}
.post-body {
overflow:hidden;
width:190px;
padding-bottom:15px;
margin-left:15px;
height:160px;
padding:0px;
margin:20px 0 0;
}

</style>
</b:if>

5. Klik menu Pratinjau untuk melihat hasil sementara.

6. Jika sudah selesai,klik button simpan template (Save Template).


http://www.situsloe.com/2012/11/cara-merubah-postingan-menjadi-gaya.html