Memasang Butang 'Back To Top'

on Saturday, September 1, 2012


 Pemasangan butang back to top ke dalam blog kita dapat memudahkan pengunjung blog untuk pergi ke atas blog anda tanpa menggunakan scroll secara automatik.Berikut adalah langkah-langkah untuk memasang widget ini.

contoh demo anda boleh klik disini

1)Macam biasa,login to akaun blogger,Dashboards>Design>Page Elements>Add a Widget>HTML/Java Script

2)Seterusnya copy code dibawah
<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://www3.picturepush.com/photo/a/9132936/640/9132936.png"/></a></div>

nota :
Hijau : anda boleh ubah samaada mahu meletakkan widget ini kira atau kanan
Merah : Url butang back to top yang anda upload,jika ingin menggunakan yang default,abaikan sahaja

3)Done..senang kan?

Bagaimana Memasang iklan Melayang


Tutorial kali ini akan mengajar anda untuk memasang iklan melayang kedalam blog anda.
Sebagai contoh kali ini,saya menggunakan nuffnang sebagai pengiklanan di dalam blog.
mungkin anda ingin menggunakan adverlets,terpulang pilihan hati masing-masing.

Sebelum itu,anda perlu copy dulu kode yang anda ingin masukkan untuk dijadikan iklan melayang
sebagai contoh code iklan dari nuffnang :-
<!-- nuffnang -->
<script type="text/javascript">
        nuffnang_bid = "2cfa4c2822ab10f8d62fe584d003f1fe";
        document.write( "<div id='nuffnang_ss'></div>" );
        (function() {  
                var nn = document.createElement('script'); nn.type = 'text/javascript';   
                nn.src = 'http://synad2.nuffnang.com.my/ss.js';   
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(nn, s.nextSibling);
        })();
</script>
<!-- nuffnang-->
                        

1)Login ke akaun blogger>Dashboard>Design>page elements>Add a Widget>HTML/Java Script
2)Copy code dibawah ini dan gantikan tulisan merah dengan code pengiklanan yang anda dapat diatas,sebagai contoh yang digunakan iklan dari nuffnang.

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


.gbcontent{
float:right;
border:2px solid #000000;
background:#F1DEDE;
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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:<img src="http://www5.picturepush.com/photo/a/9132823/640/9132823.png" title="tawaran menarik" alt="tutup" />:.
</a>
</div>
<center>

masukkan code yang anda dapat dari syarikat pengiklanan disini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

3)Preview dan jika berpuas hati klik save.done

Dari Youtube : Tukar Video Player kepada MP3 Player


Teruja dengan tajuk diatas?mungkin ramai yang sudah tahu tetapi tutorial kali ini ditujukan khas kepada anda yang masih belum tahu trick ini.tanpa membuang masa lagi,jom kita lihat cara-cara untuk menukar video player dari youtube kepada MP3 player.

contoh



menjadi



1)Dapatkan link video (URL) dari laman youtube
contohnya untuk video diatas
http://www.youtube.com/watch?v=ky9-CNgStqw

2)Buang 'watch?' dan gantikan '=' kepada '/'
sebagai contoh http://www.youtube.com/watch?v=ky9-CNgStqw
ditukar menjadi http://www.youtube.com/v/ky9-CNgStqw


3)Masukkan link yang telah anda ubah tadi kedalam kode dibawah ini
<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="LINK DISINI"></embed>

contoh untuk kode diatas
<embed allowscriptaccess="always" height="25" src="http://www.youtube.com/v/ky9-CNgStqw" type="application/x-shockwave-flash" width="425"></embed>

4)Hasilnya


 

Memasukkan Ruangan Komen DiBawah Entri

Memasang ruangan komen untuk setiap entri dapat memudahkan pengunjung blog untuk memberi komen/pendapat atau pertanyaan bagi setiap post yang diterbitkan di blog anda.
Secara asasnya, blogger sudah menyediakan cara mudah untuk membolehkan sistem komen dalam blog anda muncul seperti ini.

Apa yang perlu dilakukan adalah enablekan sistem komen ini cara berikut.

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



2. Save setting dan lihat hasilnya..

JIKA tidak berjaya.

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

5. Tekan ctrl + F untuk mencari kod dibawah.
<b:include data='post' name='comments'/>


6. Letakkan kod ini dibawah kod yang anda jumpa pada langkah 5.
<b:include data='post' name='comment-form'/>


7. Save template anda.

Memasukkan Kesan Salji Ke Dalam Blog

Jom memeriahkan blog korang dengan kesan salji
Untuk tutorial ini akan diletakkan 2 kod iaitu untuk salji putih dan salji hitam(ada juga salji hitam ye.:)

Demo untuk salji bewarna hitam boleh dilihat disini. DEMO

Cara untuk meletakkan salji dalam blog adalah seperti berikut.
1)Login ke akaun blogger anda,dashboard>Design>Page Element>Add a Gadget>HTML/Java Script
2) Copy salah satu kod berikut kemudian paste dalam ruangan html/javascript

Kod untuk salji putih (sesuai untuk background hitam)

<script type="text/javascript" src="http://www.yourjavascript.com/14104214083/snow-white.js"></script>


Kod untuk salji hitam (sesuai untuk background putih)
<script type="text/javascript" src="http://www.yourjavascript.com/03441140321/snow-black.js"></script>
3) Done :)

Meletak Gambar Sebelah Tajuk Entri

Tajuk entri adalah antara perkara yang pertama dinilai oleh seseorang pengunjung yang mengunjungi sesebuah blog. Disamping mempunyai tajuk-tajuk entri yang gempak², kehadiran penghias juga dapat menambahkan lagi seri pada entri tersebut.

Antara salah satu perkara untuk menambahkan seri tajuk 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. Letakkan kod dibawah antara kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>

<img src="url gambar"/>


Contoh kod sepatutnya kelihatan seperti ini
Letak Gambar Sebelah Tajuk Entri

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


4. Done
(Tutorial by unwanted86)

Ketahui Bilangan Pengunjung Dalam Blog

whous.amung.us menawarkan widget yang dapat menunjukkan bilangan pengunjung yang online pada masa sebenar.
Antara kelebihan menggunakan widget ini adalah paparan yang menarik, dan juga cara pasang pada blog dengan mudah. Boleh lihat demo widget ini dipasang di blog, DISINI.

Berikut adalah langkah yang diperlukan untuk meletakkan widget ini didalam blog anda.


1. Buka web http://whos.amung.us/


2. Pilih kedudukan widget yang dikehendaki (widget akan berada dalam keadaan statik dalam blog anda), selepas itu copy code yang tersedia.
 3. Setelah copy code, pastekan di dalam html/javascript yang terdapat dalam page element blog anda.

Dashboard > Design > page element > add a gadget > html/javascript.

Bilangan Pengunjung Online Dalam Blog


4. Done

Tutorial kredit to unwated86