Ngalor Ngidul: Menengah

Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

Sabtu, Juni 16, 2012 Kelulut Klanceng 21

<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/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s1600/pop+sc.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s320/pop+sc.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" width="313" /></a></div><div style="text-align: justify;">Setelah sebelumnya pernah membahas <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>, </i>kali ini kita akan mencoba memodifikasi Popular Post dengan Thumbnail Bentuk Grid atau Gallery. Keuntungan dari cara ini adalah kita bisa sedikit menghemat space atau ruang di blog.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Sistem atau <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong> ini sebenarnya sama saja dengan dengan <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>. </i>Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Berikut ini adalah Langkah-langkah untuk <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong>:</div>1. Seperti biasa masuk kedashboard => Design => Edit Html.<br />
2. Cari kode ]]</b:skin><br />
3. Letakkan kode CSS dibawah ini di atasnya.<br />
<blockquote class="tr_bq">.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}<br />
.sidebar .popular-posts ul{margin:0;padding:2px;}<br />
.PopularPosts .widget-content ul li {padding: .1em 0;}<br />
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}<br />
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}<br />
.PopularPosts .item-thumbnail {margin: 0;}<br />
.sidebar .PopularPosts .item-title {display: none;}</blockquote>4. Save template.<br />
5. Kembali ke Dashboard => Design => Add Element.<br />
6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" /></a></div><blockquote class="tr_bq">1. Hilangkan ceklist pada snippet.<br />
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.</blockquote></div>

Setelah sebelumnya pernah membahas Cara membuat Popular Post dengan Thumbnail Horizontal , kali ini kita akan mencoba memodifikasi Popular P...

Baca selengkapnya »

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 »

Membuat Efect Zoom Dengan CSS | Tanpa Script

Kamis, Februari 23, 2012 Kelulut Klanceng 5

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Efect Zoom Dengan CSS | Tanpa Script" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35RCOcv9Bl2a-yUEWCTre_9kVLwHVjBtTFhcMaZCGU0L0FCtFoHrqBtAxtFtdYwsB_PilWKNkPz2FPCHFlqUGFjWHNhG_-6qTg0mvtxGBmdxpZPNH3_8lNpKWlkSC6eRZNU_VSounnx4/s1600/Zoomy-jQuery-Image-Zoom-Plugin.jpg" width="250" /></div><div style="text-align: justify;">Kembali lagi ke bahasan tentang CSS, Pada posting-posting sebelumnya kita sudah tahu persis beberapa kemudahan yang bisa kita lakukan dengan CSS. Yaitu kita bisa menentukan jarak, posisi dan lebar dari suatu area. Tapi sebenarnya kegunaan CSS ini tidak hanya sampai disitu saja. Dengan CSS ini kita juga bisa membuat suatu efek-efek style tertentu pada suatu konten. Salah satunya adalah yang akan kita bahas di postingan ini. Yaitu Membuat Efect Zoom Dengan CSS.<br />
<br />
<div style="text-align: justify;">Efek zoom atau membuat pembesaran ini biasanya digunakan pada gambar. Dan ternyata kehebatan dari CSS ini kita sudah bisa membuat efek zoom ini menjadi kelihatan keren walaupun Tanpa Script. Salah satu Contoh atau Demonya bisa anda lihat di Gambar widget Popular post dibawah atau bagian footer blog ini. Gambar Thumbnail dari widget tersebut akan sedikit membesar jika diletakkan mouse. Atau dengan kata lain efet tersebut akan terjadi dengan Mouse Hover.</div><br />
Untuk mendapatkan hasil yang seperti itu anda bisa membuatnya dengan cara memberikan CSS seperti ini.<br />
<br />
<pre class="CSS" name="code"><style type="text/css">
.Content-Area {
    padding: 5px
    }

.Content-Area img {
    vertical-align: middle;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: 1
    }

.Content-Area img:hover {
    height: 250px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-box-shadow: 0 0 5px 2px blue;
    -moz-box-shadow: 0 0 5px 2px blue;
    box-shadow: 0 0 5px 2px blue;
    z-index: 2;
    border: 5px solid #BBB;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
    }
</style>
</pre><br />
Dari hasil CSS tersebut maka kita akan menghasilkan efek seperti ketika kita meletakkan mouse pada gambar dibawah ini.<br />
<br />
<center><div class="Content-Area" style="height: 250px; text-align: center; width: 250px;"><img alt="Membuat Efect Zoom Dengan CSS | Tanpa Script" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35RCOcv9Bl2a-yUEWCTre_9kVLwHVjBtTFhcMaZCGU0L0FCtFoHrqBtAxtFtdYwsB_PilWKNkPz2FPCHFlqUGFjWHNhG_-6qTg0mvtxGBmdxpZPNH3_8lNpKWlkSC6eRZNU_VSounnx4/s1600/Zoomy-jQuery-Image-Zoom-Plugin.jpg" width="250" /></div></center><br />
<br />
<div style="text-align: center;"><span style="font-size: large;">Selamat Mencoba..!!!!</span></div></div></div>

CSS designe Menengah Tingkat Lanjut Tutorial Membuat Efect Zoom Dengan CSS | Tanpa Script

Kembali lagi ke bahasan tentang CSS, Pada posting-posting sebelumnya kita sudah tahu persis beberapa kemudahan yang bisa kita lakukan dengan...

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 »

Cara membuat Recent Post by label horizontal diblogspot

Jumat, Februari 10, 2012 Kelulut Klanceng 11

<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/AVvXsEjS4b0P_wzgG9oXRaC3BXCY0y2P8cx4V4H0uhD_bkrLGNGEw31NySSy7OTDdetZILPnrcetWGgVllmjY1S6KVnyl_UyeogzyKQPNk6R3XN9ax807A_gGaZnuZbswK1QFQGHrU_hetfn4eE/s1600/vertikal+-+Horizontal.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4b0P_wzgG9oXRaC3BXCY0y2P8cx4V4H0uhD_bkrLGNGEw31NySSy7OTDdetZILPnrcetWGgVllmjY1S6KVnyl_UyeogzyKQPNk6R3XN9ax807A_gGaZnuZbswK1QFQGHrU_hetfn4eE/s320/vertikal+-+Horizontal.PNG" width="282" /></a></div><div style="text-align: justify;">Postingan <strong>Cara membuat Recent Post by label horizontal diblogspot</strong> ini juga masih berhubungan dan tidak beda jauh dari dengan postingan sebelumnya. yaitu <b><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html">Cara membuat Popular post horizontal</a></b>. Namun pada postingan ini, saya tidak memberikan tutorial lengkap karena saya anggap semua sudah mahir dan jago design blogger template sendiri.<br />
<br />
</div><div style="text-align: justify;">Oopss..!!!<br />
Jangan protes dulu ya..!!!<br />
Jika mengalami kesulitan, anda bisa tinggalkan komentar dibawah kok. Lagi pula kalau selalu diberikan tutorial siap pakai, kapan mau belajar dan pintarnya..??!!!!<br />
<br />
<br />
<div>Hehee...!!! ^_^</div><div><br class="Apple-interchange-newline" /></div><div>Ok..!!!</div><div>Tanpa banyak basa-basi, kita langsung saja masuk ke pokok pembahasan.</div><div><br />
</div></div><div style="text-align: justify;">Yang harus kita lakukan pertama adalah membuat sebuah kolom tempat widget <strong>Recent Post by label horizontal</strong> ini akan kita pasang.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Anda bisa mengambil referensi CSS dibawah ini untuk membuatnya.</div><div style="text-align: justify;"><br />
</div><pre class="CSS" name="code">.gadgetr-wrapper{}
.gadget {
 color: #333;
 line-height: 1.2em;
 margin:0 text-align: left;
 padding: 0 }
 
.gadget ul {
  font: normal 13px Arial;
  text-transform: none;
  list-style: none;
  margin: 0;
  padding: 0 }
 
.gadget li {
  text-indent: 0;
  line-height: 1.2em;
  text-align: left;
  margin: 0 auto;
  padding: 0 auto }
 
.gadget li a:hover {
  color: #36c;
  text-decoration: none;
  text-shadow: 1px 1px #111 }
 
.gadget .widget {
  background: none;
  border-bottom: 1px ridge #125;
  margin: 0 0 5px;
  padding: 10px }
 
.gadget img.label_thumb {
  float: left;
  height: 60px;
  width: 60px;
  margin: 0 10px 5px 0;
  border: ridge 1px #125;
  padding: 4px }
 
.gadget .label_with_thumbs {
  float: left;
  width: auto;
  max-height: 65px;
  margin: 0 auto;
  padding: 0 auto }
 
.gadget ul.label_with_thumbs li {
  min-height: auto;
  width: 200px;
  float: left;
  border: none;
  clear: none;
  margin: 0 10px 5px 0;
  padding: 0 }
 
.gadget ul.label_with_thumbs li a:link,.gadget ul.label_with_thumbs li a:visited {
   color: #333;
   text-decoration: none;
   line-height: 1.2em;
   font: bold 13px Georgia }

.gadget ul.label_with_thumbs li a:hover {color:#35c;text-decoration: none }
</pre><br />
<br />
<div style="text-align: justify;">Jika pembuatan kolom ini benar maka kira-kira kita akan mempunyai kolom pemasangan seperti format dibawah ini.</div><br />
<div id="CSS-area1"><div id="CSS-area"><div id='gadget-wrapper'><br />
        <b:section class='gadget' id='gadget' preferred='yes'/><br />
</div></div></div>Karena semua udah jago otak-atik CSS, maka semua pasti tahu yang harus kita lakukan hanyalah sedikit menyesuaikan lebar dan warna dari area template utama yang kita pakai. <span style="text-align: justify;">Saya anggap semua sudah mengerti tentang cara pembuatan dan pembagian kolom ini. Jika belum mengerti, silakan baca terlebih dahulu baca </span><b style="text-align: justify;"><a href="http://realfa84.blogspot.com/2011/12/cara-membuat-dan-membagi-kolom-dengan.html">postingan sebelumnya</a></b><span style="text-align: justify;">.</span><br />
<div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Selanjutnya kita tinggal pasang <b><a href="http://realfa84.blogspot.com/2012/01/kode-script-dan-cara-memasang-recent.html">Script Recent Post by</a></b> label melalui <b>Dashboard</b> -> <b>Design</b> -> <b>Add Gadget</b> -> <b>HTML/Javascript</b>. Script Recent Post by label ini bisa anda dapatkan pada postingan yang telah kita bahas <a href="http://realfa84.blogspot.com/2012/01/kode-script-dan-cara-memasang-recent.html"><b>dipostingan ini</b>.</a></div><div style="text-align: justify;"><br />
</div><div style="text-align: center;"><b><span style="font-size: large;">Semoga bermanfaat..!!</span></b></div></div>

Blogging CSS Menengah Widget Cara membuat Recent Post by label horizontal diblogspot

Postingan Cara membuat Recent Post by label horizontal diblogspot ini juga masih berhubungan dan tidak beda jauh dari dengan postingan sebe...

Baca selengkapnya »

Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog

Selasa, Januari 31, 2012 Kelulut Klanceng 16

<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/AVvXsEgiWj9KIEsDZAIJyBslH_2yWXkc2pBqQhT9Xso-H056x0EJjtBbkLbSuCI-VwAAvjdhFRDNEY0pCxcp088tJUjSNbPcIP2peasYFL1pqng3yqKd2WS6vIKp0CpRU8ti1Q-1A_B2nO6GD4U/s1600/menghilang.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" title="Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog"><img alt="Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWj9KIEsDZAIJyBslH_2yWXkc2pBqQhT9Xso-H056x0EJjtBbkLbSuCI-VwAAvjdhFRDNEY0pCxcp088tJUjSNbPcIP2peasYFL1pqng3yqKd2WS6vIKp0CpRU8ti1Q-1A_B2nO6GD4U/s1600/menghilang.gif" width="330px" /></a></div><div style="text-align: justify;">Dipostingan kali ini kita akan membahas bagaimana <strong>cara menghilangkan dan menampilkan suatu objek diblog</strong>. Dalam mendesign sebuat template, Penggunaan <strong>Trik dan Kode-kode Untuk Menampilkan dan Menghilangkankan</strong> ,atau lebih tepatnya <strong>menyembunyikan Widget Content Blog</strong> ini sangat diperlukan agar hasil template yang kita buat tidak terlihat monoton. Sebagai contoh adalah widget slider dan salah satu sidebar yang ada pada blog ini. Widget tersebut hanya akan muncul dihalaman utama dan kategori blog dan akan menghilang jika kita masuk kehalaman posting.<br />
<br />
<strong>Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog</strong> ini biasanya pasti ada ditemplate-template dengan gaya magazine atau majalah. Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.<br />
<br />
Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.</div><div id="CSS-area1"><div id="CSS-area">1. Hanya pada Halaman Utama Blog<br />
<div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.url == data:blog.homepageUrl"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div>Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika kita mengklik Label Post atau membaca postingan secara keseluruhan.<br />
<br />
2. Kategori Post dan Single Post<br />
<div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.url != data:blog.homepageUrl"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br />
Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (postingan secara keseluruhan).<br />
<br />
3. Halama Utama Blog dan Kategori Post<br />
<div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.pageType != &quot;item&quot;"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br />
Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.<br />
<br />
4. Single Post atau Halaman Postingan<br />
<div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.pageType == &quot;item&quot;"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br />
Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.<br />
<br />
5. Halama Utama Blog dan Kategori Post<br />
<div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.pageType == &quot;index&quot;"></span></b></div><div style="text-align: center;"><b>...Kontent...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br />
Fungsi kode ini sama dengan fungsi kode pada nomer 3.<br />
<br />
6. Menampilan Widget Blog Pada Postingan Tertentu Saja<br />
<div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.url == &quot;URL_POST_TERTENTU&quot;"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div>Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu.<br />
<br />
7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja<br />
<div style="text-align: center;"><b><span style="color: #990000;"><b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br />
Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain.</div></div><br />
<div style="text-align: justify;">Cara penggunaan kode ini sangatlah gampang. Kita cukup menambahkan kode yang kita inginkan kewidget yang ingin kita tampilkan atau sembunyikan.<br />
<br />
Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok atau dengan memberikan perintah melalui kode CSS-nya. Namun biasanya, penerapan kode-kode ini melalui CSS hanya di gunakan untuk mengatur komposisi dari suatu kolom widget konten. Misalnya lebar dan posisi widget atau objek berbeda dihalaman utama dan postingan. Mungkin hal ini akan kita bahas di postingan berikutnya.<br />
<br />
Mungkin itu saja yang saya tahu tentang Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini. Jika teman-teman punya pendapat atau ilmu yang lain, silakan tinggalkan komentar dan url postingannya dibawah ini. Semoga bermanfaat.</div></div>

Blogging designe Menengah Tingkat Lanjut Tips n Trik Widget Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog

Dipostingan kali ini kita akan membahas bagaimana cara menghilangkan dan menampilkan suatu objek diblog . Dalam mendesign sebuat template, P...

Baca selengkapnya »