FERE File Hosting Menggunakan Google Code

0 komentar Jumat, 20 Januari 2012

Gak usah pusing-pusing mencari file hosting dll, Google Code adalah salah satu produk google untuk menyimpan file-file kecil, pada umumnya digunakan para designer blogger untuk upload kode javascript. Tetapi bukan untuk file javascript saja yang bisa diupload ke google code mungkin semua jenis file bisa diupload seperti Rtf, Doc, PDF, rar, DLL

Langsung saja menuju TKP Cara Lengkap Upload File Di Google Code
Read On

Cara Membuat Navigasi Halaman, Seperti pada Blog ini

0 komentar Kamis, 19 Januari 2012
Tips dan triks blog yang ingin Trik Bloger bagikan hari ini adalah bagaimana cara membuat navigasi nomor halaman pada blogspot. Navigasi nomor halaman yang saya maksud adalah nomor halaman yang ada di homepage blog kita. Biasanya pada homepage hanya berisi tulisan 'posting lama' - 'posting baru' dan 'home'. Jadi, disini kita akan memodifikasi sedikit.

Beberapa fungsi memasang navigasi nomor halaman pada homepage adalah :
  • Mempermudah pengunjung untuk melihat artikel-artikel kita yang sebelumnya
  • Mempercantik tampilan

Login ke dashboard blogger. pilih Template
Klik Gambar Untuk Memperjelas



Pilih Rancangan »» edit HTML
Klik Gambar Untuk Memperjelas

Beri tanda centang pada tulisan Expand Template Widget

  • Cari Kode ]]></b:skin> gunakan CTRL+F
  • Copy lalu paste kode CSS berikut diatas ]]></b:skin>
 
  /* Page Navigation styles */
.showpageNum a
{   padding: 3px 8px;
   margin:0 4px;
   text-decoration: none;
   border:1px 1px 1px 1px solid #CEE3F6;
   -webkit-border-radius:3px;-moz-border-radius:3px;
   background: #CEE3F6;   } 

.showpageOf
{   margin:0 8px 0 0; }

.showpageNum a:hover
{   border:1px 1px 1px 1px solid #81BEF7;
   background: #58ACFA;   }

.showpagePoint 
{   color:#fff;   text-shadow:0 1px 2px #333;
   padding: 3px 8px;
   margin: 2px;
   font-weight: 700;
   -webkit-border-radius:3px;-moz-border-radius:3px;
   border:1px 1px 1px 1pxsolid #01DF01;
   background: #088A08;
   text-decoration: none;   }


  • Kemudian  cari kode  </body> dan letakkan kode dibawah ini, diatas kode </body>
 
<!--Page Navigation Starts-->
<script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=4; var numshowpage=6; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://salingsharing.googlecode.com/files/trik%20bloger%20navbar.js' type='text/javascript'/> 
<!--Page Navigation Ends -->
  • Langkah Terahir klik Simpan Template
Coba lihat hasilnya.. jika ada pertanyaan silahkan tanyakan kepada admin Trik Bloger lewat kolom komentar di bawah.

Read On

Membuat Border dan Modifikasinya

3 komentar

Untuk memberikan kesan lebih indah dalam warna dan tampilan blog khususnya kode HTML/Script yang akan diletakan didalam posting pada saat menulis artikel, Anda bisa meletakan kode Script di dalam kotak dengan border dan warna background yang berbeda sesuai dengan warna pilihan, baik itu dengan border yang garis tipis, tebal atau garis putus-putus.

Ada beberapa jenis border yang saya ketahui yaitu :
  1. Ridge Border
  2. Groove Border
  3. Solid Border
  4. Insert Border
  5. Outset Border
  6. Double Border
  7. Doptted Border
  8. Dashed Border

Langkah membuat dengan border sangat mudah
  • Copy kode Script dibawah ini
  • Kemudian letakan pada posting Anda

Contoh Dashed Border
 <div style="border: 2px #006400 dashed; padding: 10px; background-color: #F2F5A9; text-align: left;"> TEKS ANDA DISINI.. </div> 

Contoh Ridge Border 
 <div style="border: 5px #006400 ridge; padding: 10px; background-color: #F5A9D0; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Dotted Border
 <div style="border: 2px #006400 dotted; padding: 10px; background-color: #FFFF00; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Double Border
 <div style="border: 3px #006400 double; padding: 10px; background-color: #A9F5A9; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Groove Border
 <div style="border: 5px #006400 groove; padding: 10px; background-color: #F2F5A9; text-align: left;">  TEKS ANDA DISINI.. </div> 

Contoh Solid Border
 <div style="border: 3px #1627A7 solid; padding: 10px; background-color: #61FFF6; text-align: left;">  TEKS ANDA DISINI..  </div> 

Demikian adalah beberapa sample border ala Trik Bloger. Semoga Bermanfaat.
Read On

Cara memasang Breadcrumb Navigasi di Blog

1 komentar Minggu, 15 Januari 2012
Cara memasang Breadcrumb Navigasi di Blog - Menu navigasi breadcrumbs
Sebelum melanjutkan Trik Bloger hendak menjelaskan dahulu apa itu Breadcrumb Untuk lebih jelasnya perhatikan tulisan kecil yang ada di atas judul posting ini,
apakah anda melihat 

 
nah.. itulah yang Trik Bloger akan ajarkan kali ini.

Kembali ke langkah, trik berikut merupakan menu hirarki untuk mengelompokkan artikel dalam suatu kategori atau label yang sama. Bila di template Anda belum terdapat menu navigasi breadcrums ini dan Anda ingin memasangnya, berikut ini langkah-langkahnya.
  • Masuk ke akun Blogger Anda.
  • Klik tanda panah di sebelah tombol "lihat blog" > Template

  • Pilih Edit HTML
  • Jangan lupa Beri tanda centang pada Expand Template Widget.
  • Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian).
  • Copy kode Breadcrumb di bawah ini dan paste di atas kode tersebut :

  • Selanjutnya cari kode  <a expr:name='data:post.id'/>
Kemudian copy kode berikut ini dan paste di bawah kode tersebut.


Kalau <a expr:name='data:post.id'/> tidak ketemu, cari kode yang ini <b:if cond='data:post.title'>. Kemudian copy kode tadi dan paste di atasnya.
  • Langkah Terahir klik Simpan Template
Coba lihat hasilnya.. jika ada pertanyaan silahkan tanyakan kepada admin Trik Bloger lewat kolom komentar di bawah.
Read On

Membuat Teks Area dengan Fungsi Select All

1 komentar
Textarea ini pada dasarnya kombinasi antara form dan textarea, sehingga akan memudahkan dalam mem-blok atau menyorot isi textarea. Agar jelas maksudnya coba klik tombol Select All. Setelah diblok semua tinggal dicopy dengan klik kanan atau tekan Ctrl-V pada keyboard.

Jika dipasang pada widget sidebar maka textarea jenis ini lebih baik dan tentu lebih keren, bisa juga berfungsi sebagai sarana tukar link, dan lain lain.
Read On

Membuat Search Onblur Onfocus

0 komentar
Tutorial Trik Bloger kali ini akan membahas tentang bagai mana cara membuat onblur onfocus. Sebelumnya kita harus tahu dulu tentang "Onblur Onfocus" pengertianya adalah sebuah teks atau kalimat yang berada didalam kotak search atau sejenisnya yang akan menghilang jika kita hendak mengisi kotak tersebut.

Contoh Onfocus Onblur pada kotak search
Gambar diatas adalah contoh cara kerja onblur onfocus tentunya versi Trik Bloger. Teks atau kalimat didalamnya dapat kamu ganti dengan kata - kata sesukamu.
Apakah sampai disini kamu sudah mengetahui apakah onblur onfocus dan cara kerjanya.? Jika sudah, mari kita lanjutkan kembali, bagaimana cara membuat onblur onfocus di kotak search atau sejenisnya.
Langkahnya yaitu sangat mudah, kita hanya menyisipkan script onblur onfocus di dalam scrip kolom search tadi.

Contoh Menyisipkan kode :
 <form action="http://maniaktrik.blogspot.com/search" id="searchform" method="get" name="searchform"><div class="search"><input onfocus="if(this.value =='cari artikel..'){this.value ='';}" value="cari artikel.." name="q" onblur="if(this.value ==''){this.value ='cari artikel..';}" type="text"/&gt;<br/><input type="submit" name="submit" value="search..."></div></form>
kode diatas hasilnya adalah seperti berikut :




Keterangan Warna :
Untuk template anda yang sudah memiliki kotak search bawaan, anda tinggal menyisipkan kode berwarna biru dan hijau letak menyisipkannya anda cari sendiri di template blog anda. Jika bingung silahkan tanyakan pada kolom komentar dibawah postingan. Warna hijau bisa anda rubah sesuai keinginan anda, yang penting ketiganya haruslah sama.
Dan untuk template yang belum mempunyai kotak search, silahkan copy semua kode script diatas, dan letakkan dimana anda ingin meletakannya. warna merah ganti saja dengan url blog kamu.
Sekali lagi, jika ada masalah atau pertanyaan tentang posting diatas, silahkan hubungi admin lewat kolom komentar di bawah postingan ini.
Read On

Cara Memasang Related Post di Blogger

0 komentar Jumat, 13 Januari 2012
Related post yang terdapat di bawah posting pada blog Trik Bloger ini cuma sebuah tulisan yang saling berkaitan dan berhubungan terhadap sebuah posting. Fitur ini tentu sangat penting untuk SEO 'katanya'. Dengan adanya “Related Post” ala Trik Bloger ini tentu akan memudahkan para pengunjung untuk mendapatkan sebuah posting yang berkaitan. Misalkan ada sebuah posting tentang "Edit Template Blogger Agar Lebih SEO" maka related post yang muncul adalah :
(jika yang ditampilkan cuma 5 post) Baik kita memulai cara memasangnya
1. Pastikan anda sudah Login di Blogger.com jika sudah, langsung saja Pilih Template
Klik Gambar Untuk Memperjelas


2. Pilih »» edit HTML
Klik Gambar Untuk Memperjelas

3. Beri tanda centang pada tulisan Expand Template Widget

4. Cari kode <data:post.body/> caranya tekan Ctrl+F, jika sudah ketemu copy kode
    dibawah ini lalu paste di bawah <data:post.body/>


5. Dari Kode diatas cari kode var numofpost=5  gantilah angka untuk mengatur jumlah 
   postingan yang akan ditampilkan secara acak ,bisa diganti sesuai dengan kebutuhan anda.
6. Langka selanjunya adalah menyimpan template, klik Simpan Template. selesai. lihat hasilnya
   pada blog anda.
 Hasilnya bisa anda lihat sendiri di bagian bawah halaman posting Trik Bloger.
Read On

Cara Menempatkan Widget di Halaman Tertentu

0 komentar
Pada kesempatan kali ini Trik Bloger akan men-share tentang bagaimana cara menampilkan widget di halaman posting saja dan bagaimana cara menampilkan widget di homepage saja atau lebih tepatnya menampilkan widget di halaman tertentu saja untuk blog yg masih berplatform blogspot, alias blog gratisan wkwkwkwkwk...

Mengapa harus di tampilkan di homepage atau di halaman posting saja.? Selain untuk merapihkan letak-letak widget kita agar enak di lihat oleh pengunjung, trik ini juga termasuk salah satu trik menjadikan blog SEO Friendly yg mana widget yg tidak perlu di tampilkan pada halaman posting kita tempatkan pada homepage blog kita, atau di halaman lain yg kita inginkan seperti widget penggemar, shoutbox dll. Untuk melakukannya silahkan ikuti petunjuk dari Trik Bloger dg baik dan jangan ngelamun hokey...

Login ke dashboard blogger. pilih Template
Klik Gambar Untuk Memperjelas



Pilih Rancangan »» edit HTML
Klik Gambar Untuk Memperjelas

Beri tanda centang pada tulisan Expand Template Widget

Lalu cari kode widget yg akan di tampilkan pada halaman tertentu.
Caranya cari nama judul pada widget tersebut menggunakan tombol F3 / ctrl + F
untuk mempermudah pencarian kode widget, sebaiknya widget yg akan di edit di beri judul dulu.
Untuk contohnya Trik Bloger akan mengedit dan menampilkan widget iklan Adsense hanya pada halaman posting saja dengan judul widget bernama iklan adsense.contohnya

<b:widget id='HTML1' locked='false' title='iklan adsense' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'> <data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Kode di atas akan menampilkan widget di semua halaman. Nah. . . .Karna Trik Bloger ingin menampilkan widget tersebut di halaman posting saja maka harus di tambahi kode berikut »»  
<b:if cond='data:blog.pageType == &quot;item&quot;'>
................,.........................................,...............................
</b:if>
Dan nantinya akan menjadi seperti ini.
<b:widget id='HTML1' locked='false' title='iklan adsense' type='HTML'> <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'> <data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Dari kode diatas yg sudah di edit, hanya akan muncul di halaman posting saja dan tidak akan muncul di homepage, Do you understand.?? hehe

Nah untuk menampilkan widget pada halaman-halaman yg di inginkan, misal pada homepage saja, pada staticpage saja, pada halaman archive saja dan pada halaman index saja berikut kode-kode yg bisa anda pakai, tinggal ganti kode yg berwarna biru dg salah satu kode di bawah ini. 

Menampilkan widget hanya pada halaman depan saja (homepage).
<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

 Menampilkan di semua halaman kecuali homepage.
<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if> 

 Menampilkan widget hanya pada halaman Archive saja.
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if> 

Menampilkan widget di semua halaman kecuali halaman archive.
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

Menampilkan widget hanya di halaman posting.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

Menampilkan widget di semua halaman, kecuali halaman posting.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

Menampilkan widget hanya pada halaman staticpages.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

Menampilkan widget di semua halaman,kecuali halaman staticpages.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Menampilkan widget hanya pada postingan tertentu saja.
<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

Menampilkan widget selain di postingan tertentu.
<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>
Bagaimana sudah paham atau belum tutor dari Trik Bloger diatas? Jika belum paham tentang menempatkan widget di halaman tertentu saja bisa anda tanyakan pada admin lewat kolom komentar di bawah postingan. Salam Bloger.
Read On

Membuat Scroll Pada Widget Label Blog

0 komentar Kamis, 12 Januari 2012
Membuat scroll Pada Label, Blog Archive atau widget, Blogroll atau Daftar Blog Daftar Link neh Buat sobat" yang pengen ngirit tempat.... hehehehehehe...

Nih ane baru dapat Tutorial tips dan Trik Cara Memberi Scroll pada Label Blog. tips ini ane dapet dari sobat blogger ane... n ternyata juga blogger blitar juga... hehehehe.....

ok langsung aja ya sob.... bagi sobat" yang berminat memberi scroll pada label Blog nya...

1. login blog
2. Rancangan >> edit HTML >> centang 'Expand Template Widget'
3. Cari kode dibawah ini ( NB: Harus ada widget labelnya terlebih dahulu )
4. Tekan Ctrl + F untuk memudahkan mencari
5. Cari kode seperti dibawah ini :

<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 class='widget-content'>

<div style='overflow:auto; width:ancho; height:300px;'>

<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>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div> </div>
kalau sudah ketemu tinggal tambahkan saja kode yang warna merah itu untuk fungsi scrollnya. Angka 300px adalah tinggi kotak scroll. bisa sobat ganti sesuai selera sobat...


Gak ada kode yang seperti  <div class="widget-content"> ????
Tenang gak usah khawatir, mungkin pada template sobat yang ada hanya kode




yah kalau adanya kode di atas ini maka taruh
<div style='overflow:auto; width:ancho; height:300px;'>
diatas kode tersebut jangan lupa diahiri dengan penutup  </div>


Jika langkah - langkah diatas dilakukan dengan benar maka widget label anda akan seperti widget label di blog ini Blog Sample 

Terimakasih telah berkunjung di Trick Bloger semoga tutor diatas dapat bermanfaat. jika ada pertanyaan silahkan tinggalkan pertanyaan anda pada kolom komentar yang sudah tersedia.
Read On

Memasang Meta Tags di Blogger

0 komentar
Pasang Meta Tags di Blogger
Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web atau blog. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web atau blog, untuk menjelaskan mengenai kata kunci (keyword) yang terkait. Trik ini sangat bagus bagi para Blogger yang ingin blognya lebih SEO, cara pasangnya ikuti cara berikut.

  1.  Pastikan anda sudah Login di Blogger.com. Klik Rancangan
  2. Klik Edit Html
  3. Tekan Ctrl + F cari kode <title><data:blog.pageTitle/></title> ganti kode tersebut dengan kode berikut ini
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/> | Deskripsi Singkat Blog</title>
    <meta content='deskripsi tentang blog anda' name='description'/>
    <meta content='kata kunci, kata kucni, kata,' name='keywords'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <title><data:blog.title/> | Deskripsi Singkat Blog</title>
    <meta content='deskripsi tentang blog anda' name='description'/>
    <meta content='kata kunci, kata kucni, kata,' name='keywords'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <meta expr:content='&quot;Download &quot; + data:blog.pageName + &quot;. deskripsi tentang blog anda&quot;' name='description'/>
    <meta expr:content='data:blog.pageName + &quot;, kata kunci, kata kucni, kata,&quot;' name='keywords'/>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
    </b:if>
    </b:if>
    <meta expr:content='data:blog.title' name='author'/>
    <meta content='index, follow' name='robots'/>
    <meta content='2 days' name='revisit-after'/>
    <meta content='id' name='language'/>
    <meta content='id' name='geo.country'/>
    <meta content='Indonesia' name='geo.placename'/>
    <meta content='global' name='distribution'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='true' name='MSSmartTagsPreventParsing'/>
    <meta content='blogger' name='generator'/>
    <meta content='general' name='rating'/>

    Bagian teks yang berwarna Merah anda ganti dengan Deskripsi Singkat Blog Anda, misalnya Tutorial SEO. Bagian teks yang berwarna Kuning anda ganti dengan Deskripsi tentang blong anda, misalnya Kumpulan artikel SEO, yang membahas tentang tips dan trik mengenai Blogger, Facebook, Friendster, dan Yahoo Messenger dari Donor Ilmu. saya sarankan jangan panjang-panjang tidak lebih dari 200 karakter sudah cukup. Bagian teks yang berwana Hijau anda ganti dengan Kata Kunci misalnya blogger, blogger seo, blogger tutorial, facebook, facebook modif, facebook tutorial, Yang perlu diperhatikan disini adalah jangan mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming.
  4. Setelah menggantinya klik Simpan Template. semoga berhasil
Read On

Membuat Teks Area Di Postingan Blog

0 komentar Rabu, 11 Januari 2012

 
Teks area adalah tempat dimana kita biasanya menempatkan kode-kode HTML atau teks lain dengan tujuan untuk mempersimple tampilan teks yang akan kita sisipkan di dalam posting, atau bisa juga kita sisipkan menjadi widget template seperti widget Tukar Link DLL.

    • COLS berapa banyak karakter lebar COLS menunjukkan berapa banyak karakter (bukan pixel) luas area teks yang seharusnya. 
    • ROWS berapa banyak baris ROWS menunjukkan berapa banyak baris harus berada dalam area teks. Kedua atribut yang diperlukan dalam tag. These attributes do not set any limit on how much can be typed in. Atribut ini tidak menetapkan batas pada seberapa banyak dapat diketik dalam, hanya berapa banyak textarea terlihat. 
    • WRAP bagaimana untuk membungkus teks WRAP menggambarkan bagaimana teks dalam area teks harus membungkus pada akhir baris. Sampai datang atribut ini, browser pada umumnya tidak melakukan kata membungkus. Jika Anda mengetik sebuah garis yang lebih panjang dari area layar, baris terus berjalan, mudah-mudahan dengan area layar bergulir sepanjang.Ini bukan cara orang yang digunakan untuk memasukkan teks, jadi Netscape menambahkan WRAP atribut. SOFT membungkus antrean panjang di area teks untuk memudahkan pengeditan, banyak seperti pengolah kata.Jenis membungkus mungkin adalah paling berguna karena itu adalah yang paling mudah bagi user untuk mengedit, tetapi tidak benar-benar mengubah data mereka. HARD tampak kepada pengguna seperti SOFT tetapi kereta pengguna melihat kembali dikirim ke server. OFF tidak membungkus sama sekali, melainkan menampilkan dan mengirim teks persis seperti yang diketik masuk
      Contoh SOFT
      <textarea NAME="SOFT" COLS=25 ROWS=5 WRAP=SOFT>Teks anda disini</textarea>
      Contoh HARD

      <textarea NAME="HARD" COLS=25 ROWS=5 WRAP=HARD>Teks anda disini</textarea>
      Contoh OFF
      <textarea NAME="OFF" COLS=25 ROWS=5 WRAP=OFF>Teks anda disini</textarea>


      • Seperti penjelasan diatas jika ingin menambah atau mengurangi lebarnya dan menambah atau mengurangi text area qt maka tinggal rubah ukurannya pada COLS=10 dan ROWS=2.
      Read On

      Modifikasi Komentar Blog

      4 komentar
      Bisa di bilang Sistem Komentar kali ini sungu Fantastis, Exotis dan Boombastis. Karena sistem komentar ini sudah saya edit dengan baik dan sempurna, dengan berbagai fitu seperti.
      Komentar Fantastis
      • Styel Elegan dan Simpel
      • Image Avatar
      • Tombol Reply
      • Styel Reply WP
      • Highlight Blog Owners
      • Pesan Ucapan "Terimakasi"
      • Emoticon Onion (Kucing)
      Saya juga mengunakan Sistem Komentar ini? Seperti anda lihat Fantastis, Exotis dan Boombasti Bukan! Baiklah kita mulai.

      1. Login di Blogger.com, Pergi ke Template > Edit HTML (Expand Template Widget)
      2. Tekan Ctrl+F cari ]]></b:skin>, Letakan kode berikut di atas ]]></b:skin>
      /* Comments
      ----------------------------------------------- */
      #comments h4 {
      font-size: 18px;
      font-weight: normal;
      margin: 20px 0;
      }
      .cm_wrap {
      clear: both;
      margin-bottom: 10px;
      float: right;
      width: 100%;
      }
      .cm_head {
      margin: 0;
      width:60px;
      float: left;
      }
      .cm_avatar {
      margin: 0;
      vertical-align: middle;
      border: 1px solid #DDD;
      padding: 3px;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNaU_zj40UiWIJ9lxZK6F3o-shFRFU4BCeGckOP9t5sVdyVnXFzOfo6PYfgsbm6EerXa9FaQvxOVh6n_eFcpM0iUmknCnd10CPLRI0Hfiy20YNnl5AA-ZwQyaNKolIoP8J2sKp19eJhY/s1600/takdikenal.jpg) center no-repeat;
      width: 35px;
      height: 35px;
      }
      .cm_avatar_a {
      margin: 0;
      vertical-align: middle;
      border: 1px solid #DDD;
      padding: 3px;
      background:#c6e5f7;
      background-position:center;
      background-repeat:no-repeat;
      width: 35px;
      height: 35px;
      }
      .cm_reply {
      padding-top: 5px;
      }
      .cm_reply a {
      display: inline-block;
      margin: 0;
      padding: 1px 6px;
      border: 1px solid #C4C4C4;
      border-top-color: #E4E4E4;
      border-left-color: #E4E4E4;
      color: #424242 !important;
      text-align: center;
      text-shadow: 0 -1px 0 white;
      text-decoration: none;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      background: #EDEDED;
      background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
      background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
      font: 11px/18px sans-serif;
      }
      .cm_reply a:hover {
      text-decoration: none !important;;
      background: #ccc;;
      background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
      background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
      }
      .cm_entry {
      padding: 16px;
      background: #fcfcfc;
      border: 1px solid #E4E4E4;
      overflow: hidden;
      }
      .cm_arrow {
      display: block;
      width: 9px;
      height: 18px;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrvSMg-roWxu6gY6dzB9mP5KETWQBZNSY0BghYwUG02ypyQKIhTIdPMb0xpR3h1m0tBkTP4neUkHgOjrG3hMDW9KDTnAi66Lxsc_9VDzsJHhxr9jSeS7dUPi-0GGl6p9vPA9kmXBr_WA/s1600/comment-arrow.gif) no-repeat;
      position: absolute;
      margin-left: -25px;
      }
      .cm_info {
      margin-bottom: 5px;
      border: thin solid #E6E6E6;
      background-color: #F4F4F4;
      padding: 5px;
      }
      .cm_info_a {
      margin-bottom: 5px;
      border: thin solid #E6E6E6;
      background-color: #dff0fa;
      padding: 5px;
      }
      .cm_name {
      font-size: 14px;
      color: #666666 !important;
      text-decoration:none;
      float: left;
      }
      .cm_name_a {
      font-family:"Comic Sans MS", cursive;
      font-size: 14px;
      color: #666666 !important;
      text-decoration:none;
      font-weight: bold;
      float: left;
      }
      .cm_date {
      font-size: 10px;
      color: #999;
      text-decoration:none;
      float: right;
      }
      .cm_date_a {
      font-family:"Comic Sans MS", cursive;
      font-size: 10px;
      color: #2D5E7B;
      text-decoration:none;
      float: right;
      padding-top:5px;
      }
      .cm_entry p {
      padding: 5px;
      clear: both;
      border: thin solid #E6E6E6;
      background-color: #ffffff;
      font-size: 13px;
      color: #333;
      word-wrap:break-word;
      }
      .cm_entry_a p {
      padding: 5px;
      clear: both;
      border: thin solid #E6E6E6;
      background-color:  #ffffff;
      font-size: 13px;
      color: #333;
      word-wrap:break-word;
      }
      .cm_pagenavi {
      font-size: 10px;
      text-transform: uppercase;
      color: #666;
      text-shadow: 1px 1px white;
      font-weight: bold;
      }
      .cm_pagenavi a {
      color: #666;
      text-decoration: none;
      padding:10px;
      }
      .cm_pagenavi a:hover {
      text-decoration: underline
      }
      .cm_pagenavi span {
      color: #888;
      background: white;
      padding: 4px;
      border: 1px solid #E0E0E0;
      }
      /* Comment Admin  */
      .comment-body-author {
      font-family:"Comic Sans MS", cursive;
      font-weight: 300;
      }
      Untuk menganti background agar sesuai dengan template yang anda gunakan cari saja kode CSS .cm_entry

      3. Berikutnya cari </body>, Masukan kode berikut di atas kode </body>
       
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script src='http://donor-ilmu.googlecode.com/files/comment.js' type='text/javascript'/>
      <script src='http://donor-ilmu.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/>
      </b:if>

      4. Selanjutnya cari kode
          <h4 id='comment-post-message'><data:postCommentMsg/></h4>
          Kalau suda ketemu letakan kode berikut tepat dibawah kode yang anda temukan.

      <div style='width:550px;text-align: center;border: 1px solid #ccc;padding: 2px 2px;margin-top: 15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'>
        <b><img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif' width='30'/>:))
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/069.gif' width='30'/>;))
      <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif' width='30'/>;;)
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif' width='30'/>:D
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif' width='30'/>;)
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif' width='30'/>:p
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif' width='30'/>:((
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif' width='30'/>:)
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif' width='30'/>:(
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif' width='30'/>:X
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif' width='30'/>=((
      <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif' width='30'/>:-o
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif' width='30'/>:-/
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif' width='30'/>:-*
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/023.gif' width='30'/>:|
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif' width='30'/>8-}
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/037.gif' width='31'/>:)]
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/042.gif' width='30'/>~x(
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif' width='30'/>:-t
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif' width='30'/>b-(
      <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif' width='30'/>:-L
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif' width='30'/>x(
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif' width='30'/>:-p
        <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/071.gif' width='30'/>=))
        </b>
        </div>

      5. Terakhir cari <b:includable id='comments' var='post'>, ganti kode yang berada diantara dua kode dari pembuka <b:includable ...> sampai penutup </b:includable>

      <b:includable id='comments' var='post'>

      Kode yang harus di ganti

      </b:includable>
      Ganti kode dia antara b:includable dengan kode di bawah ini

      <div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>
        <h4>
        <b:if cond='data:post.numComments &gt; 0'>
      <a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
        <b:if cond='data:post.numComments == 1'>
        <span id='cm_total'>1</span> <data:commentLabelPlural/>
        <b:else/>
        <span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
        </b:if>
        </b:if>
        </h4>
       
        <div id='cm_reply_css'/>
       
        <div class='cm_pagenavi' id='cm_page'/>
       
        <div id='cm_block'>
        <b:loop values='data:post.comments' var='comment'>
        <b:if cond='data:comment.isDeleted'>
        <b:else/>
       
        <div expr:id='data:comment.anchorName'>
        <div class='cm_wrap'>
        <a expr:name='data:comment.anchorName'/>
        <div class='cm_head'>
        <div class='cm_avatar'>
        <b:if cond='data:blog.enabledCommentProfileImages'>
        <data:comment.authorAvatarImage/>
        </b:if>
        </div>
        <div class='cm_reply'>
        <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=0000000000000000000&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
        </div>
        </div>
        <b:if cond='data:comment.author == data:post.author'>
        <dd class='cm_entry'>
       <span class='cm_arrow'/>
        <div class='cm_info_a'>
        <div class='cm_name_a'>
        <b:if cond='data:comment.authorUrl'>
        <img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWNeSYcEtOybny08oKy9Hu3vDFB0_uTTQn3b1vlNwRgD1OOWEYK2-knGF9jLJ8PO_t73lN49Xkti-v5lI5cXDvnhivddPqxgdI0xQNkld5fWXZNeVathkMIafcrnizvgzPfB1nDJ5R0LY/s1600/adminstar.png' title='Admin' width='20px'/>
        <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
        <data:comment.author/>
        </a>
        <b:else/>
        <b><data:comment.author/></b>
        </b:if>
        </div>
        <div class='cm_date_a'>
        <data:comment.timestamp/>
        <b:include data='comment' name='commentDeleteIcon'/>
        </div>
        <div class='clear'/>
        </div>
       
        <div class='comment-body-author'>
        <p><data:comment.body/></p>
        </div>
        </dd>
        <b:else/>
        <dd class='cm_entry'>
        <span class='cm_arrow'/>
        <div class='cm_info'>
        <div class='cm_name'>
        <b:if cond='data:comment.authorUrl'>
        <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
        <data:comment.author/>
        </a>
        <b:else/>
        <b><data:comment.author/></b>
        </b:if>
        </div>
        <div class='cm_date'>
        <data:comment.timestamp/>
        <b:include data='comment' name='commentDeleteIcon'/>
        </div>
        <div class='clear'/>
        </div>

       <p><data:comment.body/></p>
        <span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
        </dd>
        </b:if>
        </div>
        </div>
        </b:if>
        </b:loop>
        </div>
       <div class='cm_pagenavi' id='cm_page_copy'/>
       
        <b:if cond='data:post.embedCommentForm'>
        <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='comment-form'/>
        <b:else/>
        <data:post.noNewCommentsText/>
        </b:if>
        <b:else/>
        <b:if cond='data:post.allowComments'>
        <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
        </b:if>
        </b:if>
       </b:if>
        </div>
      Dalam kode di ini anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.

      6. Langkah terakhir simpan template, Klik Save Template.


      Read On

      Menyisipkan Kode HTML di Posting Blog

      0 komentar Selasa, 10 Januari 2012

      Kadangkala kita ingin menyisipkan kode HTML pada posting di blog kita. Untuk menuliskan codeng/script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan dan kita harpkan.
      Misalnya gini, jika kita menuliskan kode dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML.
      Nah terus bagaimana kalau ada banyak kode yang harus kita posting?

      Berikut Cara yang paling praktis untuk menyisipkan kode HTML di posting blog kita :

      - Buka situs ini Centricle.com (http://centricle.com/tools/html-entities), trus isikan kode-kode HTML tersebut kedalam kotak yang disediakan.

      Nah kalau sudah tekan tombol "Encode", maka kita akan mendapatkan kode script baru untuk diposting di blog kita. Silahkan copy kode baru dan paste ke posting kita

      Atau

      - Buka Blogcrowds (http://www.blogcrowds.com/resources/parse_html.php)

      Masukkan kode yang akan diparse, namun kali ini kamu hanya menekan tombol "Parse".
      Semoga bermanfaat.. :)
      Read On