Cara Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog

 Cara Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog - Kali ini saya akan berbagi trik blog yang berhubungan dengan posting khususnya recent post pada blog. Recent post adalah artikel posting yang paling terbaru dalam suatu blog. Adapun artikel posting yang di tampilkan biasanya berupa judul saja dari artikel maupun ada sedikit isi keterangan dari artikel yang kita posting, Dan semua itu bisa kita atur sesuai dengan keinginan kita.

 Pada recent post yang sebentar lagi akan saya kasih triknya untuk sobat semua adalah recent post yang mempunyai fungsi menampilkan judul posting di sertai dengan thumbnail atau gambar foto, ada sedikit isi penggalan dari postingan blog dan juga mempunyai efek marquee atau slide berjalan teratur ke bawah. Artikel terbaru ini biasa juga di sebut dengan "Recent Post Thumbnail Bergerak Slide Ke Bawah".

 Tampilan dari Recent post ini sangat bagus dan menarik, Sobat bisa melihat contohnya pada sidebar blog ini, Yaitu pada widget "Artikel Baru".

 Jika sobat tertarik ingin membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah seperti yang ada pada blog ini, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Langkah yang pertama. Silahkan sobat >> Masuk/Login >> Ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> pilih dan klik >> Tambah Gadget >> pilih dan klik tanda + pada >> HTML/JavaScript.
3. Kemudian silahkan sobat masukkan semua Kode Script berikut ke dalam kotak HTML/JavaScript.

<script src="http://kucopas.googlecode.com/files/RecentPostThumnailBergerak.js" type="text/javascript"></script>

<style type="text/css" media="screen">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:355px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:335px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

    <script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;

boxwidth = 300;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 60;

thumbheight = 60;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Reply(s)";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = " http://kuc0pas.blogspot.com/ ";

limitspy=5

intervalspy=5000

</script>

<div id="spylist">

    <script type='text/javascript'>

//<![CDATA[

jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;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[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>

</script>

</div>

4. Langkah yang terakhir. Setelah semua kode script di masukkan ke dalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya pada halaman widget blog sobat sudah terpasang widget recent post thumbnail gambar bergerak slide ke bawah.

Keterangan:

• Ganti http://kuc0pas.blogspot.com/ dengan URL blog sobat. Pastikan ada tanda slash ( / ) di belakang url blog.

• text = "Reply(s)" adalah teks jumlah komentar, ganti Reply(s) sesuai dengan keinginan sobat, misalnya: komentar, comment(s), dan lain sebagainya.

• boxwidth = 300 adalah ukuran Lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog sobat.

• numposts = 10; adalah Jumlah posting terbaru yang akan muncul di blog sobat, ganti nilainya sesuai keinginan dengan keinginan sobat.

• limitspy=5 adalah Jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai dengan keinginan sobat.

• intervalspy=5000 adalah kecepatan scroll, spy atau slide dalam milisecond (ms), Silahkan sobat ganti nilainya untuk mengatur kecepatannya. Tambah untuk lambat, Kurang untuk cepat.

 Sampai di sini saya kira sobat pasti sudah faham tentang cara membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah di blog. Namun bila sobat masih mengalami kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel posting yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion

 Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion - Kali ini saya akan share artikel tentang cara membuat daftar isi di blog. Namun daftar isi yang akan saya kasih triknya berikut ini bukan seperti daftar isi yang biasa, Karena daftar isi blog ini menggunakan Jquery Accordion mempunyai efek yang sangat luar biasa mengagumkan.

 Daftar isi blog dengan Jquery Accordion ini yang membuat kodenya adalah Abu Farhan, Kemudian di modifikasi lagi kodenya oleh Teja HTC. Lalu daftar isi blog Jquery Accordion ini saya edit lagi sehingga lebih mudah untuk di pasang atau di terapkan pada blog sobat semua.

 Daftar isi atau sitemap di blog memang sangat penting, Karena dapat memudahkan para pengunjung untuk mengetahui semua daftar dari isi blog itu sendiri. Kegunaan yang lain adalah agar lebih memudahkan visitor atau pengunjung blog dalam mencari konten atau artikel posting yang di butuhkan.

 Jika sobat ingin memasang iklan pada blog sobat, Kemungkinan besar blog sobat akan di review oleh pemasang iklan. Apakah layak atau tidak blog sobat di tempeli iklan dari penyedia iklan. Yang biasa menonjol di review adalah tentang apakah navigasi pencarian konten berbelit-belit dan tepat pada tujuan yang di cari atau tidak, Kemudian apakah ada pemasangan sitemap atau daftar isi pada blog atau tidak.

 Menurut webmaster, Memasang daftar isi atau sitemap pada blog itu wajib hukumnya. Sebab untuk menunjang agar menjadi suatu blog yang profesional memang harus mempunyai navigasi pencarian yang tertuju dengan benar untuk memudahkan para pengunjung atau visitor mencari apa yang di cari atau di butuhkan dalam blog tersebut.

 Mengenai tampilan atau wujud dari daftar isi blog yang menggunakan Jquery Accordion ini kurang lebih seperti seperti gambar berikut di bawah ini. Namun biasanya link dari judul akan berubah warna mengikuti warna link default dari blog sobat.

 Efek dari Daftar isi blog dengan Jquery Accordion ini akan menimbulkan efek dropdown seperti menu, Efeknya akan timbul jika mouse di arahkan dan di klik pada satu pilihan label atau kategori, Maka akan keluar daftar isi dari label atau kategori tersebut berurutan kebawah sesuai dengan banyaknya isi label atau kategori blog.

 Jika sobat tertarik untuk membuat, memasang dan menerapkannya pada blog sobat, Caranya sangat mudah. Jadi silahkan sobat ikuti langkah-langkahnya dengan teliti yang akan saya jelaskan sebagai berikut:

• Langkah Pertama:

1. Silahkan sobat >> Masuk/Login >> ke Blog sobat.
2. Pada "Dasboard" Tampilan blogger baru, Pilih Menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" kotak >> Expand Template Widget.
4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F pada keyboard sobat untuk memudahkan pencarian).
5. Jika sudah ketemu, Silahkan sobat masukkan kode CSS berikut tepat sebelum atau di atas kode ]]></b:skin>

.judul-label{background:-moz-linear-gradient(top,  #393E41,  #000000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://2.bp.blogspot.com/-6OcDgB9yXXI/TVfIh9HaUYI/AAAAAAAABUk/PUZFTYOTg-8/s1600/1m3.gif") no-repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:kristen itc;font-size:12px;}.list-ganjil{background-color:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top,  #D11717,  #8C0000)}

Catatan:

• Warna Merah adalah Kode warna dari daftar isi yang akan di tampilkan. Sobat bisa menggantinya sesuai dengan keinginan sobat, Namun saya menyarankan tidak usah di ganti. Karena kemungkinan daftar isi akan menjadi eror.

6. Sebelum sobat klik Simpan Template, Ada baiknya sobat klik >> Preview atau Pratinjau terlebih dahulu. Guna untuk menghindari terjadinya eror saat Edit HTML dalam template blog sobat.

7. Jika hasil dari Preview atau Pratinjau tidak terjadi masalah eror, Maka silahkan sobat klik >> Simpan Template.

• Langkah Terakhir:

 Langkah yang pertama sudah selesai, Kemudian kita akan menuju ke langkah tahap yang terakhir yaitu pemasangan kode pemanggil, Agar daftar isi dengan Jquery Accordion dapat muncul dan berfungsi di blog sobat dengan baik.

Cara Memasang Daftar Isi Jquery Accordion Pada Posting Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju ke menu >> Post atau Tab Posting.
2. Kemudian pilih klik >> Buat Entri Baru. (Caranya seperti saat membuat postingan blog).
3. Lalu isikan judul Entri atau judul postingnya dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
4. Setelah itu sobat pilih Mode >> HTML bukan Compose, Lalu masukkan semua kode script berikut ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

5. Yang terakhir silahkan sobat klik >> Publikasikan atau Terbitkan Entri dan lihat hasilnya pada posting blog sobat.

Catatan:

• Silahkan sobat ganti URL warna BIRU dengan Alamat URL blog sobat.

Cara Memasang Daftar Isi Jquery Accordion Pada Laman Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilih menu >> Laman >> pilih dan klik >> Laman Baru >> Pilih dan klik lagi >> Laman Kosong.
2. Kemudian  isikan judul Laman dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
3. Setelah itu sobat pilih Mode >> HTML bukan Compose, Lalu masukkan semua kode script berikut ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Publikasikan dan lihat hasilnya pada laman blog sobat.

Catatan:

• Ganti URL warna BIRU dengan Alamat URL blog sobat.

Cara Memasang Daftar Isi Jquery Accordion Pada Widget, Sidebar Atau Gadget Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilihan menu >> Tata Letak >> Silahkan sobat tentukan posisinya dimana daftar isi Jquery Accordion ini akan di letakkan pada blog sobat.
2. Kemudian pilih dan klik >> Tambah Gadget >> Lalu pilih dan klik lagi >> HTML/JavaScript.
3. Setelah itu sobat masukkan semua kode script berikut di bawah ini ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Simpan atau Save dan lihat hasilnya pada halaman blog sobat.

Catatan:

• Ganti URL warna BIRU dengan Alamat URL blog sobat.

 Sampai di sini saya kira sobat pasti sudah bisa mengerti dan paham bagaimana cara membuat dan memasang daftar isi dengan Jquery Accordion di blog sobat. Bisa sobat sudah berhasil, Jangan lupa di Like atau Follow blog saya. Namun jika sobat masih menemui kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel tutorial blog tentang Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion yang saya share ini, Bisa sangat bermanfaat untuk para sobat KUCOPAS semua. Happy Blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---