Cara Membuat Spoiler

Lama juga saya tidak membuat postingan di blog ini, gatal juga rasanya tangan pengen mencet � mencet keyboard. Tutorial kali ini, saya akan membahas tentang membuat spoiler pada blog.

 

Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak makan tempat. Sebenarnya sobat juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.

 

Spoiler ini bisa sobat letakkan di postingan, mungkin sobat gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.

 

Contoh Spoiler:

Letakkan kode script, HTML dan teks anda disini

 

 

Untuk membuat spoiler, silahkan sobat copy kode script nya dibawah ini :

 

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan kode script, HTML dan teks anda disini

 

<br>
</div>
</div>
</div>

 

Keterangan :

1. Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
2. Width : 55px untuk lebar spoiler.
3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Selamat mencoba !

More about → Cara Membuat Spoiler

Blogger Support Read More

Saya tidak tau pasti kapan blogger update fasilitas read more ini, seperti yang ada di wordpress, sekarang kita tidak perlu lagi menggunakan read more manual yang pernah saya bahas dulu. Jadi lupakan saja read more yang dulu pernah saya jelaskan di blog ini.

 

Karena fungsi read more dari blogger ini lebih praktis, sobat tidak perlu lagi meletakkan kode <span class=�fullpost�> setelah postingan pertama dan tidak pula harus menutupnya dengan </span> di akhir postingan.

 

Sebenarnya kode pemisah postingan yang pertama akan muncul dan yang akan muncul secara keseluruhan ini sangat simple, hanya kode <!--more-->, jadi tidak masalah jika sobat menulis menggunakan windows live writter.

Sobat masih bisa menggunakan read more ini dengan menambahkan kode <!--more--> diantara postingan yang akan tampil pertama. Oke kita tinggalkan windows live writter, sekarang tuju blogger.

 

1. Buka blogger dengan ID sobat. 

    

2. Pada halaman dashboard, klik Setting �> Pilih Global Setting, klik radio button Update Edittor. 

    

3. Kemudian tuju halaman postingan, dan perhatikan gambar yang saya lingkari dengan warna merah di bawah ini.

    

   

    

   Nah tombol tersebut adalah tombol pemisah postingan yang biasa kita sebut dengan read more. Silahkan di coba menulis artikel dan pisahkan dengan kode tersebut.

    

4. Untuk setting kata read more silahkan sobat tuju Elemen Halaman.

    

5. Kemudian klik Edit pada Posting Blog, seperti gambar di bawah ini

    

   

    

6. Pada halaman Edit tersebut, perhatikan Post Page Link Text, silahkan sobat ubah sesuai keinginan sobat, bisa dengan �read more� atau �baca selengkapnya�.

    

   

    

7. Kemudian Simpan.

Selamat menulis menggunakan read more baru dari blogger.

More about → Blogger Support Read More

Widget Recent Posts dari Bloggertricks.com

Lagi � lagi tentang recent posts, semoga sobat tidak bosan dengan postingan saya. Sama dengan postingan yang kemarin, bedanya kalo postingan saya terdahulu, saya menulis tentang membuat recent posts dari fasilitas  yang ada di blogger, maka kali ini yang akan saya bahas adalah membuat recent posts yang di buat oleh Kranthi yang empunya bloggertricks.com.

 

Widget ini agak berbeda dari recent posts part 1, bedanya disini kita bisa atur lebar widget, warna border, ukuran font, tinggi dan lebar thumbnails, dll. Tapi kelemahan widget ini adalah tidak adanya cuplikan isi post atau preview dari postingan kita. Silahkan pilih sobat mau menggunkan yang mana.

 

Mau coba yang ini ? ayo kita lanjutkan. Jika dalam tulisan / postingan, sobat tidak pernah memasukkan gambar, maka gambar akan menjadi kotak hitam dan akan terlihat kurang bagus, jadi sebaiknya jika sobat menulis artikel, masukkanlah minimal 1 gambar agar dalam widget recent posts ini muncul gambar / thumbnails dari postingan kita. Lanjut, silahkan ikuti langkah � langkahnya berikut ini :

 

1. Seperti biasa, loginlah ke blogger terlebih dahulu.

    

2. Klik Tata Letak.

    

3. Klik Elemen Halaman.

    

4. Kemudian klik Tambah Gadget.

    

5. Pilih yang HTML / Javascript, lalu masukkan kode scriptnya berikut ini :

    

   <script language="JavaScript">
   imgr = new Array();
   imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

   showRandomImg = true;
   boxwidth = 298;
   cellspacing = 8;
   borderColor = "#FFFFFF";
   bgTD = "#000000";
   thumbwidth = 40;
   thumbheight = 40;
   fntsize = 12;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = false;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 5;
   home_page = "http://newalltutorial.blogspot.com/";
   </script>
   <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

    

6. Yang harus di ganti / edit:

    

      boxwidth = 298  -�> lebar kotak widget   
      cellspacing = 8  -�> ruang di antara sel   
      borderColor = "#FFFFFF"  -�> warna border / garis pada kotak
      thumbwidth = 40  --> lebar thumbnails
      thumbheight = 40  --> tinggi thumbnails 
      fntsize = 12  --> ukuran font (huruf)   
      acolor = "#666"  --> warna Judul   
      aBold = true  --> tebal huruf pada judul post (true or false)   
      numposts = 5  --> jumlah judul post yang ingin ditampilkan
     home_page = http://newalltutorial.blogspot.com/ -�> ganti dengan alamat url blog sobat.

    

   Untuk kode warna � warna, bisa lihat disini.

    

7. Kemudian Simpan.

Selamat berkreasi !!

More about → Widget Recent Posts dari Bloggertricks.com

Memasang Total Komentar dan Total Posts

Untuk memudahkan kita melihat jumlah makhluk yang sudah berkomentar di blog kita, sobat bisa pasang script untuk total komentar di blog sobat, script ini termasuk yang banyak di gunakan oleh blogger, selain script total post / artikel yang ada di blog kita.

 

Kalau total posts sendiri sebenarnya sobat bisa melihat di halaman dashboard blogger, namun jika sobat tertarik untuk memasangnya sekedar untuk mempelihatkan jumlah postingan yang sudah sobat buat, ya monggo disini juga ada scriptnya. Script total komentar ini ada bagusnya sobat letakkan dibawah recent comments, itu pun jika sobat telah memasangnya.

 

Dan begitupun untuk total posts sebaiknya dipasang dibawah recent posts, karena selain terlihat bagus juga agar tidak berantakkan. Coba saja jika total komentar sobat letakkan di atas header blog, kan lucu atuh, masa total komentar ada di header..pamer nih blog saya ada 10.000 komentar, huh cape� dehh.

 

Langsung praktek, berikut kode script total komentar dan total posts nya :

 

  Kode script untuk total komentar :

 

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t +'</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

 

  Kode script untuk total posts :

 

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

 

Yang harus diganti hanya tulisan dengan warna merah saja, ganti dengan alamat blog sobat.  Untuk meletakkannya sudah tau kan ? bagi yang masih awam, silahkan ikuti langkah � langkahnya berikut ini :

 

1. Login ke blogger dengan ID sobat.

    

2. Klik Tata Letak.

    

3. Klik Elemen Halaman.

    

4. kemudian klik Tambah Gadget.

    

5. Pilih yang HTML / Javascript, kemudian masukkan salah satu kode script diatas.

    

6. Setelah itu Simpan.

    

Mudah kan, silahkan di coba aja biar tau.

More about → Memasang Total Komentar dan Total Posts

Memasang Widget Recent Post Dari Blogger

Postingan terbaru atau biasa disebut recent posts merupakan informasi singkat yang menampilkan judul postingan terakhir / terbaru secara berurutan untuk memudahkan pengunjung melihat postingan terbaru kita.

 

Pada postingan saya terdahulu, sudah pernah saya bahas tentang membuat recent post dengan menggunakan feeds url kita. kalau cara seperti itu sangat mudah , namun hasil yang di dapat kurang sempurna karena tidak di tampilkannya gambar / thumbnails dan comment count (total komentar) dari postingan kita.

 

Sebenarnya jika sobat jeli, widget recent posts ini ada didalam fasilitas yang disediakan oleh blogger. Tidak usah panjang lebar, langsung saja kita menuju lokasi.

 

1. Seperti biasa sobat login dahulu ke blogger.

    

2. Kemudian pada Elemen Halaman klik Tambah Gadget.

    

3. Pilih Featured.

    

   

    

4. Lalu pilih Recent Posts Advanced.

    

   

    

5. Pada halaman pengaturan, silahkan sobat ganti Blog Url dengan alamat blog sobat.

    

   

    

   Untuk Height merupakan tinggi dari widget, Number of posts to display adalah jumlah postingan yang akan ditampilkan, Summary length adalah panjang karakter isi postingan yang akan ditampilkan. Untuk yang lain � lain sobat contreng saja semua.

    

6. Dibawahnya ada preview recent posts untuk memudahkan sobat melihat seperti apa hasilnya nanti.

    

   

    

7. Setelah itu jangan lupa Simpan.

Silahkan lihat hasilnya, mudah kan.

More about → Memasang Widget Recent Post Dari Blogger

Cara Membuat Read More Otomatis

Pada postingan sebelumnya sudah pernah saya bahas tentang cara membuat read more atau baca selengkapnya. Hampir sama dengan postingan saya kali ini, namun read more otomatis memiliki kelebihan yaitu postingan akan terbagi menjadi 2 bagian secara otomatis.

 

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down. 

 

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

 

Berikut langkah � langkah dalam membuat read more otomatis :

1. Silahkan login ke blogger terlebih dahulu.
2. Klik Tata Letak. 
3. Kemudian klik Edit HTML.
4. Centang Expand Template Widget. 
5. Letakkan kode berikut ini tepat diatas kode </head> :
   

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>

   <script type='text/javascript'>
   //<![CDATA[
   /******************************************
   Auto-readmore link script, version 2.0 (for blogspot)

   (C)2008 by Anhvo

   visit http://en.vietwebguide.com to get more cool hacks
   ********************************************/
   function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
   }

   function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   }

   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script>

6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :

   <div class='post-header-line-1'/>
   <div class='post-body'>
   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>.fullpost{display:none;}</style>
   <p><data:post.body/></p>
   <a expr:href='data:post.url'>Readmore</a>
   </b:if>
   <div style='clear: both;'/>    

   sehingga sekarang hanya ada satu <data:post.body/>
7. Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>

8. Ganti kode tersebut dengan kode berikut ini :

   <b:if cond='data:blog.pageType != "item"'>
   <div expr:id='"summary" + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
   <span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More � <data:post.title/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

    

9. Kemudian Simpan Template.

 

Keterangan :

• summary_noimg = 450 �-> untuk tinggi postingan tanpa gambar.
• summary_img = 360 �-> untuk tinggi postingan dengan gambar.
• img_thumb_height = 120 �> tinggi gambar.
• img_thumb_width = 150 �> lebar gambar.
• Read More� �> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

 

Silahkan sobat atur sesuai template sobat. Selamat berkreasi.

More about → Cara Membuat Read More Otomatis

Cara Membuat Multi Kolom

Tutorial kali ini membahas tentang design template, multi kolom, pasti sudah banyak yang tau apa itu multi kolom, tapi saya yakin masih sedikit yang mengetahui cara membuatnya. Kali ini kita akan membuat muliti kolom tepat dibawah halaman blog kita atau biasanya letaknya dibawah kolom postingan, ambil contohnya saja yang ada di blog ini dimana saya membuat 3 kolom pada bagian bawah template. Banyak variasi yang bisa sobat buat untuk mempercantik kolom � kolom ini.

 

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus � putus dibawah tulisan dan icon cantik yang mengawali tulisan.

 

Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau.

 

1. Seperti biasa login dulu ke blogger.

    

2. Klik Tata Letak.

    

3. Pilih Edit HTML dan centang Expand Template Widget. 

    

4. Tambahkan kode berikut tepat diatas kode ]]></b:skin> :

    

   #bottom {
   width: 990px;
   position: relative;
   clear:both;
   margin: 0 auto;
   color:#000;
   float: center;
   background:transparent;
   padding: 15px 0 15px 0; }

    

   #bottom h2 {
   padding-left: 5px;
   margin: 0 0 10px 0;
   background:#0B3B0B;
   color:#fff;
   font-size: 18px;
   letter-spacing: 1px;
   border-bottom: 1px solid #000; }

    

   #bottom ul{padding:0; margin:0; color:#333}

    

   #bottom ul li{ background:url('http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUpBNdS9I/AAAAAAAAA5E/4xRuRZrjoVU/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

    

   #bottom li{ background:url('http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUpBNdS9I/AAAAAAAAA5E/4xRuRZrjoVU/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

    
   #bottom ul li a:hover {
   background: #B1ACB1;}

    

   #left-bottom { /* kolom kiri */
   background:#ffffff; width: 300px;
   float: left;
   margin-left:10px;
   padding:5px; /* Jarak antara text dengan garis pinggir */
   Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
   Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
   Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
   Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
   Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
   -moz-border-radius-bottomleft:5px;
   -moz-border-radius-bottomright:5px;
   -moz-border-radius-topleft:5px;
   -moz-border-radius-topright:5px; }

    

   #center-bottom { /* kolom tengah */
   background:#ffffff; width: 300px;
   float: left;
   margin-left:10px;
   padding:5px; /* Jarak antara text dengan garis pinggir */
   Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
   Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
   Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
   Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
   Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
   -moz-border-radius-bottomleft:5px;
   -moz-border-radius-bottomright:5px;
   -moz-border-radius-topleft:5px;
   -moz-border-radius-topright:5px; }

    

   #right-bottom { /* kolom kanan */
   background:#ffffff; width: 300px;
   float: left;
   margin: 0 5px 0 10px;
   padding:5px; /* Jarak antara text dengan garis pinggir */
   Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
   Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
   Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
   Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
   Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
   -moz-border-radius-bottomleft:5px;
   -moz-border-radius-bottomright:5px;
   -moz-border-radius-topleft:5px;
   -moz-border-radius-topright:5px}

    

5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :

    

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

    

6. Copas kode berikut ini tepat sebelum kode diatas :

    

   <div id='bottom'>

   <b:section class='bottom' id='left-bottom'/>

   <b:section class='bottom' id='center-bottom'/>

   <b:section class='bottom' id='right-bottom'/>

   </div>

    

7. Kemudian Simpan Template sobat.

Sekarang sobat bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

 

Keterangan :

• #bottom { width: 990px

   

  --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.

   

• background:#0B3B0B

   

  --> latar belakang (background kolom).

   

• color:#fff

   

  --> warna tulisan judul

   

• #left-bottom { /* kolom kiri */ width: 300px

   

  --> lebar kolom kiri.

   

• -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;

   

  --> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika sobat enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode �moz-border-radius tersebut.

   

• Border-top: 2px solid #1B2A0A
  Border-bottom: 2px solid #1B2A0A
  Border-left: 2px solid #1B2A0A
  Border-right: 2px solid #1B2A0A

   

  --> untuk ketebalan garis pinggir masing � masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom. Untuk kode warna bisa di lihat disini. 

   

• Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.

http://3.bp.blogspot.com/_7Y9pl24WpQY/SqkW4ILj-VI/AAAAAAAAA6k/3SxVEYNQgv8/s320/z3.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkW2DHdmMI/AAAAAAAAA6c/oT8Yo3-yRPg/s320/z2.gif

 

http://3.bp.blogspot.com/_7Y9pl24WpQY/SqkW0WZmImI/AAAAAAAAA6U/2VPwUUNIJDk/s320/z1.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUj0d-mGI/AAAAAAAAA40/D24A-Sbgnrk/s320/d1.gif

 

http://4.bp.blogspot.com/_7Y9pl24WpQY/SqkUm8odsbI/AAAAAAAAA48/KuhUdmN-uLk/s320/d2.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUpBNdS9I/AAAAAAAAA5E/4xRuRZrjoVU/s320/d3.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUbP_1-gI/AAAAAAAAA4c/77tMTtIhI54/s320/c1.gif

 

http://4.bp.blogspot.com/_7Y9pl24WpQY/SqkUdux2vgI/AAAAAAAAA4k/sYP5QM__ghM/s320/c2.gif

 

http://4.bp.blogspot.com/_7Y9pl24WpQY/SqkUgesnzgI/AAAAAAAAA4s/ntoFgblB66Q/s320/c3.gif

 

http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkT_y4jxwI/AAAAAAAAA3s/hNasHuJnK4M/s320/a1.gif

 

http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUB9Ar2rI/AAAAAAAAA30/5eRXXyBdk18/s320/a2.gif

 

http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUDxWLl2I/AAAAAAAAA38/kyWABp8QaTs/s320/a3.gif

 

Untuk melihat hasilnya, silahkan sobat pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan sobat. Lihat contoh yang sudah jadi disini.

Selamat berkreasi !

More about → Cara Membuat Multi Kolom

Pasang Avatar Mybloglog di Kotak Komentar

Tutorial cara memasang avatar mybloglog di kotak komentar sebenarnya sudah lama, tapi dari beberapa kali saya berkunjung ke beberapa blog sobat, jarang sekali yang mengaplikasikannya.

 

Padahal menurut saya, tutorial memasang avatar di kotak komentar yang di populerkan oleh Amanda ini sangat bagus, karena kita bs melihat wajah yang memberi komentar dengan syarat telah menjadi member mybloglog. Saran saya buat sobat yang sudah ikutan mybloglog, sebelum komentar di blog saya sebaiknya ganti dulu foto yang lama dengan foto terbaik milik sobat.

 

Langsung saja, seperti biasa loginlah terlebih dahulu ke blogger.

1. Buat yang belum mendaftar, jangan lupa untuk daftar dulu di mybloglog.

    

2. Kemudian pada halaman blogger, klik Tata Letak.

    

3. Pilih Edit HTML.

    

4. Klik Download Template Lengkap, untuk jaga � jaga !

    

5. Lalu Centang Expand Widget Template.

    

6. Kemudian letakkan kode berikut diatas kode </head>

    

   <script type='text/javascript'>
   //<![CDATA[
   /*
   Merlinox and Napolux MyBlogLog Avatar Creator
   created by Merlinox (blog.merlinox.com)
   helped by Napolux (www.napolux.com)
   version 0.1 (20061214)
   version 0.2 (20061215)
   compatible with all blogger blog
   */
   if(typeof(myLayer)!='function'){
   function myLayer (x){
   //individuo l'oggetto
   if(document.layers){ // browser="NN4";
   lay=document.layers[x];
   }
   if(document.all){ // browser="IE";
   lay=eval("document.all." + x);
   }
   if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
   lay=document.getElementById(x);
   }
   return lay;
   }
   }
   //lo prendo da blogger
   function myBlogAvatar(codiceCommento,autore,stile){
   //scrivo lo span
   //var myBlogSpan = "myBlog-" + codiceCommento;
   //document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");
   //metto tutto minuscolo perch� indexOf � case sensitive
   if (autore != ""){
   alt="MyBlogLog: " + autore;
   myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
   //myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
   //myLayer(myBlogSpan).innerHTML = myBlog;
   document.write(myBlog);
   }
   }
   //]]>
   </script>

    

7. Setelah itu cari kode seperti dibawah ini :

    

   <b:loop values='data:post.comments' var='comment'>

    

8. Kemudian letakkan kode berikut tepat setelah kode <b:loop values='data:post.comments' var='comment'> :

    

   <div style='border:0;float:left;margin: 0 5px 0 0;'>
   <script>
   myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
   </script>
   </div>

    

9. Untuk kode yang berwarna ungu adalah jarak gambar dengan garis pinggir template, silahkan di otak-atik sendiri.

 

Untuk melihat hasilnya silahkan lihat komentar sobat blogger disini. Oke sob, selamat mencoba.

More about → Pasang Avatar Mybloglog di Kotak Komentar