Hi quest , welcome | sign in | registered now | need help ?
Showing posts with label auto slider. Show all posts
Showing posts with label auto slider. Show all posts

Script Slider Entri Populer ( slider entri popular )

Tutorial-Onlineku.Script slider entri populer atau posting popular
berikut cara pasangnya
==== DEMO ====
1.Login ke blogger dengan ID anda. 
2.Klik Tata Letak. 
3.KLik tab Edit HTM/Rancangan. 
4.Klik tambah gadget Entri pupuler lalu save
5.Klik Tambah gadget pilih HTML/javascrip
6.Copy code di bawah ini lalu vaste pada gatget HTML/javascrip dan simpan wedget anda

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

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
 
}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}




#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;  
}

#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Sehingga posisinya seperti screensho berikut ini:



Sekian semoga bisa membantu,Jika kurang jelas silahkan cooment pada form comment di bawah ini....

6:29 PM | 0 komentar |

Plugin Lebel Bergerak ( Lebel Auto Plugin )

Tutorial-Onlineku.Oke langsung saja sob.. tentu sudah tidak asing bagi anda yang sering browsing da melihat di suatu website ada plugin artikel otomatis jika di sentuh dg mouse maka artikel akan bergerak.Tapi ingat penulisan alamat URL lebel jangan sampai salah seperti (http://tutorial-onlineku.blogspot.com/search/label/Trik%20BlogSpot ) jangan di tulis ( http://tutorial-onlineku.blogspot.com/search/label/Trik BlogSpot ) Kara Plash Plugin tidak akan berfungsi.





1.Login ke blogger dengan ID anda.
2.Klik Tata Letak.
3.KLik tab Edit HTM/Rancangan.
4.Klik Tambah wedget HTML/javascrip
5.Copy code di bawah ini lalu simpan wedget anda

<div class="sidebar-box">
<embed quality="high" allowscriptaccess="always" flashvars="tcolor=0xff6600&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com/search/label/Trik%20BlogSpot'style='12'&gt;Trik Blogspot&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;WEB DESIGN&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;MAINTENANCE&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;SEO SPECIALIST&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;TRAFFIC WEB&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;MODIFICATION&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;CMS PROFESSIONAL&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;PHP&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;JAVA SCRIPT&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;HTML&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;DRUPAL&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;JOOMLA&lt;/a&gt;

&lt;a href='http://tutorial-onlineku.blogspot.com'style='12'&gt;WP PREMIUM&lt;/a&gt;

&lt;/tags&gt;" type="application/x-shockwave-flash" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" id="tagcloud" bgcolor="#111111" name="tagcloud" height="250" width="300"></embed></div>
6.Save tample anda dan lihat hasilnya

NB.Silahkan ganti tanda merah diatas sesuai dg Url Label Blog anda dan sesuai dg keinginan anda.
12:19 AM | 0 komentar |

Auto slider bagian tiga ( slider lebel images )

Tutorial-Onlineku.Jika sebelumya saya posting auto slider bagian dua Kali ini akan saya posting auto slider bagian tiga,Bagi anda yang igin pasang auto slider Image Posting di bagian header blog mungkin slider yang ini yang anda butuhkan serta simak tutorialnya di bawah ini:


Caranya sebagai berikut:
1.Login ke akun blooger anda.
2.Masuk ke doshbor blog anda
3.Klik tab Rancangan dan centang Expan wedget
4.Cari kode ]]></b:skin>
5.Simpan code di bawwah ini di atas code ]]></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/AVvXsEhpoTUT1KrM5Sxp7yRTdyEKGZLAHDf8_d382rTEK_VkeHiorbXzftMwJ5FEeVaLLBBu9SqoQ-7AAv53STU8zs7JLFKLzpUcZMNxwMtlw2woPDP26EqbIZ9ORKkmY-v3LrcFr4O1ezOjKKs/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxNZWjPNZKy9w61clkKue2XZ3X5TQNHU35g8hZ5IfEdgrRiAypApa5ALcSYToP9GlIH3h6qaA6ByT47VNXy6aqCZ_swxFYGdHSWPX_fZThdPtMs8J7qxjPfIOyXsB215Ybpb4zLqN9fL0/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/AVvXsEhA6RqMuSSMqEHYOpNS2fKrYhmRVEaRYRpEiGLc7mj3baynruaLuRqRuw06OqCHMp1u1vFBOt8sjpDNjhPF6_Nu2ytrm_fu08M6f7-M0g810SzRgc9qW6SA7Bm3-P3hcJp5h6IujP4AqPw/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQWPiGfO2nMzPvQSsEi6Ge0ukayNaNiVLALLs2U0aemy-QIF-efwrF4lsj9QuZi9kIzgC7PGRB2cXg7x6jC9Wejr5aELzWmb8q4GX3R-PZYlMDrWQHc3GT5SoC2mcqghXsXD1t9gijNE/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/AVvXsEhKW3D3ATxbg0rbUXguOgvfZYaQWrLmTOf9sUPbiAUgnVJN31ZWzYRW6Gla_vziAudNa5CIJwEiYcFCY_nj7SlMdsyCcVZUl7BAsJHubclqGb0PYfl4JzABBAWOZx-8mXFnKT-SpBoj9Nw/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/AVvXsEiWrm-3-MOe26KOFfEzG1267tBvYqcUcLpsmsH6ximItmk-FoU4nfZTfjcbHfPSR0f_c45oTMod-IA_5RB-ZeWmzqbpmDai_epBf-YM5-Gfb31hoin7Kjr1jDOTBe4Ew2evoBDS2UjpPqQ/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}

6.Cari code </head> lalu copy dan simpan code di bawah ini di atas code</head>

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

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-s3bQv-TqHMJnYp-8BfUEYtOlLjuSoITcB2jZ7roibGK91hPvZHAleH8UCatMdOCvCu5nmCHtbMUKmdfTnZGK8homypKX42elWmJFsfFTOhlCRCjp9mfDttzljC2F7Cdh5qcQTWPJVM/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>

7.Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatas <div id='main-wrapper'>

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

Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
11:53 PM | 0 komentar |

Auto slider bagian Dua ( slider image entri )

Tutorial-Onlineku.Jika sebelumya saya posting auto slider bagian satu Kali ini akan saya posting auto slider bagian dua,Bagi anda yang igin pasang auto slider Image Posting di bagian header blog mungkin slider yang ini yang anda butuhkan serta simak tutorialnya di bawah ini:


Caranya sebagai berikut:
1.Login ke akun blooger anda.
2.Masuk ke doshbor blog anda
3.Klik tab Rancangan dan centang Expan wedget
4.Cari kode ]]></b:skin>
5.Simpan code di bawwah ini di atas code ]]></b:skin>


#carousel{width:960px;height:330px;border:1px solid #386361;position:relative;display:block;background:#e2e2e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim23HCZAlEvV4sJnB8D_nr7hgKfJ8fxY-18UY_xIpTO7dg9YOmJ8vr3wuKzICwPjbovVkvM8PuAlxIijhowujm4Q_lHbkM5h-jt6bfIbfCOQ9iHzUrkfkBTzCIjhBLq5m1XbI9nWKq3Ok/s1600/outer.png) repeat-x top;margin:10px auto;padding:0 auto}
#carousel .container{position:absolute;left:25px;width:920px;height:330px;overflow:hidden}
#carousel #previous_button{position:absolute;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMpombQZODRnK6_Y3se3gDLpUnI_8CLFL4gZYonMycIcimkd70PoPdN1_ymFDdi34GYTpD4U8DPB0ALPRf6D6X3ZWExDN6-ozZYfElcVVojUoNxwg4SSgdXmGRxivEhLPdMgJz2jUk4Y/s1600/prev.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJaE5WW4mEdR9oQ6nZ9PD4JNYHb8yjdN-OzXwymkTsFsspdIr7dZovQE3hZVv_Rntkt3bHAfN8G11CtxVgrFnJgN62I1c56Yc90di-5pKQ4z3kxs6DQNhtccGNDCYhNMnxzQSizKelbLY/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{filter:alpha(opacity=80);opacity:.8}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#143234 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizzJySsOKv-ZPOmPcqoYRhybKR1TfuV0AfiaMm8eDHXe_3kR_0_njJq9SetLndTxnt4HnQJOZk4_my7OGUsE0Q3168s9tHmdyYzSBf1vog1PFptszEhLU-lWD6OA4CfQQSm9pBcZwlI5Q/s1600/sliderbg.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;line-height:1.2em;width:200px;height:300px;margin:0 1px 20px 12px;padding:6px}
#carousel ul li a.slider_title{color:#5ea19d;display:block;margin-top:5px;text-shadow:0 1px 1px #000}
#carousel ul li a.slider_title:hover{color:#f7bc2f}





6.Cari code </head> lalu copy dan simpan code di bawah ini di atas code </head>



<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYk6RMB42ntq7_ntqbp8K8TP7GBjPQgJTdAlvOMtdXpEiqtn0yCqwQuOhL6VkekXaEciUV4BtsELSiYuDQH4L5ND2rnmTuKB-oQqTs1sjnKiENQob8jOxxagPBvEoUWXD7heu6M1OUAyK9/s1600/no-video.gif";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;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;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="200" height="250" 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>')}function showrecentposts5(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;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='<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="100" height="69" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}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;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;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="tutorial-onlineku"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="tutorial-onlineku_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;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!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYk6RMB42ntq7_ntqbp8K8TP7GBjPQgJTdAlvOMtdXpEiqtn0yCqwQuOhL6VkekXaEciUV4BtsELSiYuDQH4L5ND2rnmTuKB-oQqTs1sjnKiENQob8jOxxagPBvEoUWXD7heu6M1OUAyK9/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;float:left;background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCL6OlGfLAuBz2EiT9EMZ7lc3OMEWzCZEcK4_mbCqL1Smbt6rKGiNS9d4I3ADN2fpYJEJqhDQlnFCjWlAxuBlA8nIXFmOfA2Mb9ku52zD3_khp0TIerT6VAxpsxQiMXY7jG8DvZN1Llo/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;');if(i!=0)document.write('background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCL6OlGfLAuBz2EiT9EMZ7lc3OMEWzCZEcK4_mbCqL1Smbt6rKGiNS9d4I3ADN2fpYJEJqhDQlnFCjWlAxuBlA8nIXFmOfA2Mb9ku52zD3_khp0TIerT6VAxpsxQiMXY7jG8DvZN1Llo/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="tutorial-onlineku_img" src="'+thumburl[r]+'"/><br/><div style="width:132px;padding:0 10px;color:#333;height:35px;text-align:center;margin:0px 0px; font:14px PT Sans Narrow; line-height:16px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<script src='http://tutorial-onlineku.googlecode.com/files/carousellite.js' type='text/javascript'/>




7.Cari code <body> lalu copy dan simpan code di bawah ini tepat di bawah code <body> Codenya sudah saya parse jadi kalian ngak usah repot memparsenya biar siap pasang.(hasilnya akan tampil di atas header blog)
8.Atau mau di simpai di bawah header blog..?Cari code  <div id='content-wrapper'>  lalu copy dan simpan code di bawah ini tepat di bawah code  <div id='content-wrapper'>  Codenya sudah saya parse jadi kalian ngak usah repot memparsenya biar siap pasang.(hasilnya akan tampil di bawah header blog)

Ket:Code di bawah ini sudah saya parse agar bissa di simpan di dalam script Html blog kalian,Tapi jika anda mau parse code html yang lain anda bisa parse ( disini ) Pilihan dimana anda mau menempatkan slidernya terserah anda..


&lt;div id=&#039;crosscol-wrapper&#039;&gt;
&lt;div id=&#039;crosscol-wrapper&#039;&gt;
&amp;lt;div id=&amp;#39;carousel&amp;#39;&amp;gt;
&amp;lt;div id=&amp;#39;previous_button&amp;#39;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;#39;container&amp;#39;&amp;gt;
&amp;lt;script&amp;gt;
document.write(&amp;quot; &amp;lt;script src=\&amp;quot;/feeds/posts/default?max-results=&amp;quot;+numposts1+&amp;quot;&amp;amp;orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=showrecentposts\&amp;quot;&amp;gt;&amp;lt;\/script&amp;gt;&amp;quot;);
&amp;lt;/script&amp;gt;
&amp;lt;div class=&amp;#39;clear&amp;#39;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div id=&amp;#39;next_button&amp;#39;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script type=&amp;#39;text/javascript&amp;#39;&amp;gt;
(function($) { $(document).ready(function(){
$(&amp;quot;#carousel .container&amp;quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: &amp;quot;#previous_button&amp;quot;,
btnNext: &amp;quot;#next_button&amp;quot;
});
})})(jQuery)
&amp;lt;/script&amp;gt;
      &lt;/div&gt;&lt;/div&gt;

9.Save tamplate anda dan lihat hasilnya jika ukuranya ngak sesuai silahkan anda robah ukuranya sesuai dg tamplate anda sendiri,Selesai dan smoga sukses...

Nb.Code scrip no 7 atau yang di atas ini yang menentukan di mana anda mau menempatkan posisi slider entah itu di bagian header blog atau di bagian bawah header blog
11:15 PM | 0 komentar |

Auto slider bagian satu

Tutorial-Onlineku.Bagi anda yang mau pasang slider silahkan ikuti langkah berikut:

===>( DEMO SLIDER )<===

To the point saja mas bro,lagi males nulis tapi pengen isi postingan,semoga mas bro cepat paham dan mudah di mengerti untuk penjelasan saya di bawah ini.

Simpan code di bawwah ini di atas code ]]></b:skin>

.tutorial-onlineku {
height: 200px;
width: 526px;
padding:0;
margin:0;
overflow: hidden; }
.tutorial-onlineku img {
height: 198px;
width: 524px;
padding: 0px;}
.tutorial-onlineku img ,.tutorial-onlineku ,#slider{
background:transparents;
border: 1px solid #FDA200;}

Selanjutnya Simpan JavaScript berikut di atas kode </head>

<script src='http://tutorial-onlineku.googlecode.com/files/jquery-1.4.2.js' type='text/javascript'/>
<script src='http://tutorial-onlineku.googlecode.com/files/Jquery-4.0.4.js' type='text/javascript'/>
<script type='text/javascript'>$(&#39;#slider&#39;).cycle({fx:&#39;custom&#39;,cssBefore:{left: 232,top: -232,display: &#39;block&#39;},animIn: {left: 0,top: 0},animOut: {left: 232,top: 232},delay: -2000});</script>

Selanjutnya simpan TAMPLATE anda.

Lalu langkah terahir Simpan code di bawah ini pada tab Tambah Gedget HTML/Javasript Seperti scrinshot berikut ini:



<center>
<div class="tutorial-onlineku" id="slider" style="position: relative; ">
<img src="http://1.bp.blogspot.com/-tThezlmzc-w/UDR6EJIfE-I/AAAAAAAAAC8/NXtzmQPBgPE/s320/sunset+di+pantai+sanur.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 6; opacity: 5; " />
<img src="http://1.bp.blogspot.com/-Hr29_GcV5a8/UD1Hzc8OObI/AAAAAAAAAFE/OjGV2jmabyA/s1600/nasi+goreng.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 5; " />
<img src="http://4.bp.blogspot.com/-y5d6hxR9oag/UEFE_7BGOEI/AAAAAAAAAG8/6IweWAXHFf0/s320/demo.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 4; " />
<img src="http://3.bp.blogspot.com/-yht602WpOjk/UD1OEybnKjI/AAAAAAAAAFU/vwc65H0n_bo/s1600/teh+tawar.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 3; " />
<img src="http://3.bp.blogspot.com/-OOFglIrVNNs/UDnBcrxtbQI/AAAAAAAADis/FDHzSeOcgyA/s1600/tutorial.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 2; " />
<img src="http://3.bp.blogspot.com/-VPXzZoPQwvI/UCT8FNgG2cI/AAAAAAAADWM/NmR9cwcaUa4/s1600/raya_ketupat.jpg" style="position: absolute; top: 232px; left: 232px; display: block; z-index: 1; " />
</div>
</center>

Lalu simpan gedget anda dan lihat hasilnya.

Ket:Silahkan ganti tex yang saya kasih tanda merah dg url gambar yang kalian inginkan.

Atau anda mau pasang SiteMap pada blog anda silahkan baca tutorialnya
==> (==di sini ==)<===
9:11 PM | 0 komentar |
Flag Counter
 
profil