KAPAK Comunity - Membuat Thumb Otomatis Posting Menurut Label Pilihan, Alhamdulillah pada kesempatan pagi yang sangat cerah ini KAPAK Comunity masih bisa berbagi dengan para sahabat KAPAK Comunity, pada postingan kali ini KAPAK Comunity akan membahas tentang Membuat Thumb Otomatis Posting Menurut Label Pilihan, mau tau bagaimana cara membuatnya silahkan baca sampai terahir dan langsung di praktekkan biar ada manfaatnya.
Membuat Thumb Otomatis Posting Menurut Label Pilihan
Fungsi dari Thumb otomatis ini adalah kita bisa memilih postingan berdasarkan label yang telah kita berikan terhadap postingan kita. nah sudah taukan fungsinya mari kita buat.
1. Silahkan masuk ke Bloggernya Pilih Rancangan / Layout => Edit HTML => Centang "Expend Widget".
2. Carilah kode </head> kalau sudah ditemukan taruh kode ini di atasnya kode </head>
<!-- Label With Thumbnail -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.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!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigoMJTZrlv6YkW1_weITmHSmJA8ch8D9pbCj8Xo0mm7qfC4Ewp78-xkKQC73kMS5dsjTRR18BeJtlZ9HRnzi9zNw2cRGG8Wzpq0rUsBjdhF16sopjw3vLrsZTi_4rPEi3tihuLUz9t3Aw/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.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!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigoMJTZrlv6YkW1_weITmHSmJA8ch8D9pbCj8Xo0mm7qfC4Ewp78-xkKQC73kMS5dsjTRR18BeJtlZ9HRnzi9zNw2cRGG8Wzpq0rUsBjdhF16sopjw3vLrsZTi_4rPEi3tihuLUz9t3Aw/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>
3. setelah itu carilah kode sidebar content, kalau sudah ketemu silahkan taruh kode ini tepat dibawahnya kode tadi....
/* Idblogmaker2 Content */.Idblogmaker2 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjLRL3Ij0ywZO4O-xruZY0T1oqAX7z-JlvQht5d2SXuEH6D6XXjXb2ZJPnb3W-EW40UI4IZ4_iW3jL7NC-e_Ov2qH-8Co4tjp7O8WS7DXaTLeCFNjVQ6nOxDpE7iRQ-gZXLuV5zfCaEkU/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker2 {font:normal 12px Arial; color:#555;line-height: 1.4em;} .Idblogmaker2 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker2 li {margin:0;padding:0 auto;text-indent:0px;line-height:1.4em;} .Idblogmaker2 .widget {background:url() repeat-x bottom left;margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker2 a:link, .Idblogmaker2 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker2 a:hover {color:#000;text-decoration:underline;} .Idblogmaker2 .widget-content {margin:0 auto;padding:6px 10px;} /* IDB Featured Categories */ img.label_thumb{float:left;padding:0 auto;border:none;background:none;margin:0 10px 5px 0;height:72px;width:72px;} img.label_thumb:hover{background:none;}.label_with_thumbs {float:left;margin:0;padding:0} ul.label_with_thumbs li {margin:0 0 5px;clear:both;}.label_with_thumbs a {} .label_with_thumbs strong {} /* Idblogmaker3 Content */ .Idblogmaker3 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjLRL3Ij0ywZO4O-xruZY0T1oqAX7z-JlvQht5d2SXuEH6D6XXjXb2ZJPnb3W-EW40UI4IZ4_iW3jL7NC-e_Ov2qH-8Co4tjp7O8WS7DXaTLeCFNjVQ6nOxDpE7iRQ-gZXLuV5zfCaEkU/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker3 {font:normal 12px Arial; color:#555;line-height: 1.3em;} .Idblogmaker3 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker3 li {margin:0;padding:2px 0;text-indent:0px;line-height:1.4em;} .Idblogmaker3 .widget {margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker3 .widget-content {margin:0 auto;padding:6px 10px;}.Idblogmaker3 a:link, .Idblogmaker3 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker3 a:hover {color:#000;text-decoration:underline;}
4. Setelah itu simpan templatenya
5. Silakan buka Rancangan > Add Widget > Pilih HTML/Javascript
6. setelah itu copy code berikut ini di dalamnya.
<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script>
<script type="text/javascript" src="/feeds/posts/default/-/HACKER?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
7. Klik Simpan dan lihat hasilnya
Untuk lebih enaknya mari kita rubah kode-kodenya dengan keterangan sebagai berikut.
Perhatikan warna-wana yang kang salman tandai di atas dengan warna-warna, jika anda ingin memodifikasi tampilan dasar label thub dapat kalian ubah sesuai dengan kebutuhan dan desain yang di inginkan. petunjuknya :
- Warna Merah : image atau warna untuk judul label thumb,
- Warna Biru : Ukuran image thumb yang di tampilankan, sebaiknya di ubah jadi 60px agar cocok untuk semua jenis template blog.
- Wana Hijau : dapat Anda modifikasi jika anda tertarik untuk mengubah tampilan huruf dan ukuran dari huruf yang di tampilkan label thumb otomatis ini.
- Pada angka 4 itu merupakan jumlah postingan yang mau ditampilkan
- Pada Bacaan HACKER itu merupakan nama label yang kita berikan
Sudah Taukan tentang yg diatas silahkan di ubek-ubek codenya, selamat mencoba semoga postingan Membuat Thumb Otomatis Posting Menurut Label Pilihan ini bermanfaat buat kita semuanya....(kucoba.com)
Demo klik Here
Demo klik Here
:.