Cara Membuat Slideshow dengan Thumbnail







Pada postingan kali ini saya akan menjelaskan cara lain membuat tampilan slideshow pada blogger, tampilannya sama persis akan tetapi caranya agak sedikit berbeda, dan penggunaanya lebih praktis.



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.

Okeh, sekian dulu tutorialnya,,,


Sumber : http://www.internet-box.co.cc

0 komentar:

Poskan Komentar

 

Copyright © 2010 Blognya Ikhwan All Rights Reserved

Design by Dzignine