Cara Membuat Scroll Box untuk Widget

Meletakkan sesuatu widget  untuk blog agar terlihat menarik. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.

Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih rapi.



Scroll box ini juga sesuai dengan widget apa saja yang anda mau. Antara widget yang sesuai menggunakan scroll box ini adalah Mister Linky. Ini karena jika jumlah pengunjung yang meletakkan url sangat banyak, ruang yang digunakan juga akan bertambah.

Secara ringkasnya, apa saja widget yang memakai kode HTML boleh menggunakan cara ini untuk dijadikannya scroll

Tutorial untuk membuat scroll box adalah seperti berikut:

1. Dari dashboard > design > add a gadget > HTML/javascript
(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang  telah letakan di blog)

2. Kemudian masukkan/ubah kode widget seperti berikut.

<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kode widget anda disini

</div>

Catatan :
width: ubah mengikut lebar yang anda kehendaki
height: ubah mengikut tinggi yang anda kehendaki

3. Apabila selesai, save dan lihat hasilnya..





Tertarik mencobanya Sob..hehe...

Read More

Cara Membuat Background Dalam Sebuah Postingan

Background sebuah 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 senang.

Apa yang bagusnya adalah, anda boleh pilih gambar apa saja yang anda mau untuk background dan anda boleh pilih untuk meletakkan dalam  untuk blog anda.

Apabila anda login pada blog anda, letakkan kode ini dalam new post anda. (pastikan waktu kode ini di paste, new post anda dalam keadaan 'edit html' bukan 'compose'- ini untuk menghindari kode warna dicopy sekali.

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

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

Itu saja.
Apabila anda membuat entri baru anda akan lihat hasilnya.

p/s:
-pastikan anda pilih backgdround yang pas agar pengunjung blog anda tidak pening membaca.

Read More

Cara Membuat Letak Iklan Statik Nuffang

Adakah anda sudah mempunyai akun Nuffang  Iklan.?.
Kalau ada, dimanakah anda letakkan iklan anda itu..(skyscraper)?

Memasang iklan secara statik adalah meletakkan iklan pada kedudukan yang tetap dalam sesebuah blog walaupun entri telah di'scroll' ke bawah


Anda scroll  mana pun  tetap berada pada kedudukan itu. Kelebihan.? Nanti akan dibahast bawah, Nyok kita lihat cara yang yang perlu dilakukan untuk letak iklan  statik ini:

Owh, sebelumnya mungkin ada yang bertanya 'Letak iklan statik tidak menyalahi tema dan syarat Nuffang kah?'
 
Ini jawaban dari nuffnang sendiri.

Yes, it is allowed for a blogger to place his ad unit static as shared by you. That position is no doubt desirable and advertisers would love to advertise on such placement.

However, bear in mind that the desirability for a Skyscraper ad unit is the same if it\'s placed;
- the top gadget of a sidebar
- visible upon loading of the page
- visible at all time (static ad)

As such, it doesn\'t really make a big difference, but nevertheless, advertisers will pay more attention to blogs which embed the ad units as a static ad.

Cheers,
Robb Chew
Blogger Relations Executive

Nuffnang Sdn Bhd

Cara-cara untuk meletakkan iklan statik adalah seperti berikut.

1. Login akun Nuffnang untuk pastikan kode iklan Nuffnang untuk Skyscraper



2. Copy kode di bawah, kemudian letakkan di HTML/javascript dalam blog anda
( Dashboard > Layout > Page elements > Add a gadget > HTML/javascript )

<div style='display:scroll; position:fixed; bottom:5px; right:5px;'>Letak Kod Nuffnang Sini</div>

rincian :
i.) Nilai 5px boleh diubah. Nilai ini menentukan jarak dari bawah dan jarak dari kanan.
ii.) Masukkan kod iklan Nuffnang yang diambil dari step 1. (pastikan kode  untuk Skyscraper)


UPDATE: Jika anda hendak membuat kode bersama tulisan kerlap-kerlip "nyok, kita liat aja..hehe"
kodenya adalah seperti dibawah:

<div style='display:scroll; position:fixed; bottom:5px; right:5px;'><blink>Ai, takkan tengok je.:)</blink>Letak Kode Nuffnang Sini</div>

3. Save, kemudian lihat kesannya dalam blog anda.:)

Bagaimana, tertarik...agagagag ahiag ahiag,,,

-----------------------------------------------------------

Kelebihan meletakkan iklan secara statik.

1. Barangkali untuk pengunjung melihat iklan itu adalah sangat tinggi. karena iklan itu muncul sendirinya walaupun scroll ke bawah.

2. Barangkali untuk klik juga adalah tinggi.

3. Advertiser lebih berminat untuk beriklan di blog anda.

4. Berdasarkan kepada no1,2 dan 3, maka earning anda pun akan bertambah


Sukses   ea  sob...!!!

Read More

Cara Membuat Animasi Recent Post

Recent post menunjukkan apakah post terbaru yang baru dihasilkan oleh seseorang blogger untuk blognya. Adanya animated recent post widget, dapat menambahkan lagi 'seri' bagi senarai recent post anda.

Tutorial untuk membuat Animasi recent post ini adalah seperti berikut.

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

2. Copy dan paste kode di bawah ke dalam ruangan HTML/javascript yang anda buka.

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://tutorialuntukblog.blogspot.com/2011/07/animated-recent-post-ver2.html" target="_blank">get this widget here</a></small>

3. Save dan lihat hasilnya.

Read More

Cara Membuat Letak Ruang Komen

Meletakkan ruangan komen di bawah entri dapat memudahkan pengunjung sebuah blog untuk memberikan komentar pada entri yang d tuju.


Secara umumnya, blogger sudah menyediakan cara mudah untuk membolehkan sistem komentar dalam blog anda muncul seperti ini.

Apa yang perlu dilakukan adalah eneble-kan  sistem komentar ini ...
berikut langkah-langkahnya:

1. Login akun blogger anda, dari dashboard> settings>comments
Pada comments form placement, pilih 'embedded below post'


2. Save setting dan lihat hasilnya..

msh nggak binggung?  hehehe....

3. Klik pada layout>edit html>Expand widget templates
4. Backup template anda dengan klik 'download full template'.

5. Tekan ctrl + F untuk mencari kode dibawah.

<b:include data='post' name='comments'/>

6. Letakkan kode ini dibawah kode yang anda lihatpada nomor 5.

<b:include data='post' name='comment-form'/>

7. Save template anda dan lihat hasilnya.

Read More

Cara Membuat Gambar Bergerak-gerak

Membuat scrolling image dapat memberi kesan yang berbeda berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai babarapa list dalam bentuk gambar seperti banner ataupun  tag daripada blogger lain.

Contoh scrolling image adalah berikut.




Pergerakan setiap gambar dapat diubah sama dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat diatur


Contoh kode bagi scrolling image adalah seperti berikut.

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

Penerangan:

Arah pergerakan gambar : boleh ditukar .semisal: up, down dan right. 
 pergerakan gambar : boleh ditukar kepada nomor lain. Semakin tinggi nilai semakin cepat
link untuk dibuka: link yang akan dibuka apabila gambar diklik.
url gambar: url gambar yang akan dipamerkan.

Catatan:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahaian gambar
2. Kode-kode ini dapat digunakan di dalam post entri ataupun pada bagian gadget

Read More

Cara Membuat Anti Klik Kanan

Apakah anda tidak suka orang lain mengambil apa saja kandungan dalam blog anda.?

Kenapa Perlu Disable Right Click.?
Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk mengantisipasi orang lain mengambil apa yang ada dalam blog mereka. Sama tidak senang posting mereka ditiru bulat-bulat (copy paste).  Kebiasaan alasan yang Ane selalu baca adalah karena ada orang yang copy entri mereka.

Berikut adalah contoh masing-masing yang akan keluar apabila anda aktifkan disable right click




Berikut adalah cara yang mudah untuk menggunakan fungsi ini.


1. Copy kode ini.

<script language=JavaScript>
<!--


//edit by unwanted




var message="Masukkan Mesej Anda Disini";


///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}


function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}


if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}


document.oncontextmenu=new Function("alert(message);return false")


// -->
</script>

 
2. Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Layout>Add a Page element >html/javascript.


Apabila sudah siap, save dan lihat kesannya pada blog anda.:)

Read More

Cara Membuat Widget Popular Post Dalam Blog

Add caption

Anda membuka blog, tetapi apakah anda tahu dalam banyak-banyak entri yang anda ada, entri manakah yang paling popular.? Entri manakah yang mempunyai komentar paling tinggi.? Tentu sukar untuk menentukan, apa lagi jika anda sudah mempunyai entri sehingga mencapai ratusan.




Tutorial kali ini akan menunjukkan cara bagaimana untuk meletakkan popular post( atau anda boleh panggil dengan nama lain) pada blog anda. Widget popular post ini adalah berdasarkan bilangan komentar yang ada pada entri, bukannya berdasarkan page view. Dan semestinya tutorial ini amat mudah membuatnya..hehe...sok pinter....

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

2. Dalam ruangan HTML/javascript, masukkan kode di bawah:

<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://URL BLOG.blogspot.com/";
</script>
<script src='https://sites.google.com/site/unwanted86/javascript/unwanted86-popularpost.js' type='text/javascript'></script>
</ul><br/><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-widget-popular-post-dalam-blog.html" target="_blank"/>Get this widget here </a></small>

Catatan:
-tukarkan URL BLOG dengan nama blog yang anda 
-maxshowresult=5; tukarkan 5 dengan  popular post yang anda inginkan

3. Save dan lihat hasilnya..

Read More

Cara Membuat Post Entri Dalam

Post entri dalam blog merupakan perkara yang paling penting bagi seorang blogger.
Dalam entri anda akan mencari tahu apa yang anda  sampaikan  dan apa-apa saja yang anda mau.

Kalau tidak buka ruangan untuk metahui bagaimana membuat post entri



Berikut adalah cara bagaimana anda memulai  langkah untuk membuat menu dropdown  dalam blog anda.

1. Buka link www.blogger.com (link ini diperlukan setiap kali anda hendak login kepada akaun blogger). Masukkan email dan password anda.

2. Pada  muka depan, klik pada 'new post'



3. Masukkan judul untuk entri anda dan juga isi kandungan entri anda.(biasa bab ini mengambil masa untuk membuat entri).

Kemudian apabila sudah siap, klik pada button 'publish'


4. Apabila sudah tekan button publish, siap untuk sebuah entri dalam blog anda.:)

• jika anda mau melihat entri anda itu, klik pada 'view post'
• jika anda rasa masih ada kekurangan dan hendak edit, klik pada 'edit post'
• jika anda hendak membuat entri baru, klik pada 'create a new post' (anda juga boleh mulai dari awal dengan klik pada 'dashboard' pada bahagian atas-kanan)

Read More

Cara Membuat Menu Dropdown

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

Contoh dropdown menu adalah seperti berikut

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

Contoh dropdown menu adalah seperti berikut


Tutorial 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/ayat 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, sila tukarkan kode:

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

kepada kode ini.

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

Mudah bukan.
Selamat mencoba.:)

Read More