OPTIMASI BLOG 3: Desember 2011

Johny Portal, Template untuk Situs Berita

Untuk temen-temen yang ingin membuat blog/situs berita, saya ada satu template keren yang mungkin cocok dipasang di blog anda. Langsung saja ya, karena sudah malem ngantuk nih besok mesti kerja. Di bawah ini screenshotnya (klik gambar untuk memperbesar) :

Bagian Header

Bagian Footer

Cara pasangnya sangat mudah tinggal filenya diekstrak dulu, kemudian upload. Jika ada yang masih bingung nanti saya buat tutorialnya. Malam semua.... zzzzzzzzzzzzzzzzzzzz.

Kode script untuk slider

Ganti semua URL gambar dan judul dengan url yang ingin anda tampilkan dalam slideshow

Kode Script untuk Label/kategori sidebar
Masukkan kode di bawah ini ke dalam kotak HTML/Javascript :

Ganti entertainment yang saya kasih warna biru dengan label/kategori yang anda inginkan. Perhatikan angka yang saya lingkari dari gambar di atas, angka 4 adalah jumlah kategori yang ditampilkan dan 60 adalah jumlah karakter huruf yang ditampilkan dalam satu judul, untuk lebih jelasnya anda silahkan baca tutorial cara memasang kategori tertentu dengan thumbnail. Oya jangan lupa dikasih judul widget, contoh : Entertainment

Mengganti kotak pencarian (search) adsense

Anda harus membuat kotak pencarian Google Adsense terlebih dahulu di akun Adsense anda. Kemudian setelah membuatnya, cari kode di bawah ini (dibawah kode <div style="float: right; padding: 0px 6px 0pt 0pt;"> )

Ganti dengan kotak pencarian Adsense dengan yang sudah Anda buat, jangan lupa kodenya di parse dulu

Mengganti Adsense di postingan
Cari kode ini, letaknya di bawah kode ini <div style="color: #333333; font: italic 12px Georgia; margin-top: 10px; padding: 8px 10px 8px 70px;">

Setelah ketemu ganti dengan kode adsense anda ukuran 468 x 60 (kode adsense di parse dulu)

Updates :

Mohon maaf sebelumnya, karena banyak sekali kekurangan dari template ini, saya memodifikasi lagi agar lebih dinamis dan mudah dipakai. Slider pada template ini dirubah menjadi otomatis, jadi anda tidak perlu lagi untuk memasukkan keterangan dan URL nya satu persatu, tinggal mengganti kategori yang ingin dimasukkan pada slider. Untuk keterangan lebih lengkap ada disini. Pengaturan kolom juga lebih tertata rapi. Saya menghilangkan kotak feedburner dan related post di bawah postingan, karena banyak sekali pengguna yang meminta untuk dihilangkan saja. Untuk selanjutnya Anda bisa download ulang link yang ada di bawah.

Updates :

Karena sesuatu hal, tempat penyimpanan saya di google code tidak bisa dibuka. Oleh karena itu news ticker pada template ini tidak bisa berjalan seperti semula. Untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML, kemudian cari kode di bawah ini :

<script src='http://maskolis.googlecode.com/files/ticker.js' type='text/javascript'/>

dan Anda ganti dengan kode berikut :

<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>

Terakhir save templates

Note :

If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger
And for Johny Portal, Creating Website and Johny Magazine user template, change this code (post body close to the header):
```
#crosscol-wrapper{margin:0 auto;padding:0 auto}
```
Into :
```
#crosscol-wrapper{margin:0 auto;padding:5px}
```

Demo | Download

NewsPaper Times Magazine Theme Wordpress dari Magazine3

Seperti janji saya pada artikel sebelumnya, kali ini saya akan mereview satu lagi theme wordpress yang tak kalah menarik dengan Newsworld Theme. Fiturnya juga lengkap (lihat di bawah), kelebihan dari theme ini loadingnya ringan dan tidak ada plugin yang mesti dipasang untuk mensupport tampilan theme ini. Secara umum Wordpress sekarang lebih dari sebuah aplikasi blogging sederhana. Sehingga dapat digunakan untuk menjalankan situs web lengkap, sama seperti Content Management System (CMS) lainnya. Anda dapat membuat fitur penuh, konten berat, situs berita atau situs majalah online pada platform Wordpress.

Newspapertimes adalah premium Wordpress Theme dengan tata letak yang unik dan skema warna yang menarik. Muncul dengan pilihan warna lengkap yang akan membuat Anda dengan mudah mengubah tampilan setiap masing-masing blok kategori. Selain itu, Newspapertimes dilengkapi dengan panel pilihan theme khusus, dimana Anda dapat mengedit atau memodifikasi berbagai pilihan seperti perubahan logo, setup fitur kategori, penyesuaikan navigasi, dan mengelola iklan. Tiga halaman kustom template dapat Anda digunakan dengan mudah untuk menambahkan contact form, dan halaman sitemap arsip penuh ke situs. Demo yang saya buat dengan menggunakan fasilitas domain dan hosting gratisan menggunakan Theme ini bisa dilihat disini.

Berikut ini fitur lengkap dari Newspapertimes :

Premium News or Magazine Style WordPress Theme.
Unique front page layout.
Widgetized areas.
Featured content slider.
Attractive news ticker.
Beautiful color scheme.
Custom page templates.
Custom logo and background option.
WordPress 3.0 compatible navigation.
Theme control panel.
Advanced color options.
Automatic Thumbnails.
Unique popular posts widget.
Threaded comments.
Related Posts With Thumbnails.
Social bookmarking module.
Advertisement Options.
Optimized for search engines.
Compatible with latest version of WordPress.
Works on all modern web browsers.

Jika anda masih kurang yakin dengan kecepatan loading dari theme ini, bisa dilihat demo yang sudah saya modifikasi navigasi menunya disini. Untuk lebih jelasnya anda bisa juga melihat demo asli pada link di bawah. Dan anda juga bisa mendownloadnya secara gratis.

Demo :

http://magazine3.com/newspapertimes/demo/

Download :

http://www.mediafire.com/?4z8iz8ug8970gu9

Newsworld Theme Wordpress dari Deluxe Themes

Jika teman-teman ada yang menginginkan theme wordpress untuk portal berita yang komplit dengan bermacam-macam fitur yang dilengkapi dengan slider gambar yang menarik. Saya sarankan untuk memakai Newsworld Theme dari Deluxe Theme. NewsWorld adalah theme Wordpess premium yang unik dari Deluxe Theme, NewsWorld memungkinkan Anda untuk menjalankan sebuah portal berita hanya dalam beberapa menit. Dengan tambahan fitur ajax secara otomatis theme ini akan merefresh halaman.

Di samping itu theme ini juga menampilkan arsip yang ditampilkan dengan dua metode yang berbeda. Bagi yang suka memonitisasi blog theme ini sangat cocok karena theme ini juga dilengkapi beberapa kolom yang dipakai untuk memasang iklan, seperti di header, di bawah header juga bisa diletakkan di footer. Anda tinggal masukkan kode iklan yang diinginkan tidak perlu lagi untuk mengedit kode-kode yang ada di dalam style.css maupun kode php nya. Dengan menggunakan fasilitas domain dot.tk dan hosting gratisan dari 000webhost, saya juga sudah membuktikan theme ini disini, sedikit modifikasi pada header.php dan single.php tampilan blog menjadi lebih menarik.

Berikut ini adalah fitur lengkap yang ditawarkan Newsworld theme :

Original PSD Template Included!
Control panel to manage theme options
Simple Installation (instructions, how-to guide included)
A unique blog layout featuring a super presentation of blog posts
One of a kind News Filter Module to browse all blog posts.
Ajax-powered Archive Template with various display options
12 different sorting options
Unique content tagging for news, photo, or video content
Ajax Pagination in Archives
Custom comment pagination system included
Automatic Thumbnail Creation & Caching
Ad Manager module built-in, ad rotation, ad monitoring, and more
Custom photo gallery template
QuickVideo Publisher to post videos from 60+ video sites easily
Fully-widgetized Sidebar (no hardcoded widgets)
Custom widgets to show weather, galleries, advertisements, etc.
Compatible with WordPress 3.0 or higher
Compatible with all modern browsers

Fiturnya sangat lengkap dan cocok untuk blog portal berita, kelemahan pada theme ini adalah pada loadingnya yang cukup lamban karena banyak plugin yang mesti diinstal seperti WP-Postrating, WP-email dan lain-lain. Tetapi bagi Anda yang sering bermain dengan kode-kode PHP hal itu tak terlalu sulit karena Anda bisa mempercepat loading misalnya menghemat Quota Bandwidth dengan HTTP Compression atau melalui penggabungan style.css, atau bisa juga dengan menambah kecepatan loading dengan memasang plugin seperti WP Super Cache atau W3 Total Cache dan sejenisnya.

Oke, dibawah ini saya lampirkan dimana Anda dapat melihat demonya dan bisa mendownloadnya secara gratis, jika ada kesulitan dalam memasang theme ini bisa dikonsultasikan lewat email saya. Pada artikel selanjutnya saya akan mereview satu theme lagi yang tak kalah menarik dengan Newsworld yaitu Newspapertimes dari Magazine3

Updates :
Theme newsworld yang saya share diatas adalah versi v1.0.1, setelah saya mengikuti perkembangan di forum Deluxetheme ternyata theme ini sudah di updates. Untuk itu silahkan download ulang theme ini di link ini untuk versi v1.0.2. Disitu lengkap dengan plugin-plugin yang harus anda instal beserta PSD nya, semoga dapat membantu.

Demo :

http://deluxethemes.com/newsworld/

Download :

http://www.mediafire.com/?1s6cbuacy1y7ibh (v1.0.1)
http://www.mediafire.com/?uayj11s96th6itv (v1.0.2)
http://www.mirrorcreator.com/files/WENDUACB/newsworld.zip_links

Membuat Breaking News Menarik Dibawah Navigasi Menu

Pada artikel kali ini saya akan menjelaskan bagaimana membuat breaking news atau berita berjalan yang biasanya terdapat di bawah navigasi menu pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang breking news dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda.

Pertama kali saya melihat tampilan breaking news ini pada template Sporty Magazine 2 buatan Borneo Template, waktu itu template masih berbayar sekarang sepertinya sudah gratis di download. Disini saya akan memodifikasi sedikit tampilannya sehingga tampilannya seperti tampak pada gambar diatas, demonya anda bisa lihat disini. (http://martin-big.blogspot.com)

Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya :

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>

/* News Ticker Wrapper
---------------------------------------------*/
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu9i-eJhZIyY9O9Fng_kD9-F8jBzMkw1PKnOiJqkqyG8ck47nDmS_84ckYAV_pIfrwQRRGLxoKwx3h5R6dC1di5mmZsIIMc9JMgi2mxj2uX1Zibgr3BC-RmD3kVZxvIBXPk4FsoLx5J4E/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

Kemudian cari kode dibawah ini, atau kode yang biasa dipakai untuk meletakkan navigasi menu

<div class='menu horizontal'>
...........................................
...........................................
</div>

Jika sudah ketemu letakkan kode berikut tepat dibawah kode </div> yang dipakai untuk menutup kode navigasi menu pada template Anda.
<div class='newspic'>

<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://maskolis.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
Ganti URL yang saya beri warna merah dengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung saja disini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode (bener nggak sih ngomongku...... )
Langkah terakhir save/simpan, lihat dibawah navigasi menu anda, kalau cara memasangnya sudah benar pasti akan muncul breaking news itu.

Agar lebih ramping simpan kode javascript newsticker diatas (no.5) di tempat penyimpanan googlecode Anda. Mudah kan? Jika ada yang mau ditanyakan silahkan isi pada kolom komentar dibawah. Selamat mencoba dan semoga bermanfaat.

Membuat Slideshow Gambar Ala Yahoo

Meskipun sudah lama sekali saya tidak menulis karena banyak sekali kesibukan, kali ini saya akan menyempatkan waktu untuk berbagi dengan teman-teman semua mengenai cara membuat slide gambar seperti yang biasa kita lihat di id.yahoo.com. Sebelumnya saya sudah pernah membahas tentang memasang gambar slide ala drakon template dan zinmag primus, bagi yang belum menyimak bisa dilihat kembali.

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.

Gambarnya kira-kira seperti diatas, jika anda ingin melihat demonya bisa dilihat disini. Bagaimana? Jika temen-temen tertarik untuk memasang slideshow ala Yahoo di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan. Kalau sudah terbiasa sih, pasti gampang. Paling tidak patut dan layak untuk dicoba.

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/AVvXsEj1oZwdgzZZ5VEIEJZyiw7g1dccuEkFIwK3tvbXkhVwHvioZj56Q9p73nRbFZDS1bN1neH01ovAUZomeS5lYcml35hiy2DbcsS4Jn7BLlfAVuhmnUmfcBh1IIS-p2w-wSVSUu6WD5m7bkI/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/AVvXsEh3YlKfTj2eokWLoGyax2dBHmjXpz7AwEagvBDiQiB0s8JHeSh_cEkx9Qz10NmlEwIZazt0kBGXL1koZ00Nzpe2ApguhJpH3B_A733UgeRBQClBvuyFQY2dpbilSg5N7qM7xQI6QZ0El2A/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/AVvXsEh3YlKfTj2eokWLoGyax2dBHmjXpz7AwEagvBDiQiB0s8JHeSh_cEkx9Qz10NmlEwIZazt0kBGXL1koZ00Nzpe2ApguhJpH3B_A733UgeRBQClBvuyFQY2dpbilSg5N7qM7xQI6QZ0El2A/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/AVvXsEhX-DY0pITqfNe1OgOe880cP4hehpICTzRvPTPqCua7LNa3z4ixS0St-QoQTxS2Y9tJrgdCVpWBAVfR9UJdtKYE_33mNoR3ZTMVpCVZchefq8OKFCjom9i1eRhc0M28oYvj9rgdzGcXQlI/s1600/previous.gif);}
div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_wOjd6BohRB3CQbd5djgXXCknYZql9ArjkOVuYZJn39Tt3HQasfDRYA23M_SbTSQxyO0Xcd8Y2DLHnV7ZNE5gPaf16TjnA26W89d-YLdkecaZfml2ZEj1HizobLTyztmFY01mqrKeac/s1600/next.gif);}

Langkah Kedua

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 yang ada di demo, 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

Langkah Ketiga

Sekarang anda harus membuat satu kolom di atas postingan untuk meletakkan kode slide nantinya. Langsung saja letakkan kode berikut 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;}

Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

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

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/Javascript
<ul id="newsslider">

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqH730Jh-5tK_Vo3tUNItzN0El8DGjQ1FOj9GZabUBmnAMEdy_LbFYDeo7DRS3EfazVh9HPd0fvq4I_acpPh51hZ1trcBdSF-jEl6HThYlZPyLHjcw2Rt-WKl4XSeg19iy-EVURsl3Xel3/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/AVvXsEhz1UxGmzm5DF6L8_3gZAWXmkAs6pOVA4VAcpMCNJzVzsXg0KQF5qFTVP9aJO3BPrp_1R_Uk9OHb8BP2kQ8SU9dhkL9OlsuIhGyFDFlLEMamNnazk8D3cWx39Rn5e10N6TIXw0A533suXe0/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/AVvXsEhJMFl0W2n7gg2rWi9oanewAip02wActNrslts00ZvfXFIskejom2QMJOHLRl_FAJpNuL3a6brIXSK8ZCaGPg4EE2O9_MMjbNwyROM_xj4GGE06gvr97HW86drRWLX2PbPjo27owyE8ewJj/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/AVvXsEgIUtLzceGyOvqRhlCtgCRnsYD9jALMpUEr2eLdrRUYzyy90Txl3LXtLWxXbtKp1IMe233Gp3XWrXMC854ryOryMaWCPPe4xKN56blSd8MzT6ReNTD9JBSeNPXxGYo5t4dmXlEnoz6_p2qw/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/AVvXsEhqH730Jh-5tK_Vo3tUNItzN0El8DGjQ1FOj9GZabUBmnAMEdy_LbFYDeo7DRS3EfazVh9HPd0fvq4I_acpPh51hZ1trcBdSF-jEl6HThYlZPyLHjcw2Rt-WKl4XSeg19iy-EVURsl3Xel3/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/AVvXsEhz1UxGmzm5DF6L8_3gZAWXmkAs6pOVA4VAcpMCNJzVzsXg0KQF5qFTVP9aJO3BPrp_1R_Uk9OHb8BP2kQ8SU9dhkL9OlsuIhGyFDFlLEMamNnazk8D3cWx39Rn5e10N6TIXw0A533suXe0/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/AVvXsEhJMFl0W2n7gg2rWi9oanewAip02wActNrslts00ZvfXFIskejom2QMJOHLRl_FAJpNuL3a6brIXSK8ZCaGPg4EE2O9_MMjbNwyROM_xj4GGE06gvr97HW86drRWLX2PbPjo27owyE8ewJj/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/AVvXsEgIUtLzceGyOvqRhlCtgCRnsYD9jALMpUEr2eLdrRUYzyy90Txl3LXtLWxXbtKp1IMe233Gp3XWrXMC854ryOryMaWCPPe4xKN56blSd8MzT6ReNTD9JBSeNPXxGYo5t4dmXlEnoz6_p2qw/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/AVvXsEiPC75sutQ5fTXPEY7IEFtPjPKq4NyhPI6qPXIKedwraITozENKZ-z1st8fcNGz5ejhNbM9WHKs8PW5_njBcUxJdjx9FIdkGmxPFK65JqEsTs5qxo8bc7IsHGlYbMqYQzKRAwhX4TpIXmmm/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/AVvXsEhz1UxGmzm5DF6L8_3gZAWXmkAs6pOVA4VAcpMCNJzVzsXg0KQF5qFTVP9aJO3BPrp_1R_Uk9OHb8BP2kQ8SU9dhkL9OlsuIhGyFDFlLEMamNnazk8D3cWx39Rn5e10N6TIXw0A533suXe0/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/AVvXsEhJMFl0W2n7gg2rWi9oanewAip02wActNrslts00ZvfXFIskejom2QMJOHLRl_FAJpNuL3a6brIXSK8ZCaGPg4EE2O9_MMjbNwyROM_xj4GGE06gvr97HW86drRWLX2PbPjo27owyE8ewJj/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/AVvXsEgIUtLzceGyOvqRhlCtgCRnsYD9jALMpUEr2eLdrRUYzyy90Txl3LXtLWxXbtKp1IMe233Gp3XWrXMC854ryOryMaWCPPe4xKN56blSd8MzT6ReNTD9JBSeNPXxGYo5t4dmXlEnoz6_p2qw/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>
Keterangan :
- Warna biru : URL image
- Warna merah : 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

Ribet banget ya, kalau ribet nggak usah dipasang masih banyak slider lain yang lebih gampang cara memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya memberikan alternatif lain untuk menghias blog agar tampak lebih menarik. Jika teman-teman sering meringkas kode javascript yang terlalu panjang di googlecode, sebaiknya diringkas saja selain terlalu panjang juga akan meringankan loading blog anda. Selamat mencoba dan berpusing ria jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang Insya Allah saya jawab.

* Slider source by Borneo Template and plugin Yslider for Wordpress by Andrea Ferracani