Tutorial pisahkan widget sidebar untuk simple template

Tutorial pisahkan widget sidebar untuk simple template. Ape yang dimaksudkan pisahkan widget sidebar ni, kita pisahkan satu persatu macam dalam gambar di bawah ini.

Sebelum buat tutorial sile save dulu template blog.

Dashboard>>Design>>Edit HTML>>Download Full Template.

Dah siap download[save],boleh mulakan tutorial.

1.Cari code 

/* Widgets

----------------------------------------------- */

*tekan ctrl+F untuk memudahkan pencarian.bile dah tekan akan keluar satu box. Mmasukkan code yang  nak di cari tu.

2. Lepastu copy code bawah ni

.sidebar .widget, .sidebar2 .widget {

background: #ffffff url(LINK GAMBAR BACKGROUND);

-moz-border-radius: 0em 0em 0em 0em;

border-radius: 0em 0em 0em 0em;

margin: .5em 0;

padding:0 0 1.5em;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px;

text-align: justify;

border: 2px solid #000000;

text-transform:none;

}

3.Kemudian paste kat bawah sekali dalam bahagian widget, sebelum code /* Footer

4.Customize code mengikut pilihan masing-masing

ffffff-code warna background*code warne boleh >> http://userabbe.xtgem.com/code_warna

 LINK GAMBAR BACKGROUND-kalau nak letak backround

-moz-border-radius: 0em 0em 0em 0em;border-radius: 0em 0em 0em 0em;-bentuk widget,boleh tukar nilai 0 tu kepada 1 akan terbentuk corner.

margin: .5em 0;

padding:0 0 1.5em;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px;-coding ni tak tukar pun takpe.kalau paham coding,bolehlah nak tukar.

text-align: justify;-boleh tukar align tajuk tu,kiri dan kanan..just type left or right.

border: 2px-ketebalan border widget sidebar

solid-boleh jugak buat dashed[garisan putus-putus]..tukar solid kepada dashed

000000-code warne border widget sidebar

5.dah siap customize, tekan preview dulu.

6. Jika dah berpuas hati bolehlah SAVE.

Siap!

Tutorial Buat Slider Sebagai Header Using JQuery

1. Log in blogger>>Dashboard>>Theme>>Edit HTML

2. Cari code

]]></b:skin>

3. Copy code bawah ni

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 560px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

4. Paste diatas code ]]></b:skin>

5. Kemudian cari code

</head>

6. Copy code bawah ni

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

 <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 560, navigation: false, delay: 5000 }); });</script>

7. Paste di atas code </head>

8. Save template

9. Pegi pada page element

dashboard>>page element>>Add a gadget>>HTML/Java

10.Copy code bawah ni

<div id='coin-slider'>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

    

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

</div>

11. Paste dalam box HTML tadi

560 - lebar boleh adjust ikut kesesuaian blog masing-masing

LINK Post - link post yang nak diletakkan dalam slide

URL image - URL image yang nak diletakkan dalam slide

Image's decription - boleh ambil terus dari post entry [copy+paste] atau nak buat ayat sendiri

Tutorial Letak Icon Facebook/Twitter/Friendster/Myspace di Tepi Blog

Log in blogger>>Dashboard>>Layout>>Add a gadget>>HTML/JavaScript

2.Copy kod kat bawah ni

<div style="display:scroll; position:fixed; top:200px; left:0px;">

<a class="linkopacity" href="http://www.facebook.com/facebook ID" target="_blank" rel="nofollow" title="Facebook" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />

</div>

3.Paste code dalam box HTML/JavaScript

4.edit code

200-kedudukan icon dari atas ke bawah

[kalau nak letak atas..boleh letak start dari 0px..kalau tengah,mungkin 300px..adjust la mane korang rase ok]

left-kedudukan icon

[nak letak kanan pun boleh]

0-jarak icon dari kiri ke kanan atau dari kanan ke kiri

[adjust ikut suke]

facebook ID-facebook ID korang

click profile and copy je url atas tu

Facebook-nama icon

URL icon/imageurl icon korang..boleh google je icon ni

5.save!

kalau nak letak lebih dari satu icon, copy kod bawah ni

<a class="linkopacity" href="http://www.facebook.com/instagram" target="_blank" rel="nofollow" title="instagram" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />

paste selepas code <br /> yang pertama tadi

Tukar nama icon kepada media sosial yang kau orang nak.

Tutorial Recent Post Bergerak

Menarik bukan kalau letak recent post bergerak kat sidebar tu. Marilah cuba buat tutorial recent post bergerak. 

Log in blogger >> dashboard >> layout >> add a gadget >> html 

Copy kod kat  bawah ni and paste dalam kotak gadget html

Font warna merah tukar url blog sendiri.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<style media="screen" type="text/css">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

margin-bottom:-20px;

padding:0px 0px -20px 0px;

height:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

float:center;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:200px;

padding: 2px 2px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:center;

height:70px;

overflow: hidden;

background:#FFFFFF;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#A32929;

font-size:12px;

height:0px;

overflow:hidden;

margin: 0px 0px;

padding:0px 0px 0px 0px;

}

#spylist li img {

float:left;

margin-right:10px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:0px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:0px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:0px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://img15.imageshack.us/img15/5439/noimagex.png";

imgr[1] = "http://img15.imageshack.us/img15/5439/noimagex.png";

imgr[2] = "http://img15.imageshack.us/img15/5439/noimagex.png";

imgr[3] = "http://img15.imageshack.us/img15/5439/noimagex.png";

imgr[4] = "http://img15.imageshack.us/img15/5439/noimagex.png";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = " ";

showPostDate = false;

showcomments = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 20;

home_page = "url blog";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>

</div>

Save! 

Tutorial Buat Font Tile Cursor

Contoh tutorial font tile cursor

Tutorial Buat Font Tile Cursor

Sign in blogger>>dashboard>>layout
Add a gadget>>HTML>>copy kod kat bawah ni then paste dalam kotak HTML tadi
Save!

Tukar tulisan berwarna merah dengan kod warna pilihan dan perkataan pilihan masing-masing.

<style type="text/css">

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #FF6699;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

</style>

<script type="text/javascript">

;(function(){

var msg = "Sihatimerahjambu";

var size = 18;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;

var speed = 0.3;

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){

 e = e || window.event;

 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},

makecircle = function(){ // rotation/positioning

 if(init.nopy){

  o.style.top = (b || document.body).scrollTop + 'px';

  o.style.left = (b || document.body).scrollLeft + 'px';

 };

 currStep -= rotation;

 for (var d, i = n; i > -1; --i){ // makes the circle

  d = document.getElementById('iemsg' + i).style;

  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';

  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

 };

},

drag = function(){ // makes the resistance

 y[0] = Y[0] += (ymouse - Y[0]) * speed;

 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

 for (var i = n; i > 0; --i){

  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

  x[i] = X[i] += (x[i-1] - X[i]) * speed;

 };

 makecircle();

},

init = function(){ // appends message divs, & sets initial values for positioning arrays

 if(!isNaN(window.pageYOffset)){

  ymouse += window.pageYOffset;

  xmouse += window.pageXOffset;

 } else init.nopy = true;

 for (var d, i = n; i > -1; --i){

  d = document.createElement('div'); d.id = 'iemsg' + i;

  d.style.height = d.style.width = a + 'px';

  d.appendChild(document.createTextNode(msg[i]));

  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

 };

 o.appendChild(oi); document.body.appendChild(o);

 setInterval(drag, 25);

},

ascroll = function(){

 ymouse += window.pageYOffset;

 xmouse += window.pageXOffset;

 window.removeEventListener('scroll', ascroll, false);

};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){

 window.addEventListener('load', init, false);

 document.addEventListener('mouseover', mouse, false);

 document.addEventListener('mousemove', mouse, false);

  if (/Apple/.test(navigator.vendor))

   window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

 window.attachEvent('onload', init);

 document.attachEvent('onmousemove', mouse);

};

})();

</script>

Tutorial sparkles cursor

Satu lagi tutorial cantikkan blog, iaitu Tutorial sparkles cursor untuk blogger yang menggunakan blogspot.

Tutorial sparkles cursor

Sign in blogger>>dashboard>>layout
add a gadget>>HTML>>copy kod kat bawah ni then paste dalam kotak gadget HTML tadi
Save!

<script type='text/javascript'>

// <![CDATA[

var colour="pink"; 

var sparkles=100;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

Tutorial letak icon comel sebelah title sidebar

Dashboard>>design>>edit HTML 

Click Expand Widget Templates. Kemudian cari kod kat bawah ni 

<h2 class='title'><data:title/></h2>

atau kod bawah ni

<h2 class='title'>your widget title</h2>

contohnya kod macam ni 

<h2 class='title'>About me</h2> 

Untuk memudahkan pencarian tekan Ctrl+F button. copy kod di atas dan paste dalam kotak pencarian.
Bila dah jumpa kod yang nak dicari tu, copy kod bawah ni

<img src='letak URL icon disini'/>

dan paste kan ditengah tengah antara dua kod yang dicari tadi.

Contoh yang dah siap paste macam ni.

<h2 class='title'><img src='letak URL icon disini'/><data:title/></h2> 

atau

<h2 class='title'><img src='letak URL icon disini'/>About me</h2>

Dah siap, sila preview. Kalau dah kelihatan ada icon comel tu, save. Ulang langkah yang sama untuk letak di setiap tajuk sidebar.