Banyak saya temui blog yang sudah memakai animasi image slider dengan berbagai macam variasi. Blog akan semakin menarik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider Yahoo ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun bisa menyesuaikannya pada desain template blog masing-masing.
Langkah Pertama
- Login ke blogger dengan akun anda
- Kemudian klik Tata Letak > pilih Edit HTML
- Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
- 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/AVvXsEjDSOeHPdwtoMrDZynmplG8KrbELDZrBqRXHinFEqndHIvdzDcxq_2mT7mkz7s8EYS6QPpx1RB6pCFyqQY_OcDieI8YBP8ClR8AisAgoS62JPGVNQT9aEale_78OzrS6MOywg5t_Kz-SDk/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/AVvXsEjIv94Ybebycl5TCtDIT7on5rX_J-5u-6ltEMYgRQ8XZnFSjByVU_8wvgKjcn_WmcL_VKkwpesI7HUVZ3cM9bEkkZPxPIqeREYsPfwLfZVIaFhIqL3PUwnfRtHY6x6yBFPT6_hTwUMZQlQ/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/AVvXsEjIv94Ybebycl5TCtDIT7on5rX_J-5u-6ltEMYgRQ8XZnFSjByVU_8wvgKjcn_WmcL_VKkwpesI7HUVZ3cM9bEkkZPxPIqeREYsPfwLfZVIaFhIqL3PUwnfRtHY6x6yBFPT6_hTwUMZQlQ/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/AVvXsEi50mxmLQXC2-i4wdN44MKNcdl0PCR0hK-9tKXX7rZRnqQ3BWX4604mml2WyeZfFUovh8r6a6cDGepVHAwy4qm_HkJ9hq8lWI59xInlk6uoxCarMuGIolq_9n29mqkk451oJUETnmPMY3g/s1600/previous.gif);}
div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioLUTDffxacICsvx_xL_9s_KQ6apr5FZkk5O0O7cbmlUdtCxLeUBo9bv-Pp1Lbm36IY5kOdeZtvwAD4KI21PvOFOtJlXIbAW7L-ksUK4e_4mtqyGs_E46pjEvSWE-6_Pcfvkavv7x0liU/s1600/next.gif);}
- 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"><< 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>
<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>
<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> - Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti gambar diatas, letakkan kode berikut di bawah kode diatas :<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> - Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :
<body onLoad='goforit()'> - Save/simpan template terlebih dahulu sambil sejenak istirahat, sabar ya siapkan secangkir kopi atau teh biar agak adem sambil mendengarkan musik kesukaan anda. Masih ada satu langkah lagi
- Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
- Klik Tambah Gadget >> pilih HTML/Javascript
- Copy kode di bawah dan letakkan di kotak HTML/JavascriptKeterangan :<ul id="newsslider">
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSdI2E8A52d0JC4vtPjT1WE1UtXkPtLwKpKw_0gji_iKY0YI3mvWmoRXedGAyemVxtXYi3Nj-sJ5k0pRoLNSpxd7MNbqHc_wEkv4U_8FGm1UqAAtmLJSiwgrI5Wmmc5n7DheaDXG8gJrm/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 » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGPc6QgWAjUAukyUqYiwDtQ9qDyjaR_aEkpORrggwGvGxWYMDC8Anh0mrjdZ8rTELIzyFVR76SCFg5KPrkui7pxCM_2o3aTXVVCeqKkdE0AUfz5btUdWVrPYBZAQsMBgIpBtvBsx-UCNW/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 »</a></p>
</li>
<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzFBTRk9TuuO1mRLM9v6eKwjjGtCKdTjBUlYOerQEWa1lcoP6diU7o5jkrzU6H-JyABbNN6Pxmmm0Xm_f18Km-0HPxmQ4-fLIN4xR551aHM8RvhCVJrX0WSKRbT7ZVHTy6tJdJpMrhjtq/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 »</a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHNdQC3ZZCK_j3ZwIOSO01T3o8_4BNkCOI2WiwKLgOX7bLBjI0qoD8xRDw_DKjIuDG9GumLu1ovYme-W342pr7d-lypFnyhQVMTjk2nJoiPtrauQ8O7pOLjPHx5eRkU_x5YDIbnrorraA/s1600/youly+chang.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay… </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSdI2E8A52d0JC4vtPjT1WE1UtXkPtLwKpKw_0gji_iKY0YI3mvWmoRXedGAyemVxtXYi3Nj-sJ5k0pRoLNSpxd7MNbqHc_wEkv4U_8FGm1UqAAtmLJSiwgrI5Wmmc5n7DheaDXG8gJrm/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 » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGPc6QgWAjUAukyUqYiwDtQ9qDyjaR_aEkpORrggwGvGxWYMDC8Anh0mrjdZ8rTELIzyFVR76SCFg5KPrkui7pxCM_2o3aTXVVCeqKkdE0AUfz5btUdWVrPYBZAQsMBgIpBtvBsx-UCNW/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 »</a></p>
</li>
<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzFBTRk9TuuO1mRLM9v6eKwjjGtCKdTjBUlYOerQEWa1lcoP6diU7o5jkrzU6H-JyABbNN6Pxmmm0Xm_f18Km-0HPxmQ4-fLIN4xR551aHM8RvhCVJrX0WSKRbT7ZVHTy6tJdJpMrhjtq/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 »</a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHNdQC3ZZCK_j3ZwIOSO01T3o8_4BNkCOI2WiwKLgOX7bLBjI0qoD8xRDw_DKjIuDG9GumLu1ovYme-W342pr7d-lypFnyhQVMTjk2nJoiPtrauQ8O7pOLjPHx5eRkU_x5YDIbnrorraA/s1600/youly+chang.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay… </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9lhJFUWq3lpwJ71a_3yLjxokwn2nJcSa4OrJTXPZr1dwb1DazVHxPQtDXodnOX447_cE3Mica5oRtrjxSbVve0-HMowdPVqVYv7mqTy7DoSY7y2QIZvGSfYUQiFf7cS5baK8fruh5Fks/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 » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGPc6QgWAjUAukyUqYiwDtQ9qDyjaR_aEkpORrggwGvGxWYMDC8Anh0mrjdZ8rTELIzyFVR76SCFg5KPrkui7pxCM_2o3aTXVVCeqKkdE0AUfz5btUdWVrPYBZAQsMBgIpBtvBsx-UCNW/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 »</a></p>
</li>
<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzFBTRk9TuuO1mRLM9v6eKwjjGtCKdTjBUlYOerQEWa1lcoP6diU7o5jkrzU6H-JyABbNN6Pxmmm0Xm_f18Km-0HPxmQ4-fLIN4xR551aHM8RvhCVJrX0WSKRbT7ZVHTy6tJdJpMrhjtq/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 »</a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHNdQC3ZZCK_j3ZwIOSO01T3o8_4BNkCOI2WiwKLgOX7bLBjI0qoD8xRDw_DKjIuDG9GumLu1ovYme-W342pr7d-lypFnyhQVMTjk2nJoiPtrauQ8O7pOLjPHx5eRkU_x5YDIbnrorraA/s1600/youly+chang.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay… </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more » </a></p>
</li>
</ul>
- Warna biru : URL image
- Warna pink : URL post
- Warna kuning : Ringkasan post
- Warna hijau : judul post - Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
- Kemudian save/simpan template selesai sudah