memasang tombol google +1 di blogspot

Cara Berhubung banyak yang sudah memasang tombol google +1 di blogspot, berikut ini caranya bagi yang ingin menggunakan tombol google +1 tersebut

1.Seperti biasa, setelah login ke blogger, masuklah ke edit html
2. Centang Expand widget template3. Cari kode <data:post.body/> 
tempatkan kode berikut di atas atau bawahnya. terserah anda. Berikut ini kodenya:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone> 
4. Jika selesai, save lah.

Selamat mencoba memasang tombol google +1 di blogspot

Cara memasang tombol google +1 di wordpress

 

Jika sebelumnya dibahas bagaimana caranya memasang tombol google +1 di blogspot, kali ini dibahas cara memasang  tombol google +1 di wordpress.

Caranya sama yaitu anda tinggal menambahkan kode.

Berikut caranya  memasang tombol google +1 tsb:
1. Setelah login ke admin wordpress, selanjutnya.
2. Klik  Editor Option.
3. Kemudian buka header.php, carilah kode lalu letakkan kode berikut sebelum kode
Berikut ini kodenya.

<script type='text/javascript' src='http://apis.google.com/js/plusone.js'></script>

4. Selanjutnya pasang kode tombol +1 nya, masih di Single.php dari themes WordPress anda. Contoh kodenya berikut ini:

<g:plusone href='<?php the_permalink(); ?>'></g:plusone>

Demikian Cara Memasang Tombol Button +1 Google di WordPress ini. Semoga bermanfaat.

Cara membuat scroll blog archive

Untuk membuat scroll pada blog archieve ini tidak jauh beda dengan membuat scroll pada gadget blogger/blogspot yang lain, yaitu sebagai berikut:

• Dari halaman dasbor, klik Tata Letak - Edit HTML.
• Beri tanda centrang pada Expand Template Widget.
• Kemudian cari kode type='BlogArchive' (gunakan Control F atau F3).
• Perhatikan kode yang ada di bawahnya, seperti ini:
  

  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  

• Tambahkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga menjadi seperti ini:
  

  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content' style='overflow:auto; height:200px'>
  <div id='ArchiveList'>

• Atur ukuran tinggi (height)-nya sesuai kebutuhan.
• Simpan hasil editing ini dan ucapkan Alhamdulillah.....

Ok, segitu aja sob. Semoga tidak bosen dengan bahasan yang itu-itu melulu, hehehe...
Selamat mencoba....

Cara Membuat Auto Read More

Wah sudah lama sekali tak mencurahkan tulisan ke blog tercinta ... em em em bikin ini aja cara memasang auto read more pada postingan blogger.

Caranya cukup mudah dan simpel :

1. Log in ke akun blogger sobat.
2. Pilih Rancangan -- Klik Edit HTML -- Centang Expand Widget Template (jangan lupa download dulu template anda untuk mengurangi resiko kesalahan penulisan script)
3. Cari kode </head>dan letakkan kode dibawah ini sebelum kode tersebut.
   
   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </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>
   
   
4. Kemudian cari kode berikut <data:post.body/> atau <p><data:post.body/></ p>  apakah sudah ketemu? apabila sudah silakan ganti kode tersebut dengan kode di bawah 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:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
5. Save template anda

nah sudah selesai selamat mencoba

Membuat Tulisan Dengan Efek Berkedip (Blink)

Yang satu ini ialah bagaimana caranyamembuat Tulisan Berkedip . . . .Wah, kayak mata aja . . .

Ini tutorialnya,

Format html-nya seperti ini : <blink>Text </blink>

Note:   Waktu memasukkan code tersebut di atas pada Tab Edit Html, bukan Compose ya.
Hasilnya akan seperti ini Sobat  :  
           Text




Jika ingin membuat text berkedip seperti di atas beserta link, maka formnya seperti ini Sobat :


<blink><a href="URL" target="_blank">TEXT</a></blink>


Hasinya seperti ini ,


TEXT BESERTA LINK


Note : Effek blink hanya bisa terbaca oleh browser firefox

Membuat Komentar Admin Berbeda Warna

Pada hari ini saya akan membahas mengenai bagaimana cara membuat komentar Admin blog menjadi berbeda warna dengan pengunjung yang lain. Bagi yang belum jelas seperti ini nih:

 

Bagi yang belum tahu, silakan dipraktekan, bagi yang udah tau, jangan dibata ya omm.. Oke, langsung saja simak tahap-tahap berikut :

1.Login ke akun blogger kalian.

2. Klik Layout atau Rancangan, lalu pilih Edit HTML.

3. Klik Expand Widget Template, jangan lupa backup dulu template, supaya ntar gampang balikin kalau gagal.

4. Cari kode ]]></b:skin>. Lalu letakkan kode ini tepat diatas kode ]]></b:skin> :

.comment-body-author {
border: 1px solid #87CEEB;
background: #ddfeeb;
width: 500px;
margin: 10px 10px 10px 10px;
padding-left: 20px;}

Ganti Warna garis tepi dan background sesuka kamu atau pilih warna biar matching dengan template kamu. Untuk kode warna bisa dilihat disini.

5. Belum selesai loh, sampai tahap ini, cari kode ini :

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

 Atau kode seperti ini :

<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

6. Setelah itu, letakkan kode ini diatasnya:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

   Atau kode seperti ini :

<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>

   Dan, kode ini dibawahnya :

</b:if>

7. Nanti jadinya akan seperti ini :

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if> 

    Atau seperti ini :

<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:if>

Membuat Link Membesar Saat Terkena Pointer

Pada postingan kali ini, saya akan membahas tentang bagaimana cara membuat link membesar jika terkena pointer/kursor. Mungkin ini memang sudah trik lama, tapi okelah bagi blogger yang belum mengetahui trik ini. Link membesar jika terkena pointer/kursor maksudnya seperti ini:

Saya sendiri sudah memakainya. Dan langsung saja kita lihat bagaimana carannya (Sebelumnya saya ingin mengucapkan terimakasih kepada blog treex-hans.com karena saya mendapat trik ini dari blog dia) :

1. Pertama login ke akun blogger kalian.
2. Setelah itu, masuk ke layout atau rancangan lalu klik edit HTML.
3. Cari kode ]]></b:skin> (agar lebih cepatnya gunakan F3 atau Ctrl + F untuk mencari)
4. Jika sudah ketemu salin kode ini dan tempel tepat diatas ]]></b:skin> tadi :

a:hover {
font-size: 50px;
font-weight: bold;
text-decoration: none;
}

 5. Setelah selesai, Simpan dan lihat hasilnya.

Untuk kode yang berwarna merah, bisa diganti dengan ukuran yang kalian inginkan. Saya sendiri memakai ukuran 15px. Karena kalau 50px kegedean. Selamat Mencoba.