Label Cloud Berputar

Kategori atau label yang saya pasang di blog saya awalnya tampak membosankan, karena sangat monoton alias diam seribu bahasa.
Jadi saya coba menggantinya dengan label yang menyerupai awan berputar, dalam istilah blogger dinamakan label cloud (label awan). Pengelompokkan label atau kategori ini merupakan gabungan antara bahasa flash dengan javascript.

Label cloud ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor, coba sobat arahkan cursor ke label cloud tersebut, terlihat tulisannya mengikuti cursor sobat.

Sebenarnya untuk membuat label cloud ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada kode HTML template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya download terlebih dahulu template sobat atau bisa sobat simpan di notepad juga tidak apa-apa.

^^^Langkah Pertama

1. Login ke Blogger dengan ID sobat.
   
   
2. Klik "Tata Letak"
   
   
3. Klik tab "Edit HTML"
   
   
4. Download dahulu template sobat dengan mengklik "Download Template Lengkap"
   
   
5. Kemudian klik button "Expand Template Widget" dan cari kode yang seperti ini
   
   
   
   <b:section
   class='sidebar' id='sidebar' preferred='yes'>
   
   
   
   
6. Copy kode berikut ini setelah kode diatas :
   
   
   
   <b:widget id='Label99' locked='false' title='Labels' type='Label'>
   
   <b:includable id='main'>
   
   <b:if cond='data:title'>
   
   <h2><data:title/></h2>
   
   </b:if>
   
   <div class='widget-content'>
   
   <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js'
   type='text/javascript'/>
   
   <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy
   Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
   
   <script type='text/javascript'>
   
   var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;,
   &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
   
   // uncomment next line to enable transparency
   
   //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
   
   so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
   
   so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
   
   so.addVariable(&quot;distr&quot;, &quot;true&quot;);
   
   so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
   
   so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels'
   var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
   
   so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
   
   so.write(&quot;flashcontent&quot;);
   
   </script>
   
   <b:include name='quickedit'/>
   
   </div>
   
   </b:includable>
   
   </b:widget>
   
   
   
   
   
7. Kemudian Save Template

^^^Langkah Kedua

1. Mengubah lebar dan tinggi kolom serta warna background
   
   
   
   var so = new
   SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
   "tagcloud", "240", "300",
   "7", "#ffffff");
   
   
   
   
   • Angka "240" adalah lebar kolom
     
   • Angka "300" adalah tinggi kolom
     
   • Sedangkan #ffffff adalah kode untuk backgroud
     
   
   
2. Merubah warna font, untuk kode warna bisa sobat lihat disini
   
   
   
   so.addVariable("tcolor", "0x333333");
   
   
   
   
3. Merubah ukuran font
   
   
   
   so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a
   expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
   
   
   
   

Hanya itu ilmu yang bisa saya bagi-bagi, terima kasih buat roytanck dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Jika ada pertanyaan silahkan isi di kolom komentar, jangan yang aneh-aneh ya pertanyaannya..

[ Baca Selengkapnya ]...

Cara membuat Navigasi Halaman

Untuk memudahkan pengunjung blog atau web dalam melakukan pencarian artikel, selain menggunakan fasilitas searh engine, bisa juga dengan tombol navigasi halaman.

Tombol navigasi halaman ini sebenarnya kurang lebih sama dengan tombol next atau previous pada blog sobat, namun bedanya navigasi halaman bisa membuat pengunjung ingat tempat suatu artikel pada halaman ke berapa pada blog kita.

Karena navigasi halaman menampilkan nomor per halaman blog kita, seperti contoh pada halaman bawah search engine di google, terlihat tombol navigasi halaman untuk memudahkan pengunjung dalam pencarian keyword yang di maksud.

Berikut langkah mudah dalam membuat navigasi halaman :

1. Login ke Blogger.
   
   
2. Klik Tata Letak --> Elemen Halaman.
   
   
3. Kemudian klik Tambah Gadget.
   
   
4. Pilih yang Edit HTML/Javascript.
   
   
5. Tambahkan kode berikut pada kotak kosong yang tersedia.
   
   
   
   <style>
   .showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
   }
   .showpageArea a {border: 1px solid #505050;
   color: #000000;font-weight:normal;
   padding: 3px 6px !important;
   padding: 1px 4px ;margin:0px 4px;
   text-decoration: none;
   }
   .showpageArea a:hover {
   font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   }
   
   .showpageNum a {border: 1px solid #505050;
   color: #000000;font-weight:normal;
   padding: 3px 6px !important;
   padding: 1px 4px ;margin:0px 4px;
   text-decoration: none;
   
   }
   .showpageNum a:hover {
   font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   
   }
   .showpagePoint {font-size:11px;
   padding: 2px 4px 2px 4px;
   margin: 2px;
   font-weight: bold;
   border: 1px solid #333;
   color: #fff;
   background-color: #000000;
   }
   
   .showpage a:hover {font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   
   }
   .showpageNum a:link,.showpage a:link {
   font-size:11px;
   padding: 2px 4px 2px 4px;
   margin: 2px;
   text-decoration: none;
   border: 1px solid #0066cc;
   color: #0066cc;
   background-color: #FFFFFF;}
   
   .showpageNum a:hover {font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   }
   </style>
   
   <script type="text/javascript">
   
   function showpageCount(json) {
   var thisUrl = location.href;
   var htmlMap = new Array();
   var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
   var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
   var isPage = thisUrl.indexOf("/search?updated")!=-1;
   var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
   thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
   var thisNum = 1;
   var postNum=1;
   var itemCount = 0;
   var fFlag = 0;
   var eFlag = 0;
   var html= '';
   var upPageHtml ='';
   var downPageHtml ='';
   
   var pageCount=5;
   var displayPageNum=4;
   var firstPageWord = 'First';
   var endPageWord = 'Last';
   var upPageWord ='Previous';
   var downPageWord ='Next';
   
   var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
   
   for(var i=0, post; post = json.feed.entry[i]; i++) {
   var timestamp = post.published.$t.substr(0,10);
   var title = post.title.$t;
   if(isLablePage){
   if(title!=''){
   if(post.category){
   for(var c=0, post_category; post_category = post.category[c]; c++) {
   if(encodeURIComponent(post_category.term)==thisLable){
   if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
   if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
   }
   
   postNum++;
   htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
   }
   }
   }
   }//end if(post.category){
   
   itemCount++;
   }
   
   }else{
   if(title!=''){
   if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
   if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
   }
   
   if(title!='') postNum++;
   htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
   }
   }
   itemCount++;
   }
   }
   
   for(var p =0;p< htmlMap.length;p++){
   if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
   if(fFlag ==0 && p == thisNum-2){
   if(thisNum==2){
   if(isLablePage){
   upPageHtml = labelHtml + upPageWord +'</a></span>';
   }else{
   upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
   }
   }else{
   upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
   }
   
   fFlag++;
   }
   
   if(p==(thisNum-1)){
   html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
   }else{
   if(p==0){
   if(isLablePage){
   html = labelHtml+'1</a></span>';
   }else{
   html += '<span class="showpageNum"><a href="/">1</a></span>';
   }
   }else{
   html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
   }
   }
   
   if(eFlag ==0 && p == thisNum){
   downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
   eFlag++;
   }
   }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
   }//end for(var p =0;p< htmlMap.length;p++){
   
   if(thisNum>1){
   if(!isLablePage){
   html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
   }else{
   html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
   }
   }
   
   html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;
   
   if(thisNum<(postNum-1)){
   html += downPageHtml;
   html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
   }
   
   if(postNum==1) postNum++;
   html += '</div>';
   
   if(isPage || isFirstPage || isLablePage){
   var pageArea = document.getElementsByName("pageArea");
   var blogPager = document.getElementById("blog-pager");
   
   if(postNum <= 2){
   html ='';
   }
   
   for(var p =0;p< pageArea.length;p++){
   pageArea[p].innerHTML = html;
   }
   
   if(pageArea&&pageArea.length>0){
   html ='';
   }
   
   if(blogPager){
   blogPager.innerHTML = html;
   }
   }
   
   }
   </script>
   
   <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
   
   
   
6. Drag and drop tepat dibawah kolom postingan.
   
   
7. Kemudian Save.

Untuk var pageCount=5; --> jumlah postingan dalam satu halaman, jadi sobat sesuaikan dengan jumlah postingan sobat dalam satu halaman. Jika sobat menampilkan 5 postingan setiap halaman, maka sobat gunakan var pagecount=5.
Sipp semoga bermanfaat ya !!

[ Baca Selengkapnya ]...

Kode Warna

Untuk mengedit template sobat tentu akan selalu berhubungan dengan yang namanya kode warna HTML. Tidak seperti kode warna biasa, kode warna HTML ini menggunakan angka bukan huruf. Contoh untuk kode warna putih adalah #FFFFFF, untuk warna hitam #000000, dan masih banyak lagi kode untuk warna yang lain, jika saya sebutkan satu persatu akan memakan tempat dan waktu yang lama. Untuk itu saya buatkan dalam satu kotak besar beserta gambar warna yang jika di klik akan muncul kode warnanya.

Silahkan sobat kreasikan blog sobat dengan warna - warna di bawah ini :

Kode warna yang terpilih :

[ Baca Selengkapnya ]...

Membuat Background Postingan Bergambar

Untuk mempercantik postingan kita, kadang - kadang kita memerlukan tambahan background di belakang tulisan kita. Pada pembahasan terdahulu tentang cara membuat tabel sebenarnya agak mirip dengan postingan ini, tapi bedanya kalau tabel hanya menampilkan warna saja sedangkan pembahasan kali ini background akan berupa warna dan gambar.

I. Mengganti warna background.

• Cukup menambahkan kode berikut ke dalam postingan sobat :
  
  
  
  <div style="background:kode_warna_disini;">
  
  Tulisan sobat letaknya disini
  
  </div>
  
  
  Untuk kode warna bisa sobat lihat disini
  

II. Mengganti Background dengan gambar

• Kodenya seperti berikut ini :
  
  
  
  <div style="background:url(alamat url tempat sobat mengupload gambar) no-repeat right top; text-align:justify; font-size:100%; padding:10px">
  
  Tulisan yang akan sobat tulis didalam postingan sobat letaknya disini
  
  </div>
  
  
  

Ganti tulisan yang saya tandai warna merah dengan alamat url tempat sobat mengupload gambar, bisa di Photobucket atau Yahoo Geocities. Untuk contoh punya saya yang telah saya upload ke Photobucket, kodenya seperti ini : http://i643.photobucket.com/albums/uu155/miskahiper/Kolom-1.png

kemudian akan menjadi seperti ini :

<div style="background:url(http://i643.photobucket.com/albums/uu155/miskahiper/Kolom-1.png) no-repeat right top; text-align:justify; font-size:100%; padding:10px">

Tulisan yang akan sobat tulis didalam postingan sobat letaknya disini

</div>

Sangat mudah ya..selamat mencoba !

[ Baca Selengkapnya ]...