Memasang Recent Post ke dalam Kotak Blogroll

Andai kata, umpama, misalnya... rekan bloggers bikin recent post kayak yang aku paparkan pada postingan kemaren dan ingin menampilkan 10 atau lebih postingan sekaligus, sudah barang tentu akan memakan banyak tempat karena recent post yang kita pasang bakal tampil amat sangat pannnjjjjjaaaaannnggggg..... ke bawah, sementara misalnya recent post tersebut sobat taruh pada sidebar yang berukuran kecil. Tenang... gwa punya sedikit trik untuk mengatasi masalah tersebut yaitu dengan menaruh recent post tadi ke dalam sebuah kotak blogroll. Gimana, masuk akal ngga kira-kira???..



Ok, langsung ke TKP aja dech biar jelas, youk...

Pertama-tama, marilah kita download dulu template kita agar terhidar dari kemungkinan buruk yang tak terduga. Kalo udah, lanjutkan perjuangannya hingga titik darah yang penghabisan yaitu login ke blogspot, klik customize, klik layout lantas edit html dan jangan lupa contreng kotak Expand Widget Templates. Silah kan cari kode untuk Recent post tadi. untuk jelasnya, perhatikan barisan kode di bawah ini :

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Recent Posts' type='Gadget'>
<b:includable id='main'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != &quot;&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != &quot;&quot;'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:trackingUrl != &quot;&quot;'>
          <img expr:src='data:trackingUrl' height='1' width='1'/>
        </b:if>

        <iframe expr:height='data:height' expr:id='data:moduleId' expr:name='data:moduleId' expr:src='data:renderingUrl' frameborder='0' style='width: 100%; display: block'>
        </iframe>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Nah, kalo udah ketemu, tugas kita sekarang adalah menyelipkan kode kotak blogroll tadi di antara kode-kode di atas, bingung? lihat dech kode di bawah dan perhatikan penempatan kode yang berwarna merah.

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Recent Posts' type='Gadget'>
<b:includable id='main'> 
<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 200px; height: 180px; text-align: left; '>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != &quot;&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != &quot;&quot;'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:trackingUrl != &quot;&quot;'>
          <img expr:src='data:trackingUrl' height='1' width='1'/>
        </b:if>

        <iframe expr:height='data:height' expr:id='data:moduleId' expr:name='data:moduleId' expr:src='data:renderingUrl' frameborder='0' style='width: 100%; display: block'>
        </iframe>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>

  <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Silahkan dech sobat atur sendiri tinggi dan lebar kotaknya, so pasti udah pada jago tuch. Bila dah kelar, Klik save dan liaht dech hasilnya

Ok bloggers, selamat mencoba....

kembali ke atas


Subscribe with Bloglines

11 comments:

  1. Very nice info sob.. :) keep $mile..
    mampir ya. ada hadiah untukmu :D

    ReplyDelete
  2. Ada ulasan "Memasang Recent Post ke dalam Kotak Blogroll" untuk wordpress-nya tidak?

    ReplyDelete
  3. untuk mempercantik blog memang macam2 ya caranya??? thank's share ilmunya nich

    ReplyDelete
  4. wekss...saya comment burung disamping kotak koment neh..kayak nungguin kita koment..hehehehhee..indah bang ^_^

    ReplyDelete
  5. hm..nice info bro..
    keep sharing..

    ReplyDelete
  6. bagus bagus..... minta repiew blog-ku yack.. masa transformasi dari template joomla... di http://ipoelnet.blogspot.com/ ma kasiiiihh.

    ReplyDelete
  7. Mohon maaf nih gan, ana cuman bisanya di blogspot doank.... kekekekekek... inipun sambil belajar...

    ReplyDelete
  8. Ana dah mampir gan... keren buanget....

    ReplyDelete

Makasih udah mampir dan kasih komentar ....