Penggunaan Google Font API di Blogger

Hal ini sebenarnya sudah pernah saya jelaskan sebelumnya pada artikel Tutorial Penggunaan Google Fonts, namun kebetulan ada yang bertanya mengenai font yang saya gunakan di blog ini jadi tidak ada salahnya saya tulis kembali tutorial ini. Font yang saya gunakan di blog ini adalah Droid Sans, bagi yang belum mengerti silahkan baca kembali postingan saya yang lalu mengenai google fonts. Jika sobat ingin menggunakan font yang lain, silahkan kunjungi langsung Google Web Fonts.

 

Pada halaman depan, silahkan sobat sorting saja berdasarkan Popularity.

 

Setelah itu sobat bisa melihat font yang paling banyak digunakan termasuk 'Droid Sans' yang juga saya gunakan di blog ini, pilih font yang sobat suka dan klik Add to Collection.

 

Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.

 

Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.

 

Jangan lupa untuk menambahkan tanda [ / ] di akhir kode sehingga menjadi seperti berikut :

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>

 

Tahap selanjutnya memasukkan kode tersebut ke dalam template blogger, silahkan login ke blogger.

1. Klik Rancangan
2. Kemudian klik Edit HTML
3. Tambahkan kode tersebut sebelum kode </head>, sehingga menjadi seperti :

   <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
   </head>

4. Cari kode css untuk body, contohnya seperti berikut :

   body {
   width: 980px;
   background: #FFF;
   font-size: 13px;
   font-family: 'Droid Sans', verdana, arial;
   text-align: left;
   color: #000;
   margin: 0 auto;
   padding: 0;
   }

5. Perhatikan huruf yang saya tebalkan, itulah kode css yang harus sobat tambahkan.

Kode css tersebut sengaja saya letakkan dibagian body, sehingga font seluruh isi blog akan berubah menjadi Droid Sans. Jika sobat menemukan kode font : verdana, arial, trebuchet ms dan sebagainya dibagian css yang lain silahkan hapus saja, misal seperti ini :

 

.post {
text-align: left;
background: #FFF;
font-family: arial, verdana;
border: 1px solid #CCC;
margin-bottom: 10px;
padding: 10px 10px 0;
}

 

Baiklah selamat mencoba, semoga bermanfaat !

More about → Penggunaan Google Font API di Blogger

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.

More about → Membuat Label Dengan Thumbnail Hover

Modifikasi Followers

Sudah hampir sebulan saya tidak update blog ini, di samping kesibukkan saya di luar saya juga cukup kelelahan mengurus blog-blog saya yang lain. Muncul lagi dengan tutorial blog yang ringan, tapi mungkin bermanfaat, kita coba memodifikasi followers blogger.

 

Biasanya followers dipasang langsung pada widget yang sudah tersedia di blogger, tapi kali ini kita akan memasangnya di widget HTML/Javascript. Abaikan tutorial ini jika sobat menggunakan template minima atau template bawaan blogger.

 

Jika sobat menggunakan custom template, maka untuk mengedit link, warna text dan border akan mengalami kesulitan. Untuk itu kita coba menambahkan border dan mengedit sedikit warna pada followers, link color, text color, background color dan border color. untuk memulainya, silahkan sobat login ke blogger.

• Masuk ke Rancangan
• Klik Elemen Laman
• Pilih Tambah Gadget
• Klik yang HTML/JavaScript
• Kemudian masukkan kode followers dibawah ini :

  <script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>

  <!-- Define the div tag where the gadget will be inserted. -->
  <div id="div-eknxr14kfzlq" style="width:280px;border:1px solid #cccccc;"></div>
  <!-- Render the gadget into a div. -->
  <script type="text/javascript">
  var skin = {};
  skin['BORDER_COLOR'] = '#dedede';
  skin['ENDCAP_BG_COLOR'] = '#f0f0f0';
  skin['ENDCAP_TEXT_COLOR'] = '#444';
  skin['ENDCAP_LINK_COLOR'] = '#444';
  skin['ALTERNATE_BG_COLOR'] = '#fff';
  skin['CONTENT_BG_COLOR'] = '#f9f9f9';
  skin['CONTENT_LINK_COLOR'] = '#444';
  skin['CONTENT_TEXT_COLOR'] = '#444';
  skin['CONTENT_SECONDARY_LINK_COLOR'] = '#444';
  skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#444';
  skin['CONTENT_HEADLINE_COLOR'] = '#444';
  skin['NUMBER_ROWS'] = '3';
  google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
  google.friendconnect.container.renderMembersGadget(
  { id: 'div-eknxr14kfzlq',
     site: '06215030860304111239' },
    skin);
  </script>

• Ganti kode yang berwarna merah dan ungu dengan kode id blog sobat
• Simpan.

 

Keterangan :

1. untuk kode yang saya tebalkan bisa sobat ganti sesuai dengan warna dan lebar widget blog sobat.
2. Kode yang berwarna biru sesuaikan dengan lebar widget template sobat.
3. Untuk mencari kode yang berwarna merah dan ungu, jika sebelumnya sobat sudah memasang widget followers, maka sobat bisa klik kanan pada halaman blog kemudian klik �view page source� lalu klik CTRL+F dan ketik saja followers. Dari situ sobat dapat melihat kode id dan site dari blog sobat.

More about → Modifikasi Followers

Tutorial Singkat CSS Box Shadow

Kembali lagi dengan pelajaran seputar css, dan kali ini saya akan berikan tutorial singkat tentang css box shadow. Box shadow ini dapat sobat gunakan pada kotak postingan, sidebar atau dapat juga sobat gunakan sebagai pemanis dalam artikel blog sobat. Seperti contoh dibawah ini :

 

Support Firefox, Safari, Chrome, Opera dan IE9

kode css untuk contoh diatas adalah : 

#contoh {

-moz-box-shadow: 10px 10px 5px #222;

-webkit-box-shadow: 10px 10px 5px #222;

box-shadow: 10px 10px 5px #222;

}

 

Adapun 4 bagian yang terdapat dalam box shadow adalah :

• Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
• Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
• Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
• Warna dari bayangan. 

 

Berikut 6 contoh css box shadow yang bisa sobat pelajari dan gunakan :

 

A	B	C
D	E	F

 

Kode css untuk ke-6 contoh box shadow diatas adalah :

 

#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

 

#Contoh_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

 

#Contoh_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

 

#Contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

 

#Contoh_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

 

#Contoh_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Jika sobat ingin menambahkan box shadow pada kotak postingan sobat, maka cari saja kode seperti di templates sobat :

 

.Post {����������dst

}

 

kemudian tambahkan salah satu kode diatas sehingga hasilnya kurang lebih akan seperti ini :

 

.post {��������;

-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Bagaimana jika bayangan berada didalam kotak (inner shadow), yang harus sobat tambahkan hanya kode inset pada setiap bagian, contoh :

 

F

 

dan kodenya adalah :

 

#Contoh_F {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

 

Css box shadow bekerja sempurna pada browser mozilla firefox, untuk browser lain hanya beberapa saja yang dapat berfungsi dengan sempurna. Semoga bermanfaat .. tetap belajar ya biar tambah pintar 

More about → Tutorial Singkat CSS Box Shadow

Cara Pasang Slidshow di Blog

Kali ini saya akan berikan tutorial cara pasang slidshow di blog. Saya mengambil kode yang paling sederhana dengan menu slidshow yang juga sangat sederhana. Slidshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template gris-amarillo dan meletakkannya di dalam main post, silahkan cek disini.

 

Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja.

 

1. Masuk ke Edit HTML.
2. Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
3. Copas kode berikut diatas kode ]]></b:skin>

    

   /* SLIDESHOW */
   #slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
   #s3slider{width:540px;height:300px;position:relative;overflow:hidden}
   #s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
   .s3sliderImage{float:left;position:relative;display:none}
   .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:70px;width:540px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
   .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
   .s3sliderImage span a.featured-title:hover{color:#999}
   .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
   .s3sliderImage span a:hover{color:#555}

4. Kemudian copas kode berikut diatas kode </head>

    

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
   <script type='text/javascript'>
   <!--//--><![CDATA[//><!--

   (function($){ 

       $.fn.s3Slider = function(vars) {      
           var element     = this;
           var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
           var current     = null;
           var timeOutFn   = null;
           var faderStat   = true;
           var mOver       = false;
           var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
           var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
           items.each(function(i) {
               $(items[i]).mouseover(function() {
                  mOver = true;
               });
               $(items[i]).mouseout(function() {
                   mOver   = false;
                   fadeElement(true);
               });
           });
           var fadeElement = function(isMouseOut) {
               var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
               thisTimeOut = (faderStat) ? 10 : thisTimeOut;
               if(items.length > 0) {
                   timeOutFn = setTimeout(makeSlider, thisTimeOut);
               } else {
                   console.log("Poof..");
               }
           }
           var makeSlider = function() {
               current = (current != null) ? current : items[(items.length-1)];
               var currNo      = jQuery.inArray(current, items) + 1
               currNo = (currNo == items.length) ? 0 : (currNo - 1);
               var newMargin   = $(element).width() * currNo;
               if(faderStat == true) {
                   if(!mOver) {
                       $(items[currNo]).fadeIn((timeOut/6), function() {
                           if($(itemsSpan[currNo]).css('bottom') == 0) {
                               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                   faderStat = false;
                                   current = items[currNo];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           } else {
                               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                   faderStat = false;
                                   current = items[currNo];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           }
                       });
                   }
               } else {
                   if(!mOver) {
                       if($(itemsSpan[currNo]).css('bottom') == 0) {
                           $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                               $(items[currNo]).fadeOut((timeOut/6), function() {
                                   faderStat = true;
                                   current = items[(currNo+1)];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           });
                       } else {
                           $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                           $(items[currNo]).fadeOut((timeOut/6), function() {
                                   faderStat = true;
                                   current = items[(currNo+1)];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           });
                       }
                   }
               }
           }
           makeSlider();

       }; 

   })(jQuery); 
   //--><!]]></script>

   <script type='text/javascript'>
   $(document).ready(function() {
   $(&#39;#s3slider&#39;).s3Slider({
   timeOut: 4000
   });
   });
   </script>

5. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan sobat copas kode berikut setelah kode <div id='main-wrapper'>

    

   <div id='slider-holder'>
   <div id='s3slider'>
   <ul id='s3sliderContent'>

   
   <li class='s3sliderImage' style='display: list-item;'>
   <a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfRaTKf8GgDz2GIm_s3objT8pN-3cJtaH5VhTyYLSqgzjoCOzIa8Vy3kA11erLmaGBoz93a0Gaj6gBN5dukGHMffaZJf3QUwPj0nC8sT7iBI7DSsZERw7wQF9J9p6ht2RJW7rN42glYQ/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: block;'>
   <a class='featured-title block' href='LETAK LINK DISINI 1'>JUDUL POST 1</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>

   </li>

   
   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2E8WTtXPpDqwiIeRvfaM5JcbncNoXvmmsERv1JOiwqVQ41VoCwNAIF8VxDAHgAM44CoNsdPFfGe7zF1KosAV_wUlgCkWOfZug6f9UJy2I59CULyLDAHbiaSVfV27WCtrwGJ6FYudzyQ/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 2'>JUDUL POST 2</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>
   </li>

   
   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DzG6ol8qcpoES42bdDpNQxcmJ5macFSeGdYTtv7755stWLpHzT7Oy1JMcAOaidzitoJGfeqsFfKbOTKEk4AMwvzMIvqrCc1cyzXiLRGKPlhDWEgS_LMWSAfOkkppFFTGBC71hxyCOpQ/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 3'>JUDUL POST 3</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>
   </li>

    

   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8tmGHc-hXx470arIb6xTmD1p11HQ_YWiSXC5L5n04I_rvF6rFd5RVAW3OB_y1-f6DDiNVGLIFRVC5a5kEO20IjoeSlkC5yHYySQySb1hkxcGklhyphenhyphenAFLrJVlKNAlCt_G-bu6KiOFi4x4/s1600/3.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 4'>JUDUL POST 4</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>
   </li>

   
   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwlS7sB_BFNS6y8L3emKEtwyBzERNPRWFGuYFFYT_g3ZApEaWTOdcryUFXrYLRESxyurOsfrX_U2y5dW7Z6svHHx0Wibi1hy70UGieRhplhS6UTsMCtSmuxNZkrUTf5ymrxoUUQhlYDAw/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 5'>JUDUL POST 5</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>
   </li>

   
   <li class='clear s3sliderImage'/>

   </ul>
   </div>
   </div>

6. Simpan Template

 

 

Keterangan :

• Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
• Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
• Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
• dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu.

 

Cukup panjang, semoga berhasil ya !

More about → Cara Pasang Slidshow di Blog

Cara Membuat Tulisan Besar Pada Awal Postingan

Kemarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini. Saya agak lupa apakah pernah menulis tutorial huruf besar pada awal postingan ini, jadi semalam saya bongkar-bongkar lagi semua judul post dan ternyata memang belum pernah saya tulis mengenai hal ini.

 

Sekedar info buat yang baru, huruf ini akan tampil besar dan berbeda sendiri dengan huruf lain yang ada di blog kita. Biasanya bisa kita lihat di koran atau majalah. Untuk membuatnya sangat mudah, karena hanya butuh satu kode css dan sedikit sentuhan pada saat membuat postingan.

 

1. Setelah masuk blogger, silahkan klik Edit HTML.
2. Tambahkan kode berikut sebelum kode ]]>< /b:skin>

   .huruf {
   float:left;
   color:#000;
   line-height:60px; 
   padding-right:5px;
   font-family:trebuchet ms,verdana;
   font-size:60px; 
   }

3. Simpan Template.

 

 

Cara Posting

 

Tambahkan kode <span class="huruf"> sebelum huruf pertama dan </span> setelahnya. Contohnya seperti ini :

 

<span class="huruf">K</span>emarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini.

 

Sip, semoga bermanfaat !

More about → Cara Membuat Tulisan Besar Pada Awal Postingan

Tutorial Image Bubbles Menggunakan CSS3

Kembali dengan turorial blogspot yang lagi-lagi tentang css, saya harap sobat tidak bosan dengan tulisan saya yang melulu mengenai css. Karena memang saat ini css lagi mengalami perkembangan pesat, oleh karenanya saya mencoba memberikan sedikit tips mengenai css3. Yang akan saya bahas disini adalah css image bubbles transitions, dan sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser firefox versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa sobat lihat disini.

 

 

Sebelum memulai ada baiknya sobat backup template sobat terlebih dahulu, biasakan untuk melakukan hal ini jika ingin melakukan pengeditan template.

 

1. Login ke Blogger.
2. Klik Rancangan.
3. Masuk ke Edit HTML.
4. Copas kode css berikut sebelum kode ]]></b:skin>
   .bubblewrap{
   list-style-type:none;
   margin:0;
   padding:0;
   }

   .bubblewrap li{
   display:inline;
   width: 65px;
   height:60px;
   }

   .bubblewrap li img{
   width: 55px;
   height: 60px;
   border:0;
   margin-right: 12px;
   -webkit-transition:-webkit-transform 0.1s ease-in;
   -o-transition:-o-transform 0.1s ease-in;
   }

   .bubblewrap li img:hover{
   -moz-transform:scale(1.8);
   -webkit-transform:scale(1.8);
   -o-transform:scale(1.8);
   }

5. Cari kode yang mirip seperti ini :
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Nousisce (Header)' type='Header'/>
   </b:section>
   </div>

6. Kemudian letakkan kode berikut setelah kode diatas :
   <div class='bubblewrap'>
   <ul>
   <li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li>
   <li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li>
   <li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li>
   <li><a href='#'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li>
   <li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Add RSS Feed'/></a></li>
   </ul>
   </div>
7. Simpan Template.

 

Untuk kode yang berwarna ungu adalah kode url untuk gambarnya, sobat bisa ganti dengan gambar social bookmark yang sobat punya.

 

Semoga bermanfaat, and happy nice weekend !

More about → Tutorial Image Bubbles Menggunakan CSS3

CSS Untuk Tulisan/Gambar Berbayang

Rasanya sudah lama saya tidak posting di blog ini, konsentrasi saya sedang terpecah mengurus blog-blog saya yang lain, termasuk mybloggerthemes.com yang semakin banyak permintaan dari sahabat yang ingin mempromosikan template mereka di mybloggerthemes.com. Kali ini lagi-lagi saya mencoba memberikan tutorial css buat sobat setia pengunjung blog ini, namanya css layer.

 

Css layer ini semacam tulisan atau gambar yang berbayang yang terdiri dari 2 komponen css sederhana. Untuk membuatnya sangat mudah, hanya menerapkan sedikit kode css maka tulisan atau gambar berbayang siap ditampilkan dan mempercantik blog sobat. Berikut beberapa tutorialnya :

 

? Layer 1 diatas layer 2

LAYER 1

LAYER 2

<div style="z-index:2; position:relative; font-size:40px">LAYER 1</div><div style="z-index:1; position:relative; color:blue; font-size:60px">LAYER 2</div>

? Layer 2 diatas layer 1

LAYER 1

LAYER 2

<div style="z-index:3; position:relative; font-size:40px">LAYER 1</div><div style="z-index:4; position:relative; color:blue; font-size:60px">LAYER 2</div>

? Layer Untuk Gambar Variasi 1 

<div style="position:relative"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div><div style="position:relative; margin-top:-20px; margin-left:20px"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div>

? Layer Untuk Gambar Variasi 2 

<div style="position:relative"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz89JsqPommqCGvD1UAe9SQH2Tu4jpP59UjIdiuXexvaWTeT6CYlzRrX6kDLaN-USIxfaRAUDhWxAXBTLWax7P3vrHZ7peT8h9iA7gFNkTWa2iR4iqpQLzhZQMMXZjHPlwtzNrIeotCYQ/s1600-r/newalltutorial.png" /></div><div style="position:relative; filter:alpha(opacity=20); margin-top:-10px; -moz-opacity:0.20; opacity:0.2; -khtml-opacity:0.2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz89JsqPommqCGvD1UAe9SQH2Tu4jpP59UjIdiuXexvaWTeT6CYlzRrX6kDLaN-USIxfaRAUDhWxAXBTLWax7P3vrHZ7peT8h9iA7gFNkTWa2iR4iqpQLzhZQMMXZjHPlwtzNrIeotCYQ/s1600-r/newalltutorial.png" /></div>

Untuk tutorial css image yang lain akan saya bahas lain waktu, semoga bermanfaat.

More about → CSS Untuk Tulisan/Gambar Berbayang

Navigasi Halaman Menggunakan Javascript

Tutorial pemasangan navigasi halaman ini sudah pernah saya bahas dulu, dengan cara meletakkan langsung seluruh kode di gadget. Namun masih saja ada yang kesulitan dengan panduan peletakkan navigasi halaman tersebut. Sekarang saya akan coba berikan sedikit tips yang berbeda dan tentunya dengan variasi bentuk yang lebih menarik. Saya tidak akan panjang lebar menjelaskan tentang pengertian navigasi halaman ini karena sudah pernah saya bahas sebelumnya.

 

Kode css dan javascript ini saya ambil dari blog mybloggerthemes dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di template pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di google sites. Berikut cara pemasangannya.

 

1. Setelah login di blogger, silahkan sobat klik Rancangan.
2. Kemudian klik tab Edit HTML.
3. Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
4. Letakkan kode css berikut ini sebelum kode ]]></b:skin>

    

   .showpageNum a {

   color:#FFF;padding:4px 10px;

   margin:0 2px;

   text-decoration:none;

   -webkit-border-radius:2px;-

   moz-border-radius:2px;

   background:#848484

   }
   .showpageOf {

   color:#222;

   margin:0 6px 0 0

   }
   .showpageNum a:hover {

   background:#222;

   color:#FFF

   }
   .showpagePoint {

   color:#FFF;

   text-shadow:0 1px 2px #333;

   padding:4px 10px;

   margin:0 2px;

   -webkit-border-radius:2px;

   -moz-border-radius:2px;

   background:#222;

   text-decoration:none

   }
5. Dan letakkan kode berikut sebelum </body>

    

   <script type='text/javascript'>
   var home_page=&quot;/&quot;;
   var urlactivepage=location.href;
   var postperpage=10;
   var numshowpage=7;
   var upPageWord =&#39;&#9668;&#39;;
   var downPageWord =&#39;&#9658;&#39;;
   </script>
   <script src='http://newalltutorial.googlecode.com/files/pagenav.js' type='text/javascript'/>
6. Kemudian Simpan Template.

 

Keterangan :

• var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
• var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.

 

Semoga berhasil ya !

More about → Navigasi Halaman Menggunakan Javascript

Tutorial Penggunaan Google Fonts

Google kembali memanjakan para blogger dengan menambahkan variasi fonts di blog. Semua font di google fonts directory berlisensi sehingga dapat digunakan pada web apapun, termasuk di blogspot yang penerapannya tergolong sangat mudah. Buat yang belum tahu, bisa sobat lihat pada contoh demo template dore zot pada bagian header dan avieri pada bagian header dan judul postingan.

 

Variasi hurufnya pun cukup banyak, tergantung kita memadu padankan dengan template yang kita gunakan. Dibawah ini ada beberapa fonts yang bisa sobat terapkan di blog sobat, dan cara penggunaannya.

 

<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,bold' rel='stylesheet' type='text/css'/>

 

1. Masuk ke Rancangan
2. Kemudian tuju bagian Edit HTML
3. Copy salah satu kode huruf tersebut dan letakkan  diatas kode </head> pada template sobat.
4. Kemudian tambahkan font yang sobat gunakan pada bagian css, contohnya seperti berikut :

   #header h1 { font-family: 'IM Fell Great Primer SC', arial, serif; }

   atau lengkapnya kira-kira seperti dibawah ini :

    

   #header h1 {
   font-family:'IM Fell Great Primer SC',arial,serif;
   font-size:46px;
   font-weight:bold;
   letter-spacing:0em;
   line-height:1.2em;
   color:#aaa;
   text-shadow:1px 1px 2px #000;
   margin:0;
   padding:60px 480px 0px 0px;
   }

5. Simpan Template

 

Perhatikan saja kode yang saya tandai dengan warna merah, karena hanya kode tersebut yang ditambahkan kedalam css template. Sobat juga bisa menggunakannya pada judul postingan (h3) atau judul sidebar (h2). Baiklah, selamat mencoba dan semoga berhasil.

More about → Tutorial Penggunaan Google Fonts

Membuat Menu Vertikal Sederhana

Sebelumnya saya selalu menulis mengenai pembuatan menu horizontal dan tidak pernah sekalipun menulis artikel menu vertikal. Pembuatan menu vertikal ini sangat mudah, hanya sedikit menambahkan kode css pada bagian template dan kode html pada sidebar. Bisanya kita yang malas berpikir untuk membuat menu vertikal, mengambil jalan mudah dengan menambahkan kode <ul><li> sehingga yang muncul adalah list-style-type bawaan template.

 

Untuk demo bisa sobat lihat disini, pada bagian menu vertikal tersebut saya menggunakan image sederhana yang hanya akan berwarna biru jika cursor menyorot pada link. Bisa saja membuat current page hover pada link, yang jika di klik akan selamanya berwarna biru selama kita berada pada halaman link tersebut, namun untuk awalnya sebaiknya menggunakan menu yang sederhana dulu.

1. Masuk ke bagian Edit HTML
2. Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

   .clearit {
       margin: 0;
       padding: 0;
       height: 0;
       clear: both;
   }

    

   /* BUBBLE PLASTIC VERTICAL MENU */

   .bubplastic.vertical {
       width: 150px;
       margin: 0px;
       padding: 0px;
       display: block;
   }
   .bubplastic.vertical ul {
       display: block;
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .bubplastic.vertical ul li {
       display: block;
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
   }

   .bubplastic.vertical ul li a {
       display: block;
       margin: 0;
       width: 100%;
       padding-left: 15px;
       text-transform: uppercase;
       font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
       font-size: 70%;
       color: #FFFFFF;
       text-decoration: none;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
   }

   .bubplastic.vertical ul li a span.menu_ar {
       display: block;
       margin: 0;
       width: 100%;
       height: 22px;
       padding-top: 5px;
       padding-right: 15px;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top right no-repeat;
       cursor: pointer;
   }

   /* BLUE HOVER */
   .bubplastic.blue ul li a:hover,
   .bubplastic.blue ul li.highlight a {
       background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top left no-repeat;
   }
   .bubplastic.blue ul li a:hover span.menu_ar,
   .bubplastic.blue ul li.highlight a span.menu_ar {
       background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top right no-repeat;
   }

3. Simpan Template.
4. Masuk Ke Elemen Halaman.
5. Klik Tambah Gadget pada bagian sidebar.
6. Pilih yang HTML/Javascript, kemudian masukkan kode berikut kedalamnya :

   <div class="menu bubplastic vertical blue">
       <ul>
           <li><span class="menu_r"><a href="http://newalltutorial.blogspot.com/" target="_self"><span class="menu_ar">About</span></a></span></li>
           <li><span class="menu_r"><a href="http://newalltutorial.blogspot.com/" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
           <li><span class="menu_r"><a href="http://newalltutorial.blogspot.com/" target="_self"><span class="menu_ar">Advertiser</span></a></span></li>
           <li><span class="menu_r"><a href="http://newalltutorial.blogspot.com/" target="_self"><span class="menu_ar">Banner</span></a></span></li>
           <li><span class="menu_r"><a href="http://newalltutorial.blogspot.com/" target="_self"><span class="menu_ar">Link</span></a></span></li>
       </ul>
       <br class="clearit" />
   </div>

7. Simpan.

 

Yang harus diganti adalah tulisan yang berwarna hijau dan merah. Selamat mencoba !

More about → Membuat Menu Vertikal Sederhana

Membuat Menu Horizontal Rounded Corner

  Bagi pengguna browser mozilla, safari atau opera membuat menu horizontal dengan garis melengkung (rounded corner) memang tidak ada masalah. Namun hal ini tidak berlaku pada browser IE. Untuk mengatasinya, ada satu cara yang bisa diterapkan, yaitu dengan menambahkan gambar rounded corner dalam css menunya. Saya menggunakan template gris amarillos sebagai demo, bisa dilihat disini.

 

Langkah pertama yang harus sobat lakukan adalah membuat gambar rounded corner terlebih dahulu. Ada 4 gambar yang harus sobat buat, left tab, right tab, left tab hover, right tab hover.

 

	left tab
	right tab
	left tab hover
	right tab hover

 

Kemudian upload gambar-gambar tersebut ke tempat penyimpanan online. setelah itu baru kita lanjutkan pada pemasangan kode css untuk menu horizontalnya.

 

1. Masuk ke Tata Letak.
2. Klik tab Edit HTML.
3. Tambahkan kode berikut ini sebelum kode ]]></b:skin>

   #nav {
   width: 980px;
   height:34px;
   position: relative;
   float:center;
   margin:0px;
   padding:0px;
   }

   #nav left{
   float:left;
   display:inline;
   width:980px;
   }

   #nav a {
   color:#222;
   background:#dba72d url(http://lh5.ggpht.com/_7Y9pl24WpQY/S92v2xGQZ6I/AAAAAAAADqs/ajeGLWXobuE/left-tab_thumb%5B4%5D.png) left top no-repeat;
   text-decoration:none;
   padding:7px 0 6px 12px;
   }

   #nav a span {
   background:#dba72d url(http://lh3.ggpht.com/_7Y9pl24WpQY/S92v4-cWJvI/AAAAAAAADq0/F3FEArdJEg8/right-tab_thumb%5B2%5D.png) right top no-repeat;
   padding:7px 12px 6px 0; 
   }

   #navigation a, #navigation a span {
   display:block;
   float:left;
   }

   #nav a:hover {
   color:#222; 
   background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkCZSIonI/AAAAAAAADtg/yyvKetEpy4w/left-tab%20hover_thumb%5B3%5D.png) left top no-repeat;
   padding-left:12px;
   }

   #nav a:hover span {
   background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkE2Ya06I/AAAAAAAADto/JbhOEh9o7ak/right-tab%20hover_thumb%5B1%5D.png) right top no-repeat;
   padding-right:12px;
   }

   #nav ul {
   list-style:none;
   padding:0;
   margin:0;
   }

   #nav li {
   float:left;
   margin:0;
   }

4. Cari kode HTML bagian Header blog :

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='JUDUL BLOG (Header)' type='Header'/>
   </b:section>
   </div>

    

5. Kemudian tambahkan kode berikut ini dibawahnya :

   <div id='nav'>    
   <b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
   <b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
   <b:includable id='main'>
   <div class='widget-content'>
   <b:if cond='data:title'/>
   <div id='nav left'>   
   <ul>
   <li><a href='/'><span>Home</span></a></li>
   <b:loop values='data:links' var='link'>
   <li><a expr:href='data:link.target'><span><data:link.name/></span></a></li> </b:loop>
   </ul>
   </div>  
   </div>
   </b:includable>
   </b:widget>
   </b:section>   
   </div>

6. Simpan Template.

 

Keterangan :

• Kode yang berwarna biru adalah url tempat sobat menyimpan gambarnya, sekarang coba blok url tersebut satu persatu dan lihat gambarnya pada browser.
• Yang berwarna merah adalah kode dari warna, sesuaikan dengan gambar yang dibuat.
• Kode yang berwarna hijau adalah lebar menu horizontal, sesuaikan dengan lebar template.

 

Selamat mencoba semoga berhasil.

More about → Membuat Menu Horizontal Rounded Corner

Membuat Widget 3 Kolom Dibawah Header

Widget 3 kolom dibawah header ini sebenarnya bisa sobat tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin sobat perlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header. Widget 3 kolom ini bisa sobat lihat demonya disini.

 

Baiklah langsung menuju lokasi pengeditan template-nya.

•  Silahkan login ke blogger.
• Tuju Tata Letak.
• Pilih tab Edit HML.
• Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
• Letakkan kode css berikut ini diatas kode ]]></b:skin>

  /* �- Top --*/

  #top {

  background:#fff;

  margin-top:10px auto;

  width:960px;

  overflow:hidden;

  font-size:12px;

  padding:10px;

  }

   

  #top h2 {

  background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

  font-size:14pt;

  font-weight:400;

  text-align:center;

  font-style:normal;

  line-height:1.3em;

  color:#fff;

  padding:5px;

  margin-top:-10px;

  margin-left:-10px;

  margin-right:-10px;

  }
  

  
  #top ul {

  color:#333;

  margin:0;

  padding:0;

  }

  
  #top ul li {

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY2lb2wOguSSsIQAe5KhhnVnUY1UdpLovkwXDH23I-f9PT2zlXFs59fQNpAys6EaDGTe7L3a6CqcOA_Ha-jHTuTKKXi6oIQ5xDtbq53cFY6NKqDoQYgRcAbjDIEVUtPRoRPP6OrwXqDL9Y/s320/b3.gif) no-repeat;

  list-style-type:none;

  border-bottom:1px dashed #CCC;

  margin:0 0 10px;

  padding:0 0 5px 20px;

  }

   

  #top ul li a:hover {

  margin:0px 0px 5px;

  padding:0px;

  }

  
  #topcenter {

  width:300px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px

  }

  
  #topleft {

  width:280px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

  
  #topright {

  width:280px;

  float:right;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

   

• Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
  </b:section>

  </div>

• Kemudian letakkan kode berikut ini tepat setelah kode diatas :

  <div id='top'>
  <b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
  </b:section>

  <b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
  </b:section>

  <b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
  </b:section>
  </div>

• Simpan Template.

 

Semoga bermanfaat dan bisa membuat blog sobat jadi ramai.

More about → Membuat Widget 3 Kolom Dibawah Header