Membuat Template berbentuk Gallery

adscblog

Jika anda para blogger yang kepengen membuat template berbentuk Gallery,disini saya akan berbagai pengalaman cara membuat template berbentuk Gallery,dan saya pun pernah mencoba membuat template berbentuk Gallery dan Berhasil,kali ini saya ingin berbagi kode kepada Para Newbe yang ingin membuat template berbentuk Gallery,template yang berbentuk Gallery ini saya gunakan untuk blog saya yang menyediakan berbagai template Blogger,dan andapun bisa melihat template hasil saya yang berbentuk Gallery ini Disini,dan jika anda juga pengen membuat template yang berbentuk Gallery ini silahkan anda ikuti langkah nya di bawah ini.

Membuat Template Gallery di blog

Untuk membuat Template gallery ini sangatlah mudah,anda hanya perlu menyimpan kode di bawah ini tepat di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper{float:left;}
#sidebar-wrapper{float:left;}
</style>
</b:if>
<style>

</style>

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

/*-- Link For Post title (page Index) --*/
#main .post-title{text-align:center; padding-left:15}
#main .post-title a:link{text-align:left;color:#cCC; text-decoration:none;font-family: Yanone Kaffeesatz, sans-serif;padding:0px 0px 0 0px;font-size:1.2em;margin-bottom:0px; font-weight:normal}
#main .post-title a:visited{color:#cCC; text-decoration:none; font-weight:normal}
#main .post-title a:hover{color:#E1771E; text-decoration:none; font-weight:normal}

/*-- Page Post Master (page Index) --*/
.post{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqijwXOfhot_8RXOguimRjwXIMk9Rt2nEQVxx0v98nEaJKNW8JM4JX8v9_ecAIm5LuVyWsOc0eR1sr9WwEvDHD74W6fgzAx9ZA6-B7iONCyGajXiiawxYikstsk0EnQl_mU_P-bjmskeSk/s0/header-shadow.png)repeat-x;margin:.5em 0 1em; border:1px solid #333;padding-bottom:1em; padding-right:1em; text-align:justify;-moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.post h3{margin:0; padding:0; font-size:12px; font-weight:bold; font-style:normal; line-height:0px; color:#333}
.post h3 a, .post h3 a:visited, .post h3 strong{display:block; font-size:16px; text-decoration:none; font-style:normal; color:#333; font-weight:normal; display:none; position:absolute; top:13px; white-space:nowrap; overflow:hidden; display:block; width:305px}
.post h3 strong, .post h3 a:hover{color:#777; text-decoration:none}
.post{margin:0 0 .1em; line-height:1px}
.post-body, .post-body p{margin:20; padding:20; line-height:10px; color:#333}
#main .post-footer-baru{margin:0em 0 0; color:#555; letter-spacing:0; padding-top:10px; font-size:11px; line-height:1.3em; border-top:0 dotted #111; width:243px}
#main .post-footer-baru a{font-size:11px; color:#555; font-weight:normal}
#main .post-footer-baru a:hover{font-size:11px; color:#FF6600; text-decoration:underline}
.post-body{margin-top:0; padding-top:5px; padding-left:10px; padding-right:17px}
.comment-link{margin-left:0}
.post img{border:1px solid #999; width:240px; height:150px}
.post-body img.latest_img{width:220px; height:150px; margin:0; padding:1px; border:1px solid #ddd; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
p.post-footer-line-3{margin:0 auto; padding:0;  }
.post-labels{display:none}
.post:hover{background:#999; color:#fff}
.post{background:#333;width:275px; height:230px; margin:3px 10px 10px 2px!important; margin:3px 5px 5px 0; padding:7px!important; padding:7px; display:block; float:left; overflow-x:hidden; overflow-y:hidden; position:relative}
/* -- BLOGPAGER SET -- */
#blog-pager a:link{text-decoration:none}
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold; text-decoration:none;}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold; text-decoration:none}
#blog-pager{width:640px; text-align:center; line-height:1.8em; font-weight:bold; color:#444; text-decoration:none:}
#blog-pager-older-link, .blog-pager-newer-link{background:#E7E7E7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHpVdYCYi0O6Bc6Ts6ZfcYdGHPFVYRJdvGJqyXEL_641fPqhCrf-eIpTDKeC37Zmx7YSGIlN7zVXoLrscFyiamvza28EjcJRxjWYbYKqfYRqjjJdXGyS4ZkegcLXkgifLQuIIZ24IbCY/s400/bg-c.png) repeat-x; border:1px solid #CDCDCD; display:block; padding:0 15px; text-decoration:none; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.post:hover{
background:#454545 none repeat scroll 0 0;
border:1px solid #292929;
}
.post-body {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEUAts01DQT585ANqoddgmSNcZdUDLgHWc2L-EBH4Yq91KBQDAeDKaU07ByQKxQQueL_rptOFF58XVnTcTfX6KGOtzB6WvjePEclp7mPNzpdZtc-3n5B-LV3vE9ykGERuGRLlxdj8u94/s1600/icon-loading.gif) no-repeat center;
width:270px;height:270px;
}
.post img {
height:160px;
width:260px;
margin-top:0px;
padding:3px;
border:1px SOLID #999;}
.adsthumb {
background:#F3F3F3;float:left;width:240px;height:250px;margin:0 10px 10px 5px;padding:20px;
-moz-border-radius:4px; 
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;border:1px solid #333;
}
.adsthumb:hover, .post-body:hover {
background:#EAEAEA;}

</style>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
post h3 {
width:300px;
font-family:arial;
font-weight:bold;
font-size:12px;
color:#424242;
text-align:left;
margin:0px; border-bottom:1px solid #ccc;
position:absolute;}
.post h1 {
font-size:30px;
font-weight:bold;
margin-bottom:10px;
margin-top:10px;
}
.post h2 {
font-size:25px;
font-weight:bold;
margin-bottom:10px;
margin-top:10px;
}
</style>
</b:if>

Nah sangat mudah bukan,selamat mencoba dan semoga berhasil,untuk menghindari hal yang tidak di inginkan terhadap template anda,silahkan template anda,anda Backup terlebih dahulu, adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 13 Juni and have 0 komentar