Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog

 Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog - Gallery foto atau gambar di blog memang banyak sekali kita jumpai pada halaman blog yang mengutamakan promosi melalui gambar maupun foto image, Biasanya dipasang pada widget blog situs jual beli online. Namun pada tutorial blog yang akan saya share kasih trik dan tips-nya berikut ini adalah cara membuat gallery foto di blog dengan efek bergerak atau berjalan, Efek ini populer disebut efek Marquee. Jadi hasilnya tidak seperti gallery foto yang biasa, Karena gallery foto ini akan bergerak atau berjalan.

 Untuk cara membuat gallery foto gambar bergerak berjalan di blog, Caranya sangat mudah sekali. Ukuran lebar dan tinggi foto atau gambar bisa di atur agar sesuai dengan keinginan sobat. Karena cara ini adalah cara manual dan sobat bisa sesuka hati mengaturnya. Silahkan sobat mengikuti langkah-langkah yang akan saya berikan nanti.

 Tampilan dari gallery foto gambar bergerak berjalan di blog, Tentu saja akan mengikuti sesuai dengan gambar atau foto yang sobat terapkan. Sobat bisa melihat dalam Blog Demo yang sudah saya pasang widget Gallery foto gambar bergerak berjalan di blog. Silahkan klik DISINI.

DEMO

 Ada beberapa opsi pilihan dari gallery foto gambar bergerak berjalan di blog yang bisa sobat pilih, Diantaranya:

• Gallery foto gambar bergerak berjalan di blog default (Biasa).
• Gallery foto gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.
• Dan masih banyak lagi, Tergantung pandai-pandainya sobat untuk berexperiment menambahkan kode-kode tertentu dalam gallery.

 Agar sobat tidak bingung dengan penjelasan saya di atas, Nanti akan saya jelaskan caranya satu-persatu, Agar sobat bisa mengerti dengan mudah.

Cara Membuat Gallery foto gambar bergerak berjalan di blog default (Biasa)

1. Silahkan sobat >> Masuk atau Login ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.

3. Beri judul widget, Contoh "My Foto Gallery". Kemudian letakkan semua kode di bawah ini pada kotak HTML/JavaScript.

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmZUzbXYdpVQBYy40ghLoj223DdnfDTUjPL3G4htMOK6NSRJiC2uU-ChtbZW_mfOywTGpuoKWpAXPCsr7u7gmgJz92jOCIOlZxRJIyQmRmTEOP1zraGt0hVCrWN0WWOBG3rBJRhxwVdI/s1600/PINK1.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2b2edXvRNZtGgcBRw7fgOYEDGKF0GXO1P6Q3ldustPRWPrb-9OD9V7WT4jCv9nkLuwpgQZjzN0wPgSQ1FWr624KddD5jsRwv7SxEYqTzy1gkO9E-94Tn1lbHn2ea_1X5Xp3-uYgoySCU/s1600/HT3.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBRGhTlnO_s0_Xh13QC3c66EvOO4y8WMWMPugZkoTbJ4zK_bgVLHQAJ1anWDiBWOu6oFdVNb7z8NFGjLgFIPsej76ppob6Fdpm3VO8_b2_a5K77oHY2sSTwHcz7ljsU1HhWr-Ae1t4-_M/s1600/sonal_chauhan.jpg" width="120" height="120" /></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>

Keterangan:

• Warna Merah adalah Alamat URL gambar atau foto image. Silahkan sobat ganti dengan alamat URL gambar atau foto image sobat.

• Warna Biru, width="120" dan height="120" adalah ukuran Lebar dan Tinggi image gambar atau foto. Silahkan sobat atur nilainya sesuai dengan keinginan sobat agar sesuai dengan widget blog sobat.

•  <marquee direction="up" adalah arah bergerak berjalan ke atas. Silahkan sobat ganti up jadi down jika ingin arah berjalan bergerak ke bawah.

Cara Membuat Gallery foto gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.

 Cara yang berikut ini adalah cara yang mudah dilakukan oleh para blogger mania, Sebab cara ini hanya menambahkan beberapa kode saja. Namun agar sobat tidak kesulitan dalam menambahkan kode, Di sini akan saya kasih contoh penerapan kode yang benar.

Berikut kode yang menggunakan alamat url link tujuan bila image gambar foto di klik.

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmZUzbXYdpVQBYy40ghLoj223DdnfDTUjPL3G4htMOK6NSRJiC2uU-ChtbZW_mfOywTGpuoKWpAXPCsr7u7gmgJz92jOCIOlZxRJIyQmRmTEOP1zraGt0hVCrWN0WWOBG3rBJRhxwVdI/s1600/PINK1.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2b2edXvRNZtGgcBRw7fgOYEDGKF0GXO1P6Q3ldustPRWPrb-9OD9V7WT4jCv9nkLuwpgQZjzN0wPgSQ1FWr624KddD5jsRwv7SxEYqTzy1gkO9E-94Tn1lbHn2ea_1X5Xp3-uYgoySCU/s1600/HT3.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBRGhTlnO_s0_Xh13QC3c66EvOO4y8WMWMPugZkoTbJ4zK_bgVLHQAJ1anWDiBWOu6oFdVNb7z8NFGjLgFIPsej76ppob6Fdpm3VO8_b2_a5K77oHY2sSTwHcz7ljsU1HhWr-Ae1t4-_M/s1600/sonal_chauhan.jpg" width="270" height="270" /></a></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>

Keterangan:

• Warna Hijau adalah Alamat Url tujuan bila image gambar foto di klik. Silahkan di ganti dengan alamat url tujuan sobat.

• Warna Orange adalah Title teks yang keluar jika Mouse pointer menyantuh gambar image foto pada gallery. Silahkan sobat ganti dengan title teks sesuai keinginan sobat.

• Kode yang saya berikan di atas adalah contoh untuk tiga gambar image foto saja. Sobat bisa menambahkan kode image-nya sesuai dengan keinginan sobat.

 Demikian tutorial blog tentang Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog secara manual. Jika ada pertanyaan mengenai tutorial ini, Silahkan sobat bertanya pada form kotak komentar yang tersedia. Senang bisa berbagi dan membantu sobat KUCOPAS semua. Semoga bisa sangat bermanfaat.

Selamat Berkarya

---

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

---

03.05 | 0 komentar | Read More

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 |

---

02.34 | 0 komentar | Read More

Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label (Categori)

 Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label (Categori) - Trik kali ini saya akan membahas bagaimana cara membuat dan memasang slider Carousel otomatis di blog berdasarkan label. Slider Carousel yang saya share kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

 Fungsi kerja dari slider ini adalah sama seperti pada Cara Membuat Foto Slideshow Dan Slider Di Blog yang sudah pernah saya posting sebelumnya. Sobat tinggal mengganti dengan label sobat dan slider ini akan bekerja sesuai dengan label yang sobat masukkan.

Berikut contoh gambar screenshoot Slider Carousel Otomatis Berdasarkan Label (Categori) Di Blog:

DEMO

 Cara pemasangannya pun sangat mudah, jika sobat sudah pernah mempraktekkan artikel saya yang berjudul Cara Membuat Foto Slideshow Dan Slider Di Blog, Tutorial trik kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama.

 Untuk membuatnya, Silahkan sobat ikuti saja langkah-langkahnya sebagai berikut di bawah ini:
1. Silahkan sobat >> "Login/Masuk" ke Blog dengan akun sobat.

2. Setelah itu pilih blog yang ingin sobat tambahkan slider ini.

3. Pilih menu atau Masuk ke "Template" >> Edit HTML, Jangan lupa Centang "expand widget templates".

4. Untuk menghindari dan berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, Backup dulu template sobat.

5. Setelah semua langkah-langkah diatas sudah sobat lakukan, Silahkan sobat cari kode ]]></b:skin>
(Gunakan CTRL+F untuk memudahkan pencarian)

6. Jika sudah ketemu, Kemudian sobat letakkan kode berikut ini, Tepat sebelum atau diatas kode ]]></b:skin>
Berikut Kodenya:

#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/AVvXsEg2oKkwcUUwkSHUvlJ-bCDFDE3mJU4c0Hh88VZedjO0is0gRctLjk9sLQszNCecUEF5LyKkEcWGDJSsHa1WeIvisv2q90znouIXGbbmIxqPqX8FaszmbLIIPAuQOD7JLl-FFpkI2vBLR3g/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_oVUJiX22Gl_BJqJT8WY1xLdUZJFw5AasuzvQvrCM1S_r8wkrMu509BZ5WQgLXx3K7j4XOzC-p0Tmyy2PpLqhhR0gCoDvuzajzZaGZYR1fclKb25lH79qus4r0yADpEfcUbb6o22Cdrk/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/AVvXsEhg0sxotTyFXCh-A7NXBnz6uvAZqZI2RoeqH1QSr8hUtp8tgXICp1jf3zl51zPkNR0hnP8ENo3YyZIQ4MACuplZjjfKhaFmBK33V3wzUCBvii41LV2yG2t1yeeeyMKX7yjoYZDmYpdaimY/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-nQTILf6qITM20or6250Zodtw1QyYI-Pgw61AsHy77jkpVP6DvXBUOnymyRE79-Y3iTCDAWfg0QNpfJGTLjLq_BTZUrkdaGEHv5Swi1ccRjs9kw5c3Bs9oR2iLg9Y2baTQj0E-s51lk4/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/AVvXsEgiNs_aeZaK9mmJqbmmRc98UrV2lEArfLxyBxHowqQorvWVwP_Bhb1lc_pwa6xDNFwuskXC-0OvK72kKdGvwlQ-OYuLZkFTxIqxsrhBaVFI7QAUqFaXrSn0aGTbJwLGMLaRmyJL7VfmqgM/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/AVvXsEgje0Hl3VUstjPumnZxqLMMzt4oJefWMIELr6SCwOFCuj9FBjCYgznxO_8KSxTl8poY53iUeoegea79uztYMnskzWW-cbpGG0xVTmWgwWEJzk_DzaRWnUMxMAugJGxHCvcGOvf6jpYGNTg/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}

Catatan:

• width:950px; adalah Lebar ukuran slider keseluruhan, silahkan sobat ganti nilainya sesuaikan dengan lebar template blog sobat.
• height:185px; adalah Tinggi ukuran slider keseluruhan, silahkan sobat ganti nilainya sesuai dengan keinginan sobat.

7. Langkah selanjutnya masih pada posisi "Edit HTML", Silahkan sobat cari kode </head>
(Gunakan CTRL+F untuk mempercepat pencarian)

8. Jika sudah ketemu, Silahkan sobat masukkan kode berikut ini, Tepat diatas atau sebelum kode </head>
Berikut Kodenya:

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


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

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 10;
label1 = "sport";

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>

Catatan:

• numposts1 = 10; adalah jumlah slider yang akan ditampilkan, Silahkan sobat ganti nilainya pada angka warna BIRU sesuai dengan keinginan sobat.
• label1 = "sport"; adalah label yang ditampilkan pada slider, Silahkan sobat ganti tulisan warna PINK sesuai dengan label pada blog sobat. Jika ada space (spasi) pada label, Silahkan sobat ganti spasi dengan %20. Perlu sobat tahu, besar kecil huruf harus sama dengan label yang sudah sobat buat. Contoh label yang menggunakan spasi, tutorial blog penulisanya jadi tutorial%20blog

9. Langkah selanjutnya adalah memanggil slider tersebut agar mau muncul di blog kita. Silahkan sobat cari kode <div id='main-wrapper'>
(Gunakan CTRL+F untuk memprcepat pencarian)
Kemudian letakkan kode berikut ini tepat diatas kode <div id='main-wrapper'>
Berikut Kodenya:

<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>

Catatan:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
-
-
</b:if>

• Kode warna HIJAU di atas adalah Kode yang hanya menampilkan Widget pada Home Page (Halaman utama) blog saja. Jika sobat ingin menampilkan pada semua halaman blog, Silahkan di hapus kode yang berwarna HIJAU, atau sobat juga bisa menggantinya dengan kode menyembunyikan atau menampilkan widget tertentu pada halaman tertentu di blog, pada postingan saya yang sudah saya share sebelumnya. Klik DISINI untuk melihat kodenya.

• Kode diatas bisa juga sobat letakkan di bawah atau di atas navigasi menu blog sobat atau bisa juga diletakkan di atas footer blog sobat. Silahkan berexperiment sendiri untuk mengaturnya sesuai dengan keinginan sobat.

10. Setelah semua langkah-langkah diatas sudah sobat terapkan, Maka silahkan sobat klik >> "Preview/Pratinjau" Demi untuk menghindari kesalahan waktu EDIT TEMPLATE.
11. Langkah yang terakhir, Jika hasil dari "Preview/Pratinjau" sudah seperti yang sobat inginkan, Maka silahkan sobat klik >> "save templates" dan nikmati hasilnya.

NB:
Jika Sobat ikuti langkah-langkah diatas dengan benar, Maka slider Carousel yang sobat buat pasti akan muncul di blog sobat.

 Jika Sobat sudah berhasil, Jangan lupa Follow, Like, atau jika ada pertanyaan seputar tutorial Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label (Categori) di atas, Silahkahkan kirim Komentarnya pada Form Comment yang tersedia dibawah. Semoga artikel posting yang saya share ini bisa sangat bermanfaat untuk Sobat KUCOPAS semua.

Update: 04/Feb/2013

---

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

---

17.33 | 0 komentar | Read More

Cara Membuat Foto Slideshow Dan Slider Di Blog

 Cara Membuat Foto Slideshow Dan Slider Di Blog - Kali ini saya akan berbagi trik dan tips bagi sobat KUCOPAS semuanya, yaitu trik tentang Cara Membuat Foto Slideshow Di Blog atau Foto Slider di Blog. Mungkin diantara sobat semua sudah ada yang mengerti tentang foto slideshow, namun kali ini saya akan menerangkan tentang cara membuat Foto Slider Carausel Otomatis di Blog. Contoh atau Demonya sobat bisa melihat seperti di halaman utama situs DetikSport, Lihat bagian bawah menu, ada foto slideshow begitulah kira-kira tampilanya nanti.

 Sedikit penjelasan untuk sobat, Foto Slideshow yang akan kita buat ini nanti bisa di edit sedikit scriptnya. Karena Foto Slideshow ini bisa di buat berdasarkan Label atau Kategori, dan juga bisa untuk posting terbaru atau artikel terbaru. Jadi sobat bisa memilihnya seperti yang sobat suka, Pilih Foto Slideshow berdasarkan label (kategori) atau Foto Slideshow berdasarkan posting terbaru (artikel terbaru).

 Fungsi dari Foto Slideshow ini adalah bisa untuk mempercantik blog atau website kita, Karena tampilanya yang dinamis. sebab, Foto Slideshow ini disamping menampilkan foto juga akan menampilkan judul posting blog kita, dan jika di klik, maka akan menuju artikel yang selengkapnya postingan kita.


 Oke, Jika sobat ingin membuatnya silahkan ikuti langkah-langkahnya ada Sebelas sebagai berikut:

1. Silahkan sobat >> "Login/Masuk" ke Blog sobat.
2. Pilih dan klik >> "Template" >> "Edit HTML". (pada tampilan baru blogger klik >> "lanjutkan")
3. Jangan lupa sobat Centang "Expand Template Widget".
4. Langkah selanjutnya silahkan sobat cari kode ]]></b:skin> Gunakan CTRL+F untuk mempermudah pencarian.
5. Jika sudah ketemu, Kemudian letakkan semua kode script dibawah ini tepat di Atas atau Sebelum kode ]]></b:skin> tadi.

Berikut Kodenya:

#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkspuSIu3UmzAaC3Vdzfw2VCTFqo7EBbTXnV1L-1BvNC284RPUkseTSGfHaxtiV8iYD4D089Ze8LK5D5Qhfrwis6IPenE1bZjUFWYObP0Xzs19IYWuBDzd0iF8OsGfMTQ1JiX9pgTfGR-/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWynIVX0Zmk5t50l8LP6Y2EhZVEast95eRFHN5IAxeKOTclu8SMyPo5U_YUsKSAZTCjuQX2vrFKkbPVK72YlklYn1KHcyBaIFAIcGCKmv9RgNlueZq9ndc9rA4NH6w2d-DT01_MOI0GLAk/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}

Catatan:

• width:980px; adalah Lebar Slider, silahkan sobat ganti nilai angkanya, sesuaikan dengan template sobat.
• height:125px; adalah Tinggi Slider, silahkan sobat ganti nilai angkanya sesuai dengan keinginan sobat.

6. Langkah yang berikutnya masih dalam "Edit HTML", Silahkan sobat cari kode </head> . Gunakan CTRL+F untuk mempercepat pencarian.

7. Copy semua kode script di bawah ini dan Paste atau letakkan tepat di Atas atau Sebelum kode </head>
Berikut kodenya:

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


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

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 10;

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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

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

Catatan:

• numposts1 = 10; adalah jumlah Slider yang akan di tampilkan, silahkan sobat ganti nilainya seperti yang sobat inginkan.
• <img width="100" height="90" adalah Panjang dan Lebar Foto atau Image yang di tampilkan dalam Slider.

8. Langkah yang selanjutnya, masih dalam "Edit HTML" Silahkan sobat cari kode <div id='main-wrapper'>
Gunakan CTRL+F lagi untuk mempercepat pencarian.

9. Kemudian Sobat Copy semua kode script dibawah ini dan Paste atau Taruh tepat di Atas atau Sebelum kode <div id='main-wrapper'>

Berikut kodenya:

<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/-/TUTORIAL%20BLOG?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>

Catatan:

• Foto Slideshow ini hanya tampil di halaman utama blog saja (Home Page). Jika sobat ingin menampilkan Foto Slideshow ini di semua halaman termasuk saat posting dibuka, silahkan sobat hapus kode yang berwarna BIRU di atas.
• TUTORIAL%20BLOG adalah Label atau Kategori yang akan di tampilkan dalam Foto Slideshow, silahkan sobat ganti dengan Label atau Kategori Blog Sobat. Namun jangan lupa sobat kasih %20 jika ada Space (Spasi) pada Label atau Kategori sobat.
• Jika sobat ingin menampilkan Slideshow Postingan Terbaru atau Artikel Terbaru Blog sobat, Silahkan Hapus atau hilangkan Kode /-/TUTORIAL%20BLOG hinga jadinya seperti ini >> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results

10. Langkah selanjutnya, Silahkan sobat klik Review atau Pratinjau, Demi untuk menghindari kesalahan saat melakukan Edit HTML pada template Blog Sobat.

11. Jika hasilnya sudah sesuai dengan keinginan Sobat, Silahkan klik SIMPAN dan Selamat kini di Blog Sobat sudah ada Foto Slidernya.

Update: 18/01/2013

---

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

---

09.27 | 0 komentar | Read More

Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog

Cara Membuat Foto dan Gambar Bergerak Slide di Blog - Salam hangat buat sobat-sobat blog KUCOPAS semua, kemarin saya sudah share artikel tentang Cara Buat Teks Berjalan dan Berkedip di Blog, dan kali ini saya akan share tips dan trik lagi tentang Cara Buat Gallery Foto Bergerak slide di Blog atau Cara membuat foto atau gambar berjalan di blog, bahasa gaulnya ya Script Marquee Bikin Image Lebih Dinamis.

Pada dasarnya membuat image atau foto bergerak slide di blog, Caranya terbilang sangat mudah. Karena kita hanya memberi atau menambahkan script marquee pada image atau foto yang ingin kita tampilkan dalam blog kita. Namun cara penerapannya haruslah benar dan sesuai dengan perintah dari script marquee tersebut. Sobat bisa melihat pada artikel Cara penerapan Script Marquee yang benar.

Maka dari itu, Pada artikel saya kali ini akan menerangkan secara detail tentang bagaimana cara menambahkan script marquee dalam image agar bisa bergerak slide dalam blog dengan sempurna dan tidak ada masalah saat blog kita di kunjungi oleh para visitor dan pelanggan pembaca berita terbaru pada blog kita.

DEMO

Oke sobat, Kita kembali lagi pada tutorial untuk Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog, silahkan sobat ikuti cara-caranya sebagai berikut:

1. Silahkan >> Login atau Masuk ke blog menggunakan akun sobat.
2. Setelah itu sobat pilih >> menu Tata Letak.
3. Kemudian klik >> Tambah Gadget.
4. Pilih >> HTML/JavaScript.
5. Isi kotak judul dengan judul gallery sobat, contoh My Foto Gallery.
6. Kemudian pada kotak Konten, Silahkan sobat masukkan semua kode Marquee di bawah ini.

---

<marquee direction="up" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()"><img src="alamat_gambar_sobat.jpg" width="120" height="70"></marquee>

---

Catatan:

• Ganti alamat URL gambar "src" yang saya drag berwarna HIJAU pada kode script <img src="alamat_gambar_sobat.jpg" width="120" height="70"> dengan alamat URL gambar image sobat. Kalau belum mempunyai alamat gambar image, Silahkan upload dulu ke FhotoBucket, Picasa, dan lain sebagainya, Kemudian sobat ambil Alamat URL nya dan tempelkan pada tulisan yang saya drag berwarna HIJAU.

• scrollamount="5" adalah Kecepatan Marquee atau image yang berjalan. Silahkan sobat atur nilai kecepatanya, Agar sesuai dengan keinginan sobat.

• Kode "width" dan "height" adalah untuk mengatur ukuran lebar dan tinggi gambar image. Silahkan sobat atur nilainya agar sesuai dengan selera sobat.

• Kode "up" adalah kode arah foto gambar image yang akan bergerak atau berjalan ke atas. Silahkan sobat ganti dengan "down" untuk arah ke bawah, Atau bisa juga diganti kode yang lainya, Agar sesuai dengan keinginan sobat.

• Contoh diatas adalah hanya untuk satu gambar image foto saja. Jika sobat ingin lebih dari satu foto gambar image, Silahkan sobat tambah lagi kode script image tersebut sebanyak gambar image atau foto yang sobat inginkan.

Contoh penerapan kode script marquee yang tepat adalah seperti dibawah ini.

<marquee direction="up" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()">
<img src="alamat_gambar_1_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_2_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_3_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_4_sobat.jpg" width="120" height="70">

<img src="alamat_gambar_5_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_6_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_7_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_8_sobat.jpg" width="120" height="70">

<img src="alamat_gambar_9_sobat.jpg" width="120" height="70">

<!-- dan seterusnya..., SupPort By KUCOPAS -->  
</marquee>

7. Untuk menyimpan gadget yang baru sobat buat, Ikuti cara berikut ini.

• Setelah semua kode marquee sudah sobat masukkan pada kotak Konten HTML/JavaScript, Silahkan sobat klik tombol >> Simpan.

• Selesai dan lihat hasilnya.

Untuk mengetahui cara terbaru atau ter-update dan lebih dinamis, Sobat bisa lihat pada tutorial tentang Cara Membuat Widget Gallery Foto Gambar Image Bergerak Berjalan Di Blog.

Semoga artikel posting yang saya share ini, yaitu tentang Cara Membuat Gallery Foto Bergerak Di Blog atau Cara Membuat Foto Berjalan Di Blog, bisa sangat bermanfaat untuk sobat KUCOPAS semua.

05.07 | 0 komentar | Read More