Horizontal Recent Post (Artikel Terbaru)

Oleh Ade Sanusi

10.06.2008

Bagikan :

Tweet

Sempat Libur Sejenak, habis liburan di rumah :D nah... saya tepatin janji saya pada artikel Recent Post/Comment via Widget Feed, dan berikut hasil karya yang telah DB kembangkan :) Masih banyak hal baru dalam blogger, yang mudah mudahan bermanfaat dan menambah pengetahuan teman-teman semua.
>
Horizontal Recent Post (Artikel Terbaru) adalah bagai mana menampilkan Sebuah Artikel terbaru yang standarnya ke bawah kemudian dirubah menjadi kesamping....

1. Silahkan Masuk ke Edit HTML dan Ceklis pilihan Expand Widget Template

2. Cari kode yang kurang lebih seperti ini.: /* ini hanya untuk meletakan Artikel terbaru kita di bawah Header... jika sebelumnya sudah ada Menu, silahkan pasang di bawahnya atau sesuai selera */

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section> 

</div>

3. Kemudian Letakan Kode di bawah ini dan letakan persis dibawah Kode yang warna merah atas.

<div id='news_flash'>
<b:section class='header' id='newsflash' preferred='no'>
<b:widget id='Feed1' locked='false' title='Artikel Terbaru' type='Feed'>
<b:includable id='main'>
    <h2><data:title/></h2>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<li><a href='http://dunia-blogger.blogspot.com/'><b><blink>Artikel Terbaru:</blink></b></a></li>
      <b:loop values='data:feedData.items' var='i'>
        <li>
          <span class='item-title'>
            <a expr:href='data:i.alternate.href'>
              <data:i.title/>
            </a>
          </span>
<b:if cond='data:showItemDate'>
            <b:if cond='data:i.str_published != &quot;&quot;'>
              <span class='item-date'>
                &#160;-&#160;<data:i.str_published/>
              </span>
            </b:if>
          </b:if>
          <b:if cond='data:showItemAuthor'>
            <b:if cond='data:i.author != &quot;&quot;'>
              <span class='item-author'>
                &#160;-&#160;<data:i.author/>
              </span>
            </b:if>
          </b:if>
                  </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>
</b:section>
</div>

4. Pada Tahap ini Sudah jadi dan Artikel terbaru kita sudah ada di bawah header namun masih kebawah tampilannya:) Nah untuk itu perlu menambahkan kode CSS berikut ini:

/* -----   NEWS_FLASH   ----- Desain by Dunia-Blogger.blogspot.com */
#news_flash {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000000; /* Warna background*/
border: 1px solid #00ff00; /* Warna border utama*/
}

#news_flash ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: left;
list-style-type:none;
}

#news_flash h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#news_flash li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#news_flash a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
color: #ffffff; /* Warna Text Judul Artikel*/
border-right: 1px solid #00ff00; /* Pengaturan Border dan Warna Border garis Tepi*/
}

#news_flash a:hover {
color: #ff0000; /* Warna Text ketika Kursor diarahkan*/
background: #ffffff; /* Warna background ketika Kursor di Arahkan*/
}


Silahkan letakan Persis di Atas kode ]]></b:skin>

Untuk Pengaturan Warna saya rasa sudah jelas tinggal sesuaikan dengan selera.... dan jika ingin menambah animasi berupa Marquee bisa di tambahkan kode marquee sebelum kode <b:loop values='data:feedData.items' var='i'> dan menutupnya setelah kode </b:loop>

Selamat Mencoba.... dan Silahkan Simpan hasil Kerja Anda. jangan lupa berkomentar :) lihat gambar yah...:)

Perhatian:...!! Jika Artikelnya belum Tampil Silahkan Masuk Ke Page Element dan Klik Edit pada Widgetnya dan Isi dengan Alamat Feed masing Masing...

Materi Dasar:
Kang-Rohman [Buat Elemen di bawah Header]
Dunia-Blogger [LinkBar]

Semakin Banyak anda mempelajari suatu hal semakin besar pula kemungkinan Ide ankan anda Dapatkan

Tag : Tips and Trik, Unik