Wednesday, May 11, 2011

cara Membuat Slideshow dengan thumbnail Pada Blogspot

Membuat Slideshow dengan Gambar Pada Blogger

bagaimana cara Membuat Slide Show dengan thumbnail pada Blogger. Pada postingan kali ini saya akan menjelaskan cara lain membuat tampilan slideshow pada blogger.



Oke, langsung ke pokok permasalahannya:

1. Langkah pertama anda harus memasukan Style CSS-nya, pergi ke Layout>> Edit HTML>> kemudian centang tulisan 'Expand Widget Templates'
2. Cari Kode ]]></b:skin>, cara mencarinya cukup gampang, anda tekan Ctrl+F pada keyboard dan tuliskan kode ]]></b:skin>, anda akan langsung menemukan latek kode tersebut. Lihat gambar.


3. Setelah ketemu letakan Style CSS berikut di atas kode tersebut:
/* ---------[ Slideshow ]--------- */
body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}

#home-top {
width:935px;
background:#fff;
margin:0 auto;
padding:10px 0px 0px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:360px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}

.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
4. Langkah selanjutnya adalah menambahkan Jquery dan Javascript, pada source kode HTML anda, Kopikan Kode berikut di bawah kode ]]></b:skin>:
/*Jquery */
<script src='http://h1.ripway.com/ricosatria/jquery.idTabs.min.js' type='text/javascript'/>
<script src='http://h1.ripway.com/ricosatria/slideshow.js' type='text/javascript'/>
<script src='http://h1.ripway.com/ricosatria/jquery.min.js' type='text/javascript'/>
<script src='http://h1.ripway.com/ricosatria/jquery.cycle.js' type='text/javascript'/>

/*Javascript */
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>

<script language='JavaScript'>
imgr = new Array();

imgr[0] = &quot;http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif&quot;;
home_page = &quot;http://www.mangabox.co.cc/&quot;;
showRandomImg = true;
aBold = true;

summaryTitle = 25; //
summaryPostm = 100; //
summaryPostf = 70; //
summaryPost = 200; //

mposts = 4; //
fposts = 5; //
hposts = 3; //
rposts = 5;

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

function showfeatureposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write(&#39;&lt;ul class=&quot;clearfix&quot; style=&quot;position: relative;&quot;&gt;&#39;);
for (var i = 0; i &lt; fposts; 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 &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
pcm = entry.link[k].title.split(&quot; &quot;)[0];
break;
}
}

if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;

postdate = entry.published.$t;

if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

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

//cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;

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

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

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

//var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; - (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;

posttitle = (aBold) ? &quot;&quot;+posttitle+&quot;&quot; : posttitle;

var trtd = &#39;&lt;li style=&quot;background: transparent url(&#39;+img[i]+&#39;)&quot; id=&quot;main-post-&#39;+i+&#39;&quot;&gt;&lt;div class=&quot;entry&quot;&gt;&lt;h2 class=&quot;post-title&quot;&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;&#39;+removeHtmlTag(postcontent,summaryPostf)+&#39;&lt;/p&gt;&lt;/div&gt;&lt;/li&gt; &#39;;

document.write(trtd);

j++;
}
document.write(&#39;&lt;/ul&gt;&#39;);
}

function showtitleposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i &lt; fposts; 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 &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
pcm = entry.link[k].title.split(&quot; &quot;)[0];
break;
}
}

if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;

postdate = entry.published.$t;

if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

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

//cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;

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

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

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

//var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; - (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;

posttitle = (aBold) ? &quot;&quot;+posttitle+&quot;&quot; : posttitle;

var trtd = &#39; &lt;li id=&quot;post-&#39;+i+&#39;&quot; class=&quot;clearfix&quot;&gt; &lt;a href=&quot;#main-post-&#39;+i+&#39;&quot; class=&quot;&quot;&gt;&lt;img height=&quot;150px&quot; width=&quot;150px&quot; class=&quot;post_thumbnail thumbnail thumbnail post_thumbnail&quot; alt=&quot;This is a Full-Width Post Without Sidebars&quot; src=&quot;&#39;+img[i]+&#39;&quot;/&gt;&#39;+posttitle+&#39;&lt;br/&gt; &#39;+m+&#39;,&#39;+day+&#39;,&#39;+y+&#39; &lt;/a&gt; &lt;/li&gt; &#39;;

document.write(trtd);

j++;
}
}

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

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

for (var i = 0; i &lt; numposts; 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 &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
pcm = entry.link[k].title.split(&quot; &quot;)[0];
break;
}
}

if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;

postdate = entry.published.$t;

if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

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

//cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;

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

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

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

//var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; - (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;

posttitle = (aBold) ? &quot;&quot;+posttitle+&quot;&quot; : posttitle;

var trtd = &#39;&lt;li class=&quot;homepost clearfix&quot;&gt;&lt;div class=&quot;entry&quot;&gt;&lt;a title=&quot;&#39;+posttitle+&#39;&quot; href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img class=&quot;post_thumbnail thumbnail thumbnail post_thumbnail&quot; height=&quot;150px&quot; width=&quot;150px&quot; src=&quot;&#39;+img[i]+&#39;&quot;&gt;&lt;/a&gt;&lt;h3 class=&quot;post-title&quot;&gt; &lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+removeHtmlTag(posttitle,summaryTitle)+&#39;&lt;/a&gt; &lt;/h3&gt;&#39;+removeHtmlTag(postcontent,summaryPost)+&#39;&lt;/div&gt;&lt;p class=&quot;bottom&quot;&gt;&#39;+m+&#39;,&#39;+day+&#39;,&#39;+y+&#39; | &lt;a title=&quot;&#39;+posttitle+&#39;&quot; href=&quot;&#39;+posturl+&#39;&quot;&gt; View post &lt;/a&gt;&lt;/p&gt;&lt;/li&gt; &#39;;

document.write(trtd);

j++;
}

}

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

for (var i = 0; i &lt; mposts; 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 &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
pcm = entry.link[k].title.split(&quot; &quot;)[0];
break;
}
}

if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;

postdate = entry.published.$t;

if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

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

//cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;

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

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

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

//var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; - (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;

posttitle = (aBold) ? &quot;&quot;+posttitle+&quot;&quot; : posttitle;

if (i&lt;3) {
var trtd = &#39;&lt;div class=&quot;post&quot;&gt;&lt;div class=&quot;entry&quot;&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img height=&quot;150px&quot; width=&quot;150px&quot; class=&quot;post_thumbnail thumbnail thumbnail post_thumbnail&quot; src=&quot;&#39;+img[i]+&#39;&quot;&gt;&lt;/a&gt;&lt;h2 class=&quot;post-title&quot;&gt;&lt;a rel=&quot;bookmark&quot; href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h2&gt;&#39;+removeHtmlTag(postcontent,summaryPostm)+&#39; &lt;/div&gt; &lt;div class=&quot;entry-bottom&quot;&gt;&#39;+m+&#39;,&#39;+day+&#39;,&#39;+y+&#39; | &lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;View Post&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&#39;;

document.write(trtd);

}

if (i==3) {
var trtd = &#39;&lt;div class=&quot;right&quot;&gt;&lt;div class=&quot;post&quot;&gt;&lt;div class=&quot;entry&quot;&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img height=&quot;150px&quot; width=&quot;150px&quot; class=&quot;post_thumbnail thumbnail thumbnail post_thumbnail&quot; src=&quot;&#39;+img[i]+&#39;&quot;&gt;&lt;/a&gt; &lt;h2 class=&quot;post-title&quot;&gt;&lt;a rel=&quot;bookmark&quot; href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h2&gt;&#39;+removeHtmlTag(postcontent,summaryPostm)+&#39;&lt;/div&gt;&lt;div class=&quot;entry-bottom&quot;&gt;&#39;+m+&#39;,&#39;+day+&#39;,&#39;+y+&#39; | &lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;View Post&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#39;;

document.write(trtd);
}

j++;
}

}

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

for (var i = 0; i &lt; hposts; 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 &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
pcm = entry.link[k].title.split(&quot; &quot;)[0];
break;
}
}

if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;

postdate = entry.published.$t;

if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

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

//cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;

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

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

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

//var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; - (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;

posttitle = (aBold) ? &quot;&quot;+posttitle+&quot;&quot; : posttitle;

var trtd = &#39;&lt;li class=&quot;homepost clearfix&quot;&gt;&lt;div class=&quot;entry&quot;&gt;&lt;a title=&quot;&#39;+posttitle+&#39;&quot; href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img class=&quot;post_thumbnail thumbnail thumbnail post_thumbnail&quot; height=&quot;150px&quot; width=&quot;150px&quot; src=&quot;&#39;+img[i]+&#39;&quot;&gt;&lt;/a&gt;&lt;h3 class=&quot;post-title&quot;&gt; &lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+removeHtmlTag(posttitle,summaryTitle)+&#39;&lt;/a&gt; &lt;/h3&gt;&#39;+removeHtmlTag(postcontent,summaryPost)+&#39;&lt;/div&gt;&lt;p class=&quot;bottom&quot;&gt;&#39;+m+&#39;,&#39;+day+&#39;,&#39;+y+&#39; | &lt;a title=&quot;&#39;+posttitle+&#39;&quot; href=&quot;&#39;+posturl+&#39;&quot;&gt; View post &lt;/a&gt;&lt;/p&gt;&lt;/li&gt; &#39;;

document.write(trtd);

j++;
}

}

function showrecentposts(json)
{
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i &lt; rposts; 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 &lt; entry.link.length; k++)
{
if (entry.link[k].rel == &#39;alternate&#39;)
{
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k &lt; entry.link.length; k++)
{
if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;)
{
pcm = entry.link[k].title.split(&quot; &quot;)[0];
break;
}
}
if (&quot;content&quot; in entry)
{
var postcontent = entry.content.$t;
}
else
if (&quot;summary&quot; in entry)
{
var postcontent = entry.summary.$t;
}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;
//cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = [&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];
var day = postdate.split(&quot;-&quot;)[2].substring(0,2);
var m = postdate.split(&quot;-&quot;)[1];
var y = postdate.split(&quot;-&quot;)[0];
for(var u2=0;u2&lt;month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
//var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; - (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;
posttitle = (aBold) ? &quot;&lt;b&gt;&quot;+posttitle+&quot;&lt;/b&gt;&quot; : posttitle;
var trtd = &#39;&lt;li&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+removeHtmlTag(posttitle,summaryTitle)+&#39;&lt;/a&gt;...&lt;/li&gt;&#39;;
document.write(trtd);
j++;
}
}

</script>
5. Sekarang kita akan masuk ke tahap yang lebih sulit. Pertama-tama tambahkan sebuah 'Gadget' pada 'Page Element' kamu, klik HTML/JavaScript.


6. Kemudian pada Judulnya kamu isikan "Label Slideshow", pada bagian di bawahnya kamu isikan juga tulisan yang sama, yaitu "Label Slideshow". Ini bertujuan untuk memudahkan kita di waktu mengedit HTML nanti.


7. Kemudian Gadget Slideshow tadi kita drag ke bagian atas postingan. Seperti gambar di bawah ini:


Sehingga posisinya akan menjadi seperti ini:


Lalu klik 'SAVE'.


8. Langkah selanjutnya, kembali lagi ke menu "Edit HTML" >> "Expand Widget Template", kemudian kamu cari tulisan "Label Slideshow" yang sudah di bikin tadi.


9. Kemudian block kode berikut:


Kemudian hapus. Ingat yang kamu hapus adalah kode yang ada tulisan "Label Slideshow"-nya jangan sampe salah hapus, Yang harus di hapus:
<b:section class='clearfix' id='home-top'>
<b:widget id='HTML1' locked='false' title='Label Slideshow' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
10. Setelah di hapus, jangan di save dulu, langsung saja kamu gantikan kode yang telah di hapus dengan kode yang di bawah ini:
<b:section class='clearfix' id='home-top'>
<b:widget id='HTML31' locked='false' title='Slideshow' type='HTML'>
<b:includable id='main'>
<div class='clearfix' id='slideshow'>
<div class='slides'>
<script language='JavaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+fposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showfeatureposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>

<ul class='slides-nav'>
<script language='JavaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+fposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showtitleposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>

</b:includable>
</b:widget>
<b:widget id='HTML41' locked='false' title='More Feature' type='HTML'>
<b:includable id='main'>
<div class='clearfix' id='more-feat'>
<script type='text/javascript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+mposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showmoreposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
</b:section>
11. Kemudian Klik "SAVE TEMPLATE", akan muncul perintah seperti di bawah ini:


Kemudian klik "DELETE WIDGETS"
Sampai di sini kamu telah berhasil membuat rancangannya. Namun jika kamu lihat di blog kamu Slideshownya masih belum muncul.

Okeh langkah Selanjutnya:

12. Kembali lagi ke "Page Element", di sana akan kamu lihat 2 buah "Gadget" tambahan, yaitu "Slideshow" dan "More Feature". Nah kita akan bermain di "Gadget" "Slideshow". Klik edit, kemudian ganti judul dan isinya sesuai dengan label yang ada pada postingan kamu. Nah misalnya saya ingin menmpilkan Slideshow Games:


Maka pada judul dan isinya saya tuliskan Games.


Ingat!! Tergantung Label Postingan kamu.
sumber:http://www.internet-box.co.cc/2010/05/membuat-slideshow-dengan-thumbnail-pada.html

No comments:

Post a Comment

Category

17 + (27) Ada - ada aja (8) Ada ada aja (1) Adidas (1) Adsense (7) Affiliate (1) Aktris (1) Alam kita (3) Alexa (2) Alexandra (1) Alias (1) Amazon (2) Anak (12) Anastasya (1) Andika (1) Android (2) Anggota (1) Angle Tattoos (1) Antivirus (8) Antivirus Terbaru (8) Apple (2) Apps untuk pelajar/mahasiswa (1) Ariel Peterpan (1) Arifinto (2) Artikel Menarik (21) Artis (1) Artis Indonesia (3) Artis manca (1) Astronomi (1) Auliani (1) Avatar berbicara (1) Bajak Laut (1) Bandung (1) BB++ (3) Belanja (1) berita (1) Berita Aneh (6) Berita Artis (6) Berita Astronomi (2) Berita Dalam negri (2) Berita Dunia (4) Berita Hewan (15) Berita Internasional (2) Berita Kesehatan (7) Berita Makanan Minuman (14) Berita Olahraga (8) Berita Panas (1) Berita Pendidikan (1) Berita Pengetahuan (2) Berita Renungan (5) Berita Sejarah (6) Berita Selebriti (1) Berita Teknologi (2) Berita Tentang Musik (2) Berita Tumbuhan (1) Berita unik (4) Berita Utama (2) Bieber (1) Bintang (1) Biografi (1) Bisnis (2) BlackBerry (7) Blog (49) Blogger (23) Brondong (1) Browser (1) Buah Unik (3) Budaya Aneh (1) Bugil (1) Cantik (1) Cara Bisnis Online (2) Cara daftar Facebook (1) Cara Recovery Data (2) Cara Self Test Printer (5) Cara Service Komputer (25) Cara Service Laptop (8) Cara Service Monitor (34) Cara Service Ponsel (3) Cara Service Printer (63) Cara Service TV (5) Cara Service UPS (1) Cari $ (16) Celebrity (3) Chrome (2) Clicksor (3) Contoh (1) Coppas Animal (1) Coppas Berita (5) Coppas Extreme (3) Coppas Foto Hot (3) Coppas Lucu (1) Coppas Mistery (1) Coppas Sejarah (1) Coppas Style (2) Coppas Unik (1) Cukur (1) Cute (5) Definisi dan Sejarah Tattoo (3) Dicukur (1) Dipanggil (1) disappear (1) Domain-Hosting (2) Download (4) Download MP3 Gratis (1) Download Software (21) Downloader (1) Dugaan (1) Dugem (1) Dunia (1) Dunia Alam (6) Dunia aneh (5) Dunia Arkeologi (1) Dunia Arkeologi dan Sejarah (1) Dunia Design (3) Dunia Ekonomi (3) Dunia Extream (3) Dunia informasi (6) Dunia Kriminal (2) Dunia Kuliner (3) Dunia Medis (4) Dunia Militer (2) Dunia Misteri (1) Dunia Pendidikan (1) Dunia Rohani (1) Dunia Sejarah (1) Dunia Sosial (7) Dunia Teknologi (6) Dunia Tips Dan Trick (1) Dunia Wanita (2) e-learning (1) Elizabeth (1) email (3) Excel (11) Facebook (8) Fakta Aneh (16) Fakta Dunia (8) Fakta Indonesia (13) Fakta Unik (68) Feed (1) Fenomena unik (1) Firefox (4) Flash (2) Football (1) Foto (2) Foto Hot (7) Freeware (24) Friendster (1) Funny (1) Funny Pics (15) Gadget (1) Gadget dan Hanphone (2) Gambar Aneh (1) Gambar Extream (4) Gambar Lucu (1) Gambar Unik (4) Game (1) Games (6) Gathan (1) Genit (4) Githa (1) Gmail (1) Google (28) Gosip (2) Gossip Celeb (4) Gratis (1) Gumilang (1) Handphone (3) hardisk (1) Health (3) Hilabi (1) Hollywood (1) Honda (1) Hot (2) Hot Girls (1) Hot News (25) Hot Pics (11) HP (1) HTC (5) html (3) Indonesia (2) info (11) Info Harga (1) Info Menarik (24) Internasional (1) Internet (19) IP Address (1) iPone (1) Istilah Komputer (1) Jadwal Piala Dunia 2010 (2) Jadwal Puasa (1) Jadwal Sholat (1) Japan (1) Jelita (1) Jennifer (1) Jepang (1) Joanne (1) Justin (1) Karena (1) Karier dan Gaya Hidup (1) kartu Natal (1) Katanya ... (5) Kate Middleton (2) Keajaiban Alam (3) Kebesaran Allah (1) Kecantikan (1) Kecantikan Dan Kesehatan (3) Kejadian Aneh (3) Kekayaan (1) Keramas (1) Keren (7) Kesehatan (5) Kisah Mistis (1) Koleksi (1) Komputer (12) Komputer dan Internet (5) Kontes Aneh (3) Kreatifitas (6) Kuliner (1) Kurniawan (1) Lady Gaga (1) Lain-Lain (2) Legenda (1) Lenovo (1) LG (2) Lifestyle (3) link (4) Link Friends (1) Lintas Indonesia (3) Lirik Lagu (1) Lorenza (1) Makan (1) Malinda (3) Maling (1) Maling ATM (2) Marcia (1) Meninggal (1) meta tag (2) Miliar (1) Military (1) Misteri (10) Misteri - Misteri Di Dunia (3) Miyabi (1) Mobil (30) Model (13) Modem ADSL (1) Monetize (16) Motivasi Dan Inspirasi (1) Motorola (1) mp3 (1) Musik (2) Nadine (1) Nafeeza (1) Nakal (4) Narkoba (1) Netbook (2) News (54) Nokia (1) Nonton (1) office 2010 (1) Oktaviany (1) Olahraga (1) Online (1) online ticket (1) Operasi (1) Otomotif (2) Paid Survey (2) paidreview (2) Panas (1) Panduan Service Monitor I (10) Panduan Service Monitor II (13) Parse (1) Payment (1) Paypal (1) PDF (4) Pengetahuan (4) Pengetahuan Umum (4) Pengingat Sholat (1) Pengolah Gambar (1) Photo (1) Piala Dunia 2010 (2) Ping (1) Plastik (1) Plug-in Wordpress (13) Polisi (1) Ponsel (10) Porno (1) Portable (2) POS UNAS SD-SMP-SMA 2010 (1) Powerpoint (2) Prediksi 2010 (1) Presenter (1) Pria (1) Printer (1) Produk (1) Produk Unik (10) Profil Artis (7) Profil Tokoh (5) Profile (1) Psikotes (1) Putri (1) Rahmat (1) Read more (1) Rehab (1) Rekor Dunia (30) related post. tips (3) Resetter Canon (26) Resetter Epson (18) Resetter HP (5) RSS (2) Sains Dan Antariksa (4) Salley (1) Samsung (9) Science (1) Sebagai (1) Sebelum (1) Sedang (1) Sejarah (3) Sejarah Dunia (1) Sekedar Share (11) sekilas info (2) Seksi (1) Seksiologi (2) Selebritis (1) Selesai (1) Seni Dan Budaya (1) Senjata (1) SEO (14) Sepeda (1) Sesudah (1) Setelah (1) Sexsualitas (1) Sexy (10) Shaleh (1) Sheila (1) Sistem Tools (1) sms lebaran (2) Software (22) Software HP (5) Softwere (8) Speedy (1) Sport (1) Statistik (1) Suami (2) Sulityo (1) Suster (1) Syahrini (1) Tahukah anda? (60) Tatto Bahu (1) Tattoo Badan (4) Tattoo China (1) Tattoo Dolphin (1) Tattoo Hewan (2) Tattoo Ikan Koi (1) Tattoo Jepang (1) Tattoo Kanji (1) Tattoo Lebah (1) Tattoo Lengan (2) Tattoo Malaikat (1) Tattoo Serangga (1) Tattoo Tengkorak (1) Tattoo Tribal (2) Tattoo Wanita (2) Taylor (1) Teknologi (2) Telanjang (1) Telkom Promo (1) Template (3) Tempo Dulu (1) Tercantik (1) Terima (1) Tip Trik Internet (8) Tip Trik Windows (7) tips (166) Tips and Trik (10) Tips Blog (1) Tips Cinta (1) Tips Dan Info (6) Tips Dan trick (5) Tips Dan Trik (3) Tips Diet (1) Tips Kecantikan (1) Tips Kesehatan (9) Tips Suami Istri (5) Tools (8) Topless (1) Tragedi (1) Translator (4) Tribal Tattoos (3) Tsunami (1) Tukang (1) Tumbuhan (1) Twiter (3) Uncategorized (2) Unik (4) Unik Dan Aneh (7) Update Antivirus (8) Upskrit (1) Usaha (1) Utility (1) Video (1) Video Extream (1) Video mesum (4) virus (3) Wakaka (2) Wanita (1) Warta Terkini (9) Warteg (1) Widget (2) windows (26) windows 7 (3) WP (1) Ziddu (7) ZTE (1)