Membuat Featured Post di Blogspot ala Yahoo!

Membuat Featured Slider Post Image (Gambar) di Blogspot mirip slider berita Yahoo berikut ini diambil dari blog maskolis.  

Penempatan animasi slider ala Yahoo! ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun bisa menyesuaikannya pada desain template blog masing-masing.

Alternatif lain: Cara Memasang Featured Slider Image Post Otomatis

Cara Membuat Featured Post di Blogspot ala Yahoo!

Langkah 1

1. Login ke blogger dengan akun anda
2. Kemudian klik Tata Letak > pilih Edit HTML
3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
4. Letakkan kode berikut di atas kode ]]></b:skin>

/* Yahoo Slider Wrapper  */
div.jqans-wrapper {-x-system-font:none;font-family:arial,helvetica,clean,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.231;color:#666666;}
div.jqans-wrapper img {border: 0;}
div.jqans-wrapper ul,div.jqans-wrapper li,div.jqans-wrapper h1,div.jqans-wrapper p {list-style:none;margin: 0;padding: 0;}
div.jqans-wrapper {list-style:none;position: relative;overflow: hidden;}
div.jqans-wrapper ul {position: relative;left: 0;width: auto;list-style-type: none;overflow: hidden;z-index: 1;}
div.jqans-wrapper li {list-style:none;float: left;display: inline;}

/* Yahoo Slider Content  */
div.jqans-wrapper.default .jqans-stories ul, div.jqans-wrapper.default .jqans-stories li {height: 110px;}
div.jqans-wrapper.default .jqans-stories-selector ul, div.jqans-wrapper.default .jqans-stories-selector li {height: 10px;}
div.jqans-wrapper.default, div.jqans-wrapper.default .jqans-container {width: 458px;background:#fff;}
div.jqans-wrapper.default li {width: 115px;}
div.jqans-wrapper.default a {text-decoration: none;font-weight: normal;color: #363636;outline: none;}
div.jqans-wrapper.default strong {color: #000;}
/* wrapper */
div.jqans-wrapper.default {border: 1px solid #ccc;border-width: 1px 1px 0 1px;margin: 0 0 0.5em;}
/* container */
div.jqans-wrapper.default .jqans-container {min-height: 270px;text-align: center;padding-top: 4px;}
div.jqans-wrapper.default .jqans-container a {font-weight: bold;color:#000;}
div.jqans-wrapper.default .jqans-container img {width:438px;height:210px;}
/* headline */
div.jqans-wrapper.default .jqans-headline {text-align: left;margin-left:10px;margin-bottom: 4px;font:normal 13px Arial;}
div.jqans-wrapper.default .jqans-content h1 {text-align:left;color:#16387c;margin: 1px 9px;font:bold 18px Arial;letter-spacing:-.0001em;line-height:1.1em; height:22px;overflow:hidden;}
div.jqans-wrapper.default .jqans-content p {text-align: left;color: #333;margin: 1px 9px;font:normal 12px Arial;line-height:1.3em;height:30px;overflow:hidden;}
/* stories */
div.jqans-wrapper.default .jqans-stories {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjczj-hvDRGxR6vn0ceqNtC9iTJP8XHuDdti81bbd1HqF1wDmwu3n8RhPHFmwc2D1aqpZUOKO5kHmNAJAlb0w5lpDX5xGHSKXtl9hj7uOum6LUju_6Jd6-0_ltlQ3_xHrhX8K0CFYYf6JY/s1600/bg_stories.gif);background-repeat: repeat-x;background-position: top left;}
div.jqans-wrapper.default .jqans-stories li {overflow: hidden;text-align: center;font-size: 11px;color: #fff;line-height:1.2em;}
div.jqans-wrapper.default .jqans-stories li.selected {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-yBIDo8HuYsnHxnaoN9kJII66Qi78B-jTfAuL76cZ_3p2lo-9l8GGFejR0Uj-piDL8FQ3L_1nC_L-zSP0S-58j-UoK-PcfVNFcKkJXxhw0OEgWAEkVMdg8G5RzH01B-DwH2O5QYO9cwQ/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
div.jqans-wrapper.default .jqans-stories li.selected a {color:#fff;}
div.jqans-wrapper.default .jqans-stories li img {margin-top: 22px;width:100px; height:52px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #555;border-top:1px solid #555;}
div.jqans-wrapper.default .jqans-stories li p {display: none;}
div.jqans-wrapper.default .jqans-stories li h3 {margin:0;padding:1px 10px;color:#000;
font-size:11px;font-weight:normal;font-family:Arial;height:28px;overflow:hidden;line-height:1.2em;}
div.jqans-wrapper.default .jqans-stories-selector li.selected div {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-yBIDo8HuYsnHxnaoN9kJII66Qi78B-jTfAuL76cZ_3p2lo-9l8GGFejR0Uj-piDL8FQ3L_1nC_L-zSP0S-58j-UoK-PcfVNFcKkJXxhw0OEgWAEkVMdg8G5RzH01B-DwH2O5QYO9cwQ/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
/* pagination */
div.jqans-wrapper.default .jqans-pagination {border: 1px solid #ccc;border-width: 1px 0;margin: 0;padding: 4px 4px 4px 4px;background: #f2f2f2;text-align: left;clear: both;width: 448px;overflow: hidden;}
div.jqans-wrapper.default .jqans-pagination-count {float: left;font:normal 11px Arial;color:#666;}
div.jqans-wrapper.default .jqans-pagination-controls {float: right;}
div.jqans-wrapper.default .jqans-pagination-controls a {display: inline-block;width: 22px;height: 13px;text-indent: -9999px;background: no-repeat bottom center;*float:left;}
div.jqans-wrapper.default .jqans-pagination-controls-back a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXvN7IozbAsY1cQZkwvOwToiBzuRuF_pz2qi8ZOJlLkg7cvnBpmzIG3j4DVC87xHAdULzIvDNJm9Ql5p-l4uvZVB7zmQzq7efkxOEuG_kHiheYuRS0mELNfdb6vgdK0SEoXeVExl_O3k/s1600/previous.gif);}
div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWvx6y8ByzPouGkq8kIuzkN4Al-OS-9upPSdlQbi2G1ouYHXAKJ2wNSdR_T3OYcS6fnETTfo0nCjblBczwJ0YiJ3eS72OOelKSygc_9zRbzme34_i5mkth4Xfa3PA73YZcy7qIPP98duA/s1600/next.gif);}

Langkah 1
Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.accessNews=function(b){var c={title:"HARI INI -",subtitle:"<span id='clock'/>",slideBy:4,speed:"normal",slideShowInterval:3000,slideShowDelay:3000,theme:"default",continuousPaging:true,contentTitle:"h3",contentSubTitle:"abbr",contentDescription:"p",onLoad:null,onComplete:null};return this.each(function(){b=jQuery.extend(c,b);var k=jQuery(this);var h=k.children();var i;var j;var f;var e={_wrapper:'<div class="jqans-wrapper '+b.theme+'"></div>',_container:'<div class="jqans-container"></div>',_headline:jQuery("<div class='jqans-headline'></div>").html(["<p><strong>",b.title,"</strong> ",b.subtitle,"</p>"].join("")),_content:jQuery("<div class='jqans-content'></div>"),_stories:'<div class="jqans-stories"></div>',_first:jQuery(h[0]),init:function(){if(b.onLoad){b.onLoad.call(a(this))}k.wrap(this._wrapper);k.before(this._container);var l=(h.length*this._first.outerWidth(true));k.css("width",l);if(b.title.length){this.append(this._headline)}this.append(this._content);this.selector(l);this.set(0);d.init();g.init();k.wrap(this._stories);if(b.onComplete){b.onComplete.call(a(this))}},selector:function(n){var m="";for(var l=1;l<=h.length;l++){m+="<li><div/></li>"}var p=jQuery('<div class="jqans-stories-selector"></div>');p.append("<ul>"+m+"</ul>");j=jQuery(p.find("ul"));f=j.children();p.css("width",n);k.before(p)},append:function(l){this.get().append(l)},get:function(){return k.parents("div.jqans-wrapper").find("div.jqans-container")},set:function(n){var o=this.get();var r=jQuery(h[n]);var m=jQuery(f[n]);var q=jQuery("div.jqans-content",o);var p=jQuery("<img></img>");var l=jQuery("<div></div>");var s=jQuery(b.contentTitle+" a",r).attr("title")||jQuery(b.contentTitle,r).text();p.attr("src",jQuery("img",r).attr("longdesc")||jQuery("img",r).attr("src"));l.html("<h1>"+s+"</h1><p>"+jQuery(b.contentDescription,r).html()+"</p>");q.empty();q.append(p);q.append(l);h.removeClass("selected");r.addClass("selected");f.removeClass("selected");m.addClass("selected")}};var d={loaded:false,_animating:false,_totalPages:0,_currentPage:1,_storyWidth:0,_slideByWidth:0,init:function(){if(h.length>b.slideBy){this._totalPages=Math.ceil(h.length/b.slideBy);this._storyWidth=jQuery(h[0]).outerWidth(true);this._slideByWidth=this._storyWidth*b.slideBy;this.draw();this.loaded=true}},draw:function(){var n=jQuery('<div class="jqans-pagination"></div>').html(['<div class="jqans-pagination-count"><span class="jqans-pagination-count-start">1</span> - <span class="jqans-pagination-count-end">',b.slideBy,'</span> of <span class="jqans-pagination-count-total">',h.length,'</span> <strong>News Pagination</strong></div><div class="jqans-pagination-controls"><span class="jqans-pagination-controls-back"><a href="#" title="Back">&lt;&lt; Back</a></span><span class="jqans-pagination-controls-next"><a href="#" title="Next">Next &gt;&gt;</a></span></div>'].join(""));k.after(n);var m=jQuery(".jqans-pagination-controls-next > a",n);var l=jQuery(".jqans-pagination-controls-back > a",n);m.click(function(){var o=d._currentPage+1;d.to(o);return false});l.click(function(){var o=d._currentPage-1;d.to(o);return false})},to:function(p){if(this._animating){return}this._animating=true;var q=k.parent("div").next(".jqans-pagination");var l=jQuery(".jqans-pagination-count-start",q);var s=jQuery(".jqans-pagination-count-end",q);if(p>this._totalPages){p=b.continuousPaging?1:this._totalPages}if(p<1){p=b.continuousPaging?this._totalPages:1}var r=(p*b.slideBy)-b.slideBy;var n=(p*b.slideBy);if(n>h.length){n=h.length}var o=parseInt(k.css("left"));var m=(p*this._slideByWidth)-this._slideByWidth;l.html(r+1);s.html(n);o=(m*-1);k.animate({left:o},b.speed);j.animate({left:o},b.speed);e.set(r);this._currentPage=p;this._animating=false}};var g={init:function(){this.attach();this.off();i=setTimeout(function(){g.on()},b.slideShowDelay)},on:function(){this.off();i=setInterval(function(){g.slide()},b.slideShowInterval)},off:function(){clearInterval(i)},slide:function(){var o=jQuery("li.selected",k);var m=o.next("li");var n=0;if(!m.length){m=jQuery(h[0]);n=1}var p=h.index(m);if(d.loaded){var l=(p)%b.slideBy;if(l===0){n=(Math.ceil(p/b.slideBy))+1}if(n>0){d.to(n)}}e.set(p)},attach:function(){var l=jQuery(k).parent("div.jqans-wrapper");l.hover(function(){g.off()},function(){g.on()})}};e.init();h.hover(function(){e.set(h.index(this))},function(){})})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
// when the DOM is ready, convert the feed anchors into feed content
jQuery(document).ready(function() {

jQuery(&#39;#newsslider&#39;).accessNews({

});

jQuery(&#39;#newsslider2&#39;).accessNews({
title : &quot;BREAKING NEWS:&quot;,
subtitle:&quot;stories from the internet&quot;,
speed : &quot;slow&quot;,
slideBy : 4,
slideShowInterval: 100000,
slideShowDelay: 100000
});

});
</script>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();jQuery(function(){jQuery("ul.menu-primary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(function(){jQuery("ul.menu-secondary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(document).ready(function(){jQuery(".fp-slides").cycle({fx:"fade",timeout:4000,delay:0,speed:400,next:".fp-next",prev:".fp-prev",pager:".fp-pager",continuous:0,sync:1,pause:1,pauseOnPagerHover:1,cleartype:true,cleartypeNoBg:true})});
/* ]]> */
</script>

Langkah 3 (Optional)
Kode untuk menampilkan hari, tanggal, bulan, dan tahun, letakkan kode berikut di bawah kode di atas :

<script type='text/javascript'>
//<![CDATA[
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December");function getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var h=a.getDay();var e=a.getMonth();var b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var c=a.getMinutes();var j=a.getSeconds();var d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var f="<font color='666666' face='Arial'>"+dayarray[h]+", "+montharray[e]+" "+b+", "+g+" "+i+":"+c+":"+j+" "+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}};
//]]>
</script>

Jika Anda memasang kode javascript untuk tampilan waktu di atas, maka kode <body> pada template harus diganti dengan :

<body onLoad='goforit()'>

Save/simpan template!

Langkah 4

1. Copy & Paste kode berikut ini di atas kode ]]></b:skin>

/* Slide Content  */

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;

word-wrap: break-word; overflow: hidden;} 

.slide {color: #666666;line-height: 1.3em;}

.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}

.slide li {margin:0;padding-top:0;

padding-right:0;padding-bottom:.25em;

padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

2. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut ini di bawahnya!

<b:if cond='data:blog.url == data:blog.homepageUrl'>

      <div id='slide-wrapper'>

<b:section class='slide' id='slide' preferred='yes'/>

      </div>

</b:if> 

Save Template!

Silakan kembali ke Dashboard Bloggger

Langkah 5

1. Klik "Layout" (Tata Letak) > "Add a Gadget" > pilih HTML/Javascript

2. Copy + Paste kode di bawah ini dan letakkan di kotak HTML/Javascript:

<ul id="newsslider">

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimzpbQNUf4qYciUutzBXJepgw9BegH8_5qV9eCnlOg2x59KQj-k0QZUQ4rrvD-TC1mL1xV9aYv995MWLpOfe49SZyF7pNVfgwc_HCxdyhWjnUa-rKohwP0PSFH5ky0WX1jIED1x8QO7QQe/s1600/emak.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
<p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more &raquo; </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqjCfWDVOb8yep1CWOYyuEMcQn8Ci7UZti0MM0xTY_IjqR_4b_mF2cv9X2VejYlT0Gl1uLd2iMmZJCkr-YQl9tpYQ9c3hkGLEjyHxn5unS5EJfaopt99KhQwI6-mhh8_DpvKCUUsPdKEt/s1600/hawa.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>

<p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
</li>

<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YrM4vjF2LTjVPT_TTMw4GWJ9FUOD4-Xs8Eu9b_IQfNgQ4cDywf9bSNpr0J825c90OA44WcpoPCyQDgSGS2cLnFEoMGuaG-uLnThTNqk6zSR9wPf-iHelP3ItjE4ElR_YPZNXqMjYNFVS/s1600/hawa+2.jpg" /></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
<p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIBNk61wVbd0niT9HXrRpIb6Lqbn9ICWvSrUH4qLNj8QYCo0gaE8y5dhtrd_xmYQoEcBvYNZCj88ocHeksh7pV8dkrsuGDMBcx1WOPV9wFAMxFQ6Wi9MiRsV4rxBXSiZeFzAkWlq5VzMG/s1600/youly+chang.jpg"/></a>

<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimzpbQNUf4qYciUutzBXJepgw9BegH8_5qV9eCnlOg2x59KQj-k0QZUQ4rrvD-TC1mL1xV9aYv995MWLpOfe49SZyF7pNVfgwc_HCxdyhWjnUa-rKohwP0PSFH5ky0WX1jIED1x8QO7QQe/s1600/emak.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
<p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more &raquo; </a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqjCfWDVOb8yep1CWOYyuEMcQn8Ci7UZti0MM0xTY_IjqR_4b_mF2cv9X2VejYlT0Gl1uLd2iMmZJCkr-YQl9tpYQ9c3hkGLEjyHxn5unS5EJfaopt99KhQwI6-mhh8_DpvKCUUsPdKEt/s1600/hawa.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
<p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
</li>

<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YrM4vjF2LTjVPT_TTMw4GWJ9FUOD4-Xs8Eu9b_IQfNgQ4cDywf9bSNpr0J825c90OA44WcpoPCyQDgSGS2cLnFEoMGuaG-uLnThTNqk6zSR9wPf-iHelP3ItjE4ElR_YPZNXqMjYNFVS/s1600/hawa+2.jpg" /></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
<p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIBNk61wVbd0niT9HXrRpIb6Lqbn9ICWvSrUH4qLNj8QYCo0gaE8y5dhtrd_xmYQoEcBvYNZCj88ocHeksh7pV8dkrsuGDMBcx1WOPV9wFAMxFQ6Wi9MiRsV4rxBXSiZeFzAkWlq5VzMG/s1600/youly+chang.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8nEcYUeNMSDrwrsxKwHzZeLHw2z884DqMD6mpmdxHfpW8XhtfIFAzkfgjDlIRqAp1k7N72jThUI0snIHaWQAO2XGJl-zpX6j94Q3sB4zJgPLIQhnrPyGDjf0suiqrOLGXERezae4JJ6x0/s1600/emak.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/oh-emak-oh-ibu.html">Oh Emak Oh Ibu</a></h3>

<p>5 tahun yang lalu waktu emak mengantarku ke terminal bus antar provinsi guna merantau dan berangkat kuliah ke Jakarta... <a href="#"> more &raquo; </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqjCfWDVOb8yep1CWOYyuEMcQn8Ci7UZti0MM0xTY_IjqR_4b_mF2cv9X2VejYlT0Gl1uLd2iMmZJCkr-YQl9tpYQ9c3hkGLEjyHxn5unS5EJfaopt99KhQwI6-mhh8_DpvKCUUsPdKEt/s1600/hawa.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
<p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
</li>

<li>

<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YrM4vjF2LTjVPT_TTMw4GWJ9FUOD4-Xs8Eu9b_IQfNgQ4cDywf9bSNpr0J825c90OA44WcpoPCyQDgSGS2cLnFEoMGuaG-uLnThTNqk6zSR9wPf-iHelP3ItjE4ElR_YPZNXqMjYNFVS/s1600/hawa+2.jpg" /></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
<p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIBNk61wVbd0niT9HXrRpIb6Lqbn9ICWvSrUH4qLNj8QYCo0gaE8y5dhtrd_xmYQoEcBvYNZCj88ocHeksh7pV8dkrsuGDMBcx1WOPV9wFAMxFQ6Wi9MiRsV4rxBXSiZeFzAkWlq5VzMG/s1600/youly+chang.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>

</li>

</ul>

Ganti huruf, kode, link, dan kalimat yang berwarna merah dengan versi Anda.

Itu dia Membuat Featured Post di Blogspot ala Yahoo!