Pasang Background Dalam Sesebuah Entri

Background sesebuah post biasanya akan mengikut default yang telah ditetapkan dalam setting blogger. Tetapi ada satu trick yang boleh digunakan untuk menjadikan background yang berbeda untuk entri yang dikehendaki saja. 
Tutorial untuk membuat background untuk post adalah begitu mudah.

Apa yang bagusnya adalah, anda boleh pilih gambar apa sahaja yang anda mau untuk background, dan anda boleh pilih mau di letakkan dalam post yang mana satu untuk blog anda.

Apabila anda login pada blog anda, letakkan kod ini dalam new post anda. (pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' bukan 'compose'- ini untuk mengelakkan code warna dicopy sekali.:)

<div style="background:url(Link gambar disini) no-repeat;">
Taip segala entri untuk blog anda disini.
</div>

- Letakkan link gambar pada tulisan biru (kalau anda upload dalam blog kemudian copy url gambar lagi bagus.:)
- jika anda menggunakan gambar bersaiz kecil, sila buang no-repeat.
-Taip apa saja entri anda seperti biasa dalam kawasan merah. Atau kalau hendak lebih mudah, buat apa sahaja entri, tetapi ending mesti ada </div>

Itu saja.
Apabila anda post anda akan lihat kesannya.

p/s:
-pastikan anda pilih backgdround yang bersesuainya agar pengunjung blog anda tidak bingung membaca.
semoga bermanfaat
Sumber...http://tutorialuntukblog.blogspot.com

Read more »

Cara Pasang Gambar Apabila Dilalukan Cursor

Memasang gambar yang bisa bertukar sewaktu dilalukan cursor di blog mungkin boleh menambah sedikit kelainan pada blog anda. Dan juga gambar yang disertakan dengan link boleh menarik sedikit perhatian.



Contohnya, coba arahkan cursor anda pada gambar di bawah. (Dan juga boleh klik untuk ke blog ohbest)

Caranya adalah seperti berikut.

1. Gunakan kod di bawah, tukarkan link yang anda mau, url gambar pertama dan url gambar kedua.

<a href="Target link" target="_blank"><img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" /></a>

Contoh untuk kod untuk demo di atas adalah

<a href="http://ohbest.blogspot.com" target="_blank"><img src="http://i.imgur.com/Z5B1M.png" onmouseover="this.src='http://i.imgur.com/PlE1J.jpg'" onmouseout="this.src='http://i.imgur.com/Z5B1M.png'" /></a>

2. Anda boleh post di dalam entri blog anda, seperti biasa ataupun boleh letakkan di sidebar.


Senang dan mudah bukan.?.:)


Nota: Jika mau gambar saja tanpa link, kodnya seperti dibawah.

<img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" />

Selamat mencuba.:)
Sumber...http://tutorialuntukblog.blogspot.com

Read more »

Cara Pasang Gambar Di Sebelah Judul Entri

Judul entri adalah antara masalah yang pertama dinilai oleh seorang pengunjung yang mengunjungi  blog. Disamping mempunyai judul-judul entri yang menarik², kehadiran penghias juga dapat menambahkan lagi seri pada entri tersebut.

Antara salah satu masalah untuk menambahkan seri judul entri adalah dengan meletakkan gambar disebelah tajuk entri.

Contoh:


Berikut adalah langkah-langkah yang perlu dilakukan.


1.Login akaun blogger, dari dashboard >layout > edit html > expand widget templates

2.Tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian cari kod berikut.

<a expr:href='data:post.url'><data:post.title/></a>

3. Pasang kod dibawah antara kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>

<img src="url gambar"/>

Contoh kod seharusnya kelihatan seperti ini

Nota:
a. Tukarkan 'url gambar' dengan url gambar yang anda inginkan
b. Saiz gambar yang biasa digunakan adalah dalam ukuran 20x20 hingga 30x30.


4. Preview, dan jika anda merasa puas hati klik save template.:)

Sumber...http://tutorialuntukblog.blogspot.com

Read more »

Cara Buat Dropdown Menu

Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk meletakkan berbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link kawan², link permintaan, link tips dan berbagai lagi.

Contoh dropdown menu adalah seperti berikut

Cara untuk membuat dropdown menu ini adalah seperti berikut.

1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget > HTML/javascript

2. Copy code berikut ke dalam ruangan html/javascript.

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option>
</select>

penerangan :
Link 1: Masukkan link untuk dibuka
Text 1: Masukkan perkataan/huruf untuk link

Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select>
3. Apabila selesai, save hasil kerja anda.:)


TAMBAHAN:
Untuk kod di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada page/window yang berlainan, silahkan tukar dengan kod:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

dengan kod ini.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Mudah bukan.
Selamat mencuba.:)
Sumber...

Read more »

Cara Pasang Recent Post dengan Thumbnail Widget

Penggunaan widget recent post adalah penting untuk menunjukkan kepada pengunjung apa entri-entri terbaru yang terdapat dalam blog. Lagi berguna jika pengunjung yang datang bukannya dari frontpage. Jadi widget recent post sangat penting ketika ini.

Sebelum ini sudah diletakakn Animated recent post widget,tetapi untuk kali ini, tutorial akan menunjukkan cara meletakkan recent post widget, tetapi jenis statik.

Contoh adalah seperti gambar ini.


Cara-cara untuk meletakkan widget ini adalah seperti berikut:

1. Dari dashoard > desin > add a gadget > HTML/javascript

2. Dalam ruangan HTML/javascript, masukkan kod berikut.

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[1] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[2] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[3] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[4] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://URL ANDA.blogspot.com/";

</script>

<script src="https://sites.google.com/site/unwanted86/javascript/recentpostthumnail.js" type="text/javascript"></script>

Note:

Anda boleh merubah beberapa kod mengikut kesesuaian blog anda.

boxwidth - lebar widget
cellspacing - jarak antara cell (default sudah ok)
borderColor 
thumbwidth & thumbheight - lebar dan tinggi thumbnail (default sudah ok)
fntsize - Size untuk judul
acolor - 
aBold - Mahu tajuk di'tebalkan' atau tidak (true or false)
numposts - Bilangan recent post yang kamu mau
home_page : http://URL ANDA.blogspot.com/ (Gantikan  URL ANDA dengan url blog anda)


3. Save dan lihat hasilnya.:)

Sumber...http://tutorialuntukblog.blogspot.com

Read more »

Cara Pasang Cursor Untuk Blog Anda

Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

1. Buka website http://www.cursors-4u.com/

2. Pilih cursor kesukaan anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ia hanya berfungsi dalam IE)

3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telahdiwarnakan seperti dibawah

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

4. Kod akhir seharusnya kelihatan seperti ini sahaja.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

6. Save dan lihat hasilnya.

Mudah bukan.:)

Sumber...... http://tutorialuntukblog.blogspot.com

Read more »

Page FB Yang Lebih Style Untuk Blog

Sesetengah blogger ada yang mempunyai facebook page untuk blognya. Tidak kira apa tujuan page tersebut, kebiasaannya ianya berkaitan dengan blog. Cara kali ini akan menunjukkan cara meletakkan page facebook dalam blog, tetapi bukan dengan design biasa.



Kalau sebelum ini widget yang dinamakan 'facemask' ini didapati di wordpress, kini blogger yang mengunakan platform blogger.com juga boleh menggunakannya.

Cara meletakkan page ini adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste code di bawah kedalam ruangan HTML/javascript dan rubah seperti yang dinyatakan dalam nota di bawah.

<center>
<iframe style="height:250px; width:85%; " scrolling="no" frameborder="0"href="

URL PAGE

"src="http://www.facebook.com/plugins/fan.php?id=

NO ID PAGE

&width=292&height=250&connections=25&stream=false&header=false&logobar=false&css=https://sites.google.com/site/unwanted86/javascript/fblike.css" ></iframe></center><center><iframe src="http://www.facebook.com/plugins/like.php?href=

URL PAGE

&send=false&layout=standard&width=292&show_faces=false&action=like&colorscheme=light&font&height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:40px;" allowtransparency="true"></iframe></center><p align="right"> <small><a href="http://tutorialuntukblog.blogspot.com/2011/09/page-fb-yang-lebih-style-untuk-blog.html">Get tutorial here </a></small></p>

Nota: 

a)Gantikan url page dengan url page anda.
Bagaimana mau medapatkan url page.?



b) Gantikan No ID page dengan no ID page anda.
Bagaimana mau mendapatkan ID page.?

Daripada page, klik pada 'edit info', kemudian daripada Tampilan yang muncul akan anda no di url, itu adalah No ID page anda.




3. Apabila selesai gantikan yang berkenaan, save dan lihat hasilnya.:


Sumber...http://tutorialuntukblog.blogspot.com

Read more »

Cara sembunyikan shoutbox

Pada kebiasaannya, shoutbox akan berada di sidebar dan akan dapat dilihat terus. Cara kali ini akan menunjukkan Cara untuk sembunyikan shoutbox anda.:)



Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih praktis dan mungkin juga untuk tampil unik berbanding blog-blog lain.


Cara sembunyikan shoutbox seperti di bawah

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke kolom html/javascript

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
(tiada shoutbox.?)


3. Save dan lihat hasilnya.:)


Sumber...http://tutorialuntukblog.blogspot.com

Read more »

Cara Pasang facebook like badge sewaktu blog di buka

Facebook dan blogger adalah kombinasi yang agak bagus. Dengan adanya facebook page, blogger dapat berinteraksi dengan pengunjung. Salah satu penggunaan yang cool adalah dengan meletakkan facebook like badge sewaktu blog anda dibuka.

Secara tidak langsung dapat menggalakkan pengunjung blog anda untuk pada waktu yang sama 'like' pada page anda.

Contoh seperti dibawah

Cara Pasang facebook like badge sewaktu blog di buka seperti dibawah.

1. Dari dashboard > design > edit HTML

2. Backup template blog sebagai langkah berjaga²

3. Dengan menggunakan fungsi find (ctrl + F), cari kod <body>
3.1 Jika anda tidak ketemu code <body>, cari kod ini
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

4. Copy dan paste code di bawah sesudah kod yang anda temui di langkah 3 atau 3.1

<!-- KakiNetwork.Com Likebox Pro FBFan Code Start -->
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='OhBest'
//]]>
</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakinetwork.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/unwanted86/javascript/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/unwanted86/javascript/kakinetwork.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 15,
wait: 0,
url: 'http://www.facebook.com/OhBest',
closeable: true,
});
});
//]]>
</script>
<div id='fbtpdiv'/>
<!-- KakiNetwork.Com Likebox Pro FBFan Code End -->

Contoh:




NOTA:
i) Gantikan 'OhBest' pada row KNFBFansPRO='OhBest' dengan nama yang anda mahu.
ii)Gantikan '15' pada row 'timeout: 15,' dengan waktu paparan yang anda mahu sewaktu blog dibuka
iii) Gantikan dengan url page anda pada row url: 'http://www.facebook.com/OhBest',

5. Save dah lihat hasilnya.:)


Sumber...http://tutorialuntukblog.blogspot.com

Read more »

Tutorial Sembunyikan FB Fan Page di Blog

Bagi blogger yang mempunyai facebook fanpage sendiri, adalah biasa untuk meletakkan fanpage tersebut di blog. Biasa untuk letakkan di sidebar blog, untuk kali ini admin akan tunjukkan pula cara untuk sembunyikan facebook fan page ditepi blog anda.





Tutorial sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:

i. Dari dashboard > design > edit HTML

ii. Menggunakan fungsi find, (ctrl + F), cari kod </head>

iii. Copy dan paste kod di bawah SEBELUM kod </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

cth: 


Nota: Jika anda dapati kod di atas sudah ada sebelum anda copy paste, abaikan langkah 1, pergi terus ke langkah 2.

iv. Setelah selesai klik Save Template





Langkah 2:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">Tutorial Here</a></span></div></div>

Nota: Gantikan "URL PAGE ANDA"

contoh url page:


iii. Save dan lihat hasilnya.:)


Sumber....http://tutorialuntukblog.blogspot.com

Read more »