Cara Mendapatkan Hasil Maksimal Tampilan Kode CSS-HTML / JavaScript Tanpa Melalui Template Blog

Cara Mendapatkan Hasil Maksimal Tampilan Kode CSS-HTML / JavaScript Tanpa Melalui Template Blog

Ditulis oleh Ahyar, 3/19/2013

Kode CSS media online internet seperti halnya blog biasanya ditempatkan di atas kode ]]></b:skin> dalam template blog. Kode CSS ini akan menampilkan hasil secara default atau berlaku menyeluruh pada media pemasangnya.

Kode CSS ini dibuat untuk mendukung bekerja kode script seperti untuk menata tampilan media online internet blog antara lain kode untuk menampilkan posting terbaru dengan gambar snippet thumbnail berdasarkan nama label posting.

Cara mendapatkan hasil maksimal dari kode Css dan JavaScript tanpa melalui kode template blog dapat dilakukan dengan menempatkan kode <style type="text/css'> diakhiri tag penutup </style>

Contoh:

<style type="text/css"> Kode CSS yang disarankan untuk dipasang pada dalam Template Blog di atas kode ]]></b:skin> </style>

Kode CSS yang ditempatkan di atas kode ]]></b:skin> dalam template blog umumnya didukung kode javascript untuk dipasang pada gadget HTML/JavaScript sehingga dapat menampilkan hasil maksimal.

Dibawah ini merupakan kode untuk menampilkan artikel posting terbaru dengan gambar snippet thumbnail berdasarkan nama label posting blog. Kode ini seharusnya ditempatkan di 3 (tiga) posisi berbeda yaitu: diatas kode ]]></b:skin>, diatas </head> dan gadget HTML/JavaScript.

Sementara jika menggunakan tips yang diberikan diatas cukup hanya ditempatkan pada gadget HTML/Javascript saja.

Ini kodenya:

<style type="text/css">
/*** Recent Labels ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
</style>  <script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWiS5gbLheukgCXIZ0jSBDAAem4tIJTw_MqJD-m7f97veSC7ocY-NPWeViZCGwKDBR3Gs4b4CbDh0Sdmf-CUtY115YY06xXe_wqWYOEF8_uwJce1EkMYRgNGcsn6xoyXppv1xf1x6tpDEc/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('
<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b>
');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('
');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>
');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script><br />
<br />
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 180;</script><br />
<script type="text/javascript" src="/feeds/posts/default/-/Bima?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Catatan:
Ganti Bima pada kode script diatas yang berada paling bawah sesuai nama label posting media anda.

Artikel lainnya

Cara Membuat Tool Tambah Gadget Dibawah Halaman Posting Blog
Cara Membuat Menu Dropdown-Menu Menjorok ke Bawah Pada Header Blog Versi 2
Cara Menghilangkan Teks < br /> Dalam Kolom Textarea Blog
Cara Membuat Nomor Urut Otomatis Nama-Nama Label Pada gadget Label Blog
Awas .... ! Kode Menyusup Merubah Tampilan Blog Anda Tiba-Tiba