Hudi Net: Slideshow

Tampilkan postingan dengan label Slideshow. Tampilkan semua postingan

Membuat Slider Carousel Otomatis Berdasarkan Label

22.42 | Diposting oleh Hudi Art |

Login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan slider ini.
Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
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/AVvXsEivF7rcBo2qgQeHexEaIzf7SnZIaS87bPhfJNDdTPhJYedLieVFphqgGatPeosuoBywvTiNq0YFDBBn0Tqzmd6lNX6mrFPte3lQqOwQyJamx0L7qI6BlaXTtn7kDt04El0v7i9nUeBfCAw/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU4851l9kJnunfonJ1c0oF3dN9jiSACAAburQQsJkLyLay_KRPqjAl1Rj1ifzn8GPsUJ8lXGS6YbMDLeLt4bY-Y_1FpNY-baj1X_TIg-RaRHdcUNyxkP88nu4x1asROLOPcJ73lyXjApM/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/AVvXsEg_uzqiN1WtOTlVZgy69PN2XeDaIcGcWNqnodHWV0Ge1FFHNmDD-tRDa5qTD2HLF8gV1ysFZMDTKOYtBPTQXtAtwYWgy6ePMAra4UrYtTTfvwci4xN9Wh5Lx5RMRc5Pw9Prp2gTDmhGhKQ/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVWCkMbyQlKaoxf3N4qCFyypDkvl4Bm2cjwoRox2lMGR-ddSR-4ZyzPBUbq4WC9soNgvNj31KOQia5FTQBvZGnJkeDyfSHlrPLDPzmzLxHjrhylZUGt0NqnZmm-QBSCHkbHXF5mmr60o/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/AVvXsEis823sty98lBaW_zus8AURFvLY0jSfOLiWAbJ1K98jh5dDZ2RohiV3wJ4aKZmq-NknPQt-JqjhxzN_TWvI4yCx2a04UygxWatXgyg9hfjM82-fHhXdWLnX9WFqUPDpGbRC-MMuRd1GApI/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/AVvXsEgN4eebPZ7P8rh1qFMkzpdJXee_SVyKtrLA9mxdD9wPQ2dqqsFUTSqHHUcfPwKPZbK-cFXtyGGp0e5mrTgs8uZZ_OdD1mfWMznjrWOx_HgUAr5BQ7veYlECFCyuWJrdv4bAbpbhb7-edGw/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.
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://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4rsi7qO_ZCauF5nR1f3UWR7bDow-XcgJOozIX0MhVoEhw3d0Izyoighl4E6ecI2DpL7CL9AYlhiHjB3wZb7XKrFOFnNhtwDe7r8zQD9GcAVMiEnjjySKhH5DYyDAOcRFBw4w2Bey87OA/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.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.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).
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 != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
</script>
</b:if>

Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.
Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Label: Slideshow

Membuat Simple Slider Otomatis Gambar Vertikal

22.25 | Diposting oleh Hudi Art |

DEMO

Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> : /* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdUVRYpORX98HunxNYvzzwo0GGcQZJqNOt0lARVfcDNHFkdAxLEmKkEI7wKN6lhceIVk47o9g9TIcb6l1ncP6RFHcmvXBIoVNcOQH7KUv9x8EIadqcKJ8F-lh15FMyOyAIVzM_zNDpkb0/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMMI0jO661ztrHSbBvc_VBhSnQw-c2Hbv8B_3MmiCGUSFilj8y5LHI_jHrOYUwOnxk3JaX_uN5_S2Gn7EVTzSS08TO4d7qcfI-smutAUO44zUiPCf3olJlpkqWwfvwn5lPSrB_t18cWQ/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgaD8hUmacvCTIQqV-37oUbk1MJ3dRC70h3oLA0m3-UnnxmJ1-SVrRpq1JKMwiuz_G4fICXs_bSktSnXLf8AMi6MJbwwdmABr_eVo5ZU3yiWeG5ZCtUzSbqzXda-Hb-lJ1_vvIn4QkjGyQ/s1600/uj-opacity-40.png);padding:5px 10px; }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.
Masih di Edit HTML, masukkan kode script berikut ini diatas </head> : <script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

$(".crott").stop(true,true).slideUp('slow');

$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)

};

rotateSwitch(); //Run function on launch

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4rsi7qO_ZCauF5nR1f3UWR7bDow-XcgJOozIX0MhVoEhw3d0Izyoighl4E6ecI2DpL7CL9AYlhiHjB3wZb7XKrFOFnNhtwDe7r8zQD9GcAVMiEnjjySKhH5DYyDAOcRFBw4w2Bey87OA/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 6;

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 showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

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 = m+ ' ' + day + ' ' + y ;

var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
document.write(trtd);

j++;
}

}

function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
document.write(trtd);

j++;
}

}
//]]>
</script>

Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6; adalah jumlah post yang tampil pada slider
Sekarang Anda tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :
<b:if cond='data:blog.pageType == "item"'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>Keterangan :

Tampilan slider dengan menggunakan kode diatas hanya terlihat pada postingan, jika Anda ingin slider terlihat di homepage hapus kode pertama dan terakhir yang berwarna biru muda. Slider diatas menampilkan postingan terbaru Anda, jika ingin merubah menjadi tampil per label anda tinggal menambahkan kode /-/your label antara kode default dan ?, jadinya seperti ini default/-/your label?max-results karena kode tersebut diatas ada dua, Anda harus ganti dua-duanya.
Terakhir save, selesai.

Label: Slideshow

Membuat Slider Image Otomatis

22.17 | Diposting oleh Hudi Art |

DEMO

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 :

Login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan slider ini.
Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
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/AVvXsEjU9tR3-ZfMEzdEgSb5wQNgWT51Xn0Q4swS2MFqEKEBJvgtgb-ZNoAch9bWQHQnkVotQJ-CNykrAngPQqUWzlEpOcCRxvzp1_pZhwOC8p6wQUPiTER6rRKTYY5nNMN2Cq6gARC3XpnBPus/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/AVvXsEg7wJA3HAY9fxtE8AoXkHIcSQMBJlU8QLViMVgVMuEfmPjPaoRy5BlCj2iewQ61-2MlcBX1BsKx0WdZDKeUXXQymjfVkBgIltYIDNQSptU3TUW6v_L6ooEv74nX5k2Z4Lp91N6Ie2QmImQ/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.
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://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4rsi7qO_ZCauF5nR1f3UWR7bDow-XcgJOozIX0MhVoEhw3d0Izyoighl4E6ecI2DpL7CL9AYlhiHjB3wZb7XKrFOFnNhtwDe7r8zQD9GcAVMiEnjjySKhH5DYyDAOcRFBw4w2Bey87OA/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 »</a></div>';
document.write(trtd);

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

//]]>
</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.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah panjang dan lebar image yang ada di slider.
Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :

<b:if cond='data:blog.pageType != "item"'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/sport?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$('.slides').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
</div> </div> 
</div>
</b:if>

Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :

/feeds/posts/default?max-results
Menjadi :

/feeds/posts/default/-/your label?max-results
Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
Terakhir, save templates dan lihat hasilnya.

Itu tadi tutorial membuat Slider image otomatis. Selamat mencoba dan semoga bermanfaat.

Label: Slideshow

Membuat Slideshow Image di Blog

00.09 | Diposting oleh Hudi Art |

Assalamualaiku wr.wb . Selamat datang bung di blog saya, kali ini saya mempunyai informasi yang menarik , yaitu saya akan memberi tahu bagaimana cara membuat Slideshow Image di Blog . Ikuti langkah langkah berikut :

1. Login ke blogger anda sendiri . Masuk ke Dashboard--> Design - -> Edit HTML.
2. Kemudian, cari kode </head>.
3. Copy kode di bawah ini dan paste di atas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

4. Simpan template anda.
5. Setelah itu klik Layout --> Page Elements.
6. Klik 'Add a Gadget'
7. Pilih 'HTML/Javascript'. Kemudian, tambahkan kode di bawah ini:

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM15CtnJnaOmEQeb_7vuAcvlrtT53aDuGTQ8B_YowEgjklwUuyoRY3ZuSkWkR6l_5uEUEw3K6uALcy0lAGNL0dwGsiJVl0HI4VdKwHTm4JDV3F4uKxrHniBwPQkmk8X6Wiw4vRJuEIZA/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-rwG3VKOvrRW2-XqHS-36iFnPxF0QDy-Do2JdVLadvO42wHfh-LQXi_wqJMq90rJc1-1tq_jVA4YH8z2M9RMG2pzER4BAMA0xu0kWz0uQbhmH231xtKiloR8V0bi5v43GiUXS2v4QQU/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlDg9Uq-GntOLe5K9diE6HdUkI_ARk31uzuqwtiCVHKeXU2lvaav649M7UPrg7R9D4-f8_l4uvWGBjS-GbbqFins9cHwrAkCmW5H3pU8znhuedz0sHq2D8kwLKLDOre8C9WjtU_uQW-fE/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEK39w_9rRUKi_I7cFlAsm6o82eFiWilClekFK0B3z2E_eF8kAr9BCz9Z-9vMC7zzj-k0C9CteACUw-XY0ZrxiJsgsb46KEyJUCIrf0BhjIgD_N2r0-xwfjg7qQ_ySfrEP8lI0A1w3Z9Y/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

Keterangan : Ganti URL link (#), "This is featured post X title", "Replace This Text With Your Featured Post X Description", sesuaikan dengan keinginan anda. Rupanya cukup sekian tutorial dari saya apa bila ada yang di tanyakan , langsung saja di komen ....

Label: Blogger, Slideshow

Featured Images Slideshow+Slider to Blogger/Websites

22.04 | Diposting oleh Hudi Art |

1.Login to your dashboard--> layout- -> Edit HTML
2.Scroll down to till you see </head> tag.
3.Now copy and paste below code just before the </head> tag.

<script type='text/javascript'>
//<![CDATA[

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
 //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
 //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
 //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
 //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
 //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
 try{
 page_request = new ActiveXObject("Microsoft.XMLHTTP")
 }
 catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
 setting.contentdivs.push(alldivs[i])
  alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
 phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
 if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
  pdivlinks[i].style.display="none" //hide this toc link
  continue
 }
 pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
 pdivlinks[i][setting.revealtype]=function(){
  featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
  return false
 }
 setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
 pdivlinks[i].onclick=function(){
  featuredcontentslider.turnpage(setting, this.className)
  return false
 }
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
 targetobject.filters[0].opacity=value*100
else //IE 5.5
 targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
 setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
 setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value

},

init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}

}

//]]>
</script>

<style>
#slider4{
border: 2px solid #181818;
background: #ffffff;
margin-left: 9px;
}
#paginate-slider4{
border-color: #181818;
margin-left: 9px;
margin-top: 4px;
}
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid #181818;
margin-top: 5px;
}
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid #ffc04e;
}
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 500px; /*width of featured content slider*/
height: 325px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 500px; /*width of content DIVs within slider. Total width should equal slider&#39;s inner width */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 500px; /*Width of pagination DIV. Total width should equal slider&#39;s outer width */
text-align: right;
background-color: #ffffff;
padding: 0px 5px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #181818;
background: #ffffff;
}
.pagination a:hover, .pagination a.selected{
color: #181818;
background-color: #ffffff;
}
</style>

Note : You can change width,height,... as you like.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.

<div style="float:left;">

<div id="slider4" class="sliderwrapper">

<div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv"></div>

</div>

<div id="paginate-slider4">

<a href="#" class="toc"><img alt="IMAGE-1" src="IMAGE-1-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-2" src="IMAGE-2-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-3" src="IMAGE-3-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-4" src="IMAGE-4-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-5" src="IMAGE-5-THUMBNAIL-LINK"/></a>

</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

</div>

Note : Replace IMAGE-X-LINKs and IMAGE-X-THUMBNAIL-LINKs with your image links.

Now you are done.Look at the,
DEMO of Featured Images Slideshow+Slider

Label: Blogger, Slideshow

Membuat Featured Slide Show, slide show

11.12 | Diposting oleh Hudi Art |

Feature Slide show bisa kita gunakan untuk menampilkan gambar dan link produk, jasa dari web/blog kita.

Untuk membuatnya mari kita ikuti tutorial berikut ini :

1. Login ke Blogger

2. Pilih tab Design > Edit HTML > Centang tanda Expand Widget Templates

3. Cari kode ]]></b:skin>

4. Copy code di bawah ini lalu pastekan tepat di bawah code ]]></b:skin>

<style type='text/css'> /* Featured */ #featured{ float:left; width:620px; height:292px; padding:0; margin-bottom:20px; position:relative; overflow:hidden; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:415px; list-style:none; padding:0; margin:0; width:205px; height:292px; overflow:auto; overflow-x:hidden; z-index:100; } #featured ul.ui-tabs-nav li{ padding:0 0 0 15px; } #featured ul.ui-tabs-nav li img{ float:left; margin:0 5px 0 0; background:#fff; padding:3px; width:70px !important; height: 57px !important; } #featured ul.ui-tabs-nav li span{ position:relative; left:0; top:13%; line-height:1.3em; } #featured li.ui-tabs-nav-item a{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pUaGBD6l_D7Ew3gvIs_a9vbqaxQfMDEPnvhgVTdptNlYK38l7iqwrX-V7pl4SfYi9BA08Q1RunJxQawd4jTWbzCM1xwPBBMRQDgBeAERck6rCFCla3aUCO31bEfEjOaTh2UhhY5jqkU/s1600/panel-bg.jpg) no-repeat; color:#fff; display:block; padding:5px; height:63px; text-decoration:none; line-height:1.2em; outline:none; } #featured li.ui-tabs-selected{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_M8vRGrVxXqmgxHUAJ6jPN_aFNBogY7rcV2eeSLbrWIRRkvu3o0y2cKIR952EbUeHtM93muDdi1i-0TN1k6_8gvnmxeQ26Cj8V6edxx32fzgWjNQVxlaTGzvffubsZl_OANSUTSlEdiY/s1600/arrow.png') center left no-repeat; z-index:100; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#f8ac00; color:#333 } #featured .ui-tabs-panel{ width:430px; height:292px; position:relative; padding:0; margin:0; z-index:50; } #featured .ui-tabs-panel img{ width:430px !important; height:290px !important; z-index:50; } #featured .ui-tabs-panel .info{ position:absolute; padding:5px 10px; bottom:0; left:0; overflow:hidden; height:63px; width:410px; background:#111; opacity:0.85; filter:alpha(opacity=85); .width: 100%; /* IE */ z-index:50; } #featured .info h3{ font-size:20px; padding:0; margin:0; overflow:hidden } #featured .info p{ margin:0; line-height:1.4em; color:#fff } #featured .info a, #featured .info a:visited{ text-decoration:none; color:#f8ac00 } #featured .info a:hover{ text-decoration:underline; } #featured .ui-tabs-hide{ display:none } </style>

5. Kemudian cari lagi code <div id='main-wrapper'>

6. Copy code dibawah ini dan pastekan tepat di bawah code <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType != "item"'> <div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src=' URL Gambar artikel 1 ' width='80'/><span>Judul Artikel 1</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src=' URL Gambar artikel 2' width='80'/><span>Judul Artikel 2</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src=' URL Gambar artikel 3' width='80'/><span>Judul Artikel 3</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='URL Gambar artikel 4' width='80'/><span>Judul Artikel 4</span></a></li> </ul>  <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> <img alt='testing' height='290' src=' URL Gambar artikel 1' width='430'/> <div class='info'> <h3><a href='URL Artikel 1'>Judul Artikel 1</a></h3> <p>Isi keterangan artikel 1</p> </div> </div>  <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> <img alt='testing' height='290' src='URL Gambar artikel 2' width='430'/> <div class='info'> <h3><a href='URL Artikel 2'>Judul Artikel 2</a></h3> <p>Isi keterangan artikel 2</p> </div> </div>  <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> <img alt='testing' height='290' src='URL Gambar artikel 3' width='430'/> <div class='info'> <h3><a href='URL Artikel 3'>Judul Artikel 3</a></h3> <p>Isi keterangan artikel 3</p> </div> </div>  <div class='ui-tabs-panel' id='fragment-1' style=''> <img alt='testing' height='290' src='URL Gambar artikel 4' width='430'/> <div class='info'> <h3><a href='URL Artikel 4'>Judul Artikel 4</a></h3> <p>Isi keterangan artikel 4</p> </div> </div> </div> </b:if> </b:if>  <div class='clear'> </div>

7. Cari code </body>

8. Copy code di bawah ini dan pastekan di atas code </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> <script src='http://dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js' type='text/javascript'/> type='text/javascript'/>

9. Ganti tulisan URL Gambar dengan gambar artikel

Ganti tulisan Judul artikel dengan judul artikel yang ingin kamu tampilkan

Ganti URL artikerl dengan url artikel yang ingin kamu tampilkan

10. Setelah selesai simpan template dan lihat hasilnya.

Selesai sudah tutorial Cara Membuat Featured Slide Show, selamat mencoba, semoga berhasil dan bermanfaat.

Label: Blogger, Slideshow

Membuat Simple Slide Show Sederhana

02.14 | Diposting oleh Hudi Art |

Slide Show ini lebih sederhana ketimbang cara membuat sliding feature post yang sebelum pernah saya posting. Tampilannya tidak kalah menarik dan di jamin tidak lelet ditempatkan di blog anda. Sekarang mari kita bahas cara membuat simple slide show ini, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-slideshow.js' type='text/javascript'/>
<style type='text/css'>
ul.slideshow{list-style:none; width:400px; height:200px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; }
ul.slideshow li{position:absolute; left:0; right:0}
ul.slideshow li.show{z-index:500}
ul img{width:400px; height:250px; border:none}
#slideshow-caption{width:500px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500}
#slideshow-caption .slideshow-caption-container{padding:5px 10px; z-index:1000}
#slideshow-caption h3{margin:0; padding:0; font-size:16px}
#slideshow-caption p{margin:5px 0 0 0; padding:0}
</style>

Klik Simpan Template
Selanjutnya klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<ul class="slideshow">
<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQi3bsrgNx2QZlW8usp1hLNhHTexySlZn65LYL0Q9jcq49f1nR9" title="judul gambar 1"
alt="deskripsi gambar 1" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSC4hhV85L6rR8E_4orJuFFmgMQAGEkLahRizLN0TLLLFofgQdy" title="judul gambar 2" alt="deskripsi gambar 2" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTUulXmOmQfig52BbjbWnVHc76_hGioRxQqVZesUgv6vM2BP2D8" title="judul gambar 3" alt="deskripsi gambar 3" /></a></li>

<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRIZzxTcdcqZdBKIXR5_p7c4xMloe9wnf5sbJ6FU7fSkV-_K3qO" title="judul gambar 4" alt="deskripsi gambar 4" /></a></li>
</ul>

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

Label: Blogger, Slideshow

Membuat Slideshow Sederhana dengan Javascript

01.15 | Diposting oleh Hudi Art |

Pernahkah kalian membayangkan bagaimana cara membuat sebuah slideshow pada suatu halaman web? Tentu caranya sangat sulit, tapi tentu saja kita perlu mengetahui dasar-dasarnya terlebih dahulu. Nah di Tutorial Yodey kali ini, kita akan membahas sedikit ilmu mengenai slideshow dengan menggunakan javascript. Sebagai contoh awal kita pakai saja sebuah tag SELECT untuk membuat slideshow tersebut.

Contoh Demo :

Langkah awal yang harus perbuat adalah membuat file HTML dengan nama slideshow.html, kemudian taruh juga 4 buah gambar dengan format .jpg dan letakkan gambar-gambar tersebut di satu folder dengan file slideshow.html ini. Lalu buat sebuah tag SELECT dan tag DIV untuk menampilkan gambar dengan script HTML. Ini tidaklah sulit, tapi jika ada diantara kalian yang belum paham, kalian bisa melihat contoh dibawah ini:

<select id="pilihgambar" onchange="slideShow()">
<option value="1">gambar1</option>
<option value="2">gambar2</option>
<option value="3">gambar3</option>
<option value="4">gambar4</option>
</select>

<div id="slideshow"></div>

<script type="text/javascript">
function slideShow(){
var nilai = document.getElementById("pilihgambar").value;
if(nilai==1){
document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-black.png'>";
}
if(nilai==2){
document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-white.png'>";
}
if(nilai == 3){
document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-4.png'>";
}
if(nilai == 4){
document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-3.png'>";
}
}
</script>

Login ke Akun Bloger anda.
Masuk kerancangan HTML
Tambah Gatget pilih HTML/Java Script dan Simpan Slesai broo..

Slamat mencoba, "Salam Blogger Indonesia"
Semoga Bermanfaat...............

Label: Blogger, Slideshow

Membuat Slideshow Foto di Blog V2

11.40 | Diposting oleh Hudi Art |

Setelah hilir mudik kesana sini untuk mencari cara membuat slideshow foto untuk blog akhirnya ketemu salah satu website yang memberikan layanan gratis untuk membuat slideshow foto diantaranya http://www.photosnack.com/ dan http://www.slideroll.com/. Pada pembahasan kali ini saya akan menggunakan photosnack.com untuk membuat slideshow foto keluarga saya. OK langsung aja ke TKP.

Berikut langkah-langkahnya:
1. Masuk ke situs http://www.photosnack.com/ lalu klik tombol Make a slideshow untuk memulai membuat slideshow foto.

2. Berikutnya akan tampil pilihan Sign in dan Register, karena baru pertama kali membuat slide show pilih Register dan lakukan pengisian nama, alamat email dan password email lalu klik tombol Register.

3. Akan tampil ucapan terimakasih dan kamu disuruh untuk memverifikasi email yang dikirim oleh photosnack.com ke email kamu. Lakukan verifikasi terlebih dahulu di email kamu kemudian kembali lagi ke situs photosnack.com lalu klik tombol Continue.

4. Berikutnya pilih saja My computer lalu klik tombol Browse untuk memilih sejumlah foto yang ada pada komputer kamu, pada proses ini akan memakan waktu sedikit lama tergantung jumlah foto yang mau ditambahkan. Jenis foto yang support yaitu berekstensi jpg, jpeg, png dan gif dan ukuran setiap foto tidak boleh lebih dari 10 MB. Jika proses upload selesai selanjutnya klik tombol Next (di sudut kanan atas).

5. Lakukan pemilihan template yang kamu inginkan dengan cara mengklik gambar templatenya, akan tampil preview templatenya jika tidak cocok klik saja tombol Cancel dan sebaliknya jika sudah menemukan pilihan yang sesuai klik tombol Use this template kemudian klik tombol Finish.

6. Klik link dibawah Direct link, maka link tersebut akan tampil di tab baru. Kemudian klik Share / Embed lihat gambar no. 7 bagian bawahnya untuk mengetahui posisinya.

Label: Blogger, Slideshow

Membuat Slide Show Foto Di Blogger /Blogspot

11.33 | Diposting oleh Hudi Art |

Cara Membuat Slide Show Foto Di Blogger /Blogspot
Singkat padat stelah share Cara Membuat Preview Gambar Di Blog langsung aja kangroni menanggapi permintaan sobat fb kangroni yang ingin tahu bagaimana caranya membuat slide show foto di blog.
Sekedar pengetahuan mengenai slide show foto yaitu gambar atau foto yang tampak berubah-ubah secara berurutan dan otomatis pada halaman blog.

Langkah-langkah Membuat Slide Show Foto Di Blogger /Blogspot

1.Login Blogger.com
2.Masuk halaman Rancangan lalu pilih Edit HTML
3.Cari kode </head>
4.Selanjutnya taruh kode dibawah ini sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script>
<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

5.Save/simpan.Selanjutnya sobat kembali kehalaman Rancangan lalu klik Tambah Gadget kemudian pilih HTML/JavaScript dan masukkan kode dibawah ini:

<ul class="slideshow">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM15CtnJnaOmEQeb_7vuAcvlrtT53aDuGTQ8B_YowEgjklwUuyoRY3ZuSkWkR6l_5uEUEw3K6uALcy0lAGNL0dwGsiJVl0HI4VdKwHTm4JDV3F4uKxrHniBwPQkmk8X6Wiw4vRJuEIZA/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-rwG3VKOvrRW2-XqHS-36iFnPxF0QDy-Do2JdVLadvO42wHfh-LQXi_wqJMq90rJc1-1tq_jVA4YH8z2M9RMG2pzER4BAMA0xu0kWz0uQbhmH231xtKiloR8V0bi5v43GiUXS2v4QQU/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlDg9Uq-GntOLe5K9diE6HdUkI_ARk31uzuqwtiCVHKeXU2lvaav649M7UPrg7R9D4-f8_l4uvWGBjS-GbbqFins9cHwrAkCmW5H3pU8znhuedz0sHq2D8kwLKLDOre8C9WjtU_uQW-fE/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEK39w_9rRUKi_I7cFlAsm6o82eFiWilClekFK0B3z2E_eF8kAr9BCz9Z-9vMC7zzj-k0C9CteACUw-XY0ZrxiJsgsb46KEyJUCIrf0BhjIgD_N2r0-xwfjg7qQ_ySfrEP8lI0A1w3Z9Y/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

6.Simpan dan lihat hasilnya Slide Show Foto Di Blogger /Blogspot.
Ket:Untuk kode yang diberi warna merah ganti dengan URL/link gambar sobat dan warna biru untuk judul dan deskripsi gambar agar bisa di indeks oleh mesin pencari Google dll.

Label: Blogger, Slideshow