Ngalor Ngidul: Tingkat Lanjut

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>

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 »

Cara Memasang jQuery Image Preloader

Sabtu, April 07, 2012 Kelulut Klanceng 3

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

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

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

Baca selengkapnya »

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 »

Pengenalan JQuery

Sabtu, Februari 11, 2012 Kelulut Klanceng 4

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

Blogging designe Javascript JQuery Tingkat Lanjut Pengenalan JQuery

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

Baca selengkapnya »

Trik 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 »