PURBALINGGA BROW er

Friday 31 January 2014

cara buat kolom wigdet diatas postingan blog


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

  5. /*****************************************
    Name : 4 Kolom layout diatas main blog
    By : mismanpbg
    Update : jum at 31 januari 2014
    ******************************************/
    #BDRSLAYOUT-MAINKOLOM {
    width: 99%;/* Lebar */
    margin:0;
    padding: 0;
    text-align: center;
    }
    #BDRSLAYOUT-MAINKOLOM .BDKOLOM{
    width:140px; /* Lebar Kolom */
    height:auto;
    margin:3px ;
    text-align: center;
    padding:2px 5px;
    line-height: normal;
    }/* End CSS 4 kolom layout */


  6. Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.

  7. pesan
    Pada umumnya kode <div class='main-wrapper'> biasanya ada pada template HTML/XML blog tapi ada beberapa blog mungkin tidak memiliki kode persis seperti kode <div class='main-wrapper'>.
    Tapi anda tidak perlu kawatir tentang kode <div class='main-wrapper'>, bila di template blog anda tidak sama persis dengan kode tersebut cari saja kode yang sejenis yang penting letak 4 kolom layout ini diatas kode postingan halaman blog ( Widget Blog 1 ).

  8. Cari code <div class='main-wrapper'> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <div class='main-wrapper'>.

  9. <!-- BDRS layout 4 kolom Start -->
    <div id='BDRSLAYOUT-MAINKOLOM'>
    <!-- BDRS layout 1 -->
    <div id='box1' style='width:140px;float:left;margin:3px 5px; '>
    <b:section class='BDKOLOM' id='main-column-1' preferred='yes'>
    <b:widget id='HTML71' locked='false' title='Kolom 1' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    <!-- BDRS layout 2 -->
    <div id='box2' style='width:140px;float:left;margin:3px 5px;'>
    <b:section class='BDKOLOM' id='main-column-2' preferred='yes'>
    <b:widget id='HTML72' locked='false' title='Kolom 2' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    <!-- BDRS layout 3 -->
    <div id='box3' style='width:140px;float:left;margin:3px 5px;'>
    <b:section class='BDKOLOM' id='main-column-3' preferred='yes'>
    <b:widget id='HTML73' locked='false' title='Kolom 3' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    <!-- BDRS layout 4 -->
    <div id='box4' style='width:140px;float:left;margin:3px 5px;'>
    <b:section class='BDKOLOM' id='main-column-4' preferred='yes'>
    <b:widget id='HTML74' locked='false' title='Kolom 4' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>
    <!-- BDRS layout 4 kolom end -->

  10. Save template anda, dan lihat hasilnya

No comments:

Post a Comment