Membuat Slideshow gambar Yahoo di Blog

Setelah jalan-jalan ke blog tetangga,akhirnya ketemu juga satu trik yang bagus untuk mendesain blog kita sehingga terlihat lebih menarik.Seperti judulnya kali ini kita akan membuat slideshow gambar seperti yang ada di Yahoo pada blog kita.Buat kalian yang saring mengunjungi yahoo.com pasti sudah tau bagaimana bentuk slideshow di sana.Slideshow gambarnya akan mendirect/mengarahkan kita pada artikel setelah di klik.Buat kalian yang belum tau bentuknya,contohnya seperti ini :

Contoh yahoo.com

Atau yang mau lihat demo blognya klik alamat ini http://www.johnytemplate.blogspot.com.Sebelum membuat kode ini,saya sarankan agar blogger tidak akan pusing melihat kode yang banyak ini.Sebenarnya cara memasangnya gampang (tinggal copy-paste),tapi pastikan semua kode kalian copy lengkap agar tidak terjadi kesalahan.Selain itu,saya sarankan untuk backup template anda dengan cara mengcopy semua kode edit HTML di blog kalian dan paste di notepad,microsoft word atau sejenisnya ini berguna jika terjadi kesalahan yang besar sehingga sulit untuk diperbaiki

Langsung saja

• Seperti biasa login ke akun blog kalian
• Kemudian masuk ke pilihan template (pada blog versi baru) 
• Lanjutkan pada edit HTML
• Cari kode ]]></b:skin> (Gunakan Ctrl + F )
• Copy kode berikut di atas kode ]]></b:skin> 

</* Yahoo Slider Wrapper<br /> ----------------------------------------------- */<br /> 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;}<br /> div.jqans-wrapper img {border: 0;}<br /> div.jqans-wrapper ul,div.jqans-wrapper li,div.jqans-wrapper h1,div.jqans-wrapper p {list-style:none;margin: 0;padding: 0;}<br /> div.jqans-wrapper {list-style:none;position: relative;overflow: hidden;}<br /> div.jqans-wrapper ul {position: relative;left: 0;width: auto;list-style-type: none;overflow: hidden;z-index: 1;}<br /> div.jqans-wrapper li {list-style:none;float: left;display: inline;}<br /> /* Yahoo Slider Content<br /> ----------------------------------------------- */<br /> div.jqans-wrapper.default .jqans-stories ul, div.jqans-wrapper.default .jqans-stories li {height: 110px;}<br /> div.jqans-wrapper.default .jqans-stories-selector ul, div.jqans-wrapper.default .jqans-stories-selector li {height: 10px;}<br /> div.jqans-wrapper.default, div.jqans-wrapper.default .jqans-container {width: 458px;background:#fff;}<br /> div.jqans-wrapper.default li {width: 115px;}<br /> div.jqans-wrapper.default a {text-decoration: none;font-weight: normal;color: #363636;outline: none;}<br /> div.jqans-wrapper.default strong {color: #000;}<br /> /* wrapper */<br /> div.jqans-wrapper.default {border: 1px solid #ccc;border-width: 1px 1px 0 1px;margin: 0 0 0.5em;}<br /> /* container */<br /> div.jqans-wrapper.default .jqans-container {min-height: 270px;text-align: center;padding-top: 4px;}<br /> div.jqans-wrapper.default .jqans-container a {font-weight: bold;color:#000;}<br /> div.jqans-wrapper.default .jqans-container img {width:438px;height:210px;}<br /> /* headline */<br /> div.jqans-wrapper.default .jqans-headline {text-align: left;margin-left:10px;margin-bottom: 4px;font:normal 13px Arial;}<br /> 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;}<br /> 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;}<br /> /* stories */<br /> div.jqans-wrapper.default .jqans-stories {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiveax9qACD0Oa5PrF-z-tzuiapCitT_zP0qlVFwTq8LKLCp9zpYZzsxaZF-ZTzt-Rf0hquZd-qRWkA2usyfkPc9C9vRfbGw49UVDpCdEYnpjy_FzhJ_ajrnLKdcg1kTJdODpzyF9J_Bqw/s1600/bg_stories.gif);background-repeat: repeat-x;background-position: top left;}<br /> div.jqans-wrapper.default .jqans-stories li {overflow: hidden;text-align: center;font-size: 11px;color: #fff;line-height:1.2em;}<br /> div.jqans-wrapper.default .jqans-stories li.selected {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijbqt26eF3mIlW1n9eTyAenQ6PE9KNbw43r43VJ7Da1x7g_6bZhNqNrrQuhNVeOi87YJSkFUutaHaIz1eWMOOHRk6k7C8aNwn4hd1yqk1uzMjcvXfGEq1WwDCbOlXPjwqJRlLXRAdLVgg/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}<br /> div.jqans-wrapper.default .jqans-stories li.selected a {color:#fff;}<br /> 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;}<br /> div.jqans-wrapper.default .jqans-stories li p {display: none;}<br /> div.jqans-wrapper.default .jqans-stories li h3 {margin:0;padding:1px 10px;color:#000;<br /> font-size:11px;font-weight:normal;font-family:Arial;height:28px;overflow:hidden;line-height:1.2em;}<br /> div.jqans-wrapper.default .jqans-stories-selector li.selected div {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijbqt26eF3mIlW1n9eTyAenQ6PE9KNbw43r43VJ7Da1x7g_6bZhNqNrrQuhNVeOi87YJSkFUutaHaIz1eWMOOHRk6k7C8aNwn4hd1yqk1uzMjcvXfGEq1WwDCbOlXPjwqJRlLXRAdLVgg/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}<br /> /* pagination */<br /> 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;}<br /> div.jqans-wrapper.default .jqans-pagination-count {float: left;font:normal 11px Arial;color:#666;}<br /> div.jqans-wrapper.default .jqans-pagination-controls {float: right;}<br /> 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;}<br /> div.jqans-wrapper.default .jqans-pagination-controls-back a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFUftgdYCNLe8HllkvUwHUBQwthXdlCr0kiCWgaaM5A3jsdYx1jn5Z7M7EenfhQwx42A6jbp0cJ_NjIQZLvS6aQmGpYg2OyL9ddpcH9AJPiW60ir4cTp5Xo5qAs7rMc2EOGd-jmLMi-w0/s1600/previous.gif);}<br /> div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZd9toX0aXL32_dnu_YphWfIIy2Tcasq2iZHQXJBaMzbYSMlGh4uv6wSjF6yUdAEy1XOmqtY8oY1WpQubH1r_5dM-5PxcrR6cAzoc_y53fB7LlAh35LZ3xvF6EEdUlRhBSHt6hMPkLpLk/s1600/next.gif);}>

• Setelah copy kode di semua kode di atas,cari kode </head>
• Copy dan paste kode berikut 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"><< Back</a></span><span class="jqans-pagination-controls-next"><a href="#" title="Next">Next >></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><br /> <script type='text/javascript'> // when the DOM is ready, convert the feed anchors into feed content jQuery(document).ready(function() { jQuery('#newsslider').accessNews({ }); jQuery('#newsslider2').accessNews({ title : "BREAKING NEWS:", subtitle:"stories from the internet", speed : "slow", slideBy : 4, slideShowInterval: 100000, slideShowDelay: 100000 }); }); </script><br /> <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>

• Oke lanjutkan cari kode <body> dan ganti dengan kode ini <body onLoad='goforit()'>
• Langkah selanjutnya,kalian harus membuat kolom add gadget di bawah header caranya cari kode ]]></b:skin> kemudian letakkan kode ini di atas kode tadi 

/* Slide Content <br /> ----------------------------------------------- */ <br /> .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; <br /> word-wrap: break-word; overflow: hidden;} <br /> .slide {color: #666666;line-height: 1.3em;} <br /> .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} <br /> .slide li {margin:0;padding-top:0; <br /> padding-right:0;padding-bottom:.25em; <br /> padding-left:0px;text-indent:0px;line-height:1.3em;} <br /> .slide .widget {margin:0px 0px 6px 0px;}

• Kemudian cari lagi kode <div id='main-wrapper'> dan letakkan kode berikut di bawahnya 

<b:if cond='data:blog.url == data:blog.homepageUrl'> <br /> <div id='slide-wrapper'><b:section class='slide' id='slide' preferred='yes'/> <br /> </div></b:if>

• Setelah itu simpan templatenya.Kemudian masuk lagi ke tata letak 
• Kemudian pilih add gadget di atas header dan pilih HTML/Javascript.Paste kode ini di kolom konten
• <ul id="newsslider">
  
  <li>
  <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAGsdIU0bishVYf5vUOJ8gHoRcaNxdLveL7U2wMFTYclXsc9aqw6S2f4kgpDwv8JMZj27AsO9qfw7BE_CoryUPKruPB6KtfLx0lySJ1l-vV_fYjG5_-MobiAd5zav8a5lMsg7fimRYAPrs/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/AVvXsEhaCnw05riOuk7NZgUtIoX__o96hDrObNJSkwVI9TAJ9Hn4iCeaMa8MLZyYn9LSvf4gsdCafWuegqdC0CvxFDPgwIF88-9rIDBZ4887WJflyknoRqRK-PGP_Ng4c6hT6xhiUffPuoM44sCd/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/AVvXsEhkjlULP7jDuXNQ6r1VJN9UxvyrGDfolfrYYaYAnX2Uc-Nxg8Y0VKd8bfssAG4zSdewVHPPqwvr6eylQaLyDN0My8OTVvLLu3rw5y9I6r637qbPLvNfAC5a1Usm_CMPdZwVbC9VpehxMqdD/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/AVvXsEjZ3rHF9biis6iiH-WUYoNDbnjou4m2Vj2XBtkJuVzJbU1w93oDFdP3HdEVbKWHQ87oMrRucUtQjASt1-LB7lQL-nulPvSk5ZvBOLsoRaGRSIGyYRJh2xKijLSPH4yQ3sLGBDzs85WOlfET/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/AVvXsEhAGsdIU0bishVYf5vUOJ8gHoRcaNxdLveL7U2wMFTYclXsc9aqw6S2f4kgpDwv8JMZj27AsO9qfw7BE_CoryUPKruPB6KtfLx0lySJ1l-vV_fYjG5_-MobiAd5zav8a5lMsg7fimRYAPrs/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/AVvXsEhaCnw05riOuk7NZgUtIoX__o96hDrObNJSkwVI9TAJ9Hn4iCeaMa8MLZyYn9LSvf4gsdCafWuegqdC0CvxFDPgwIF88-9rIDBZ4887WJflyknoRqRK-PGP_Ng4c6hT6xhiUffPuoM44sCd/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/AVvXsEhkjlULP7jDuXNQ6r1VJN9UxvyrGDfolfrYYaYAnX2Uc-Nxg8Y0VKd8bfssAG4zSdewVHPPqwvr6eylQaLyDN0My8OTVvLLu3rw5y9I6r637qbPLvNfAC5a1Usm_CMPdZwVbC9VpehxMqdD/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/AVvXsEjZ3rHF9biis6iiH-WUYoNDbnjou4m2Vj2XBtkJuVzJbU1w93oDFdP3HdEVbKWHQ87oMrRucUtQjASt1-LB7lQL-nulPvSk5ZvBOLsoRaGRSIGyYRJh2xKijLSPH4yQ3sLGBDzs85WOlfET/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/AVvXsEixVqj5KVym_3-LWLGtfEGwOsj2YCn6r9SQwSpWG4UL8IOfXySRIdhf9p4igfIq4xXbVLHyQadkP7Q6vY3ASXbzLSzwZx5nmTsYd6zMEot4carwVjaFY-DHPCKIkf6ofVBF9GRHoESywfQr/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/AVvXsEhaCnw05riOuk7NZgUtIoX__o96hDrObNJSkwVI9TAJ9Hn4iCeaMa8MLZyYn9LSvf4gsdCafWuegqdC0CvxFDPgwIF88-9rIDBZ4887WJflyknoRqRK-PGP_Ng4c6hT6xhiUffPuoM44sCd/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/AVvXsEhkjlULP7jDuXNQ6r1VJN9UxvyrGDfolfrYYaYAnX2Uc-Nxg8Y0VKd8bfssAG4zSdewVHPPqwvr6eylQaLyDN0My8OTVvLLu3rw5y9I6r637qbPLvNfAC5a1Usm_CMPdZwVbC9VpehxMqdD/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/AVvXsEjZ3rHF9biis6iiH-WUYoNDbnjou4m2Vj2XBtkJuVzJbU1w93oDFdP3HdEVbKWHQ87oMrRucUtQjASt1-LB7lQL-nulPvSk5ZvBOLsoRaGRSIGyYRJh2xKijLSPH4yQ3sLGBDzs85WOlfET/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 kode wana biru dengan URL gambar
• Ganti kode warna merah dengan URL Post
• Ganti kode warna pink dengan Ringkasan Post
• Ganti kode warna hijau dengan judul Post
• Lakukan itu pada kode berikutnya
• Kemudian save template