Cara Membuat Posting Blog Menjadi Thumbnail

Halo sahabat XC ! Apa kabar semuanya nie hehehe... semoga baik" aja ya...
oke, sekarang Dandy mau upate "Cara Membuat Posting Blog Menjadi Thumbnail"
Apa itu Thumbnail ? Thumbnail yaitu agar postingan blog kita jadi terbagi 2 / menjadi postingan kecil-kecil sesuai ukurannya :D
Contoh Seperti ini :) Di Blog Saya Yang Isinya Tentang Naruto :D Saya Yang Buatin Gituan :D

oke langsung saja kita ke pembahasannya :D

1. Pertama" Masuk ke Blogger Account
2. Pergi ke Template
3. Kemudian Klik Edit HTML Nah
4. Lalu Centang "Expand Template Widget"
5. Sekarang Cari Kode </head> atau memakai pencarian menekan tombol F3 / CTRL + F...
6. Kemudian Pastekan Kode Dibawah ini Di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
background:#fff;
background-image: url();
background-repeat:repeat;
border:4px solid #F6F6F6;
font-size:12px;
margin: 1px;
width:276px;
height:250px;
float:left;
margin-bottom:10px;
}
.post h1 {
text-color:;
font-size: 120%;
font:arial black;
}
h3.date-header {
font-size:10px;
background:#fff;
color:red;
}
</style>
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 240;
summary_img = 200;
img_thumb_height = 90;
img_thumb_width = 90;
</script>

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

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
</b:if>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Pengertian Code Berwarna Merah = yaitu warna latarnya
Pengertian Code berwarna Biru = Width : Lebarnya
Pengertian Code berwarna Hijau = Height : Tingginya

Gimana ? caranya mudah kan ?
pastinya donk hehehe..
oke sampai sini saja, semoga artikel ini sangat bermanfaat untuk anda :)
Jangan Lupa Tinggalkan Commentar

Credit By : Xpress Community

Tweet

Postingan terkait:

Ditulis Dandi Saseno — Monday, 3 December 2012 — 22 Comments — tutorial blog