Membuat Recent Posts Lebih Menarik Dengan BuzzBoost

Satu lagi Tip dan trik mengenai Recent Post. Kali ini agak berbeda dengan recent post biasanya, karena disini kita memadukan recent post dengan BuzzBoost dari Feedburner. Recent Post ini sangat menarik karena memanfaatkan Fitur dari BuzzBoost sehingga bisa memunculkan potongan isi dari tulisan/postingan.

Sebenarnya hal seperti ini sudah banyak dibahas akan tetapi modifikasi tiap orang pasti berbeda-beda sesuai dengan selera masing-masing, dibawah ini akan saya bahas bagaimana cara mendaftar ke Feedburner sampai menaruh fitur itu di dalam template blogspot kita.

BuzzBoost  adalah  fasilitas yang diberikan feedburner untuk menampilkan RSS Feed sebagai html dengan menaruh code javascript pada blog kita. Perlu kita ketahui bahwa RSS adalah sebuah file berformat XML untuk sindikasi yang telah digunakan situs web maupun Blog. Teknologi RSS ini mengijinkan kita untuk berlangganan kepada situs web yang menyediakan umpan feed RSS.
Baik kita mulai saja cara membuatnya dan sekarang kita ikuti  langkah-langkahnya: 

1. Daftar Feedburner, bila belum silahkan klik disini. (http://feedburner.google.com)

2. Pada bagian Burn a feed right this instant. isi dengan  rss feed dari situs yang akan anda ekstraksi, misalnya http://ruditabuci.blogspot.com/feeds/posts/default, kemudian tekan tombol Next, seterusnya tekan lagi tombol Next dan seterusnya sampai selesai hingga anda menemukan bagian Analyze,Optimze,Publicize dll

3. Pada halaman Publicize, Klik Link BuzzBoost. Pada halaman BuzzBoost klik  ACTIVE. 
Akan muncul halaman yang berisi script seperti dibawah ini.

<script src="http://feeds.feedburner.com/blogspot/ruditabuci?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/blogspot/ruditabuci"></a><br/>Powered by FeedBurner</p> </noscript>

4. Kemudian Anda cukup mengambil bagian seperti di bawah ini

<script src="http://feeds.feedburner.com/blogspot/ruditabuci?format=sigpro" type="text/javascript" ></script>

5. kemudian modifikasi dengan menambahkan script dibawah ini tepat dibelakang text sigpro

&nItems=8&format=openLinks=new

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below

sehingga menjadi seperti dibawah ini

<script src="http://feeds.feedburner.com/blogspot/ruditabuci?format=sigpro&nItems=8&format=openLinks=new

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>

Copy Paste pada Blog anda. Buka Design - Page Element - Add a gadget - Javascript/HTML - Isi judul misalnya 'Recent Posts' Lalu Copy Paste script diatas 


6. Setelah itu buka kembali Design - Edit HTML - Expand Widget Templates, Kemudian cari text "Recent Posts" sesuai judul yang kita berikan tadi, sehingga akan ketemu dengan script seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>

<b:includable id='main'>

<!-- 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:include name='quickedit'/>

</b:includable>

</b:widget>

Ganti  script diatas yang berwarna biru sehingga menjadi seperti di bawah ini

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='postnew'><div class='widget-content'>

<data:content/>

</div></div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Langkah selanjutnya adalah menambah style sheet css 


7. Tetap pada mode Edit HTML, Selanjutnya cari </head> setelah ketemu bagian tersebut letakkan script dibawah ini tepat diatasnya

<style>

.postnew li a:hover { 

display:block; 

text-decoration:none; 

background:#efefef;

}

.postnew li a:visited {

text-decoration:none; 

}

.postnew {

float:left; 

width:380px;

}

.postnew ul {

width:90%; 

list-style-type:none;

}

.postnew li a {

text-decoration:none; 

border-top:1px solid rgb(204,204,204); 

line-height:13px; 

display:block;

padding:3px 0px 3px 0; 

}

.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {

        display:none; 

        padding:2px 3px; 

        margin-left:126px; 

        margin-bottom:12px; 

        width:162px

}

.feedburnerFeedBlock  li:hover .date {

        font-size:11px; 

        font-weight:bold; 

        text-align:left; 

        display:block; 

        position:absolute;

background:url(http://4.bp.blogspot.com/_1_qkt6bisvU/TFWxXnUOeKI/AAAAAAAAAiQ/lPG9EIxJemM/s400/tooltips-date.gif) no-repeat scroll 10px 5px; color:#333; padding:6px 35px; margin-right:10px; 

        width:114px

}

.feedburnerFeedBlock  li:hover div {

        border-radius:8px 8px; 

        -moz-border-radius:0 0 8px 8px;  

        -khtml-border-radius:0 0 8px 8px;   

        -webkit-border-radius:0 0 8px 8px;  

        border-radius:0 0 8px 8px; 

        font-size:11px; 

        display:block;

        position:absolute; 

        border:1px solid #ccc; 

        background:#E5E5E5  url(http://2.bp.blogspot.com/_1_qkt6bisvU/TFWw-97HlKI/AAAAAAAAAiI/0uCcQMJxNgU/s1600/tooltips-background.png) repeat-x; 

        color:#333; 

        padding:35px 10px 10px 10px

}

</style>

Demikian Selamat mencoba

Related Articles by Category