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 »

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 »

Cara membuat sudut melengkung dengan CSS

Senin, Januari 09, 2012 Kelulut Klanceng 28

<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/AVvXsEhbDBDwoWvLF9FHUxsHBJ64dQzjwD_pKhlDzGMl98NjW2yGz3fYEo5KO96YR5xXwP-k5x4klj2HIsvlT8-0WO_pdlD0lOlLGq9X4v0pJ5rih_w1FkjTjFA74WeNrUFryVxnA2SsENUhGwA/s1600/css+border+radius.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="155px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDBDwoWvLF9FHUxsHBJ64dQzjwD_pKhlDzGMl98NjW2yGz3fYEo5KO96YR5xXwP-k5x4klj2HIsvlT8-0WO_pdlD0lOlLGq9X4v0pJ5rih_w1FkjTjFA74WeNrUFryVxnA2SsENUhGwA/s1600/css+border+radius.jpg" width="220px" /></a></div><div style="text-align: justify;">Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.<br />
<br />
Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.<br />
<br />
Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:<br />
Kode HTML<br />
<pre class="xhtml" name="code"><div id="areaku"><h2>Anggap Disini Adalah Content.</h2></div></pre><br />
Kode CSS<br />
<pre class="css" name="code">#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}
</pre><br />
Hasil:<br />
<style>
#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
text-align:center;
</style><br />
<div id="areaku"><h2>Anggap Disini Adalah Content.</h2></div><br />
Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.<br />
<pre class="css" name="code">border-radius: 15px; /*Kode pembuat lengkungan sudut*/
</pre>Sehingga kode CSS-nya menjadi seperti ini.<br />
<pre class="css" name="code">#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}
</pre>Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.<br />
<style>
#areaku-tumpul{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
text-align:center;
border-radius:15px;
</style><br />
<br />
<div id="areaku-tumpul"><h2>Anggap Disini Adalah Content.</h2></div><br />
Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.<br />
<pre class="css" name="code">- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/
- border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/
- border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/
- border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/</pre><br />
Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.<br />
</div><br />
<style>
#box-border{
width:98%;
}
#box1-border{
width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 0px;
}
#box2-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0px 15px;
margin: 0 0 0 10px;
}

#box3-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 15px 0px;
margin: 10px 0 0 0;
}

#box4-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0 15px 15px;
margin: 10px 0 0 10px;
}
#box5-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 0 15px;
margin: 10px 0 0 0px;
}
#box6-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0 0px 15px;
margin: 10px 0 0 10px;
}
#box7-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0 15px 15px 0;
margin: 10px 0 0 0px;
}

#box8-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 0 0 15px;
margin: 10px 0 0 10px;
}
</style><br />
<div id="box-border"><div id="box1-border">1. Border-radius: 15px 0px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 15px;<br />
- border-top-right-radius: 0px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div><div id="box2-border">2. Border-radius: 0px 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 0px;<br />
- border-bottom-left-radius: 15px;</div><div id="box3-border">3. Border-radius: 15px 15px 0px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 15px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 0px;<br />
- border-bottom-left-radius: 15px;</div><div id="box4-border">4. Border-radius: 0 15px 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 15px;</div><div id="box5-border">5. Border-radius: 15px 0 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 15px;<br />
- border-top-right-radius: 0px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div></div><br />
<div id="box6-border">6. Border-radius: 0px 0 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 0px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div><br />
<div id="box7-border">7. Border-radius: 15px 0 0 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div><br />
<div id="box8-border">8. Border-radius: 0 15px 15px 0;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
border-top-left-radius: 15px;<br />
border-top-right-radius: 0px;<br />
border-bottom-right-radius: 0;<br />
border-bottom-left-radius: 15px;</div><div style="clear: both;"></div>Dan Lain Sebagainya........</div>

Blogging CSS Dasar designe Menengah Tutorial Cara membuat sudut melengkung dengan CSS

Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk per...

Baca selengkapnya »

Cara Membuat Teks bayangan dan Text 3D

Minggu, Januari 01, 2012 Kelulut Klanceng 1

<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/AVvXsEiNjnmztTkQlqAzS0pywiBwhSAWq9jyWSKvmK9OT9_cxgEmmJ1ke9Dl8aWBUemEQ1Uk-M5_2NvSQn90VrQ8IrjUBSR1fzoraxxBch4NOTKt23dLupGjzgzAr_cEB2ffoTJYKmdDydNcWp0/s1600/images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Teks bayangan dan Text 3D" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNjnmztTkQlqAzS0pywiBwhSAWq9jyWSKvmK9OT9_cxgEmmJ1ke9Dl8aWBUemEQ1Uk-M5_2NvSQn90VrQ8IrjUBSR1fzoraxxBch4NOTKt23dLupGjzgzAr_cEB2ffoTJYKmdDydNcWp0/s1600/images.jpg" /></a></div><div style="text-align: justify;">Pada posting sebelumnya, kita sudah membahas tentang <i style="font-weight: bold;"><a href="http://realfa84.blogspot.com/2011/12/cara-membuat-efek-bayangan-atau-box.html">Cara membuat efek bayangan atau Box Shadow</a>. </i>Nah, pada postingan kali ini kita akan coba membahas Cara Membuat Teks bayangan dan Text 3D. Untuk Cara membuat teks bayangan ini proses dan cara kerjanya sama persis dengan <i style="font-weight: bold;">membuat efek bayangan atau Box Shadow.</i> Jadi kalau belum membaca postingannya silakan baca dulu <b><a href="http://realfa84.blogspot.com/2011/12/cara-membuat-efek-bayangan-atau-box.html">posting sebelumnya</a></b>.<br />
<br />
Dalam design blog atau website, pemakaian teks dengan bayangan ini sendiri agak jarang dipakai, karena jika terlalu berlebihan maka bukannya website atau blog menjadi semakin bagus, tapi malah menjadi sulit untuk dibaca. Yang paling sering dipakai paling hanya efek bayangan kecil seperti yang dipakai diblog ini.<br />
<br />
Untuk sedikit contohnya kalian bisa lihat perbedaannya di bawah ini.<br />
<style>
#box-1{  
background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
text-shadow:none;
</style><br />
<pre class="css" name="code">#teks-bayangan{background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
}
</pre><div id="box-1">Hasil sebelum kode bayangan/shadow</div><br />
Sekarang kita tambahkan sedikit kode dari teks-shadownya.<br />
<pre class="css" name="code">text-shadow: 2px 2px 0 red;
</pre><br />
Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.<br />
<pre class="css" name="code">#teks-bayangan{
background: #666;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code box bayangan--*/
text-shadow: 2px 2px 0 red; /*--code teks bayangan--*/
}
</pre><style>
#box-2{  
background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
text-shadow: 2px 2px 0 red;
</style><br />
<div id="box-2">Hasil Setelah Penambahan kode bayangan/shadow</div><br />
Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.<br />
<br />
<div style="text-align: justify;">2. Cara pembuatan efek bayangan ganda atau lebih.</div><div style="text-align: justify;">Untuk cara pembuatan bayangan efek ganda atau lebih ini serta efek bayangan 3D, prinsipnya tetap juga sama dengan pembuatan efek bayangan ganda dicara pembuatan box shadow. Jadi saya hanya memberikan contohnya disini. Untuk pembuatan efek 3D ini kita hanya perlu sedikit kreatif karena untuk pembuatannya kita akan membutuhkan sangat banyak kode bayangannya dan pengaturan posisi serta blurnya.<br />
<br />
Berikut ini adalah hasil-hasil kode CSS dan contohnya.<br />
<b><span style="font-size: large;">1. Letter Press.</span></b><br />
<style>
#letter-press{background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 0px 1px 1px #fff;
}
</style><br />
<pre class="css" name="code">#letter-press{
text-shadow: 0px 1px 1px #fff;
}
</pre><div id="letter-press">Letter Press</div><style>
#stereoscopic{
background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
text-shadow: 4px 0 0 blue,-4px 0 0 red;
letter-spacing: 7px;
font-weight: bold;
</style><br />
<b><span style="font-size: large;"><br />
</span></b><br />
<b><span style="font-size: large;">2. Text shadow Stereoscopic.</span></b><br />
<pre class="css" name="code">#stereoscopic{
text-shadow: 4px 0 0 blue,-4px 0 0 red;
}
</pre><div id="stereoscopic">Stereoscopic</div><b><span style="font-size: large;"><br />
</span></b><br />
<b><span style="font-size: large;">3. Neon.</span></b><br />
<style>
#neon{background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 0 0 1px #2ec728,0 0 3px #2ec728,0 0 5px #2ec728, 0 0 7px #2ec728, 0 0 9px #2ec728;
}
</style><br />
<pre class="css" name="code">#neon{
text-shadow: 0 0 1px #2ec728, 0 0 3px #2ec728,
0 0 5px #2ec728, 0 0 7px #2ec728, 0 0 9px #2ec728;
}
</pre><div id="neon">Neon Teks</div><b><span style="font-size: large;"><br />
</span></b><br />
<b><span style="font-size: large;">4. Efek teks terbakar.</span></b><br />
<style>
#teks-terbakar{background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}
</style><br />
<pre class="css" name="code">#teks-terbakar{
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 
2px -10px 6px #fd3, -2px -15px 11px #f80, 
2px -18px 18px #f20;
}
</pre><br />
<div id="teks-terbakar">Efek Teks Terbakar</div><br />
<b><span style="font-size: large;">5. Efek Teks 3D</span></b><br />
<style>
#teks-3D{
background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;
}
</style><br />
<pre class="css" name="code">#teks-3D{text-shadow: 
1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 
1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 
4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 
4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 
7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 
7px 8px #bbb, 8px 8px #ddd;
}
</pre><br />
<div id="teks-3D">Teks Efek 3D dengan CSS</div><br />
Pastikan perpaduan warna pada background dan teks shadow ini adalah warna yang serasi agar terlihat lebih menarik. Semoga bermanfaat...</div></div></div>

Blogging CSS Dasar Menengah Tutorial Cara Membuat Teks bayangan dan Text 3D

Pada posting sebelumnya, kita sudah membahas tentang Cara membuat efek bayangan atau Box Shadow . Nah, pada postingan kali ini kita akan cob...

Baca selengkapnya »

Cara membuat efek bayangan atau Box Shadow di blog

Kamis, Desember 29, 2011 Kelulut Klanceng 8

<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/AVvXsEgBt7RVLIhcBmD_s2TEmg3b8HzY9MzSjHgzxhOjszNofejrhk7nVSeXfPOnpZXfHSojrRGDd4wh9eqr_lV0blUB4eezADfl4KGpBjkAanBBY3IN-C-rjivmKKvkHqRcOlzrrEFmH8i9tuA/s1600/thank-you-balloon-2-300.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat efek bayangan atau Box Shadow di blog" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBt7RVLIhcBmD_s2TEmg3b8HzY9MzSjHgzxhOjszNofejrhk7nVSeXfPOnpZXfHSojrRGDd4wh9eqr_lV0blUB4eezADfl4KGpBjkAanBBY3IN-C-rjivmKKvkHqRcOlzrrEFmH8i9tuA/s200/thank-you-balloon-2-300.jpg" width="200" /></a></div><div style="text-align: justify;">Setelah sebelumnya kita membahas jenis-jenis border dan cara membuatnya, maka diposting kali ini kita akan coba membahas cara membuat box-shadow atau efect bayangan. Jika teman-teman sering menggunakan image editor atau text editor seperti photoshop atau microsoft office, maka pasti teman-teman sudah tidak asing dengan istilah ini. Tapi disini kita tidak akan menggunakan image editor atau text editor. Tapi kita akan membahas cara pembuatannya dengan menggunakan CSS.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Untuk pembuatan box-shadow ini sendiri meski hanya memakai sedikit kode perintah, tapi kita bukan hanya bisa membuat satu bayangan saja, tetapi kita juga bisa membuat lebih dari satu bayangan ganda atau yang disebut bayangan ganda, bahkan lebih dari 2 bayangan pun bisa kita lakukan. Kodenya sangat sederhana, jadi sangat mudah untuk kita pahami. Kita hanya perlu mengatur koordinat jarak horizontal dan koordinat jarak vertikal serta menentukan warna yang akan kita pakai.</div><div style="text-align: justify;"><br />
</div>Jika dibuat rumus maka rumusnya kira-kira adalah seperti ini:<br />
<style>
#box-shadow
{text-align: center;
padding: 5px;
border: 3px ridge red;
background: white;
border-image: initial;}

#ket{
background: #ECFCF9;
padding: 10px 10px 10px 40px;
border: ridge 3px red;
border-top: none;
}
#tambahan1{
background: white;
padding: 5px;
text-align: center;
border: ridge 2px #DDD;
border-image: initial;
}

#box-bayangan1{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
}
#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red;
}

#box-bayangan3{
background: #000;
border:13px ridge red;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align:center;
box-shadow: 0 0 10px blue;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}

#box-3D{
background: #CCC;
border: 10px ridge red;
padding: 15px;
margin-top: 10px;
font-size: 31px;
color: gold;
text-align: center;
box-shadow: 0 0 -3px blue inset, 0 0 -7px green inset, 0 0 -12px orange inset, 0 0 -17px purple inset, 0 0 -20px magenta inset, 0 0 -24px lime inset, 0 0 15px blue, 0 0 27px lime, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762;
font-weight: bolder;
text-shadow: 1px 0px #546A92, 0px 1px #384762, 2px 1px #546A92, 1px 2px #384762, 3px 2px #546A92, 2px 3px #384762, 4px 3px #546A92, 3px 4px #384762, 5px 4px #546A92, 4px 5px #384762, 6px 5px #546A92, 5px 6px #384762, 7px 6px #546A92, 6px 7px #384762, 8px 7px #546A92, 7px 8px #384762, 8px 8px #546A92;
border-image: initial;
}

#box-bayangan-ganda {
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red, 0 0 30px blue;
}
</style><br />
<div id="box-shadow">{<b>box-shadow</b>: <b><span style="color: blue;">(koordinat X)</span></b> <b><span style="color: #38761d;">(koordinat Y)</span></b> <b><span style="color: #741b47;">(radius blur)</span></b> <b><span style="color: red;">(warna)</span></b>;}</div><div id="ket"><b>Keterangan:</b><br />
<b><span style="color: blue;">Koordinat X</span></b>  =  Berfungsi untuk  menspesifikasikan jarak horizontal bayangan. Jika sebuah nilai berisi angka positif (misal: 10px) akan membuat bayangan di sebelah kanan kotak sebesar 10px, sedangkan bernilai negatif (misal: -10px) maka akan memberikan bayangan disebelah kiri.<br />
<br />
<b><span style="color: #38761d;">Koordinat Y</span></b>  =  Berfungsi untuk menspesifikasikan jarak vertikal bayangan. Jika nilai berisi positif (misal: 10px) akan membuat bayangan di bagian bawah kotak, sedangkan nilai negatif (misal:-10px) akan memberikan bayangan disebelah atas.<br />
<br />
<b><span style="color: #741b47;">Radius Blur</span></b>    =  Berfungsi untuk  menspesifikasikan radius dari blur yang dihasilkan. Nilai default adalah 0, yang berarti tidak ada blur. Nilai positif berarti meningkatkan kabur, sedangkan nilai negatif berati menyusutkan bayangannya.<br />
<br />
<b><span style="color: red;">Warna</span></b>          =  Berfungsi untuk  menspesifikasikan warna bayangan.</div><br />
1. Efek bayangan Tunggal/Satu bayangan.<br />
Contoh penulisan awal.<br />
<pre class="css" name="code">{box-shadow: 0 0 10px #red;} </pre><br />
Cara penggunaan:<br />
Sebagai contoh kita anggap kita sudah memiliki kode HTML seperti ini:<br />
<pre class="xhtml" name="code"><div id="box-bayangan">disini adalah konten

</div></pre>Dan kode CSSnya misal seperti ini.<br />
<pre class="css" name="code">#box-bayangan{
background: #ccc;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
} 
</pre>Hasil yang kita dapatkan dari kode CSS dan HTML tersebut hanya akan terlihat seperti dibawah ini.<br />
<div id="box-bayangan1">Hasil sebelum penambahan kode bayangan/shadow</div><br />
Sekarang kita tambahkan sedikit kode dari box-shadownya.<br />
<div id="tambahan1">box-shadow: 0 0 10px red; </div>Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.<br />
<pre class="css" name="code">#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan--*/
}
</pre><br />
<div id="box-bayangan">Hasil Setelah Penambahan kode bayangan/shadow</div><br />
Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.<br />
<br />
<div style="text-align: justify;">2. Cara pembuatan efek bayangan ganda atau lebih.</div><div style="text-align: justify;">Untuk cara pembuatan bayangan efek ganda atau lebih ini, prinsipnya tetap sama dengan pembuatan efek satu bayangan. Kita hanya perlu memberikan sedikit tambahan saja. Coba kalian perhatikan perbedaan dua kode dibawah ini.</div><div style="text-align: justify;"><br />
</div><div id="tambahan1"><b>box-shadow</b>: <b><span style="color: blue;">0</span></b> <b><span style="color: lime;">0</span></b> <b><span style="color: #741b47;">10px</span></b> <span style="color: red;">red</span>; </div><br />
<div id="tambahan1"><b>box-shadow:</b> <b><span style="color: blue;">0</span></b> <b><span style="color: lime;">0</span></b> <b><span style="color: #741b47;">10px</span></b> <b><span style="color: red;">red</span><span style="color: magenta; font-size: large;">,</span></b> <b><span style="color: blue;">0</span></b> <b><span style="color: lime;">0</span></b> <b><span style="color: #741b47;">30px</span></b> <b><span style="color: blue;">blue</span></b>; </div><br />
<div style="text-align: justify;">Pada kode kedua kita hanya menambahkan tanda koma(,) kemudian memberikan tambahan kode bayangan yang baru. Untuk pemberian kode kedua nilai/angka penentu harus lebih besar dari kode yang pertama dan warna yang berbeda pula.</div><br />
<pre class="css" name="code">#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan tunggal--*/
}
</pre><pre class="css" name="code">#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red, 0 0 30px blue; /*--code bayangan ganda--*/
}
</pre>Hasil yang akan kita dapatkan adalah seperti dibawah ini. <br />
<br />
<br />
<div id="box-bayangan-ganda">Hasil penambahan efek bayangan ganda dengan CSS</div><br />
<br />
<div style="text-align: justify;">Hal ini juga berlaku jika kita ingin menambahkan lagi bayangan yang lebih banyak. Siapa tahu kalian suatu saat bisa membuat box-shadow dengan efek pelangi. Kalau saya cuma bisa membuat yang aneka warna aja seperti dibawah ini. Hehe..</div><br />
<div id="box-3D">Kotak 3D beraneka warna dengan CSS</div><br />
Untuk posting berikutnya kita akan sedikit membahas tentang hal yang serupa yaitu cara membuat text-shadow dan text 3D<br />
<br />
<div id="box-bayangan3">Teks shadow dan teks 3D dengan CSS</div></div>

CSS Dasar Menengah Tutorial Cara membuat efek bayangan atau Box Shadow di blog

Setelah sebelumnya kita membahas jenis-jenis border dan cara membuatnya, maka diposting kali ini kita akan coba membahas cara membuat box-sh...

Baca selengkapnya »

Mempermudah Ujicoba design dengan Inspect Element

Jumat, Desember 16, 2011 Kelulut Klanceng 0

<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/AVvXsEhWWi6T9ovMcSZGTFWwM9sz3820qcq751DL_C5ha9cj4KrNntquPztStghxR2rVrCAOC_Rsu06KY4K1lbET2djdIG9wbnSIiSs5n0w01N3sRfqiUH3EW6xcWK6OsZYtIfwFIPRUXqhpCVE/s1600/inspect+element.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWi6T9ovMcSZGTFWwM9sz3820qcq751DL_C5ha9cj4KrNntquPztStghxR2rVrCAOC_Rsu06KY4K1lbET2djdIG9wbnSIiSs5n0w01N3sRfqiUH3EW6xcWK6OsZYtIfwFIPRUXqhpCVE/s320/inspect+element.jpg" width="270" /></a></div>Dalam posting sebelumnya yaitu tentang persiapan yang sebaiknya kita lakukan agar lebih nyaman dalam belajar design template, saya ada sedikit menyinggung istilah <i style="font-weight: bold;">Inspect Element.</i> Buat teman-teman yang udah jago design pasti tahu tentang hal ini. Karena memang dengan adanya fitur Inspect Element ini proses design template ini akan 1000 kali lebih mudah.<br />
<br />
Kenapa saya bilang demikian??<br />
Karena dengan menggunakan fasilitas ini kita dapat melihat struktur code sesuai yang ditampilkan pada halaman web secara langsung. Code yang ditampilkan dalam inspect element tentunya merupakan code-code client-side, meliputi HTML, CSS dan JavaScript. Melalui fasilitas ini kita dapat melihat struktur code dan juga hasil tampilan yang kita lihat dalam browser. Kecuali Mozilla Firefox, Browser-browser populer saat ini seperti Opera dan Google Chrome telah menyediakan fasilitas ini. Fasilitas ini sudah terdapat secara langsung saat pertama kali menginstal.<br />
<br />
Khusus Mozilla Firefox, untuk dapat menggunakan inspect element kita harus menambahkan sebuah add-on yaitu <a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a>. Cara instalnya cukup mudah kok. Kita tinggal kunjungi <a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> untuk mendapatkan add-on inspect elementnya, install dan restart browser firefoxnya.<br />
<br />
Cara penggunaannya pun sangat mudah.<br />
<ol><li style="margin-top: -10px;">Kita tinggal letakkan mouse pada bagian yang ingin kita lihat element dan code sourcenya.</li>
<li>Lalu klik kanan. </li>
<li>Kemudian klik Inspect Element yang biasanya berada paling bawah dari option yang muncul. </li>
</ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCReqJm8PkBJF2sOhs7iI4LQ2QZNjAjzGtoQpIR_HDAZMtnuvuIfTDxWswxkveNedv9vdgowImBepO5tLGDebTyOiBUq9ZsPv8JCruJCaWOJ6kZbbeOrcXlKu-2HsFwQoTqWKxQWDkdQ/s1600/inspect+element.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCReqJm8PkBJF2sOhs7iI4LQ2QZNjAjzGtoQpIR_HDAZMtnuvuIfTDxWswxkveNedv9vdgowImBepO5tLGDebTyOiBUq9ZsPv8JCruJCaWOJ6kZbbeOrcXlKu-2HsFwQoTqWKxQWDkdQ/s400/inspect+element.bmp" width="500" /></a></div><br />
Untuk system inspect element yang terbaru, akan ada banyak sekali bagian-bagian yang bisa kita gunakan. Namun untuk tahap awal maka kita cukup menggunakan 3 menu element saja.<br />
<div><b><u>3 menu utama dalam fitur Inspect Element ini yaitu:</u></b><br />
<ol><li style="margin-top: -10px;"><b>Elements : </b><br />
Pada menu elements kita dapat melihat struktur disain dari suatu halaman web yang di tampilkan dalam bentuk script atau kode dimana pada menu ini setiap elemen telah disusun berdasarkan posisi script dan setiap elemen halaman telah dikelompokkan masing-masing. Dengan fitur ini kita dapat dengan jelas melihat struktur desain dari halaman tersebut sesuai dengan coding asli yang telah di buat oleh programmer. Baik itu lebar area, tinggi area, background yang digunakan, komposisi warna yang dipakai dan lain sebagainya.</li>
<li><b>Resources : </b><br />
Merupakan tampilan detail dari elemen-elemen halaman web seperti gambar dan style CSS yang digunakan (lebih mengarah ke interface web). Pada menu kita dapat melihat source lengkap dari setiap elemen gambar dalam halaman web, mulai dari gambar background, header, widget, icon, banner, dsb. bahkan kita bisa mendownload elemen tersebut dengan langsung menuju ke source yang ditunjukkan oleh gambar. Kelebihannya adalah pada menu ini setiap gambar dapat di preview secara langsung bahkan resolusi sebenarnya dari gambar tersebut juga akan ditampilkan.</li>
<li><b>Scripts : </b><br />
Isi menu ini sama saja dengan isi halaman yang muncul pada saat kita melakukan view source pada halaman web.</li>
</ol></div>Nah, Setelah panjang lebar menjelaskan tentang inspect element ini mungkin akan lebih mudah dipahami jika kita bisa melihat sedikit triknya langsung. Tenang saja, saya sudah siapkan satu video kok. Nanti kalian juga bisa cari sendiri di youtube tentang cara penggunaan atau fungsi dari inspect element ini. Atau jika kalian sabar, kalian bisa tunggu posting berikutnya.<br />
<br />
<br />
<center><br />
<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/ZuGfvl-hLf8" width="480"></iframe></center></div></div>

Blogging Dasar designe Menengah Tips n Trik Tutorial Mempermudah Ujicoba design dengan Inspect Element

Dalam posting sebelumnya yaitu tentang persiapan yang sebaiknya kita lakukan agar lebih nyaman dalam belajar design template, saya ada sedik...

Baca selengkapnya »