Tips & Trick Ngeblog

Membuat Artikel Terkait

Written by Admin on Monday, July 20, 2009

Artikel terkait adalah artikel yang berada pada satu label dalam postingan kita. Artinya, artikel yang kita buat kalau kita taruh dalam satu judul label yang sama, maka link artikel tersebut akan dapat kita munculkan di bawah postingan kita dengan menambahkan script artikel terkait atau kalau diinggriskan biasanya berbunyi Related Post .. mahap.. bad english alnya.. hehehehe .

Penasaran bagaimana cara membuatnya? yuk kita bikin sama-sama. :

1. Login ke Blog sahabat
2. masuk ke Layout >> Edit HTML.. centang"Expand Widgets Template".
3. Untuk mencegah hal-hal yang tidak diinginkan selama proses ini berlangsung, sangat dianjurkan agar sahabat memback-up template blog sahabat dengan cara mendownload template tersebut dan disimpan dalam file yang aman.
4. Kemudian ari code ini :
   

   <p><data:post.body/></p>

5. Kemudian copy kode berikut ini dan paste tepat di bawah kode di atas.
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <H2>Artikel Terkait:</H2>
   <DIV class='rbbox'>
   <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
   <DIV id='albri'/>
   <SCRIPT type='text/javascript'>
   var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
   var maxNumberOfPostsPerLabel = 4;
   var maxNumberOfLabels = 10;
   maxNumberOfPostsPerLabel = 100;
   maxNumberOfLabels = 3;
   function listEntries10(json) {
   var ul = document.createElement(&#39;ul&#39;);
   var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
   json.feed.entry.length : maxNumberOfPostsPerLabel;
   for (var i = 0; i &lt; maxPosts; i++) {
   var entry = json.feed.entry[i];
   var alturl;
   for (var k = 0; k &lt; entry.link.length; k++) {
   if (entry.link[k].rel == &#39;alternate&#39;) {
   alturl = entry.link[k].href;
   break;
   }
   }
   var li = document.createElement(&#39;li&#39;);
   var a = document.createElement(&#39;a&#39;);
   a.href = alturl;
   if(a.href!=location.href) {
   var txt = document.createTextNode(entry.title.$t);
   a.appendChild(txt);
   li.appendChild(a);
   ul.appendChild(li);
   }
   }
   for (var l = 0; l &lt; json.feed.link.length; l++) {
   if (json.feed.link[l].rel == &#39;alternate&#39;) {
   var raw = json.feed.link[l].href;
   var label = raw.substr(homeUrl3.length+13);
   var k;
   for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
   var txt = document.createTextNode(label);
   var h = document.createElement(&#39;b&#39;);
   h.appendChild(txt);
   var div1 = document.createElement(&#39;div&#39;);
   div1.appendChild(h);
   div1.appendChild(ul);
   document.getElementById(&#39;albri&#39;).appendChild(div1);
   }
   }
   }
   function search10(query, label) {
   var script = document.createElement(&#39;script&#39;);
   script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
   + label +
   &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
   script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
   document.documentElement.firstChild.appendChild(script);
   }
   var labelArray = new Array();
   var numLabel = 0;
   <b:loop values='data:posts' var='post'>
   <b:loop values='data:post.labels' var='label'>
   textLabel = &quot;<data:label.name/>&quot;;
   var test = 0;
   for (var i = 0; i &lt; labelArray.length; i++)
   if (labelArray[i] == textLabel) test = 1;
   if (test == 0) {
   labelArray.push(textLabel);
   var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
   labelArray.length : maxNumberOfLabels;
   if (numLabel &lt; maxLabels) {
   search10(homeUrl3, textLabel);
   numLabel++;
   }
   }
   </b:loop>
   </b:loop>
   </SCRIPT>
   </DIV>
   <script type="text/javascript">RelPost();</script>
   </DIV>
   </b:if>

6. Langkah selanjutnya silahkan cari kode ini :
   

   ]]></b:skin>

7. Tempatkan code berikut ini tepat di atas kode tadi.
   

   rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
   background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
   .rbbox:hover{background-color: rgb(255, 255, 255);}

8. Simpan
9. Selesai sudah.. sekarang coba buka artikel pada blog kamu dan perhatikan bahwa di bawah postingan artikel yang sobat buka tadi akan ada tambahan Artikel Terkait yang barusan dikerjakan..

Ok, sekian dulu.. good luck.

Menambahkan emoticon/smiley pada postingan

Written by Admin on Monday, July 20, 2009

Ingin memberikan hiasan emoticon seperti ini : ?
Tidak usah repot lagi mengcopy paste emoticon yang akan sahabat masukkan ke dalam postingan sahabat, karena sekarang semua itu bisa sahabat lakukan dengan mudah dengan menginstal programnya. Mau tahu caranya..? yuk simak bareng-bareng..

1. Download Firefox versi terbaru.
2. Kemudian instal program GreaseMonkey Extension untuk Firefox disini. Setelah itu restart firefox anda.
3. Setelah direstart, install script emoticon untuk blogger disini
4. Setelah terinstal maka pada halaman postingan sahabat akan ada tambahan emoticon di bagian atasnya seperti nampak pada gambar di bawah ini :
   
   Untuk menggunakan emoticon tersebut sahabat tinggal mengklik gambar emoticonnya saja dan otomatis di area postingan sahabat akan muncul gambar emoticon yang sahabat pilih, tinggal disesuaikan saja tempatnya..

Demikian caranya. Semoga berhasil..

Oh iya, selain emoticon seperti yang saya contohkan di atas, sahabat juga bisa menambahkan emoticon lainya seperti gambar dibawah ini :

Untuk emoticon Naruto, download scriptnya disini
Untuk emoticon Kitty, download scriptnya disini
Untuk emoticon Pika, download scriptnya disini
Untuk emoticon Pucca, download scriptnya disini

Langkah terakhir adalah : menghilangkan garis kotak pada gambar emoticon tersebut dengan menambahkan script code berikut di halaman Edit HTML :

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Letakkan kode diatas tepat sebelum code ]]></b:skin>
Setelah itu, jangan lupa disimpan dengan mengklik tombol Save.

Ok, sekian dulu, semoga bermanfaat dan sukses selalu..

Menghilangkan Gambar Tang/Obeng

Written by Admin on Sunday, July 19, 2009

Terkadang disaat kita selesai mengedit blog kita dan akan mempreview tampilan blog kita, kita akan menemukan ada gambar Tang/Obeng disetiap widget yang kita pasang. Bagi sahabat blogger yang sudah terbiasa dengan adanya tampilan tersebut mungkin tidak akan merasa terganggu, akan tetapi bagi sahabat blogger yang merasa terganggu dengan tampilan tersebut dan ingin menghilangkannya, berikut ini akan kami berikan tipsnya :

1. Login ke blog kamu,
2. Buka menu Layout kemudian pilih Edit HTML
3. Kasih tanda cek (centang) pada cekbox "expand widget template"
4. Cari kode seperti ini :
   

   ]]></b:skin>

5. Copy paste kode berikut persis di atas kode yang tadi :
   

   .quickedit{
   display:none;
   }

6. Kemudian simpan atau save hasil pengeditan.

Demikian caranya, selamat mencoba dan semoga berhasil.

Menghilangkan Subscribe To Post (Atom)

Written by Admin on Sunday, July 19, 2009

Umumnya pada template blogger yang kamu gunakan kebanyakan akan terdapat tulisan subscribe to: post(atom) atau berlangganan : post(atom) yang terletak dibawah postingan. Tulisan ini berfungsi sebagai feed dari blog kamu. Tujuannya agar pengunjung bisa dengan mudah menemukan alamat feed kamu. Tetapi jika kamu sudah menggunakan layanan feed dari Feedburner. Maka kehadiran dari tulisan ini sudah tidak terlalu penting lagi.

Jadi, Bagi kamu yang merasa tulisan ini tidak terlalu penting untuk ditampilkan, kamu bisa menghilangkannya dengan cara berikut ini:

1. Login ke Blogger. Klik menu Layout -> Edit HTML
2. Beri tanda centang pada "Expand Widget Template"
3. Lalu cari kode di bawah ini:
   

   <div class='feed-links'>
   <data:feedLinksMsg/>
   <b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
   </b:loop>
   </div>

4. Kalau sudah ketemu, hapus kode tersebut lalu klik Save Template
5. Selesai. Silahkan klik View Blog untuk melihat hasilnya.

Selamat mencba, semoga berhasil..

Membuat Read More

Written by Admin on Sunday, July 19, 2009

Read More adalah sebuah fasilitas yang bertujuan untuk memotong postingan yang kita buat, sehingga postingan kita yang panjang dihalaman depan blog, bisa di pendekkan dengan memberikan perintah read more tersebut. Hasil yang akan kita dapatkan dengan memberikan perintah read more adalah, postingan yang kita buat akan terlihat lebih rapi dan tidak menghabiskan banyak ruang pada halaman utama blog kita.


Dari berbagi sumber yang saya cari, sebagian besar code script yang saya dapatkan hampir semuanya sama. Bagi rekan-rekan blogger yang belum tahu bagaimana caranya menambahkan code read more untuk blog anda, berikut akan kami jelaskan langkah-langkahnya :

1. Login ke blog kamu,
2. Buka menu Layout kemudian pilih Edit HTML
3. Kasih tanda cek (centang) pada cekbox "expand widget template"
4. Cari kode berikut (berwarna merah) di Template blog kamu (kode dimasing2 template berbeda-beda,jadi cari aja yang hampir sama)
   

   <data:post.body/>
   Atau
   <p><data:post.body/></p>
   Atau
   <div class="post-body">

5. Setelah ketemu, ganti kode tersebut dengan memasukkan kode di bawah ini :
   

   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>.fullpost{display:none;}</style>
   <p><data:post.body/>
   <a expr:href='data:post.url'><strong>ReadMore...</strong></a></p>
   </b:if>

   Pada bagian Read More...... dapat kamu ganti dengan tulisan yang lain seperti Baca Selengkapnya
6. Simpan atau save hasil Pengeditan.
7. Setelah disimpan, lanjutkan dengan mengklik menu Setting lalu pilih Formatting.
8. Pada kotak Post Template isikan kode berikut:
   

   <span class="fullpost">
   
   
   </span>

9. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalaman utama (sebelum tulisan "Redmore") sebelum kode ini <span class="fullpost"> dan selebihnya letakan sesudah kode <span class="fullpost"> dan sebelum kode </span>

Demikian caranya, selamat mencoba dan semoga sukses.