Join The Community

Facebook Page
Premium WordPress Themes

Sabtu, 09 April 2011

Cara Membuat Komentar Admin Berbeda Warna dari Pengunjung Lain di Blogger

Posted by tangerang on 22.01. - No comments

Sering kita temukan di suatu blog terdapat background komentar yang berbeda antara pengunjung dengan pemilik blog. Ini juga dapat memudahkan pengunjung yang lain untk mengetahui siapa pemilik blog tersebut. Kali ini saya akan sedikit menjelaskan tentang bagaimana cara membuat tampilan komentar Admin lain dari tampilan komentar pengunjung blog.


  • Login ke Blogger
  • Masuk ke Tata Letak/Layout
  • Edit HMTL --> Expand Template Widget
  • Cari Kode ]]</b:skin> atau ]]></b:skin> 
  • Copy dan Pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
.author-comments {
background: #333333;
border: 2px solid #666666;
padding: 5px;
}  
 keterangan : backgroun #333333; adalah untuk tampilan background komentar dan border #666666; adalah untuk ketebalan garis.
  • Selanjutnya, cari kode <dl id='comments-block'> sehingga muncul tampilan seperti dibawah ini :
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<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> <dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
keterangan : untuk tulisan yang berwarnah biru adalah kode-kode yang harus ditambahkan kedalam script template blog sobat.
  • Simpan Template.
Selamat mencoba dan semoga berhasil...!!!!

catatan : saat berkomentar anda harus dalam keadaan log in di blogger


Cara Menambah 3 Kolom Dibagian Footer

Posted by tangerang on 19.47. - No comments

Elemen halaman Footer terkadang masih jarang yang memanfaatkannya. Tapi ini juga cukup bagus untuk menambah kolom Gadget pada Laman Blog kita. Apalagi yang senang memasukan berbagai macam widget, saya rasa ini sangat diperlukan.... Nah, kalau ada teman-teman yang tertarik untuk memanfaatkan Elemen 3 kolim ini, silahkan ikuti petunjuk dibawah ini :

  • Login ke Blogger
  • Klik Tab Tata Letak/Layout
  • Edit HTML --> Expand Template Widget
  • Cari kode ]]></b:skin>  dengna menggunakan Ctrl+F
  • Copy code dibawah ini tepat diatas kode ]]></b:skin>
/* bottom
---------------------------- */ #bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom { /* yang ini nih kode kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom { /* kalo yg ini kode kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom { /* kalo yg ini kode kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
  • Lihat bagian </body> yaitu pada bagian bawah kode template, cari kode yang mirip dengan kode berikut : 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div> 
  • Copy paste kode berikut tepat diatas 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>
  • Simpan Template. Terakhir, cek pada bagian Edit Laman untuk memastikan yang dilakukan telah berhasil....
Semoga bermanfaat...!!!


Pasang Iklan Adsense dan PCC di tengah-tengah postingan

Posted by tangerang on 18.49. - No comments

Tutor ini sebenarnya lebih cocok buat blog yang uda masang iklan Adsense dsb..,,tapi tidak apa-apalah.!! Tidak salahnya juga buat diposting... OK!! Untuk meningkatkan Earning dari Iklan PPC seperti Adsense adalah dengan menaruh iklan ditengah-tengah postingan. Mengapa???? Sebab iklan akan terlihat dan terbaca oleh pengunjung saat membaca postingan. Dengan begitu peluang klik iklan akan lebih besar. 


Nah, untuk bagaimana cara peletakannya. Silahkan ikuti petunjuk dibawah ini :
  • Seperti biasa, Langsung menuju ke TKP alias Tata Letak Blog kita
  • Edit HTML --> Expand Templates Widget
  • Cari kode berikut <data:post.body/>  biasanya untuk mempermudah pencarian kita menggunakan fasilitas "Find" (Ctrl+F)
  • Ubah dengan kode dibawah ini :
 <div expr:id='"aim1" + data:post.id'></div><div style="clear:both; margin:10px 0">
 <!-- Letakkan HTML AD Sensemu yang sudah di encode disini -->
 </div><div expr:id='"aim2" + data:post.id'><data:post.body/></div><script type="text/javascript">var obj0=document.getElementById("aim1<data:post.id/>");var obj1=document.getElementById("aim2<data:post.id/>");var s=obj1.innerHTML;var r=s.search(/\x3C!-- adsense --\x3E/igm);if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}</script>
  • Perhatikan tulisan yang berwarna hijau, isikan kode script iklan kamu disana.
  • Simpan Template.
Selanjutnya, untuk meletakkan kode iklan tersebut ditengah, kita cukup menambahkan kode 
<!-- Your AdSense code here --> 
ditengah-tengah postingan kita.

Contohnya : Tutor ini sebenarnya lebih cocok buat blog yang uda masang iklan Adsense dsb..,,tapi tidak apa-apalah.!! Tidak salahnya juga buat diposting... OK!! Untuk meningkatkan Earning dari Iklan PPC seperti Adsense adalah dengan menaruh iklan ditengah-tengah postingan. Mengapa???? Sebab iklan akan terlihat dan terbaca oleh pengunjung saat membaca postingan. Dengan begitu peluang klik iklan akan lebih besar.

Maka, kode script iklan akan dimasukan sebagai berikut :

Tutor ini sebenarnya lebih cocok buat blog yang uda masang iklan Adsense dsb..,,tapi tidak apa-apalah.!! Tidak salahnya juga buat diposting... OK!! Untuk meningkatkan Earning dari Iklan 
<!-- adsense -->
PPC seperti Adsense adalah dengan menaruh iklan ditengah-tengah postingan. Mengapa???? Sebab iklan akan terlihat dan terbaca oleh pengunjung saat membaca postingan. Dengan begitu peluang klik iklan akan lebih besar. 

Jika Sudah beres, silahkan publikasikan postingan. Iklan akan otomatis muncul ditengah-tengah postingan di blog kita.
Selamat Mencoba!!!! Semoga berhasil...!!!!!

Prase Generator Kode HTML

Posted by tangerang on 18.24. - No comments

Prase kode HTML adalah sebuat alat (tool) yang dapat membantu kita dalam melakukan prase sript/javascript secara otomatis sehingga mempermudah instalasai. Generator ini sangat berguna untuk para blogger dalam melakukan instalasi kode, apalagi untuk blog yang bergerak dibidang tutorial, memasang Tool Prase merupakan suatu kewajiban....

Beberapa HTML dasar yang diubah kedalam bentuk sederhana secara otomoatis, yaitu :
  • '<' menjadi '&lt;'
  • '>' menjadi '&gt;'
  • ' "" ' (double quote) menjadi '&quot;'
  • ' " ' (single quote) menjadi '&#039;'
  • '&' menjadi '&amp;'
Untuk tampilan Prase Generator Kode HTML seperti dibawah ini :



Start Converting Now!

(Silahkan masukkan kode HTML kamu kedalam kotak dibawah ini untuk diubah secara otomatis)





Untuk membuat Prase Generator Kode HTML ini, silahkan copy dan paste kode dibawah ini :

<center><br> 
<b>
<span style="color: rgb(0, 153, 0); font-size: large;">Start Converting Now!</span></b><br> 
<div class="style1">
(<i>Silahkan masukkan kode HTML kamu kedalam kotak dibawah ini untuk diubah secara otomatis</i>)</div>
</center>
<script type="text/javascript">
function convert(){
var ele1 = document.getElementById("somewhere");
var replaced;
replaced = ele1.value;
replaced = replaced.replace(/&/ig, "&amp;");
replaced = replaced.replace(/</ig, "&lt;");
replaced = replaced.replace(/>/ig, "&gt;");
replaced = replaced.replace(/"/ig, "&quot;");
replaced = replaced.replace(/&#177;/ig, "&plusmn;");
replaced = replaced.replace(/&#169;/ig, "&copy;");
replaced = replaced.replace(/&#174;/ig, "&reg;");
replaced = replaced.replace(/ya'll/ig, "ya'll");
ele1.value = replaced;
}
</script>
<center>
<table style="text-align: center; width: 590px;" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr> <td valign="top" width="400"><textarea cols="70" id="somewhere" rows="13" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204);"></textarea>
<br>
<div style="text-align: left;">
<input onclick="convert();" value="Parse Script" type="button"></div>
</td> </tr>
</tbody></table>
</center>
<br>



Kamis, 07 April 2011

Generator Tulisan Terbalik

Posted by tangerang on 21.34. , - No comments



Penting gk penting sih generator ini, tapi gk ada salahnya kan klau diposting... heheheh
kalau tertarik buat masang widget tulisan terbalik diblog silahkan copy paste kode dibwah ini :

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dd734c47-a0fb-4bb3-820b-5bed70b69b35');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/upside-down-text">Upside Down Text (Flip Text)</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>


Aquarium Clock Widget

Posted by tangerang on 21.15. , - No comments



Kode :
 <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('0aa9feda-84f5-46fc-8290-1440cc2f7307');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/aquarium-clock">Aquarium
Clock</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Teeny Fish Tank Widget

Posted by tangerang on 21.07. , - No comments

Langsung ajalah..,,ane juga bingung mau ngepost kata pengantar apaan..!!! heheheh.... Yang penting bisa lihat pic-nya sebagai bahan pertimbangan mau di ambil apa gknya ni widget.... Ni pic-nya sob:

 

Ini Aquarium jg sob, bukan sekedar gambar...!! Gambar sih tapi gambar bergerak.... heheheh....
klo berminat copas (copy paste) kode dibawah ini :
 <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('5def12ea-c73e-4c8c-bd51-014760c52e6c');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/teeny-fish-tank">Teeny Fish Tank</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>