Kelopak Bunga Berguguran Di Blog

Ingin menampakkan blog anda kelihatan lebih menarik dengan objek yang berguguran selain daripada salju.?
Apa kata kalau hiaskan blog anda dengan kelopak bunga yang berguguran seperti gambar di bawah.

Anda boleh melihat contoh kelopak bunga yang berguguran di blog demo ini.

Tutorial yang ringkas adalah seperti berikut.

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

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

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>

3. Save dan lihat hasilnya.:)

Tutorial Buat Scroll Box Untuk Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)



Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.



1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>

Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas


4. Save dan lihat hasilnya.:)

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

Apa Itu SEO

Bergelar seorang blogger, antara perkataan yang akan jumpai dalam dunia blogging ini adalah SEO. Boleh dikatakan SEO ini memang agak glamour terutamanya di kalangan blogger yang sudah agak lama bertapak di dunia blogging.



Bagi blogger baru, mungkin masih tertanya-tanya, apakah sebenarnya SEO ini. Apakah kesan yang dibawa kepada seseorang blogger. Kenapa sesetengah orang terkejar-kejarkan SEO, kenapa sesetengah orang tidak kisah berkaitan SEO. Kali ni admin akan terangkan secara ringkas pengenalan kepada SEO, semestinya kepada blogger baru di arena blogging ini.:)

Apa itu SEO.

- SEO adalah ringkasan kepada Search Engine Optimization. Kalau bahasa mudahnya adalah cara untuk mengoptimumkan apa yang anda buat di blog anda supaya blog anda tersenarai di search engine seperti google, yahoo, bing dan lain².


Apa tujuan SEO.

-Tujuan utama SEO bagi seorang blogger yang menggunakan teknik SEO adalah untuk mendapatkan trafik dari search engine. Kemudian baru berkaitan dengan pagerank, eaning dan sebagainya. Tetapi tujuan utama adalah trafik dari search engine.


Perlu ke SEO pada blogging.

- Pada blogger yang pentingkan trafik untuk ke blog mereka, YA.
Dan paling kurang tahu basic² utama dalam SEO ini.
- Bagi blogger yang berblogging sekadar diari, mengisi masa lapang, atau berblogging sekadar ada blog, SEO tidak begitu penting.


Banyak ke teknik SEO ini.

-Ya, ada banyak teknik SEO.
Admin akan terangkan dalam post-post lain selepas ini.


Kalau buat SEO ni konfirm berjaya ke.?

- Admin tidak boleh kata konfirm. Tetapi bagi sesiapa yang menggunakan dan mencubanya boleh dikatakan akan menampakkan hasilnya.



Contoh hasil SEO.?

Ini admin ambil dari blog admin satu lagi, unwanted86.blogspot.com. Berkaitan bulan ramadhan, so target SEO admin berkaitan ramadan. Gambar di bawah contoh trafik hasil SEO.




Ada beza ke SEO dan SERP.

Yup berbeza.
SEO - Search Engine Optimizationn - Lebih kepada teknik
SERP - Search Engine Results Page - Kedudukan dalam search engine. (kurang glamour:)



Perkaitan keduanya.?

Power SEO, akan power SERP.
Boleh kata SEO adalah usaha, SERP adalah hasil.:)

Letak Facebook Like Badge Masa Blog Dibuka

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 semasa blog anda dibuka.

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

Contoh seperti dibawah

 Anda juga boleh melihat demo di test blog ini.

Tutorial letak facebook like badge semasa blog dibuka 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 jumpa code <body>, cari kod ini
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

4. Copy dan paste code di bawah selepas kod yang anda jumpa 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 masa paparan yang anda mahu semasa blog dibuka
iii) Gantikan dengan url page anda pada row url: 'http://www.facebook.com/OhBest',

5. Save dah lihat hasilnya.:)


Kredit: Terima kasih kepada kakinetwork.com untuk code yang sungguh cool ini.