Tips dan Trik Blogger

Horizontal Recent Post (Artikel Terbaru)

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
14 Komentar untuk "Horizontal Recent Post (Artikel Terbaru)"

kerennn... kapan2 aku coba ah...

waduh,.aku td koment apa ych?
kok masuk kategory bahAya?
b

wuihhh canggih ni yg ini...
tapi... ada2 aja deh mas ade.. nihhhh
sukses bro

besok2 aku coba deh. salam !

keren mas , kapan kapan saya praktekin nih.....thx

asyik ada tutor baru ... :)
Kapan-kapan dipraktekin aah..
baru sibuk nih bro sorry g bisa sering-sering mampir. :)

@ Lyla: Kapan di Cobanya tar Lupa lagi... :D =))

@ Kang Rohman: He he :D jadi Malu Kang.... Makasih kang,... Kan blog kang Rohman Sumber Inspirasinya :d

@ Indungg: Maaf Komentar Pertama Saya hapus :d

@ Anas: Ah bisa aja nih... asal mau mencoba pasti ada yang baru =))

@ 1demi1: Jurus Baru yah.. ? namanya apa yah :d Kucing berbulu Domba =))

@ Welly: ya udah jangan Lupa aja....

@ Setiawan: He he Sempet Turun ke NOL gara gara liburan Lebaran kali :D tapi sekarang dah ada lagi :d

@ AnForLogic: Ya udah Cepetan praktekin nanti keburu Lupa :D

@ Thom: He he... Ya nih Sama saya juga sering sibuk:d Tapi saya sempatin aja posting =))

@ Indra fansBlogs: yupz mas Emang DB suka ada ada ja nih :D

@ Subagya: He he... Makasih Boz.... :-o

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

( http://zamrudhijau.blogspot.com/ )

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top