Browse » » » Memasukan kode widget posting desain Template Blogspot ( Part 10)

Tuesday, April 5, 2011

Memasukan kode widget posting desain Template Blogspot ( Part 10)

Posted by at 6:29 PM
Halo wahhh lama sudah menanti ya lanjutan Cara Membuat template sederhana Blogspot Part 10, maklumlagi banyak job jadi ke pending. Langsung deh dilanjut untuk menampilan postingan pada template blogspot perlu menambahkan kode khusus.. kode apaan ya? Lanjutin aja bacanya nanti juga tau... hehe.. Untuk yang ketinggalan artikel baca dulu artikel di bawah ini yak :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7, Part 8, Part 9

Yuk kita mulai.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 9 sudah kita buat sidebar dan sekarang kita akan menambah kode untuk menampilan posting di template Blogspot, ikuti langkah-langkah di bawah ini :
  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
    <div id='content'>...... </div>

    Lalu tambahkan didalamnya Kode berikut :
    Sidebar-kiri :

    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
    </b:widget>
    </b:section>

    Jangan lupa hapus tulisan judul-postingan, isi-posting, metatag, kolom-komentar, form-komentar ya..
  3. Sekarang kita atur posisinya dengan kode CSS, Cari kode dibawah ini :
    #content {
    Overflow:hidden;
    margin:2px;
    padding:3px;
    width:492px;
    border:1px solid #000;
    background:#eee;
    float:left;text-align: left;
    }

    Tambahkan di bawah kode tersebut kode CSS di bawah ini :
    /* Posts */
    h2.date-header { margin:0;padding:0;display:none; }
    .post {margin: 0px 0px 14px 5px; padding: 2px 7px; background: #fff; border: 1px solid #ddd; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; overflow:hidden; }
    .post h3 {color: #444; font-size: 140%; font-weight:100; padding: 6px 0 5px 5px;
    margin: 3px 5px 3px 5px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
    color: #333;
    text-decoration:none;
    font-weight:100;
    }

    .post h3 strong, .post h3 a:hover {
    text-decoration:none;
    color: #333;
    }
    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    padding:0 15px;
    }
    .post-body blockquote {
    line-height:1.3em;
    }
    .post-footer {
    font-size:90%;
    padding: 1px 8px 1px 5px;
    margin: 0 5px;
    border-top: 1px solid #ddd;
    }
    .comment-link {
    margin-$startSide:.6em;
    }
    .post img, table.tr-caption-container {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding: 5px;
    margin: 5px 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    }
    .tr-caption-container img {
    border: none;
    padding: 0;
    }
    .post blockquote {
    padding: 10px 35px 5px 35px;
    margin: 3px 30px;
    background: #F5F4F0 url("http://2.bp.blogspot.com/_xpQK9GsnDPs/TO2X8pm8LnI/AAAAAAAAApc/bNEtp-A_v1I/s000/quotes.gif") top left no-repeat;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    }
    .post blockquote p {
    margin:.75em 0;
    }

    .authordata{
    float:left;
    font-size:90%;
    padding: 1px 0px;
    margin: 0;
    }

    .authordata p{
    line-height: 14px;
    padding: 0;
    margin: 0 0 2px 0;
    }

    .commentsdata{
    float:right;
    font-size:90%;
    padding: 0 4px 0 0;
    }
    .commentsdata img{
    padding: 0;
    border:none;
    }

    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    font-size: 105%;
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 5px 0;
    }

    #comments, #comments ol, #comments ol li, #comments ol li.alt {
    font-size: 100%;
    }
    #comments {
    margin:0px auto;
    padding: 10px 0px 10px 10px ;
    width:670px;
    }

    #comment-list {
    padding:0;
    margin:0;
    border:0;
    list-style-type: none;
    margin: 0 0 20px;
    font-size: 1.75em;
    }
    .commentlistdiv {
    padding:0;
    margin:0;
    border:0;
    list-style-type: none;
    margin-bottom: 20px;
    font-size: 1.75em;
    }
    .commentlistdiv h1 {
    font-size: 1.3em;
    color: #366799;
    line-height: 1.5em;}

    .commentlist li {
    padding:0;
    margin:0;
    border:0;
    border:1px solid #d3d3d3;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 10px;
    margin-top: 10px;
    background: #F7F6F3;
    }

    ul.commentlist {list-style-type: none;margin:0 auto;padding:0;width: 100%;}
    .commentlist li.alt {
    padding:0;
    margin:0;
    border:0;
    border: 1px solid #eee;
    padding: 0px;
    margin-top: 0px;
    }
    .pane_l {
    float: left;
    clear: left;
    width: 40px;
    text-align: center;
    color: #444444;
    font-size: 1em;
    overflow: hidden;
    padding:0px;
    }
    * html .pane_l{margin-top:15px; }
    .pane_r {
    float: left;
    clear: right;
    width: 590px;
    overflow: hidden;
    padding:5px 0 0 10px;
    }
    .c_author { width: 590px;
    margin: 0px 0px 0px 0px;
    color: #000;
    font-size: 12px;
    font-weight:bold;
    }

    .c_avatar {display: block;margin: 0px 0px 7px 0px;}
    .avatar-image-container img{height:30px;width:30px; padding: 1px;
    background: #fff url(http://3.bp.blogspot.com/_xpQK9GsnDPs/TO2X8wawA9I/AAAAAAAAApg/VeTCfun6bPk/s000/no_avatar-small.jpg) no-repeat center;
    border: 1px solid #eee;
    }
    .c_date {float:right;
    font-size:90%;
    padding: 0 4px 0 0;
    font-weight:bold;
    }
    .c_approved {color: #aaa;font-size: 0.9em;}
    .comment-form { background:transparent; border:0px solid #FF8A00;
    margin:0 10px 20px 0px; padding:10px 0 0;}
    * html .comment-form { width:87%; }
    .comment-number{
    font-weight: bold;letter-spacing:0em;
    font-style: italic;
    color: #333;
    font-size: 1.167em; float:left;margin-right:5px;
    }

    .owner-Body {color:#f00;font-weight:bold;}
    .deleted-comment {
    font-style:italic; color:gray;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }
    .deletkomen {
    background:#ddd;
    border:1px solid #aaa;
    padding:2px 10px;
    text-align:center;
    width:65px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color:#3D72C0;
    font-weight:bold;
    }
    .deletkomen:hover {
    background:#f3f3f3;
    border:1px solid #aaa;
    }



    #blog-pager-newer-link {
    float: $startSide;
    }

    #blog-pager-older-link {
    float: $endSide;
    }

    #blog-pager {
    text-align: center;
    }

    .feed-links {
    clear: both;
    line-height: 2.5em;
    }
    /*-- Finish Post --*/
  4. Setelah selesai klik simpan template.
  5. Langkah selanjutnya uncheck Expand Template Widget, lalu klik Elemen laman maka akan muncul seperti gambar dibawah ini, nah berarti tandanya element/bagian posting sudah berhasil kita pasang.
  6. Ok posting sudah berhasil... bagaimana mudah bukan?

ok memasang memasang posting sudah, untuk artikel selanjutnya mengatur bagian footer (Part 11) jangan sampai ketingglan ya... pantengin terus.... permak blogs..
Labels: ,
 

Copyright © Belajar Ngeblog Design by BTDesigner | Blogger Theme by BTDesigner | Powered by Blogger