Kumpulan Tutorial Ngeblog

Kumpulan Tutorial Ngeblog

Kumpulan arsip-arsip tutorial bloging

Mengganti Icon Adress Bar (Favicon)


favicon adalah icon yang berada di adress bar. Default favicon dari blogger adalah huruf "B" berwarna orange. Beberapa orang ingin mengganti favicon tersebut sesuai keinginannya. Dan berikut tutorial untuk mengganti default favicon blogger dengan favicon keinginan Anda.


1. Masuk ke dashboard blogger, pilih design.
2. Kemudian pilih edit HTML dan centang expand widget.
3. Cari kode </head>
4. Jika sudah ketemu letakkan kode berrikut diatas kode </head>

<link href='http://3.bp.blogspot.com/_41LEXHen53I/TN9XnIjRDYI/AAAAAAAAAK8/ZaYMjSyk0a8/s1600/Baby_1262012858.gif' rel='SHORTCUT ICON'/>

Ganti http://3.bp.blogspot.com/_41LEXHen53I/TN9XnIjRDYI/AAAAAAAAAK8/ZaYMjSyk0a8/s1600/Baby_1262012858.gif dengan alamat favicon Anda.
5. Klik save.

Selamat bereksperimen
READ MORE - Mengganti Icon Adress Bar (Favicon)

Membuat auto readmore

Membuat Auto Read More kali ini berbeda dengan yang sebelumnya yaitu cara memberi read more dan cara memberi read more pada posting. Cara membuat auto read more kali ini aku pelajari dari blognya Oom (o-om.com). Berhubung untuk menerapkan ilmunya aku tulis lagi cara membuat auto read more ini dengan tujuan memperfaseh dan memperluas berbagi informasi sesama blogger, khususnya cara membuat auto read more ini. Cara membuat auto read more kali ini agak ruet disbanding membuat read more sebelumnya. Membuat auto read more kali ini memang dibilang lebih praktis karena apa, jika read more terdahulu harus menggunakan cara manual untuk memasang fungsi auto read more tersebut ke setiap posting.

Tidak kalah menariknya fungsi auto read more kali ini mampu menampilkan gambar pertama dalam sebuah poting. Fungsi auto read more ini bisa dibilang lebih mirip dengan artikel terbaru dengan thumbnail.

Kelebihan yang lain dari fungsi auto read more kali ini yaitu kita bisa mengatur berapa banyak karakter yang akan ditampilkan. Ada karakter yang bisa ditampilkan jika ada sebuah gambar dalam postingan yang anda buat. Dan adapula yang tanpa menampilkan gambar. Memang cara membuat fungsi auto read more kali ini agak rumit tapi ada sisi positifnya juga yaitu kita tidak perlu lagi membuat fungsi read more pada setiap posting .

Tidak perlu membahas terlalu panjang lebar, mungkin alangkah baiknya jika langsung ke tkp. Oo ia jika anda sudah membuat fungsi read more sebulumnya maka dikembalikan lagi ke bentuk semula. Tambahan kode script telah ditamahkan di hapus, untuk melihat kembali script mana yang perlu dihapus klik link cara memberi read more ini.

Jika sudah Cari kode </head>kemudian letakan script dibawah ini di atas kode </head>.
copy paste script auto read more barikut ini:

<script type="text/javascript">
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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)!=' ' &amp;&amp; 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>

Tetap pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" kemudian cari kode dibawah ini

<data:post.body>

Jika sudah ketemu, maka ganti kode <data:post.body> dengan semua kode dibawah ini

<b:if cond="data:blog.pageType != &quot;item&quot;">
</b:if></data:post.body></data:post.body></span>
<div expr:id="&quot;summary&quot; + data:post.id">
<data:post.body></data:post.body></div>
<span class="fullpost">
<script type="text/javascript">
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class="rmlink" style="float: left;"><a expr:href="data:post.url" href="http://www.blogger.com/post-edit.g?blogID=3719378588761358329&amp;postID=4463925160250105378">READ MORE - <data:post.title></data:post.title></a></span>
<b:if cond="data:blog.pageType == &quot;item&quot;"><data:post.body></data:post.body>

Setelah selesai tekan save template.

Keterangan tentang cara membuat auto read more:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel).

Dengan keterangan di atas anda dapat merubah script fungsi auto read more sesuka hati.
Selamat bereksperimen…
READ MORE - Membuat auto readmore

Cara Membuat Gambar di Pojok (Float Image)

Salah satu cara mempercantik tampilan blog adalah dengan memberikan hiasan berupa gambar di pojok atau yang biasa disebut float image. Alangkah baiknya sebelum mengedit, memback up template dahulu, caranya ada disini. Lalu bagaimanakah cara membuat gambar di pojok (float image) tersebut? Nah berikut tutorial cara membuat float image :
  1. Pastikan anda sudah login sebagai admin di blog anda.
  2. Klik tab Layout pilih Edit HTML, jangan lupa centang/checklist Expand Widget.
  3. Copy paste kode berikut tepat dibawah <body>
    <a href='http://YOURLINK' style='display:scroll;position: fixed; top:5px;left:5px;' title='YOUR TITLE'><img src='http://3.bp.blogspot.com/_41LEXHen53I/S-Z5ol7AFDI/AAAAAAAAAKU/UGJtw4kZCjo/s320/28662_105586369486502_104921859552953_49231_1197821_s.jpg'/></a>
  4. Klik save
Catatan :
  1. Ganti YUOR LINK dan YOUR TITLE dengan link dan title yang anda inginkan.
  2. Tulisan yang berwarna biru ( top ) adalah posisi gambar, ganti sesuai keinginan anda. atas=top , bawah=bottom, kanan=right, kiri=left.
  3. Ganti tulisan yang berwarna merah dengan URL gambar anda.

Mudah kan....
READ MORE - Cara Membuat Gambar di Pojok (Float Image)

Cara Membuat link di dalam Postingan

Link atau Kaitan, yang dimaksud link disini adalah suatu URL atau alamat web, situs atu sejenisnya. Banyak manfaat dari membuat link khususnya link tersembunyi, diantaranya : untuk mengkaitkan postingan yang satu dengan yang lainnya, untuk menyembunyikan link referral anda. Apabila link tersebut diklik maka anda akan menuju ke URL link tersebut. misalnya :

Contoh 1 :
Link dari kata uang abad 21 adalah http://uang-abad-21.blogspot.com, apabila anda mengklik uang abad 21 maka anda akan menuju ke http://uang-abad-21.blogspot.com

Contoh 2
Link dari kata Postingan adalah http://gazpadaku.blogspot.com/2010/05/satu-hitam-diatas-kertas-putih.html, apabila anda mengklik kata Postingan maka anda akan menuju ke http://gazpadaku.blogspot.com/2010/05/satu-hitam-diatas-kertas-putih.html

Lalu bagaimanakah cara membuat link tersembunyi didalam postingan ? seperti contoh ke 2. Berikut tutorialnya cara membuat link tersembunyi dari kata DISINI :

1. Tuliskan kode berikut sebelum kata disini.
<a href='http://ALAMAT YANG DITUJU.COM' title='ALAMAT YANG DITUJU'>
2. Selanjutnya tulis kode </a> setelah kata disini.

Sehingga hasil akhirnya seperti dibawah ini :
<a href='http://ALAMAT YANG DITUJU.COM' title='ALAMAT YANG DITUJU'>DISINI</a>

OK...Mudah kan.
READ MORE - Cara Membuat link di dalam Postingan

Other Post



  Update Status & Buku  Tamu  


Masukkan email anda untuk berlangganan tips, trik, tutorial seputar bloging, adsense, SEO, make money online

Enter your email address:

Delivered by FeedBurner