Ngalor Ngidul: Javascript

Sript Random post With thumbnail + Title + Comment + Post Time

Minggu, Juni 10, 2012 Kelulut Klanceng 4

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GMNJcLh4bbq3ce0PhgwpVE4MNf4EZ5t_qud-4f7HSNgEbQl0kTpqrq4vEnPhC8NjBupPMQRhTQ40fmdgqGthNyz8exgAoOAJhFS-qVvSeLFimf-YRRC9vCMi0lUah32EwIQNLUHqp0o/s1600/rdp.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GMNJcLh4bbq3ce0PhgwpVE4MNf4EZ5t_qud-4f7HSNgEbQl0kTpqrq4vEnPhC8NjBupPMQRhTQ40fmdgqGthNyz8exgAoOAJhFS-qVvSeLFimf-YRRC9vCMi0lUah32EwIQNLUHqp0o/s320/rdp.PNG" width="229" /></a><br />
Beberapa hari yang lalu, saya sudah sharen script random post with thumnail only. Pada kesempatan kali ini, Admin ngalor ngidul kembali ingin share script random post. Tapi script random post kali ini bukan hanya bisa menampilkan gambar saja. Tapi sekaligus bisa menampilkan gambar atau thumbnail, judul artikel, komentar dan juga hari penulisan postingan.<br />
<br />
Seperti yang di ketahui bersama, script ini sangat berguna bagi anda yang tidak ingin memasang banyak fitur di blog anda. Karena dengan memasang satu script ini saja sudah bisa menampilkan beragam postingan terdahulu. Dimana Script ini nantinya akan menampilkan daftar posting yang berbeda setiap kali halaman di refresh.</div><br />
Tanpa banyak basa-basi langsung saja copas scriptnya dibawah ini.<br />
<br />
<pre class="javascript" name="code"><script type="text/javaScript">
var rdp_numposts=7;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];
var rdp_total_posts=0;
var rdp_current=new Array(rdp_numposts);
function totalposts(json){
rdp_total_posts=json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');
function getvalue(){
for(var i=0;i<rdp_numposts;i++){
var found=false;
var rndValue=get_random();
for(var j=0;j<rdp_current.length;j++){
if(rdp_current[j]==rndValue){
found=true;break
}
};

if(found){i--}
else{
rdp_current[i]=rndValue
}
}
};
function get_random(){
var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));
return ranNum
};
</script>

if
(rdp_get_snippet.length<rdp_snippet_length){
var rdp_snippet=rdp_get_snippet
}
else{
rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);
var space=rdp_get_snippet.lastIndexOf(" ");
rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};

for(var j=0;j<entry.link.length;j++){

if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment
}

else{
rdp_commentsNum=rdp_disable
};

if(entry.link[j].rel=='alternate'){
var rdp_posturl=entry.link[j].href;if(y!=-1){
rdp_posturl=rdp_posturl+'?m=0'
}

var rdp_postdate=entry.published.$t;
if('media$thumbnail'in entry){
var rdp_thumb=entry.media$thumbnail.url
}
else{
rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPVXJKIl3DRjRdDXMaNaInPm18JAn2MM498HfjPkCCn1YbEcpe6dOAkzvmL5pdgLUM9j6fvtZWOpVijmzKPGqxcB52JnZBRZNzcrmqwIuEizatpXdJuBGOXoA_sLfwWMx2_znzjHsVvPq8/"
}
}
};

document.write('
<li>');
document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');
document.write('<div>
<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');

if(rdp_info=='yes'){
document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'
}
document.write('<div style="clear:both">
</div></li>
')
}};
getvalue();
for(var i=0;i<rdp_numposts;i++){
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</pre><br />
*** Sebagai tambahan saja agar terlihat lebih cantik, anda bisa menambahkan CSS sesuai selera. Sebagai contoh mungkin bisa menggunakan contohnya dibawah ini.<br />
<br />
<blockquote class="tr_bq"><style><br />
#random-posts-area {width:100%;}<br />
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}<br />
#random-posts li {list-style:none;background: none;<br />
padding: 0;}<br />
#random-posts ul {padding:0; margin:0;}<br />
#random-posts span {clear:both;}<br />
</style></blockquote><br />
Lalu untuk cara penggunaannya bisa langsung kemenu design =>add gadget =>HTML/javascript.<br />
<blockquote class="tr_bq"><span style="color: #cc0000;">Letakkan kode CSS disini..</span><br />
<div class="random-posts-area"><br />
<ul id="random-posts"><br />
<span style="color: #cc0000;">Letakkan Script Diatas disini... </span><br />
</ul><br />
</div></blockquote><br />
</div>

Blogging designe Javascript Menengah Widget Sript Random post With thumbnail + Title + Comment + Post Time

Beberapa hari yang lalu, saya sudah sharen script random post with thumnail only. Pada kesempatan kali ini, Admin ngalor ngidul kembali ing...

Baca selengkapnya »

Script Random Post Thumbnail Only - By Label

Selasa, Juni 05, 2012 Kelulut Klanceng 8

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVQcCIRiPpzua5mFXClh7WT8e2Ox2pIFzjKoQzkX4XId2Ymf7lm_Y0vcacw4fKWz7zVqqFOeMcwPhu-ZFdVI-rG04E3PSwPJ0WTNSlWq_pgAsfSi69KjQ_4sHie6rKM_73TAleqhVdKY/s1600/random.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVQcCIRiPpzua5mFXClh7WT8e2Ox2pIFzjKoQzkX4XId2Ymf7lm_Y0vcacw4fKWz7zVqqFOeMcwPhu-ZFdVI-rG04E3PSwPJ0WTNSlWq_pgAsfSi69KjQ_4sHie6rKM_73TAleqhVdKY/s320/random.PNG" width="320" /></a></div>Sekian lama gak update postingan di blog ngalor ngidul, kangen juga pengen update lagi. Tapi benar-benar bingung mau posting apa. Mau bikin tutorial, tapi hampir semua bahasan sudah begitu banyak yang membahas. Mau buat tutotrial juga malu karena sudah banyak yang lebih jago. Bahkan pernah di bilang klo postingan ngalor ngidul itu tidak bermutu. ^_^<br />
<br />
Tapi gak apa-apa deh..!! Namanya juga baru belajar. Dan setahu saya walaupun untuk sebagian orang ilmu yang saya share adalah sampah, tapi saya juga tetap percaya itu bisa jadi sebongkah emas buat sebagian orang yang masih "BODOH" seperti saya.<br />
<br />
Oke..!!<br />
Pada bahasan kali ini, kita kembali akan sedikit membahas tentang script yang berfungsi untuk menampilkan postingan-postingan terdahulu. Script yang ingin saya share kali ini adalah Script Random Post. Script ini pernah saya bahas di postingan sebelumnya yaitu <i><a href="http://realfa84.blogspot.com/2012/02/script-random-post-with-thumbnail.html" target="_blank">Script Random Post with Thumbnail</a>. </i>Sebenarnya script ini lebih cocok diberi nama <strong><i>Script Random Post Thumbnail Only</i></strong>. Karena memang script ini hanya bisa menampilkan gambar atau thumbnail postingan. `<br />
<br />
Namun sebenarnya fungsi dari script ini tidak hanya sebatas menampilkan postingan secara acak berdasarkan URL utama saja. Tapi script ini juga bisa digunakan untuk menampilkan postingan secara acak dan di shortir berdasarkan label-labet tertentu dari suatu blog. Artinya kita juga bisa menampilkan posting-posting dari blog kita yang lain.<br />
Untuk caranya juga sangat gampang.<br />
<br />
1. Pertama kali seperti biasa masuk ke Dashboard => Design=> Edit HTML.<br />
2. Cari kode <span style="color: purple;"><i></head></i></span><br />
a. Update:<br />
Kode script internal<br />
<pre class="javascript" name="code"><script type="text/javascript">
//<![CDATA[
var showpostthumbnails_gal = true;
 var showpostsummary_gal    = false;
 var random_posts      = false;
function showrecentpostswiththumbs(json) {
 document.write('<div id="featured" class="clearfix grid_12">
<ul>'); 
 for (var i = 0; i < numposts_gal; i++) {
  if (random_posts == true){
  var random_int  = Math.floor(Math.random()*json.feed.entry.length);
  var entry_gal = json.feed.entry[random_int];
  }
  else{
  var entry_gal = json.feed.entry[i];
  }
  var posttitle_gal = entry_gal.title.$t;
  var posturl_gal;if (i == json.feed.entry.length) break;
  for (var k = 0; k < entry_gal.link.length;k++){
   if (entry_gal.link[k].rel == 'alternate') {
    posturl_gal = entry_gal.link[k].href;break;
   }
  }
  if("content"in entry_gal){
   var postcontent_gal=entry_gal.content.$t;
  }

s = postcontent_gal;
            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 != "")) {
                var thumburl_gal = d;
            } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';

document.write('<li> <a href="'+ posturl_gal + '"><img src="'+thumburl_gal+'" alt="" title="'+posttitle_gal+'" />');

}
//]]>
</script>
</pre><br />
b. Update :<br />
Kode script eksternal<br />
<pre class="javascript" name="code"><script src="http://sliderpostbylabel.googlecode.com/files/gallerypostswithimgonly.js">
</script>
</pre><br />
<br />
3. Copas salah satu kode di atas kemudian letakkan diatasnya .<br />
4. Kemudian ke Dashboard => Design=> Add Element => HTML/Javascript.<br />
5. Masukkan juga kode dibawah ini kedalamnya.<br />
<blockquote class="tr_bq"><script><br />
var numposts_gal = 1;<br />
var random_posts = <b><span style="color: red;">true;</span></b><br />
</script><br />
<script src="<b><i><span style="color: blue;">http://realfa84.blogspot.com</span></i></b>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"><br />
</script></blockquote>6. Ganti kode warna BIRU dengan URL Blog yang ingin anda tampilkan dan simpan.<br />
<br />
Sekarang adalah cara-cara extra.<br />
1. Ganti kode warna merah dengan FALSE jika anda hanya ingin menjadikannya Recent Post With Thumbnail only.<br />
2. Jika ingin menampilkannya sesuai label tertentu ada bisa mengeditnya menjadi seperti ini.<br />
<blockquote class="tr_bq"><script><br />
var numposts_gal = 1;<br />
var random_posts = <b><span style="color: red;">false;</span></b><br />
</script><br />
<script src="<b><i><span style="color: blue;">http://realfa84.blogspot.com</span></i></b>/feeds/posts/default/-/<b><i><span style="color: purple;">LabelPost</span></i></b>?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"><br />
</script></blockquote><div style="text-align: justify;"><br />
Jangan lupa mengganti kode-kode yang saya tandai dengan warna tertentu sesuai kebutuhan. Ganti LabelPost (kode warna ungu) Dengan Label yang ingin ditampilkan. Jika label tersebut menggunakan spasi, maka ganti kode spasi dengan <b><span style="color: #3d85c6;">%20.</span></b></div>Contoh Label = Belajar Blog maka untuk penulisannya harus dengan format seperti ini:<br />
<br />
<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><script src="<b><span style="color: blue;">http://URL-BLOG-ANDA</span></b>/feeds/posts/default/-/<b><span style="color: #660000;">Belajar</span><u><span style="color: #3d85c6;">%20</span></u><span style="color: #660000;">Blog</span></b>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></div></div></div></div><br />
<b>Update :</b><br />
Jika Cara di atas di anggap terlalu repot, Pemasangan kode script pertama juga bisa dilakukan dengan cara meletakkannya di atas kode script yang ke dua. Yaitu diatas kode no 5.</div>

Blogging designe Javascript Menengah Tingkat Lanjut Script Random Post Thumbnail Only - By Label

Sekian lama gak update postingan di blog ngalor ngidul, kangen juga pengen update lagi. Tapi benar-benar bingung mau posting apa. Mau bikin ...

Baca selengkapnya »

Script Unselect dan CSS Anti Copas

Minggu, April 22, 2012 Kelulut Klanceng 13

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjar-z3JMlJS5zLktl9cdYd0KWP_HYykGvKcv-JeoxWfFnyJeMTquAkDRw43vwkflmVdh-5irbf3TmS05-aP5WvFulAfnzFgTy-eOpVBD_nd5pbreRh01HBSlMnplDfAT4G2AikhCyoA3g/s1600/NO_RIGHT_CLICK__by_Chthonik.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" title="Script Unselect dan CSS Anti Copas"><img alt="Script Unselect dan CSS Anti Copas" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjar-z3JMlJS5zLktl9cdYd0KWP_HYykGvKcv-JeoxWfFnyJeMTquAkDRw43vwkflmVdh-5irbf3TmS05-aP5WvFulAfnzFgTy-eOpVBD_nd5pbreRh01HBSlMnplDfAT4G2AikhCyoA3g/s320/NO_RIGHT_CLICK__by_Chthonik.jpg" width="320" /></a></div><div style="text-align: justify;">Terkadang sakit memang jika tulisan atau postingan yang dikerjakan dengan susah payah kita ketahui di copy paste alias di copas alias di curi orang lain. Postingan blog ngalor ngidul sendiri mungkin rata-rata telah ada salinannya di blog yang lain. Hal ini juga lah  yang membuat malas untuk update posting.</div><div style="text-align: justify;"><br />
Sebenarnya ada sedikit keinginan untuk memasang <strong>Script Unselect atau CSS Anti Copas</strong> biar orang tidak menggunakan postingan untuk postingan blog pribadi.<br />
<br />
Ngomong-ngomong soal <strong>Script Unselect atau CSS Anti Copas</strong> ini, mungkin sebagian dari teman-teman ada yang berniat untuk memasangnya di blog pribadi.</div><br />
<b>1. Script Unselect</b><br />
<pre class="javascript" name="code"><script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE 
 target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
 target.style.MozUserSelect="none"
else //All other route (For Opera)
 target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
</pre><br />
<div style="text-align: justify;">Cara penggunaannya adalah cukup dengan mengcopy kode script diatas kemudian letakkan di dalam tag body template. Biasanya untuk kode script di template blogger masuk ke Menu Edit HTML diletakkan di atas kode <b></head></b></div><br />
<b>2. CSS anti Copas.</b><br />
<div style="text-align: justify;">Selain dengan memasang script unselect, cara lain agar postingan kita tidak bisa di copy paste alias copas adalah dengan memberikan sedikit kode CSS unselect atau CSS Anti copas. Caranya cukup gampang. Yaitu cukup dengan memberikan kode CSS dibawah ini ke kode CSS area yang tidak ingin di copas. Biasanya kode ini ditambahkan pada bagian posting.<br />
<br />
Sebagai contoh untuk menonaktifkan CSS Unselect atau CSS Anti Copas ini hanya pada bagian posting, silakan masuk ke bagian <b>Design</b> - <b>Edit HTML</b>. Kemudian cari kode <b>]]></b:skin></b> dan letakkan kode berikut diatasnya.<br />
<br />
<div id="CSS-area1"><div id="CSS-area">.post-body {<br />
display:block;<br />
-moz-user-select: none;<br />
-khtml-user-select: none;<br />
-o-user-select:none;<br />
user-select: none;<br />
unselectable: on;<br />
-webkit-user-select: none;<br />
}</div></div><br />
Jika ingin menggunakan CSS Anti Copas ini diseluruh halaman, ganti saja kode diatas menjadi;<br />
<br />
<div id="CSS-area1"><div id="CSS-area">body {<br />
display:block;<br />
-moz-user-select: none;<br />
-khtml-user-select: none;<br />
-o-user-select:none;<br />
user-select: none;<br />
unselectable: on;<br />
-webkit-user-select: none;<br />
}</div></div>Dengan demikian maka semua tulisan yang ada di blog anda tidak akan bisa di copas atau sedikit lebih terjaga karena fungsi Script dan CSS diatas adalah untuk mendisable fungsi select, klik kanan dan CTRL A. Dengan menerapkan kode tersebut blog anda juga akan tidak bisa ditembus menggunakan shortcut pada keyboard sehingga dapat mencegah copy paste artikel post tanpa seizin penulis dan tidak memperlambat loading blog anda. <br />
<br />
Kekurangan dari jika kita memasang <strong><i>Script Unselect atau CSS Anti Copas</i></strong> diatas adalah secara otomatis Page View dari pengunjung pasti akan berkurang karena mereka tidak bisa membuka banyak postingan secara bersamaan yang disebabkan link yang ada diblog kita tidak bisa dibuka di tab baru jika link yang akan dibuka memang bukan link yang di setting terbuka di tab baru.</div></div>

Blogging CSS Javascript Tips n Trik Script Unselect dan CSS Anti Copas

Terkadang sakit memang jika tulisan atau postingan yang dikerjakan dengan susah payah kita ketahui di copy paste alias di copas alias di cur...

Baca selengkapnya »

Cara Memasang jQuery Image Preloader

Sabtu, April 07, 2012 Kelulut Klanceng 3

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9Y5dPM74jIsRmrB4REvSNGsNqvv7eeg1DYEZraKI1d64de4hzca8ZeWLcAnKxrxSzzPwui-nZV71TUzqmLgXRQgYA8So1Js660oXduHp_X5QOkht1epNvkK8ZJz0uwWdB1MfO8E68Ys/s1600/preloader_02_1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9Y5dPM74jIsRmrB4REvSNGsNqvv7eeg1DYEZraKI1d64de4hzca8ZeWLcAnKxrxSzzPwui-nZV71TUzqmLgXRQgYA8So1Js660oXduHp_X5QOkht1epNvkK8ZJz0uwWdB1MfO8E68Ys/s1600/preloader_02_1.jpg" /></a></div><div style="text-align: justify;">jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situs-situs profesional. Jika di tilik dari fungsinya, sebenarnya plugin ini hanyalah tambahan untuk mempercantik penampilan gambar.<br />
<br />
Plugin jQuery Image Preloader berfungsi untuk memberikan efek delay (lambat) pada saat proses pemanggilan (load) gambar pada halaman situs, selama pemanggilan gambar belum sempurna maka lokasi gambar tersebut akan di gantikan dengan animasi loading. <br />
<br />
Setelah gambar tersebut siap ditampilkan (load 100%), animasi loading akan di sembunyikan dan gambar akan ditampilkan dengan efek fade yang lembut. Plugin ini akan memberikan kesan profesional pada blog dan menunjukan kepada pengunjung bahwa bagian yang terkecil sekalipun sangat diperhatikan sang pemilik blog. Bagaimana Cara Memasang  jQuery  Image Preloader ini di Blog?<br />
<br />
Sebagai contoh, diblog ini juga menggunakan jQuery Image Preloader. Untuk Cara Memasang jQuery Image Preloader di blogspot, kita cukup menambahkan kode script dan CSS berikut ini kedalam template blog kita.<br />
<br />
Langkah pertama adalah cari kode: <b></head></b><br />
Kemudian letakkan kode script berikut ke atasnya<br />
<div id="CSS-area1"><div id="CSS-area"><br />
<br />
<center><br />
<span style="color: #cc0000;"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script></span><br />
<script src='http://bloggeracsessories.googlecode.com/files/jquery.preloader.min.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
$(function(){<br />
 $(&quot;body&quot;).preloader();<br />
});<br />
</script></center></div></div><br />
Kemudian cari kode: <b>]]</b:skin></b><br />
<div><br />
</div>dan tambahkan kode CSS berikut di atasnya.<br />
<br />
<pre class="CSS" name="code">.preloader { 
 background:url(http://nettuts.s3.amazonaws.com/860_preloaderPlugin/css/i/89.gif) center center no-repeat; 
} 
</pre><br />
Simpan template anda dan dan lihat hasilnya.<br />
<br />
Jika belum berhasil, coba hapus kode script yang saya tandai dengan warna merah yang tadi anda letakkan di atas kode <b></head></b></div></div>

Blogging CSS designe Javascript JQuery Tingkat Lanjut Tips n Trik Cara Memasang jQuery Image Preloader

jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situ...

Baca selengkapnya »

Script Random Post with Thumbnail

Minggu, Februari 19, 2012 The Doctor Template 14

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKdu67UXrJMyhsk6TV4PfOW8gVsOQpfEYWQAveiJWzghNRGjO5BKm_4ih68O5_-Kw-gpr2345yusw8qw4QXF7BxYwsdjQJ7qkKXZI6FgW9oZrY_2YVZZ0n8rn9cBHwchnq08D_sAVFFjvY/s1600/4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKdu67UXrJMyhsk6TV4PfOW8gVsOQpfEYWQAveiJWzghNRGjO5BKm_4ih68O5_-Kw-gpr2345yusw8qw4QXF7BxYwsdjQJ7qkKXZI6FgW9oZrY_2YVZZ0n8rn9cBHwchnq08D_sAVFFjvY/s320/4.jpg" width="320" /></a></div>Dari kemaren pengen banget update postingan. Tapi bingung mau posting apa. Setelah berkelana kesana kemari sambil belajar design template buat blogspot, akhirnya saya menemukan sedikit bahan buat bahasan. Tema yang ingin saya bahas disini adalah tentang Script Random Post with Thumbnail.<br />
<br />
Random Post with thumbnail atau gambar ini sebenarnya sudah disediakan oleh blogger dalam bentuk widget. Jika belum tahu widgetnya kalian bisa membaca langsung di <b><i>Blogger Pluggins</i></b> dipostingan <b><a href="http://www.bloggerplugins.org/2010/09/random-posts-widget-for-blogger.html">Random Posts Widget for Blogger with Thumbnails</a></b>. Namun saya disini tidak membahas tentang widget tersebut. Saya ingin membahas Cara memasang Random post tersebut Tanpa menggunakan Pluggin tapi hanya berupa mentahan scriptnya saja. Dan Bahasan Random Post with Thumbnail sangat banyak di share di google, tapi tidak satu pun yang benar-benar seperti yang saya inginkan.<br />
<br />
Seperti kita ketahui bersama widget-widget bawaan blogger ini sudah mempunyai pengaturan default dan script yang digunakan juga All  in One. Sehingga hal ini juga pasti mempengaruhi loading dari blog. Apalagi pengguna dari script yang sama juga pasti tidak sedikit mengingat pertumbuhan dari para blogger baru yang demikian pesat.<br />
<br />
Oleh sebab itu disini saya ingin share sebuah script yang bisa anda gunakan hanya di blog anda sendiri.</div><pre class="javascript" name="code"><script type="text/javascript">
var showpostthumbnails_gal = true;
 var showpostsummary_gal    = false;
 var random_posts      = false;
function showgalleryposts(json) {
 document.write('<div id="featured" class="clearfix grid_12">

<ul>'); 
 for (var i = 0; i < numposts_gal; i++) {
  if (random_posts == true){
  var random_int  = Math.floor(Math.random()*json.feed.entry.length);
  var entry_gal = json.feed.entry[random_int];
  }
  else{
  var entry_gal = json.feed.entry[i];
  }
  var posttitle_gal = entry_gal.title.$t;
  var posturl_gal;if (i == json.feed.entry.length) break;
  for (var k = 0; k < entry_gal.link.length;k++){
   if (entry_gal.link[k].rel == 'alternate') {
    posturl_gal = entry_gal.link[k].href;break;
   }
  }
  if("content"in entry_gal){
   var postcontent_gal=entry_gal.content.$t;
  }

s = postcontent_gal;
            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 != "")) {
                var thumburl_gal = d;
            } else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafgBnw1QbN795uPXkAvF-LHTm_Z2WO69x8ysA8i48aVv0bhxuZ25ynXRwS2IAG5wPZn1b2UV72DZyxfiax0OlELlLTEBfJ77yRzzp_yujyQ9kCp1wvnKrwUvSobGYqjx32-ibVIgsH-aH/s1600/green-butterfly.jpg';

document.write('<li> <a href="'+ posturl_gal + '"><img src="'+thumburl_gal+'" alt="" title="'+posttitle_gal+'" /><span>'+posttitle_gal+'</span>');

}
</script>
</pre><br />
<div id="CSS-area1"><div id="CSS-area"><script><br />
var numposts_gal = <span style="color: purple;"><b>1</b></span>;<br />
var random_posts = <span style="color: blue;"><b>true</b></span>;<br />
</script><br />
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"><br />
</script><br />
<br />
</div></div>Keterangan:<br />
var numposts_gal = <b><span style="color: purple;">1</span></b>; berfungsi untuk menentukan jumlah posting yang ingin ditampilkan. Ganti angka satu sesuai kebutuhan.<br />
var random_posts = true; berfungsi untuk menampilkan secara acak. Jika ingin mematikan sistem acak, maka anda cukup ganti kata <b><span style="color: blue;">true</span></b> dengan <b><span style="color: #cc0000;">false</span></b><br />
<br />
Perlu diketahui jika script tersebut hanya mentahan dan bisa hanya bisa menampilkan gambar postingan. Agar bentuk dan tampilannya sesuai keinginan kalian bisa menambahkan CSS sesuai selera.<br />
Agar bisa di jalankan di blogger, Script di atas harus di jadikan file .js dan di upload ke hosting yang support file .js agar bisa dipasang langsung di body template. Jika tidak mempunyai hosting sendiri, Anda bisa menguploadnya ke google code. Atau bisa juga dengan memasangnya langsung melalui fitur Add Element HTML/Javascript. Untuk cara pemasangannya sendiri sudah sedikit saya bahas di postingan <i><a href="http://realfa84.blogspot.com/2012/06/script-random-post-thumbnail-only-by.html" target="_blank">Script Random Post Thumbnail Only - By Label</a></i>.<br />
<br />
<div style="text-align: justify;">Melalui postingan ini juga saya ingin sedikit memberikan kritikan atau lebih tepatnya perbandingan dan sedikit penjelasan tentang script-script yang biasa di pakai oleh para designer blogger template untuk mempercantik blog mereka dengan fitur-fitur postingan mereka. Pada dasarnya hampir semua script tersebut berasal dari Blogger Pluggins, Hanya saja mereka biasanya sudah melakukan sedikit modifikasi.<br />
<br />
Blogger Pluggins sendiri telah banyak menyediakan fitur-fitur siap pakai, diantaranya Pluggin Popular Post, Recent Post, Random Post, Featured Post, Related Post Dan banyak lagi yang lain. Perlu di ketahui jika  menurut yang saya ketahui setiap script tersebut mempunyai fungsi-fungsi yang berbeda.<br />
<br />
<b>Popular Post atau Entri Populer</b> ini sesuai namanya merupakan sebuah fitur yang berfungsi untuk menampilkan Postingan yang paling banyak dibaca atau dilihat.<br />
<b>Recent Post</b> = berfungsi untuk menampilkan artikel-artikel terakhir berdasarkan tanggal posting atau juga Artikel yang di update.<br />
<b>Featured Post</b> berfungsi untuk menampilkan postingan atau artikel berdasarkan label-label khusus.<br />
<b>Related Post</b> berfungsi dan memiliki cara kerja yang hampir sama dengan Featured post. Biasanya Related Post ini dibuat hanya tampil jika kita sudah masuk ke postingan.<br />
<b>Random Post</b> berfungsi untuk menampilkan artikel-artikel secara acak, Baik itu secara keseluruhan maupun berdasarkan label-label tertentu.<br />
<br />
Sebagai Contoh hasil dari Script Random Post with Thumbnail ini bisa kalian lihat di bagian footer <i><a href="http://www.blogger.com/infogame-online.blogspot.com"><b>blog ini</b></a></i>. Silakan refresh halaman homepagenya, maka jika kalian perhatikan setiap kali direfresh maka gambar setiap label akan berubah.<br />
<br />
Nah..<br />
Jika ada para master-master blogger punya pendapat lain, Mohon di share dikolom komentar dibawah.</div></div>

Javascript Menengah Tingkat Lanjut Tips n Trik Widget Script Random Post with Thumbnail

Dari kemaren pengen banget update postingan. Tapi bingung mau posting apa. Setelah berkelana kesana kemari sambil belajar design template bu...

Baca selengkapnya »

Pengenalan JQuery

Sabtu, Februari 11, 2012 Kelulut Klanceng 4

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSrB7y0_BZj2hh_xCBME4oi5edTeHrSHQYFK0pPQfR_2KVGfX7wH7TAhpKIW6mLEZjBGhqAeEXDk7sF0wuNsDupWDqHZ6aJFDcZNl-hqQ3yk4kGq8LVJGFwljvr5iovltz_xCnKiKGJQ/s1600/jquery-logo1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSrB7y0_BZj2hh_xCBME4oi5edTeHrSHQYFK0pPQfR_2KVGfX7wH7TAhpKIW6mLEZjBGhqAeEXDk7sF0wuNsDupWDqHZ6aJFDcZNl-hqQ3yk4kGq8LVJGFwljvr5iovltz_xCnKiKGJQ/s1600/jquery-logo1.png" /></a></div><div style="text-align: justify;">jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Selain dukungan fasilitas yang lengkap, membuat plugin jquery juga cukup mudah. Dukungan ajax adalah salah satu fasilitas yang sudah tersedia di jquery.</div><div style="text-align: justify;"><br />
JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Bagi Web Developer jQuery akan sangat menyederhanakan kode-kode JavaScript, seperti saat digunakan untuk penanganan event, interaksi Ajax yang cepat. jQuery ini dirancang untuk mengubah cara Kita menulis JavaScript.<br />
<br />
Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.<br />
<br />
Dikarenakan Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan, adalah salah satu alasan kenapa banyak web developer lebih memilih JQuery dibandingkan dengan Javascript Framework lain.<br />
<br />
Apa itu Javascript Framework?<br />
<br />
Framework, jika diterjemahkan ke bahasa kita, bisa berarti “area kerja”, atau “lingkungan kerja”. Dalam bahasa susahnya, berarti sebuah area kerja yang sudah disediakan fungsi-fungsi yang kita tinggal menggunakannya. Jadi tidak perlu lagi membuatnya dari awal.<br />
<br />
Analoginya, seperti kita menyewa sebuah kantor yang didalamnya sudah terdapat semua macam kebutuhan kantor seperti telepon, meja kerja, ruangan, dapur, dan lain-lain. Nah, Framework ini juga berarti sama. Sebuah framework sudah banyak menyediakan kegunaan-kegunaan yang dengan mudah kita gunakan.<br />
<br />
Framework inilah yang kini menjadi trend di dunia pemrograman. Tidak hanya di Javascript, tapi juga di PHP. Dan pengertian Framework semua sama.<br />
<br />
JQuery dan kemudahannya<br />
<br />
JQuery punya sebuah slogan yang “ngena” banget. “Write less, do more” memang bukan sembarang slogan. Menulis sedikit, bisa melakukan hal yang banyak.</div><br />
Mari kita tengok bagaimana JQuery mempermudah kita.<br />
<br />
Jika kita punya halaman HTML seperti ini:<br />
<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><b><div id="<span style="color: #990000;">container</span>">This is container</div></b></div></div></div><br />
Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan adalah salah satu alasan kenapa banyak web develover lebih memilih JQuery dibandingkan dengan Javascript Framework lain.<br />
<br />
Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.<br />
<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><b><script src="<span style="color: blue;">jquery.js</span>" type="text/javascript"></b></div><div style="text-align: center;"><b></script></b></div><div style="text-align: center;"><b><script type="text/javascript"></b></div><div style="text-align: center;"><b>$("<span style="color: #cc0000;">#container</span>").append("<strong>Ini hasil tambahan dari JQuery</strong>");</b></div><div style="text-align: center;"><b></script></b></div></div></div><br />
Untuk keterangan lebih lanjut, bisa dibaca manual JQuery di websitenya <b><a href="http://jquery.com/">disini</a></b>.</div>

Blogging designe Javascript JQuery Tingkat Lanjut Pengenalan JQuery

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada...

Baca selengkapnya »

Trik Cepat menghilangkan Navbar dan widget bawaan blogger

Selasa, Februari 07, 2012 Kelulut Klanceng 3

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinA1lnPYB3G1RzpsAXVaC928rmG6uth7Px6VnqZFg22cI0aPNi3PuFgGj3ObL3g9u3GcNaekV1juQw1YEgWBQTQn9nOyA-Y8K8lVMCDdTc8wZtmmuLi9S7H9HDoFFrTSZAqLKYBEjYTfk/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinA1lnPYB3G1RzpsAXVaC928rmG6uth7Px6VnqZFg22cI0aPNi3PuFgGj3ObL3g9u3GcNaekV1juQw1YEgWBQTQn9nOyA-Y8K8lVMCDdTc8wZtmmuLi9S7H9HDoFFrTSZAqLKYBEjYTfk/s320/Capture.PNG" width="300" /></a></div>Salah satu keuntungan dari menggunakan custom template untuk blogger biasanya kita tidak terlalu repot edit sana edit sini dari template yang disediakan. Sebuah custom template juga rata-rata telah dilengkapi dengan berbagai widget dan konten-konten favorite dan disukai oleh para blogger.<br />
<br />
Salah satu cirinya lagi adalah telah menghilangnya widget-widget bawaan dari blogger, seperti misalnya navbar bawaan blogger. Tapi tahukah anda jika sebenarnya widget tersebut sebenarnya tidaklah hilang dari template anda. Widget tersebut biasanya hanya disembunyikan oleh designernya.<br />
<br />
Coba saja ada masuk ke menu edit html dari dashboard anda. Kemudian cari kode berikut ini.<br />
<br />
<b style="color: #990000;">#navbar </b>atau<b style="color: #990000;"> .navbar</b><br />
<br />
Biasanya kode CSS yang akan mengikuti dari kode tersebut adalah seperti ini:<br />
<style>
#woome{width: 100%;
background: white;
height: 66px;
border: 5px solid white;}
#woom{width: 22%;
float: left;
background: #F3F3F3;
border-right: 1px solid white;
padding: 9px;}
</style><br />
<div id="woome"><div id="woom">#navbar {<br />
<b><span style="color: blue;">visibility:hidden;</span></b><br />
}</div><div id="woom">.navbar {<br />
<span style="color: blue;">visibility:hidden;</span><br />
}</div><div id="woom">#navbar {<br />
<span style="color: red;"><b>display:none</b></span><br />
}</div><div id="woom">.navbar {<br />
<b><span style="color: red;">display:none</span></b><br />
}</div></div><br />
Memang betul jika dengan kode tersebut maka Navbar bawaan blogger tersebut akan menjadi hilang atau tersembunyi. Namun bukan berarti navbar bawaan blogger tersebut benar-benar hilang. Sebagai buktinya adalah jika kita sedikit tahu tentang inspect element atau dilihat dari page sourcenya, sebenarnya widget tersebut masih ada.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN75x5XET2zVgKKpz4P1TY8QfdoDZIxexuhUkZP-1V2upUmVTWSwwbbxKuKZfv4KqYemDbrhHVfxc-lCcPAxBM97a6IjA222Om-x7ws7rgH6mmPjgneHv58kSlpP0thPCoef7iru2ciCQ/s1600/wew.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN75x5XET2zVgKKpz4P1TY8QfdoDZIxexuhUkZP-1V2upUmVTWSwwbbxKuKZfv4KqYemDbrhHVfxc-lCcPAxBM97a6IjA222Om-x7ws7rgH6mmPjgneHv58kSlpP0thPCoef7iru2ciCQ/s1600/wew.PNG" /></a></div><br />
Lalu bagaimana caranya agar Navbar dan widget bawaan blogger tersebut benar-benar hilang??<br />
Caranya cukup gampang.<br />
<br />
1. Login ke dashboard -> design -> edit html.<br />
2. Cari kode:<br />
<br />
 <b><span style="color: #cc0000;"><body></span></b><br />
3. Letakkan kode berikut tepat diatasnya.<br />
<pre class="javascript" name="code"><script type="text/javascript">
<![CDATA[

]]>
</script>
</pre>4. Save Template.<br />
Maka kita akan ada pemberitahuan seperti ini. Klik saja hapus atau delete widgets.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLS6-EY0l61IYqwNHY2000tNV5l2Hmfnx85HurSnluphqzINLLaHYlTzEY65agGNbXSTjQ3HXU_ll_hPT2ixqxGC9OtbMRYd7eT6_MYaLHFdpcJ4vCdlBMVjTvp94wej3173B2UVP7vIQ/s1600/wew1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLS6-EY0l61IYqwNHY2000tNV5l2Hmfnx85HurSnluphqzINLLaHYlTzEY65agGNbXSTjQ3HXU_ll_hPT2ixqxGC9OtbMRYd7eT6_MYaLHFdpcJ4vCdlBMVjTvp94wej3173B2UVP7vIQ/s1600/wew1.PNG" /></a></div><br />
Maka widget-widget bawaan dari blogger tersebut akan benar-benar hilang termasuk juga widget bawaan lainnya seperti tanda obeng atau quick edit dan lain sebagainya.<br />
<br />
Tambahan:<br />
Jika kita ingin memunculkan kembali widget tersebut, maka kita tinggal hapus kode tersebut. Gampangkan??<br />
<br />
</div></div>

Blogging CSS designe Javascript Tips n Trik Tutorial Trik Cepat menghilangkan Navbar dan widget bawaan blogger

Salah satu keuntungan dari menggunakan custom template untuk blogger biasanya kita tidak terlalu repot edit sana edit sini dari template yan...

Baca selengkapnya »

Kode Script dan Cara Memasang Recent Post By Label Di Blogspot

Sabtu, Januari 28, 2012 Kelulut Klanceng 12

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdMr4J-GBRIUl1kw5EYFAHuMWQyyxQTBWVBg2rdWE1NWeg8OlBtYJTW5PObbL6O6Oeovh0MBnF5UP_cr_ymItKV8d2ng-7FGavKIq1JkOBoYffb1JELPIibtI6kec_0I4iqb0jEEjpOg/s1600/featured+by+label.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" title="Kode Script dan Cara Memasang Recent Post By Label Di Blogspot"><img alt="Kode Script dan Cara Memasang Recent Post By Label Di Blogspot" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdMr4J-GBRIUl1kw5EYFAHuMWQyyxQTBWVBg2rdWE1NWeg8OlBtYJTW5PObbL6O6Oeovh0MBnF5UP_cr_ymItKV8d2ng-7FGavKIq1JkOBoYffb1JELPIibtI6kec_0I4iqb0jEEjpOg/s320/featured+by+label.PNG" width="296" /></a></div><div style="text-align: justify;">Sebenarnya <strong>Cara Memasang Recent Post</strong> ini sudah banyak dibahas oleh para master blogger. Namun biasanya dan kebanyakan yang dibahas hanya bisa menampilkan artikel-artikel yang disortir berdasarkan postingan terakhir yang diterbitkan.<br />
<br />
Nah, Pada postingan kali ini kita akan coba membahas yang sedikit berbeda. Yaitu Bagaimana Cara menampilkan postingan-postingan terakhir tersebut diurutkan berdasarkan label. Hal ini akan sangat berguna buat kita jika blog yang ingin kita tulis berupa Blog berita. Seperti yang kita ketahui bersama biasanya blog atau web yang berupa berita ini biasanya menggunakan design seperti halnya Magazine atau Majalah.<br />
<br />
Perbedaan template ini biasanya dilengkapi dengan kolom yang banyak agar kita bisa memasang widget yang juga tidak sedikit. Dimana nantinya setiap widget ini mempunyai fungsi untuk menampilkan artikel-artikel terdahulu yang di shortir berdasarkan label dari postingan.<br />
<br />
Berikut ini adalah fungsi yang bisa kita manfaatkan dengan <strong>Memasang Script Recent Post By Label</strong> ini.<br />
<br />
1. Recent Post By Label Hanya Judul Postingan.<br />
2. Recent Post By Label Judul dan Gambar Postingan.<br />
3. Recent Post By Label Judul, Gambar dan Jumlah Komentar Postingan.<br />
4. Recent Post By Label Judul, Gambar dan Tanggal Postingan.<br />
5. Recent Post By Label Judul, Gambar, Jumlah Komentar dan Tanggal Postingan.<br />
6. Recent Post By Label Judul, Gambar, Jumlah Komentar, Tanggal Postingan dan Baca Selengkapnya.<br />
<br />
Cara pemasangannya.<br />
1. Masuk ke Dashboard -> Design -> Edit Html.<br />
2. Cari kode </head><br />
Kemudian letakkan kode berikut diatasnya.</div><pre class="javascript" name="code"><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/AVvXsEiR3_UtYV8F98HuHzySj5lpOfgrL8WDGd-buW_GwmfSyHGPrTOeVthkC_8YYNSSMPHGGqGD-EdC_WSRF7v9Yhi5tIJCp7Jcp9kDowliK0NFF8djLmbUAj0GxCmam5pqjAQe-RPV4DNxHeI/s1600/no_thumb.gif"}}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>
");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("
");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>

</pre><br />
4. Save Template.<br />
5. Kembali ke Dashboard -> Design -> Add Element -> HTML/JavaScript.<br />
<div id="CSS-area1"><div id="CSS-area"><script type="text/javascript"><br />
var numposts =<b> <span style="color: magenta;">4</span></b>;<br />
var showpostthumbnails = <b><span style="color: red;">false</span></b>;<br />
var displaymore = <b><span style="color: red;">false</span></b>;<br />
var displayseparator = <b><span style="color: red;">false</span></b>;<br />
var showcommentnum =   <b><span style="color: blue;">true</span></b> ;<br />
var showpostdate = <b><span style="color: blue;">true</span></b>;<br />
var showpostsummary = <b><span style="color: blue;"> true</span></b> ;<br />
var numchars = <b><span style="color: magenta;">340</span></b>;<br />
</script><br />
<br />
<div style="text-align: center;"><script src="/feeds/posts/default/-/<b><span style="color: #660000;">LabelPost</span></b>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"><span style="text-align: justify;"></script></span></div></div></div></div><div id="CSS-area1"><div id="CSS-area">Keterangan kode:<br />
<br />
1. var numposts =<b> <span style="color: magenta;">4</span></b>;  = jumlah Postingan yang ingin ditampilkan<br />
2. var showpostthumbnails = <b><span style="color: red;">false</span></b>; = Kode Menampilkan gambar<br />
3. var displaymore = <b><span style="color: red;">false</span></b>;  Kode Menampilkan tulisan read more<br />
4. var showpostdate = <b><span style="color: blue;">true</span></b>; = Kode Menampilkan tanggal posting<br />
5. var showcommentnum =   <b><span style="color: blue;">true</span></b> ; Kode Menampilkan Jumlah Komentar Postingan<br />
6. var showpostsummary = <b><span style="color: blue;"> true</span></b> ; Kode Menampilkan sebagian isi Postingan<br />
7. var numchars = <b><span style="color: magenta;">340</span></b>; Panjang karakter isi postingan yang ditampilkan<br />
8. var displayseparator = <b><span style="color: red;">false</span></b>; Kode Untuk memberikan Pembatas setiap tampilan</div></div>Ganti <b><span style="color: #cc0000;">false</span></b> (kode warna merah) dengan  <b><span style="color: blue;">true</span></b> (kode warna biru) untuk menampilkan, demikian juga sebaliknya.<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><script src="/feeds/posts/default/-/<b><span style="color: #660000;">LabelPost</span></b>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"> </div></div></div><br />
Ganti <b style="color: #660000;">LabelPost </b>(kode warna cokelat) Dengan Label yang ingin ditampilkan. Jika label tersebut menggunakan spasi, maka ganti kode spasi dengan %20.<br />
Contoh Label = <b style="color: #660000;">Belajar Blog</b> maka untuk penulisannya harus dengan format seperti ini:<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><script src="/feeds/posts/default/-/<b><span style="color: #660000;">Belajar</span><u><span style="color: #3d85c6;">%20</span></u><span style="color: #660000;">Blog</span></b>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></div></div></div><div style="text-align: justify;">Tambahan:<br />
Kode ini juga bisa dipakai untuk memanggil feed post blog kita yang lain. Caranya adalah cukup dengan menambahkan URL BLOG dan Label yang ingin ditampilkan.<br />
<br />
Contoh: <br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><script src="<b><span style="color: blue;">http://URL-BLOG-ANDA</span></b>/feeds/posts/default/-/<b><span style="color: #660000;">Belajar</span><u><span style="color: #3d85c6;">%20</span></u><span style="color: #660000;">Blog</span></b>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></div></div></div></div>

Blogging Javascript Menengah Tutorial Widget Kode Script dan Cara Memasang Recent Post By Label Di Blogspot

Sebenarnya Cara Memasang Recent Post ini sudah banyak dibahas oleh para master blogger. Namun biasanya dan kebanyakan yang dibahas hanya bi...

Baca selengkapnya »

Pengenalan JAVASCRIPT Fungsinya

Selasa, Januari 10, 2012 Kelulut Klanceng 4

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJqohdQXWbT4h4kJgCo59yatQSnorLuvGF1IFIqbFlPYU196sJsj8dqJTcidIJyVpz-y10eULr7MIop6Xud_-xh4ymbYcApM5b0f8u-sDhzNrdlHn9nTH06JgmDax4vm4HqJ7CzgoTWE/s1600/javascript.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Pengenalan JAVASCRIPT Fungsinya" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJqohdQXWbT4h4kJgCo59yatQSnorLuvGF1IFIqbFlPYU196sJsj8dqJTcidIJyVpz-y10eULr7MIop6Xud_-xh4ymbYcApM5b0f8u-sDhzNrdlHn9nTH06JgmDax4vm4HqJ7CzgoTWE/s1600/javascript.jpeg" /></a></div><div style="text-align: justify;">Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya untuk apa??<br />
<br />
Javascript adalah bahasa skrip yang diletakkankan dalam kode HTML dan diproses disisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.<br />
<br />
Dengan demikian bisa dikatakan bahwa javascript itu berfungsi sebagai pemanggil suatu fungsi dari suatu argumen, baik itu berupa bilangan, parameter, variable, value, properti, metode dan lain sebagainya dengan menggunakan even-even tertentu.<br />
<br />
Penggunaan javascript sendiri bisa dilakukan dengan menyisipkannya langsung ke dalam kode html (Internal) atau dengan melakukan pemanggilan dari luar/hosting tertentu (external). Penulisan javascript ini sendiri biasanya diletakkan didalam tag <body> atau pada umumnya (khususnya diblogspot template) diletakkat diatas tag </head>. Cara penulisannya sendiri sebenarnya sangat sederhana yaitu kita hanya perlu menuliskan nama fungsi yang ingin kita panggil beserta parameter yang mengukutinya.</div><br />
<b>Contoh penulisan Internal:</b><br />
<pre class="javascript" name="code"><script type="text/javascript">
document.write(“Test”);
</script>
</pre><br />
<b>Contoh penulisan External:</b><br />
<pre class="javascript" name="code"><script type="text/javascript" scr='http://.../test.js'> 
</script>
</pre><br />
<b>Contoh penggunaan dalam Blogspot HTML/XML.</b><br />
<pre class="xhtml" name="code"><HTML>
<HEAD>
<title> <h1>Belajar javascript</h1> </title>
<b:skin><![CDATA[
Tempat peletakan Kode CSS
]]</b:skin>
<script type="Javascript">
Kode javascript di sini
</script>
</HEAD>
<BODY>
Kode HTML di sini
</BODY>
</HTML>
</pre></div>

Dasar designe Javascript Menengah Pengenalan JAVASCRIPT Fungsinya

Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya un...

Baca selengkapnya »