dodit

dodit

dodit

Tag Robot Khusus

 

penampilan dodit yang sangat keren dan lucu di tvsuwasta

logger, Template, Evo Magz: Template Blogger Keren Responsive & SEO Friendly

logger, Template, Evo Magz: Template Blogger Keren Responsive & SEO Friendly

logger, Template, Evo Magz: Template Blogger Keren Responsive & SEO Friendly

Halo.. sahabat Blogger apa kabar? Blogger Peer kembali lagi setelah lama menghilang tentunya dengan desain dan tampilan yang baru. Terima kasih selama ini telah berkunjung ke blog ini dan mohon maaf kalau komentar anda semua tidak sempat saya balas, karena kesibukan saya dalam pekerjaan dan waktu istirahat sedikit jadinya untuk nyalurin hobby untuk nge-blog juga sedikit. Okey.. sesuai dengan judul post ini Evo Magz: Template Blogger Keren Responsive & SEO Friendly adalah template yang saya pakai di bloggerpeer.blogspot.com sekarang, kenapa saya memakai template Evo Magz? karena saya sangat suka dengan tampilan elegan, simple, fast loading, SEO friendly dan responsive dari Evo Magz Blogger magazine theme ini. Saya banyak ketinggalan dari teman-teman Blogger yang lainnya dalam perkembangan dunia Blog dan SEO, apalagi sekarang menggunakan template HTML5, menerapkan Schema.org markup dan responsive design adalah hal yang sangat direkomendasikan oleh semua search engine termasuk Google yang tentunya sangat berpengaruh positif pada perkembangan SEO pada blog (Onpage SEO) dan agar bisa terindeks cepat oleh search engine dan juga agar mobile friendly karena sekarang ini hampir 75% orang-orang menggunakan internet dengan mobile ataupun tablet. Mungkin ada yang bertanya kenapa template yang dulu saya ganti? dan kenapa tidak di-edit saja sendiri agar bisa responsive? padahal template itu tampilannya lumayan bagus, jawabannya adalah sederhana template saya yang dulu tidak memakai HTML5, tidak responsive, tidak memakai Schema markups dan juga skill saya dalam hal designing dan waktu untuk meng-edit terbatas makanya saya memakai template yang langsung jadi dan tinggal memasang saja, cuman saya hanya merubah sedikit tampilan sidebar dan merubah form komentarnya memakai versi comments form dari Adhy Suryadi www.kompiajaib.com

SEO, Tips dan Trik, Cara Agar Artikel Blog Cepat Terindex Google - Yahoo - Bing

SEO, Tips dan Trik, Cara Agar Artikel Blog Cepat Terindex Google - Yahoo - Bing

SEO, Tips dan Trik, Cara Agar Artikel Blog Cepat Terindex Google - Yahoo - Bing

Cara Agar Artikel/Postingan Cepat Terindex Google, Yahoo dan Bing, banyak pertanyaan dari pengunjung tentang bagaimana cara agar artikel atau postingan di blog cepat terindex Google atau di indeks oleh mesin pencari (search engine) yang lainnya pada blog/website, sebenarnya tips SEO agar postingan/artikel blog cepat muncul di Google index ini sudah banyak diulas oleh para Blogger maupun pakar SEO, tapi disini saya akan mengulas kembali dengan pengalaman yang saya ketahui.

Terindeks oleh search engine adalah hal yang sangat penting bagi kemajuan dan perkembangan blog/website anda, tanpa di indeks blog anda akan kesepian pengunjung dan terlihat mati meskipun anda menulis konten yang fresh dan berkualitas tapi tetap konten anda akan seperti terkubur, nah disinilah pengetahuan SEO itu berfungsi agar konten pada blog anda dikenali dan terindex oleh mesin pencari seperti Google, Yahoo, Bing maupun search engine lainnya karena hampir 60% pengunjung akan datang dari mesin pencari, Ada beberapa teknik atau strategi yang harus anda terapkan agar cepat terindex.

Konten

Submit Sitemap ke Search Engine Google/Bing

Link Building Agar Postingan Cepat Terindex Mesin Pencari

Cara Cepat Terdeteksi Google Dengan Social Bookmarking/Social Media

Internal Linking Dalam Halaman Blog/Website

Ping website/blog untuk memanggil Google/Bing spider

Komentar Pada Blog Agar Cepat Terindex Search Engine

Update Konten Artikel Blog/Website Secara Teratur

Mobile Friendly dan Responsive Design

Submit Sitemap ke Search Engine Google/Bing

Sitemap adalah sebuah daftar isi yang menerangkan tentang apa yang ada pada blog/website anda, sitemap disini bukan daftar isi yang seperti ada pada halaman melainkan sitemap yang berupa XML, XML adalah sebuah bahasa yang hanya dimengerti oleh search engine. Untuk pengguna Wordpress bisa membuat sitemap dengan plugin, dan untuk pengguna Blogspot biasanya sudah terintegrasi, seperti pada contoh dibawah.

• http://bloggerpeer.blogspot.com/sitemap.xml
• http://bloggerpeer.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
• http://bloggerpeer.blogspot.com/feeds/posts/default?orderby=updated

Silahkan submit sitemap anda pada Google Webmaster Tools, untuk Bing/Yahoo silahkan submit ke Bing Webmaster Tools

Link Building Agar Postingan Cepat Terindex Mesin Pencari

Untuk cepat terindex anda harus membangun link ke halaman post anda, jangan hanya mencari link mengarah ke homepage saja, carilah link dofollow yang mengarah ke konten anda. Hal ini juga akan membuat blog anda menjadi populer dan terpercaya di mata search engine, mesin pencari seperti Google sangat senang dengan blog/web yang mempunyai link dofollow yang relevan yang mengarah ke halaman blog anda dan Google Pagerank pun bisa anda dapatkan.

Cara Cepat Terdeteksi Google Dengan Social Bookmarking/Social Media

Salah satu cara yang sangat cepat agar blog anda terindex mesin pencari adalah dengan membagikan (share) konten anda pada situs social media atau social bookmark yang banyak di jumpai sekarang ini seperti Google+, Twitter, Facebook, Linkedin, Pinterest, dll. Selain itu blog anda juga akan mendapatkan traffic dari situs social media tersebut.

Internal Linking Dalam Halaman Blog/Website

Jika anda ingin halaman baru pada situs anda diindeks cepat maka internal linking akan menjadi sangat berguna. Sebutkan halaman baru anda dengan anchor text link, dan perbarui (update) halaman yang sudah terindeks sebelumnya dengan menyertakan link ke halaman baru anda (pastikan pembahasan pada konten anda sebelumnya cocok dengan konten anda yang baru).
Linking halaman situs anda bukan hanya tentang membangun external backlink. Hal yang sangat penting juga adalah membangun link dalam website anda (internal linking) yang akan mengingatkan mesin pencari tentang kehadiran konten baru pada situs anda.

Ping website/blog untuk memanggil Google/Bing spider

Ping pada mulanya merupakan metode untuk blogger untuk memperingatkan mesin pencari pada konten baru di blog mereka. Namun, telah berkembang di mana setiap orang dapat menggunakannya untuk memperbarui (update) bukan hanya blog tapi juga website tradisional
Ping adalah sarana yang sangat berguna memperingatkan mesin pencari dan direktori untuk pembaruan dalam konten anda.
Ada banyak situs layanan ping online yang tersedia. Beberapa yang terbaik yang saya ketahui adalah:
pingoat.com
pingler.com
pingomatic.com

Komentar Pada Blog Agar Cepat Terindex Search Engine

Blog dengan pembaca yang aktif dan banyak konten baru akan di crawled secara teratur oleh search engine, dengan berkomentar pada blog seperti itu maka anda akan mendapatkan imbas dari popularitasnya dan akan mendapatkan halaman sendiri diindeks dengan cepat. Cobalah mengomentari posting terakhir pada blog-blog yang sudah terkenal dan mempunyai ranking tinggi, ini adalah cara yang sangat efektif untuk mendapatkan halaman baru diindeks cepat dan pastikan bahwa anda menggunakan halaman yang ingin diindeks sebagai URL website anda ketika berkomentar tidak hanya halaman muka (homepage) saja.

Update Konten Artikel Blog/Website Secara Teratur

Pastikan anda memperbarui situs anda secara teratur, konten atau artikel yang fresh adalah penting untuk mendapatkan halaman baru diindeks. Jika konten/postingan yang ada pada blog anda sudah basi maka search engine tidak akan menjelajahi (crawl) blog anda secara teratur, Di sisi lain, jika anda menjaga blog anda segar dan diperbarui (meskipun memperbarui halaman indeks) maka spider mesin pencari akan terus datang kembali. Sebagai alasan kenapa banyak blog mempunyai peringkat baik dan artikel nya terindeks cepat tidak lain adalah karena si pemilik blog sering memperbarui situs mereka dengan konten atau postingan baru yang segar.

Mobile Friendly dan Responsive Design

Tidak bisa dipungkiri lagi, pengguna gadget smartphone dan tablet sekarang sudah melebihi dari pengguna komputer PC dan laptop, maka wajib bagi kita sekarang untuk mengubah template lama kita agar responsive dan mobile friendly agar visitor yang berkunjung ke situs/blog kita tidak kesusahan untuk membaca konten yang ada di blog kita, apalagi sekarang Google sudah menerapkan algoritma MOBILEGEDDON yang meharuskan kita untuk membuat website/blog yang mobile friendly dan tentu saja ini akan berpengaruh besar pada SEO Onpage dan ranking kita di Google search khususnya mobile search. Jadi buat anda yang masih menggunakan template lama silahkan di-upgrade agar bisa mobile friendly dan agar cepat terindeks Google, beberapa hari yang lalu saya pernah me-review premium responsive dan SEO friendly Blogger template yang saya pakai di blog saya ini, dan untuk tampilannya lumayan bagus dan elegan.
Itulah beberapa tips seo tentang cara agar blog terindex cepat oleh search engine/mesin pencari sesuai dengan pengalaman saya, kalau ada kekurangan dan saran lain bisa disampaikan melalui komentar
Happy Blogging..!

Membuat Slider Carousel Otomatis Berdasarkan Label

Membuat Slider Carousel Otomatis Berdasarkan Label

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan Carousellite script tanpa menambahkan efek easing dan mousewheel.

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYtoeuWpUSkIpQuBA5ZVtEhKVk_6E9LZuRY6P8fYi8fbW_nghUjEAGwb25uWEO5bYJuZigAp2rBbJ0NvpOk36ix9ZZr0QNAxDhJH2uVgRIdtPJG66RtDLPrsDIkLtu08gmDVvcPQT6Vm8/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY-eR2QSnS6QMdLhNjIzZODt8tb9gpLVxDN0_KHwOtxXWLClwIxB27u-2qC2LYiysTAO_gHtprCcs1G5RV03TgrhGd4FcCML3cf4hK6GkzGs0ctVuLpaXPxPDRLhkmbLjI8ZYs-pv1lew/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgddQUAWiARPjtEpxaUI0ggeeHD4bsXMd3wVgsMdt5j34yPDPXTkrLVcIG-kwzDQYsEm9LnmJyG_x4aBLFd4C0UL3l-pX2yCBh5fTfZBBA-0uI6HCFwoXRvD9ilaQKv94qxsFvTEhyjQ/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4di935-q6Ci-a0EQOHCO6LzMjxxBJfRFS8DXr4pPuzhXb2fUuUhKkAxwVNh7vHvldfhb96G-VtFbZarWirLUf_zNwmLWg16byL__W0emBfrsvJjDHR3Ryqc-whFTnu_JKCikbbFAjk0Y/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTtgQPTs64amUlAXBwwfZb1Wxx2DmId9igauTGxqqTEdVo_7R9eh34IzIiRNInLOQKmlBKnb2ifyzpbBo7Vc8Dss7NExrKRHTDumapO1AaMNqbuif8qI36HF9kLpoqWq-H5RM5KwGolig/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3SlWTfUyJTdNz29g8hSzopCeWKyyjkOUUgeFNIDVMMrOikFMixiqBt4ubFuS16gc2_9tbduqrUgXKwbnN5EbqCE_ffZE1nRqolNfXpo5fLlgAFuUmLJ5HKyBBop_xnnYNbxd_lmz-RCE/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzHKNpSys6h58FM5aRUoyhWuAc8hfFwNWSfAO9dLovim4Fy7X91lSHIxxrns3MWFwYxDyOnhc1kTK4tUNQ-RhFL-3ga6jzhmjkV4ICPX_5EpQuWalXVD5BQ1THTLpUNAg38lpChyphenhyphen3qXw/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Keterangan :

Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).

7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)
</script>
</b:if>

Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 

8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

membuat feature slider image otomatis

membuat feature slider image otomatis

membuat feature slider image otomatis

membuat feature slider image otomatis

Ada beberapa template yang nantinya akan saya share tapi kali ini saya buat sederhana, dengan sedikit menggunakan javascript, ya yang pasti lebih enteng dari biasanya. Oke kembali ke tutorial yang akan saya buat, kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Source : medienfreunde.com

Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_T2P9x1J1J8zxMIdwomgWAE7i1M1pvE0Eq-ad2slkaTjSZu-pQOZI9rgEHG4TJkm5Uw5jusgZ-CTu1yflceA06yt_F7vSGjLWPtwKNq1wgJmX28o5ojtho3vWaP3CrkACka55-Es9KJ4/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZqpqcXWGduypJo4vKh8WX0_nM5P8mOUkrE2fxvbN6wVmK9X50uODNvfPLpGNra0fUF1LcPjAZvFgp81_GnjH4VBCqYdOJ-XPcIR2aKL3azBRtVwvg07hDQrxc3ZDTmJ1XD5_lWtL5-8/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://johny-template.googlecode.com/files/jquery.innerfade.js' type='text/javascript'/>
<script src='http://johny-template.googlecode.com/files/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzHKNpSys6h58FM5aRUoyhWuAc8hfFwNWSfAO9dLovim4Fy7X91lSHIxxrns3MWFwYxDyOnhc1kTK4tUNQ-RhFL-3ga6jzhmjkV4ICPX_5EpQuWalXVD5BQ1THTLpUNAg38lpChyphenhyphen3qXw/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 7;

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    document.write('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
   for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
 
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
 
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
    
     postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
 document.write(trtd);


 j++;
}
    document.write('</div>')
}

//]]>
</script>