Bunga Untuk Page Divider





http://dl7.glitter-graphics.net/pub/467/467977qxzmvqihhl.gif
http://dl6.glitter-graphics.net/pub/2259/2259626rgd5aj1g0h.gif

 http://sl.glitter-graphics.net/pub/926/926603tx8rvej9mz.gif

Bunga Rose
http://3.bp.blogspot.com/_PK5f-bkuqSc/TPeAyqJfcZI/AAAAAAAAA5M/KYHwTbVUJZY/s1600/widget.png

http://dl8.glitter-graphics.net/pub/608/608928odknwa27n6.gif


http://dl7.glitter-graphics.net/pub/697/697577wcowvfyq3s.gif

Jenis Border Di sidebar

9 jenis code border yang boleh digunakan;
  1. solid
  2. double
  3. groove
  4. dotted
  5. dashed
  6. inset
  7. outset
  8. ridge
  9. hidden

Tuto Untuk Template Picture Window Part 1

Aku nak share gan korang cara2 nak buat design blog menggunakan template picture Window...Tuto nie juga khas untuk fieda.... kerana fieda ingin belajar edit blog....Apa salahnya aku share gan kawan2 yang ingin belajar hihihi...

First sekali korang kena tukarkan template korang kepada "picture Window" Klik Design pastu pergi ke template design....

Korang dah tukar template korang kepada "picture Window? Okey dah.....Kalau dah korang klik apply pastu klik view blog...Sebelum tue korang buang background tukar kepada transparent.Dah settle....Pasni kita start nak edit blog....

Sebenarnya edit blog nie senang jer...kalau kita tahu bermain dengan coding....Aku nak ajar korang sidebar terlebih dahulu

  1. Klik Design pastu Edit HTML...Bila dah klik Edit HTML kat bawah tue ada coding2 untuk edit blog...
  2. Korang carik kod nie   /* Widgets
    ----------------------------------------------- */   dah jumpa? kalau dah jumpa buang semua coding yang berada di bawah kod tersebut  sebelum kod     /* Footer
    ----------------------------------------------- */   Kod nie dah lain codingnya....hati2 okey....
  3. Dah buang coding tersebut?Kalau dah buang Copy dan paste kod di bawah di tempat yang korang buang coding tadi....Sebelum save preview dulu jadik ke tidak okey...
 .sidebar h2 {
margin: 10px;
padding: 6px;
font-size: 14px;
text-align: left;
background-image: url(http://4.bp.blogspot.com/_PK5f-bkuqSc/TOQw6LVNqKI/AAAAAAAAAqY/4E9Z1VYgPag/s1600/background.png);
border-top: 4px groove #ff0099;
border-bottom: 4px groove #ff0099;
border-right: 6px solid #ff00ff;
border-left: 6px solid #ff00ff;
text-shadow: 2px 1px 2px #FFFFFF;

}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url(http://1.bp.blogspot.com/-WrfbZGFzBH8/TabzoHxsp3I/AAAAAAAADC0/H1Avtprclf4/s1600/list.png) no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;

}

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
  border-top: none;
}

.widget .post-body ul {
  list-style: disc;
}

.widget .post-body ul li {
  border: none;
}
.sidebar .widget {
text-align:center;
background:#;
border: 4px groove #ff0099;
padding-bottom: 0.9em;
line-height:1.9em;
-moz-box-shadow: 0 0 10px #FA58AC ;-webkit-box-shadow: 0 0 10px #FA58AC;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: url(http://3.bp.blogspot.com/_PK5f-bkuqSc/TPeAyqJfcZI/AAAAAAAAA5M/KYHwTbVUJZY/s1600/widget.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}






Okey Dah settle bahagian sidebar....Jadik tak? hihihi...Kalau jadik bagus!!!

Yang atas tue untuk tuto sidebar menjadi cantik....Sekarang tuto untuk border sekeliling  blog pulak....

  1. Korang Ctrl F carik kod   .main-inner {   dah jumpa? korang buang coding di bawah dan pastekan kod nie...
 text-align:center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border:11px groove #ff0099;
-moz-box-shadow: 0 0 20px #000000 ;-webkit-box-shadow: 0 0 20px #000000;
background: url(http://3.bp.blogspot.com/_PK5f-bkuqSc/TPeAyqJfcZI/AAAAAAAAA5M/KYHwTbVUJZY/s1600/widget.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}


Okey settle...Preview dulu  baru save....Dah siap!!!! nie belum habis lagi...nanti kita sambung okey...

Slide Float Shoutbox Yang Kedua

 Sebelum Tue pergi step di bawah


1. Log In > Dashboard > Design > Add A Gadget > HTML/Java Script
2. Copy Code di bawah ini dan Pastekan dalam HTML/JavaScript..



<style type="text/css">
    #gb{
    position:fixed;
    top:10px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:200px;
    width:210px;
    float:left;
    cursor:pointer;
    background:url('http://i.imgur.com/XDA63.png') no-repeat;}
    .gbcontent{
    float:left;
    border:0px solid #666666;
    padding:1px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 50-w) : moveGB(10-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.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">
    <center>
    <div id="custombg" style="width:260px; height:380px; background:url(URL background Shoutbox) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

<div style="border: 4px groove #ff0090;"><iframe src="http://s1.fibox.ws/chat.php?1487" width="250px" scrolling="auto" height="400px" frameborder="0"></iframe></div>
   
    <div style="text-align:right">

    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </center></div></div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (50-gb.offsetWidth).toString() + "px";
    </script>

TUTORIAL BLOG - Membuat Slide Float Untuk Shout Box

 salam bloggers kawan-kawan..
hari ini aku nak siapkan request seorang blogger baru..
dah lama dah dia request cuma aku  tak sempat buatkan..
sibuk....apa yang dia requestkan?
bagaimana nak buat kotak shout kat tepi..
oo macam belog aku kat tepi tue....so tunggu apa lagi..
mari kita belajar okay!

1. Log In > Dashboard > Design > Add A Gadget > HTML/Java Script
2. Copy Code di bawah ini dan Pastekan dalam HTML/JavaScript..


<div style='display:scroll; position:fixed; top:30px; right:0px;'><div class='clear'></div>

<div class='widget html' id='html1'>
<div class='widget-content'>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<a class='linkopacity' href='http://wanhazel.blogspot.com/2011/08/tutorial-slide-shoutbox-icon-swap-edisi.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='get this'><img border="0" src="http://3.bp.blogspot.com/-prFSZkdoBU8/TkdUO8uS-VI/AAAAAAAAH6g/_EtS2faE1Gc/s1600/iconlink.gif" /></a><br />

<a href="javascript:void(0);"onclick="showHideAT()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SHout','','http://2.bp.blogspot.com/-3kHKyRUc_ZM/TkdSg9OhC6I/AAAAAAAAH6Q/GiCeUPqfgJQ/s1600/b.png',1)"><img src="http://4.bp.blogspot.com/-hrldhDSQShw/TkdSZ1gHtdI/AAAAAAAAH6I/gdus48XBONs/s1600/a.png" alt="SHout" name="SHout" width="140" height="140" border="0" /></a>
<div class='clear'></div></div>



</div></div>

<style type="text/css">
#at{
position:fixed;


top:0;
;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}


.atcontent{
float:right;

background:url(http://3.bp.blogspot.com/-vA5ssdIzofI/TkdSnj7H7qI/AAAAAAAAH6Y/5l_JgSF66o0/s1600/c.png) no-repeat 0 0 transparent;
width:800px;
height:460px;center scroll ;


padding:56px 0 20px 5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">



<br /><br /><br /><br /><br /><br />


<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="240" height="200" src="http://www6.cbox.ws/box/?boxid=589760&amp;boxtag=mvgh52&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-589760" style="border:#EDDEDB 1px solid;" id="cboxmain6-589760"></iframe></div>
<div><iframe frameborder="0" width="240" height="75" src="http://www6.cbox.ws/box/?boxid=589760&amp;boxtag=mvgh52&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-589760" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform6-589760"></iframe></div>
</div>
<!-- END CBOX -->


<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" />
</a></div>
</center></div>
</div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div></div>

Sidebar Comel dan post h3,p

Sidebar comel cam aku punyer tuto nie untuk layout template....First korang klik design pastu Edit Html

Cari kod nie....

 .sidebar .widget { 

dah jumpa? buang coding yang berada kat situ..masukkan coding di bawah...

text-align:center;
border-bottom: 8px groove #ff00ff;
background: url(http://3.bp.blogspot.com/_PK5f-bkuqSc/TPeAyqJfcZI/AAAAAAAAA5M/KYHwTbVUJZY/s1600/widget.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
color: #000000;
font-size:15px;

tuto di bawah untuk post h3

sama jugak seperti di atas cari kod  .post h3 { dah jumpa buang coding yang berada di situ pastu copy paste kod di bawah yang korang cari tadi...

color: #000000;
font-size:15px;
text-align:center;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-shadow: 3px 3px 3px #;
border-bottom: 8px groove #ff00ff;
background : url(http://3.bp.blogspot.com/-mF76-hCb8fo/TxpLTrG5OGI/AAAAAAAAEPQ/paluwhBmtDA/s320/rarebg7.jpg);
padding: 3px; margin: 20px ;

Cara Membuat Print Screen

 Tak payah lah nak guna software photoscape ke apa . Yang ni guna keyboard korang je . Korang tengok dekat bahagian keyboard korang ada tak benda ni ?


 


Yupp . Yang di anak panahkan tu . hekhek . 


1. Contoh lah korang nak printscreen shoutbox korang tu , korang tekan je simbol PrtSc SysRq dekat keyboard korang tu . 


2. Pergi dekat Paint .

 


3. Tekan Ctrl V serentak atau Tekan Paste untuk pasete-kan .

4. Then apa perlu korang buat . Mesti besar kan ? Apa lagi , korang crop je bahagian mana yang korang nak tuh . Lyssa bagi contoh ..

 
5. Lepas paste je , akan keluar macam ini :

 


6. Lepas korang crop mana yang korang suka , akan keluar lah macam ni . Contoh je ehh :

 

7. Masa dah paste tu , korang petakkan bahagian mana yang korang nak , then korang terus tekan crop . 

8. Crop ada di bahagian atas sekali .

9. Lepas tu , boleh lah korang SAVE ! Senangkan ? huhu .


=Selamat Mencuba=

Kredit Lyssa

Scroll Bar Untuk Bloglist


Jom ikut Step di bawah :

1. Log in > Design > Edit HTML  > Tick Expand Widget Templates 

2. Tekan Ctrl F dan carikan tajuk bloglist korang.. contoh macam kat bawah apa nama bloglist sidebar korang punya:

My Blog List 

3. Bila dah jumpa tajuk bloglist korang tu kan , cuba korang tengokk kod-kod di bawah tajuk yang korang carikan tuh . ada takk kod macam ni :

<div class='widget-content'> 

4. Ye ! Sudah jumpakan ? Bagus2! Now, korang buang tanda > pastu jarakkan sedikit baru korang letakkan kod di bawah di sebelah yang korang jarakkan tadi...

style='overflow:auto; width:ancho; height:200px;'>



**Yang warna merah tu , bolehlah gantikan dengan size height korang ye.
5. Sudah kan ? Cuba PREVIEW dulu. kalau menjadi , SAVE terus ok ? ;p

=SELAMAT MENCUBA SEKALIAN !=

Tutorial : Ubah Title Sidebar Kepada Bentuk Imej



Oke , Korang tahu tak , macam mana nak buat title sidebar yang ada gambar ?
Macam dekat bawah ni haa.. :
 
**Saja je Lyssa PrintScreen Banner tuh sekali..
Nak suruh korang letak dekat sidebar korang . hehehe :))

Oke lah . nak buatkan ? Ikot Step di bawah ..
Lyssa hanya tunjukkan , macam mana nak masukkan dalam Blog korang tuh:)
Kalau nak create tuh, create lah sendiri guna photoshop or photoscape ok ??

1. Mula-Mula korang kena cari kelebaran (width) sidebar tu dulu ..
 >> Dashboard > Design > Edit Html > Ctrl + F .. cari kod ini :

#sidebar-wrapper {
width: 260px;
** Maknanya , sidebar korang tu , 260px taw ? Kalau tak jumpa kod yang diboldkan tuh.. Korang buat cara ini :

 >> Dashboard > Design > Template Designer > Adjust Width > Lihat size sidebar..


2. Ok , bila dah tahu saiz tu , korang create lah guna photoshop atau photoscape ok ? Lyssa guna photoshop.. hehe :) Lepas tuh , boleh download image korang create tadi di >> http://imgur.com/  


Oke ~
Sekarang ni , Lyssa ajarkan , macam mana nak masukkan dalan blog !
1. Dashboard > Design > Edit Html > Download Full Template . (Penting!!)
2. Sekarang , Tick Expand Widget Template dulu ye !! 

3. Now , cari kod Title Sidebar kita ye. Contohnye , kalau dekat Sidebar korang tulis About Me .. Korang kena Taip About Me (kecil besar tulisan itu tulis sebijik2)!!!
Tekan Ctrl F serentak .. Tapi About Me

4. Bila dah Taip kan , Korang akan jumpa kod macam ni taw :
<b:widget id='HTML1' locked='false' title='About Me' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
   
<h2 class="title"><data:title></data:title></h2>
  </b:if>

 5. Tukarkan Kod Yang Ini :


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

kepada kod imej korang.. Macam ini :

<img border='0' src='http://4.bp.blogspot.com/-3hhKymXSV9M/TbftNQX5pzI/AAAAAAAAAbA/T56J6P4IJng/s1600/1.png'/> 
**Masukkan URL/Link Imej Korang dalan tulisan Warna Merah**


6. Hasilnya akan jadi macam ini :

<b:widget id='HTML1' locked='false' title='About Me' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <img border='0' src='http://4.bp.blogspot.com/-3hhKymXSV9M/TbftNQX5pzI/AAAAAAAAAbA/T56J6P4IJng/s1600/1.png'/>
  </b:if>
 7. Ok , sekarang korang ulang step yang sama dengan title yang lain pulak!


8. Bila dah siap , PREVEIW dulu ! Menjadi takk ? Kalau menjadi , SAVE trus!


 
hehehe...
=SELAMAT MENCUBA YE KORANG=
Baca ni !! :
p/s :Kalau korang tak tahu macam mana nak create title tu..
Boleh Order dekat Lyssa.. RM2 satu title ! Murahh kan ?
Boleh inbox Lyssa dekat Fesbukk Lyssa , sekarang ! ^_^ 

Hilangkan Subscribe to: Post Comments (Atom)


macam mana nak
Hilangkan "Subscribe to : Posts  (Atom)"

Korang tahu ke , apa itu Subscribe to : Posts  (Atom) ??
Tak tahu ? Cuba korang intai blog korang , kat bahagian bawah post tuh , ada tak tulis..
Subscribe to : Posts  (Atom) ?
Ada kan ? so  , now , Lyssa nak ajarkan mcam mana nak hilang kan ?
Cebab nampak cam semak je ennn ??
 hehe!:))

1. Dashboard > Design > Edit Html > Tick Expand Widgets

2. Tekan Ctrl + F , and korang cari kod kat bawah ni :

<!-- feed links -->
 3. And automatik dia akan terhighlight kan ? Then , korang tukarkan kod yang ini :

<!-- feed links-->
    <b:include name='feedLinks'/>

kepada kod yang ini :

<!-- feed links
    <b:include name='feedLinks'/>   -->

4. Jap ! Jangan Save lagi ! Click Preview dulu..

5. Kalau menjadi , terus je SAVE ok ?:)

=Selesai=
 
Kredit Lyssa

Letak Gambar Di sidebar Dengan Mudah

Korang mesti suka letak gambar korang di si debarkan...Apa salahnya cuba tuto di bawah...

Macamana nak Letakkan Gambar Di Sidebar Korang !:)
Bagi , New Bloggers , ini Untuk kamu !

Senang je ! :)

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Paste kod di bawah ini , di ruangan Html/JavaScript itu .

<center><img src="URL GAMBAR KORANG"/></center>

*Kat mana nak amik URL Gambar Korang Sendiri ? Korang boleh upload kat SINI
*Lepas sudah upload , korang copy code yang bawah sekali tu (Direct Link). Ada paham ?

3. Paste URL korang tuh . Then , bila dah siap , SAVE yerk !

P/S : If korang nak tulis apa kat bawah gambar tuh . boleh KLIK SINI . Kat situ , Lyssa ada tunjukkan caranya!:)

Kredit Lyssa

Tutorial : Tukar Perkataan Post A Comment Kepada Gambar Yang Cantik

Tuto Kredit Dari Blog Lyssa  aku sajer publish kat sini untuk aku refer balik...Kat Bawah adalah contoh tukar Post  Comment kepada Gambar yang korang nak...

Sebelum ni , di tulis macam ni je kan ?


 


Oke . Ikut step di bawah ye :

1. Log in > Dashboard > Design > Edit Html > Tick Expand Widget Templates

2. Tekan Ctrl F serentak , dan cari kod ini :

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
 
3. Ada jumpa tak ? Copy kod ini pulak , paste di bawah kod yang korang cari tuh :

<center><img src='URL IMAGE POST A COMMENT'/></center></a>


Contoh macam ni lah :

  Klik untuk nampak lebih jelas :)


4. Yang warna merah tu , korang tukarkan dengan URL IMAGE ye . Lyssa ada bagi yang simple punya kat bawah ni . Kalau suka ambik , kalau tak suka reka lah sendiri . Tak paksa.

5. Dah tu  , korang PREVIEW dulu . Kalau dah preview , tak de ERROR . boleh lah SAVE !

6. Lepas tu , nak check , tengok dekat entry korang . Kalau ada , anda terselamat ! hihi :)


Selamat Mencuba!!