Monday, 3 December 2012

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

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

22 komentar

ThQ infonya masss
http://crew-lp.blogspot.com/

Wew, ini nih yang saya cari" akhirnya ketemu juga di xpress community
thanks yo sob artikel nya :D

Wow, mantep banget artikelnya (y)
thanks mas :D

@Satya pascal : oke terimakasih ^^
@Marvel's : terimakasih juga sob :)

mantap artikel ny mas..

http://id-cyb3r.blogspot.com/

bagus tuh tingkat ya..

Kunjugan balik dan komentar ane tunggu : http://m-technologi.blogspot.com/

Terima Kasih atas infonya masbro

Akhirnya kk...
Akhirnya ketemu juga yg aq cari...
Ga sengaja lagi blogwalking akhirnya ketemu... :v

bro sory mau tanya kok tampilan saya jadi aneh ya? artikel posting keluar dari kotak nya gitu itu kenapa ya?

akhirnya ketemu yang aku cari , ooh ia gan biar cuma nampak foto aja ga ada postnya gmna ya

jadiin nol (0) aja summary img sama summary no_img nya ^_^

klo ingin muncul cuman 9 postingan di halaman home gimana caranya

saya udah coba tapi gagal gan, postingannya malah nubruk2 semua..:(

saya baru belajar nge blog dan artikelnya sangat membantu terimakasih dan mungkin kalau berkenan silahkan mampir. http://deasin-rumah-minimalis.blogspot.com/

Agan, itu older post, newer post sama beranda jadi pindah di bagian kanan body home gan..
Gimana ya solusinya..

soalnya template yang saya gunakan hanya 1 side bar sebelah kanan, kan aneh jadinya :v

http://animafuntastic.blogspot.com/

Artikel bagus gan, tutorial seperti ini gan yang saya cari

Bagus gan artikelnya ane jadi terbantu nih.

Btw kunjungi blog saya:
http://lantingrusak.blogspot.co.id/

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.
EmoticonEmoticon