Tutorial :)

Okie semua , mesti korg semua nak kan tutorial-2 yang best , haha , disini ade la jugak , beberapa , jum tngok :)

TUTORIAL ANIEMATED RECENT POST :) 

ape ur animated recent post ? haha . 

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.

okie da faham ? wany x thu mcm mne nak ajar lgi klo korg x faham-2 , haha .

okie jagn byk ckp , jum buat tuto nie :)

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

2. Copy dan paste kod di bawah nie ke dalam ruangan HTML/javascript yang korg bukak .

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

<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 . yang bewarna biru tu . korg tukar dngn warne yg korg nak okie , :)

then save :) kalau menjady or x mnjdy , coment di bawah :) 

TUTORIAL LETAK SALJI DI DALAM DI BLOG YG BERWARNA PINK

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

2 . Copy code bawah nie :)

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

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

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

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia aww .

5. Bawakan widget yang telah anda save ke atas post / atas sekali :) 

6 . Then save :)

TUTORIAL ENERGY SAVER UNTUK BLOG ANDA :)

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

2. Dengan menggunakan fungsi Find (ctrl + F), cari kod </head>

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

:)P

<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>


Contoh:



4. Save dan lihat hasilnya.

TUTORIAL KESAN KHAS PADA GAMBAR APBILA DILALUKAN CUNSUR 

Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.


Anda boleh lihat kesannya secara real di test blog ini.:)


Tutorial untuk membuat kesan khas pada gambar ini adalah seperti berikut.

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

2. Dengan menggunakan fungsi find (ctrl + F), cari kod a img {

3. Delete kod selepas a img {, dan gantikan kod di bawah.:)p-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60);opacity: .6; border-radius:20px;border: 1px #FF66CC; -webkit-box-shadow: 0px 0px 20px #FF66CC; -moz-box-shadow: 0px 0px 20px #FF66CC; }

Contoh: 
Sebelum



Selepas


4. Save dan lihat hASILnya..:)

UPDATE:
Bagi yang tidak jumpa kod a img {, 
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header

:)P
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;}

Note: 
Anda boleh mengubah warna hover effect. Default warna pink (warna kegemaran perempuan ni.:). 
Kalau hendak tukar warna lain, tukarkan FF66CC dalam kod di atas dengan kod warna yang anda suka. (kod warna lain boleh rujuk di sini)