Latest News :

Home » » Membuat Postingan Di Home Page Menjadi 2 Kolom

Membuat Postingan Di Home Page Menjadi 2 Kolom

Rabu, 14 November 2012 | 0 komentar

berikut cara membuat postingan di home page menjadi 2 kolom:
  • Login ke blogger dengan ID anda.
  • Klik Rancangan. 
  • Klik tab Edit HTML. 
  • Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
1. Cari kode css Berikut

h2{font:$headerfont;line-height:1.4em;text-transform:uppercase;letter-spacing:.01em;color:$sidebarcolor;margin:.5em 0 .25em}
h2.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
.post{background:#fff;border:1px solid silver;margin:.1em 0 .5em;padding:10px 15px}
.post h3{font-family:Georgia, Times, Serif;font-size:180%;font-weight:700;line-height:1.2em;color:$titlecolor;margin:.25em 0 0;padding:0 0 4px}
.post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:$titlecolor;font-weight:700}
.post h3 strong,.post h3 a:hover{color:$textcolor}
.post-body{border-top:2px solid #bbb;padding-top:6px;line-height:1.6em;font:14px Arial;margin:3.1em 0 .75em}
.post-body blockquote{line-height:1.3em}
.post-footer{color:#666;text-transform:none;letter-spacing:.01em;font:$postfooterfont;line-height:1.4em;margin:.75em 0}
.comment-link{margin-left:.1em}
.post img,table.tr-caption-container{padding-top:4px;border:0 solid #ccc}
.tr-caption-container img{border:none;padding:0}
.post blockquote{font:italic 14px Georgia;color:#000;letter-spacing:.001em;line-height:1em;float:left;margin:15px;padding:0 auto}
.post blockquote p{margin:.75em 0}


2. Jika anda sudah temukan kode tersebut ganti dengan kode berikut:

h2{font:$headerfont;line-height:1.4em;text-transform:uppercase;letter-spacing:.01em;color:$sidebarcolor;margin:.5em 0 .25em}
h2.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
.post{background:transparent url(http://www3.picturepush.com/photo/a/9103056/1024/Picture-Box/header-kuning.png?imgmax=800)repeat;margin:10px 0 .5em;padding:10px}
.post h3{font-family:Georgia, Times, Serif;font-size:140%;font-weight:700;line-height:1.2em;color:$titlecolor;margin:.25em 0 0;padding:0 0 4px}
.post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:$titlecolor;font-weight:700}
.post h3 strong,.post h3 a:hover{color:$textcolor}
.post-body{border-top:2px solid #968159;padding-top:6px;line-height:1.4em;margin:2em 0 .75em}
.post-body blockquote{line-height:1.3em}
.post-footer{color:#666;text-transform:none;letter-spacing:.01em;font:$postfooterfont;line-height:1.4em;margin:.75em 0}
.comment-link{margin-startside:.6em}
.post img,table.tr-caption-container{padding-top:4px;border:0 solid #ccc}
.tr-caption-container img{border:0;padding:0}
.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0}


3. Cari kode css Berikut:

h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}
.post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpuQRfZTK53fCDI-2VqnJ6-aLGQ8XjJ3XtSfFa-NcGSPh478Myp8hAx3zb6bF9Cme84qPvvjfNit7tyZuHuOTUX7CN52pW8aRYvvl0zEz-jsPt5ZeVZyLCmKGfF2OfCAguRAWcm5Ta3PM/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}
.post h3 strong, .post h3 a:hover {color:#df3321;}
.post {background:#f7f7f7 url(http://www3.picturepush.com/photo/a/9103056/1024/Picture-Box/header-kuning.png?imgmax=800)repeat;}
.post {border-bottom:1px dotted silver;margin:0px;padding:0px;}
#blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}
</style>
</b:if>


4. Jika anda sudah temukan kode tersebut ganti dengan kode berikut:

 .post {margin:0px 14px 10px 0;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3BdA0B5HeinS26MSdavFEEHHo_QmgsxF5dcCc2YWWlEHHsBxCcHH9akAWxVdi9N-19luAbFRc3v4jJ3awreXe2_d01yF7bqmSam128zuiOTS8A7MIW1pCBR4sXzHv8gE78lHfmivrDCd/s320/sidebar.jpg) repeat-x top;padding:5px 12px; width:232px;height:230px;float:left;border:2px solid #232323;positon:relative;overflow:hidden;;filter:alpha(opacity=75);opacity:.75}
.post:hover {background:#202020;border:2px solid #5f5f5f;filter:alpha(opacity=100);opacity:1}
.post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3WKOUtUtBbIdmg0SqN3-RNUBzOoBv4n45aM2pSKww9y0Dy46rtKZMKGRHJ1Bitsa7JY73NLQjLaF7RBMXJQDmfvpjCRA7fnWyxQPNB0eVoWtzFhBIcKWIhI6gh6NBibopKosbGUC3AQ/s1600/batas.gif) repeat-x scroll bottom;font-size:14px;font-weight:bold;line-height:1.2em;color:#868A08;text-align:center;font-family:Arial;padding:0px 0 10px}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#fff;}
.post h3 strong, .post h3 a:hover {color:#d3b275}
.jump-link, .feed-links, .post-footer {display:none;}
.post-body {font-size:12px;margin:0.5em 0 .75em;line-height:1.3em;overflow:hidden;clear:both;font-family:Arial;border-top:none;padding-top:0px;}
#blog-pager {width:98%;float:left;}
h2.date-header {margin:2px 0 10px 0;}
.post img,table.tr-caption-container{padding:2px;border:1px solid #666}
</style>
</b:if>


  • Simpan Tempalte, Selesai.

Share this article :
 
Support : Creating Website
Copyright © 2011. Nicko Part III - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger