Membuat Label Dengan Thumbnail Hover

Label yang selama ini sering kita jumpai bentuknya hanya berupa tulisan saja, itupun sudah ada dalam fasilitas menu di blogger. Bagaimana jika mengganti label dengan thumbnail atau gambar dari postingan? caranya sangat mudah, hanya manambahkan sedikit kode css dan javascript maka label dengan thumbnail akan menghiasi blog sobat. Kali ini saya coba berikan tutorial blog tentang label dengan thumbnail hover.

 

Penulisan label juga harus sesuai dengan yang ada di blog sobat, seperti besar kecilnya huruf juga sangat memperangaruhi. Untuk memulainya, ada baiknya sobat backup terlebih dahulu templatenya dengan masuk ke Rancangan �> Edit HTML �> Download Template Lengkap.

 

1. Tambahkan kode css berikut diatas / sebelum kode ]]></b:skin> : 

   img.label_thumb {

   float:left;

   padding:3px;

   background:#CCC;

   border:1px solid #A4A4A4;

   width:100px;

   height:75px;

   margin-right:10px;

   margin-top:10px }

    
   img.label_thumb:hover {

   opacity:0.8;

   filter:alpha(opacity=80);

   -moz-opacity:0.80;

   -khtml-opacity:0.8 }

2. Kemudian tambahkan kode script berikut dibawah / setelah kode ]]></b:skin> : 

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
   if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
   var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
   {s=entry.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!="")){thumburl=d;}
   else thumburl='';}
   document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
   if(i!=(numposts-1))
   document.write('');}
   document.write('</div>');}
   //]]>
   </script>

3. Simpan Template.
4. Masuk ke Elemen Laman �> Tata Letak
5. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.
6. Kemudian masukkan kode berikut kedalamnya :

   <script type='text/javascript'>var numposts = 6;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/Magazine?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

Keterangan :

• Tulisan yang berwarna hijau adalah lebar dan tinggi thumbnail, sobat bisa sesuaikan dengan lebar widget template sobat.
• Tulisan yang berwarna biru untuk jumlah label yang akan di tampilkan.
• Dan tulisan yang berwarna merah untuk label yang akan sobat tampilkan, jangan sampai salah menulis labelnya, besar kecilnya huruf juga sangat mempengaruhi.

Sekian saja tips dari saya, semoga bermanfaat.

Membuat Label Dengan Marquee

Jika sobat pernah membaca postingan saya tentang membuat label dengan fungsi scroll, tentunya sobat tidak akan kesulitan membuat label dengan marquee (text berjalan). Agak sedikit aneh memang postingan saya kali ini, label (kategori) dibuat berjalan, tapi tidak ada salahnya kita coba bahas. Buat yang ingin mencoba sekedar ingin tau, berikut tutorial singkatnya. Untuk demo-nya bisa dilihat disini.

 

Seperti biasa, login dulu ke blogger.

• Jika sobat belum menampilkan label, silahkan sobat pasang dulu labelnya, tentunya label dengan model yang biasa (bukan label cloud).
• Jika sudah, klik Edit HTML.
• Klik Expand Template Widget.
• Kemudian cari kode yang mirip seperti dibawah ini, sebagai catatan untuk title='Label' adalah judul label yang ada di blog sobat, silahkan disesuaikan. Dan kode yang berwarna merah adalah kode yang harus disisipkan.
  

  <b:widget id='Label1' locked='false' title='Label' type='Label'>
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>

  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
  <marquee align='left' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> 
  <b:if cond='data:display == &quot;list&quot;'>

  <ul>
  <b:loop values='data:labels' var='label'>
  <li>
  <b:if cond='data:blog.url == data:label.url'>
  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
  <span dir='ltr'>(<data:label.count/>)</span>
  </b:if>
  </li>
  </b:loop>
  </ul>
  <b:else/>
  <b:loop values='data:labels' var='label'>
  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
  <b:if cond='data:blog.url == data:label.url'>
  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
  <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
  </b:if>
  </span>
  </b:loop>
  </b:if>
  <b:include name='quickedit'/>
  </marquee>
  </div>
  </b:includable>
  </b:widget>

• Kemudian Simpan Template.

Keterangan :

1. direction='up' adalah text yang berjalan dari bawah keatas.

    

2. height='300' adalah tinggi dari menu

    

3. scrollamount='2' adalah kecepatan gerakan text, semakin tinggi angkanya maka akan semakin cepat gerakannya.

Saya kira itu saja yang bisa saya sampaikan, semoga bisa bermanfaat.

Cara Membuat Label Dengan Fungsi Scroll

Tutorial memasang label dengan fungsi scroll ini sengaja saya tulis semata-mata untuk membantu blogger yang mempunyai banyak label / kategori dalam blognya. Jika di pasang semua tentunya akan makan tempat, dan mungkin bisa membuat blog jadi timpang alias panjang sebelah antara postingan dengan sidebar.

 

Menu scroll tentunya sudah banyak yang tau, menu ini dapat ditarik ke bawah dan ke atas. Cara membuatnya sangat mudah, hanya dengan menyisipkan sedikit kode HTML maka jadilah label dengan fungsi scroll.

 

 

Untuk membuatnya, silahkan ikuti dengan cermat langkah-langkahnya berikut ini :

1. Login ke blogger dengan ID sobat tentunya.

    

2. Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.

    

3. Anggap saja sobat telah membuat judul labelnya dengan nama �Kategori�.

    

4. Sekarang tuju ke Edit HTML.

    

5. Klik Expand Template Widgets.

    

6. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan �Kategori�, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut.

    

7. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.

    

   <b:widget id='Label1' locked='false' title='Kategori' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
   <div style='overflow:auto; width:ancho; height:250px;'>
   <b:if cond='data:display == &quot;list&quot;'>
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </li>
   </b:loop>
   </ul>
   <b:else/>
   <b:loop values='data:labels' var='label'>
   <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </span>
   </b:loop>
   </b:if>
   <b:include name='quickedit'/>
   </div>

   </div>
   </b:includable>
   </b:widget>

    

8. Jangan lupa Simpan Template.

Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada adalah

<div class='widget-content'>

bukan seperti yang ada di blog saya yaitu :

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> 

yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.

 

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

 

Saya kira itu cukup sekian pelajaran blog kita kali ini, terima kasih.

Pasang Breadcrumb (Navigasi) di Blog

Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

 

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

 

 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

 

Baiklah, begini cara membuat breadcrumb-nya :

• Login ke Blogger.
• Langsung tuju Edit HTML.
• Klik Expand Template Widget.
• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

  .breadcrumbs{
  padding:5px 5px 5px 0;
  margin:0;font-size:95%;
  line-height:1.4em;
  border-bottom:4px double #cadaef}

• Setelah itu, cari kode seperti ini :

  <div class='post hentry uncustomized-post-template'>

• Letakkan kode berikut ini tepat setelah kode <div class='post hentry uncustomized-post-template'>

  <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

  • Simpan Template.

Coba sekarang lihat hasilnya, mantab kan ! oke deh..au revoir

 

 

 

� Gambar diambil dari : Biens-Naturels �

Modifikasi Label Cloud Dari Blogger

Beberapa waktu yang lalu, Blogger telah menambahkan fitur baru yaitu label cloud. Saya sendiri tidak tahu pasti kapan Blogger menambahkan fitur ini, setelah minggu lalu saya secara tidak sengaja ingin menampilkan label pada blog saya yang lain, saya melihat ada yang baru tapi lama.

 

Baru tapi lama ? iya dong, kan label cloud sudah sering kita jumpai tutorialnya di berbagai blog.

 

Setelah mencoba, rasanya fasilitas label cloud ini kurang menarik tampilannya. Saya mencoba untuk menambahkan beberapa kode pada HTML blog untuk merubah warna dan besarnya huruf pada label cloud ini.

Karena memang label cloud asli dari blogger ini warna dan hurufnya sangat standard atau terlihat biasa � biasa saja. Saya menambahkan beberapa warna kedalamnya, untuk mengetahuinya silahkan sobat ikuti langkahnya berikut ini.

 

1. Seperti biasa, sobat login ke blogger.

    

2. Klik Tata Letak.

    

3. Kemudian klik Edit HTML.

    

4. Backup dulu template sobat dengan mengklik Download Template Lengkap.

    

5. Kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>

    

   .label-size-1 a {
   font-size: 13px;
   text-decoration: none;
   color:#4B8A08;
   }
   .label-size-2 a {
   font-size: 15px;
   text-decoration: none;
   color:#DF0101;
   }
   .label-size-3 a {
   font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
   color:#045FB4;
   }
   .label-size-4 a {
   font-size: 18px;
   text-decoration: none;
   color:#DF7401;
   }
   .label-size-5 a {
   font-size: 23px;
   text-decoration: none;
   color:#045FB4;
   }

   .label-size-1 a:hover,
   .label-size-2 a:hover,
   .label-size-3 a:hover,
   .label-size-4 a:hover,
   .label-size-5 a:hover { text-decoration:underline;}

         
    

6. Kemudian Simpan Template.

 

Sekarang sobat bisa lihat hasilnya, ada beberapa warna yang saya tambahkan ke dalam label cloud tersebut. Untuk kode yang saya tandai dengan warna merah, sobat bisa ubah sendiri sesuai keinginan sobat. Kode warna bisa sobat lihat disini.

 

Selamat mencoba !!

Membuat Label Cloud Berputar

Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.

I. 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 yg 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://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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 Simpan Template.

II. Langkah Kedua 

• Mengubah lebar dan tinggi kolom serta warna background 

   

  Angka "240" adalah lebar kolom
  

  Angka "300" adalah tinggi kolom
  

  Sedangkan #ffffff adalah kode untuk backgroud
  

   

• Merubah warna font, untuk kode warna bisa sobat lihat disini

   

  so.addVariable("tcolor", "0x333333");

   

• 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>");

 

Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

 

 

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.

Cara membuat Label Cloud

Untuk membuat tampilan label atau kategori lebih menarik, sobat bisa mencoba menggantinya dengan label yang menyerupai awan atau yang lebih dikenal dengan nama label cloud. Untuk membuatnya, lagi - lagi sobat harus mengotak - atik kode HTML blog sobat, jadi sebaiknya backup terlebih dahulu template sobat ubtuk menghindari kerusakkan pada template sobat.

1. Login ke Blogger.
   
   
2. Klik Tata Letak--> Edit HTML.
   
   
3. Jangan lupa backup dulu ya template nya.
   
   
4. Kemudian copy paste kode berikut diatas kode ]]></b:skin>
   
   
   /* Label Cloud
   ----------------------------------------------- */
   #labelCloud {text-align:center;font-family:arial,sans-serif;}
   #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
   #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
   #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
   #labelCloud a{text-decoration:none}
   #labelCloud a:hover{text-decoration:underline}
   #labelCloud li a{}
   #labelCloud .label-cloud {}
   #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
   #labelCloud .label-cloud li:before{content:"" !important}
   
   
   
   
5. Kemudian letakkan kode berikut ini diatas kode </head>
   
   
   <script type='text/javascript'>
   
   // Label Cloud User Variables
   var cloudMin = 1;
   var maxFontSize = 20;
   var maxColor = [0,0,255];
   var minFontSize = 10;
   var minColor = [0,0,0];
   var lcShowCount = false;
   </script>
   
   
   
   
6. setelah itu cari kode seperti dibawah ini :
   
   
   <b:widget id='Label1' 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'>
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <data:label.name/>
   <b:else/>
   <a expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   (<data:label.count/>)
   </li>
   </b:loop>
   </ul>
   
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
   
   
   
   
7. Hapus kode tersebut dan ganti dengan kode berikut :
   
   
   <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <div id='labelCloud'/>
   <script type='text/javascript'>
   
   // Don't change anything past this point --------------
   // Cloud function s() ripped from del.icio.us
   function s(a,b,i,x){
   if(a&gt;b){
   var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
   }
   else{
   var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
   }
   return v
   }
   var c=[];
   var labelCount = new Array();
   var ts = new Object;
   <b:loop values='data:labels' var='label'>
   var theName = &quot;<data:label.name/>&quot;;
   ts[theName] = <data:label.count/>;
   </b:loop>
   for (t in ts){
   if (!labelCount[ts[t]]){
   labelCount[ts[t]] = new Array(ts[t])
   }
   }
   var ta=cloudMin-1;
   tz = labelCount.length - cloudMin;
   lc2 = document.getElementById('labelCloud');
   ul = document.createElement('ul');
   ul.className = 'label-cloud';
   for(var t in ts){
   if(ts[t] &lt; cloudMin){
   continue;
   }
   for (var i=0;3 &gt; i;i++) {
   c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
   }
   var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
   li = document.createElement('li');
   li.style.fontSize = fs+'px';
   li.style.lineHeight = '1';
   a = document.createElement('a');
   a.title = ts[t]+' Posts in '+t;
   a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
   a.href = '/search/label/'+encodeURIComponent(t);
   if (lcShowCount){
   span = document.createElement('span');
   span.innerHTML = '('+ts[t]+') ';
   span.className = 'label-count';
   a.appendChild(document.createTextNode(t));
   li.appendChild(a);
   li.appendChild(span);
   }
   else {
   a.appendChild(document.createTextNode(t));
   li.appendChild(a);
   }
   ul.appendChild(li);
   abnk = document.createTextNode(' ');
   ul.appendChild(abnk);
   }
   lc2.appendChild(ul);
   </script>
   <noscript>
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <data:label.name/>
   <b:else/>
   <a expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   </li>
   </b:loop>
   </ul>
   </noscript>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
   
   
   
   
8. Save Template.

Panjang ya..jangan sampai ada yang ketinggalan dalam proses copy paste kode - kode diatas, karena ketinggalan satu elemen saja label cloud tidak akan berhasil dibuat. Untuk membuat label cloud berputar akan saya bahas selanjutnya. So..selamat memandangi label cloud sobat yang baru..

Cara Membuat Label (Kategori)

Label itu apa ya? Label adalah pengelompokkan postingan dalam kategori. Bisanya jika dalam penulisan kita selalu mengkategorikan postingan kita dalam beberapa kelompok. Misalnya judul pada postingan ini yaitu cara membuat label, kemudian saya kelompokkan dalam beberapa kategori, seperti blogspot tutorial, label, cara membuat label (lihat pada bagian tags).

Cara membuatnya sangat mudah, hanya saja jika sobat jeli dalam setiap penulisan artikel, pada bagian bawah kolom postingan terdapat kotak kecil untuk meletakkan label postingan kita.

 

Bagaimana cara membuatnya ?

 

1. Login ke Blogger

    

2. Pada halaman dashboard, klik Tata Letak

    

3. Klik Elemen Halaman

    

4. Kemudian pilih Tambah Gadget

    

5. Cari Label lalu di klik

    

   

    

6. Lalu akan ada halaman seperti di bawah ini :

    

   

    

7. Untuk Judul bisa sobat sesuaikan sendiri, setelahnya klik simpan.

    

8. Untuk mengisi Label atau Kategori, setiap sobat memposting tulisan sobat, isi kolom kosong dibawah kolom postingan dengan kategori yang sobat inginkan, seperti ini contohnya :

    

   

    

   Nah, ada kolom kosong kan, isi dengan kategori yang sobat inginkan. Jadi tulisan sobat masuk dalam kategori yang sobat tulis tersebut.

    

9. Atau bisa juga menggunakan cara berikut, pada halaman edit entri --> contreng salah satu postingan sobat --> klik aksi label --> label baru, lalu isi dengan label yang sobat inginkan.

    

   

Selamat mencoba !

Cara Menghapus Angka Pada Label

Ada postingan pasti ada label, dua hal yang tidak bisa terpisahkan karena setiap kita memposting artikel pasti kita sertakan label di bawahnya. Fungsi label sendiri sebenarnya untuk membedakan kita dalam pengkategorian antara artikel yang satu dengan yang lain, dan secara default label akan memperlihatkan angka dibelakang judulnya, jadi jika sobat menambahkan 100 postingan kedalam satu judul label maka akan nampak angka 100 dibelakang judul labelnya.

Seperti ini contoh gambar dari label atau kategori blog saya sebelum saya hilangkan angka - angkanya :




Tidak suka dengan angka dibelakang judul label dan ingin menghapusnya ? saya punya solusi untuk menghilangkan angkanya.

1. Login ke Blogger dengan ID sobat.
   
   
2. Klik Tata Letak --> Edit HTML.
   
   
3. Kemudian contreng Expand Template Widget.
   
   
4. Cari kode yang seperti ini :
   
   (<data:label.count/>)
   
   
5. Hapus kode tersebut tapi ingat letaknya, siapa tau sobat ingin menampilkan kembali dalam label sobat.
   
   
6. Kemudian Save Template.

Lihat hasilnya, angka dibelakang labelnya sudah hilang kan..
Sipp..Selamat Mencoba deh !!