Rabu, 30 November 2011

Code Tutorial | #Main Wrapper


main wrapper pada blogspot

Seperti penerangan yang lepas2...penerangan ini juga berdasarkan dari template classic...

Apa yang terkandung pada main wrapper ni ialah widget seperti berikut..
 
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>


kalau mau tau itu lah kandungan entri pada blog anda...jika anda delete coding html tersebut maka blog anda akan kehilangan entri..tapi aku belum pernah pula terai delete coding tu..hehehe...jahanam blog kalau aku delete coding tu..hehe...

jika anda tick pada expand widget template...coding pada main wrapper la yang paling rumit sekali...sebelum expand adalah seperti berikut

<div id='main-wrapper'>
<b:widget id='Blog1 locked='true' title='Blog Post' type='blog'/>
</div>

Simple kan.
Main wrapper biasanya diletakkan di dalam outter-wrapper bersama2 sidebar-wrapper...dengan arahan css agar sidebar wrapper dan main-wrapper lepak bersebelahan...

Apa macam..? ada paham...lepas ni topik yang terakhir ialah sidebar dan footer...jika anda faham semua nya boleh la anda buat template sendiri...

Tutorial cara pasang widget Alexa pada blog


Tag - Tutorial,cara,pasang,widget,alexa,pada,blog


Cara pasang widget alexa ni senang saja, sama macam pasang widget yang lain..add a gadget..html / javascript...

Mula2 pergi ke site ni dan isi url blog anda.. Alexa

sila rujuk gambar di bawah...


lepas anda isikan url lengkap blog anda..klik build widget...kemudian dia akan pergi ke page baru..pada page baru tu terdapat 3 jenis widget alexa..iaitu Button(paling banyak digunakan),vertical banner(banner menegak),banner(paling lebar)




antara ke3-3 tu pilih satu saja..copy code...pergi desbot---desaign---ada gadget---html / javascript--- masukkan code alexa tu kemudian save..selesaiii

senangkan...Sekian

Kamis, 24 November 2011

Code Tutorial | CSS Background


Tag - Pemahaman pembelajaran code css untuk background...

Dalam pembelajaran code tutorial kali ni..aku cuma tunjukkan contoh2 yang simple saja..

Code CSS untuk background adalah seperti berikut

background:#fff;

jika anda menggunakan background bergambar pula code css adalah seperti berikut

background:url(url gambar di sini);

simple dan senangkan...

background ni anda boleh letak pada banyak tempat..ramai yang tidak tahu..aku pun x tahu masa aku mula2 blogging dulu...

antara background yang anda boleh setkan ialah seperti berikut...

body -- background utama blog

outer wrapper -- background yang terdapat antara header,sidebar,footer..tapi bergantung pada setting template tersebut...

header --- background untuk header
main-wrapper - background main wrapper
sidebar-wrapper - background untuk side bar
footer-wrapper --- background untuk footer wrapper...

jika setiap CSS di atas anda setkan background berlainan..blog anda akan kaler maler caca marba...

jika anda tidak setkan warna background pada mana2 bahagian termasuk body.. blog anda akan berwarna putih...

background tidak terbatas untuk code2 di atas tadi,warna background anda boleh setkan pada mana2 bahagian template anda termasuk la tulisan...

dengan erti kata lain..asal ada code css maka anda boleh setkan background..

jika anda faham coding html..anda boleh masukkan background pada coding html sebagai contoh



jika anda tidak setkan warna pada css body dan anda buat setting code html untuk body seperti di atas ni..warna blog anda akan mengikut arahan warna tu...

ok cukup sampai di sini sahaja..di bawah ni adalah contoh tulisan yang aku setkan warna background dia... daaa


P 0 L 5 K 4 H 4 C K R 3 W

Rabu, 23 November 2011

Tutorial cara buat border pada ruangan komen


Tag-Cara buat border,letak border,pada ruangan,kotak komen,


Cara letak border pada ruangan komen ni cukup senang..dalam tutorial ni aku menggunakan coding CSS..

Live demo anda boleh tengok pada ruangan komen di bawah...

Mula2 pergi ke desbot---desaign---edit html...jangan tick pada expand widget template...

cari code

]]></b:skin>

kemudian masukkan code berikut .

#comments-block{border:3px solid #ff3366;}


sebelum atau di atas

code yang dicari tadi

penerangan ringkas untuk border...

border:3px solid #ff3366

3px tu tebar border,,kalau anda masukkan 100px..tebal border tu sama macam tulisan yang besar di atas..haha...

solid ni jenis border..jenis ni paling kerap digunakan

#ff3366 ini pula warna border tu...



jika anda ingin mengetahui lebih lanjut pasal border




Klik sini




Code warna





Klik sini



Power Puff Girl Blogger Template


Power Puff Girl ni adalah template yang unik..masa aku pakai template ni ramai yang puji..(thanks all)..jadi aku pun release template ni untuk kegunaan semua..samada mau guna atau uji kaji template ni..terpulang..

template ni ada 3 sidebar...tapi 2 sidebar tu hanya muncul pada homepage sahaja..pada entri..ada 1 sidebar yang tinggal..memang fancy template ni..

Sesuai untuk blog yang tiada header..

Pada homepage x ada scroll bar.. macam homepage google ..

download dan cuba2 la kalau mau tau macam mana fancy template ni...



Live demo







Klik sini Untuk Download

Jika ada sesiapa yang menggunakan template ni sila tinggalkan jejak..aku mau bagi backlink untuk live demo...tapi aku akan delete backlink jika anda tukar template...

Tutorial cara letak multitab widget pada blog [5 tab]


Tag - Multitab widget untuk blogspot,cara letak menu tabview pada blog,

Multi tab ni ada 5 tab..multi tab ni sama ja macam yang 3 tab tu..cuma aku ubah sikit coding jadi la 5 tab...kalau mau buat lebih dari 5 pun boleh..tapi kaji sendiri la..hahha

Live Demo






Masukkan code widget di sini tab 1


Masukkan code widget di sini tab 2




Masukkan code widget di sini tab 4


Masukkan code widget di sini tab 5



Cara pasang senang habes..

Mula2 pergi ke desbot --- desaign --- ada gadget --- html / javascript...copy code di bawah dan save..selesaii





<div id='polskahekjor'>
<style type="text/css">
div.P0L5K4 div.C0D3R{height: 24px; overflow: hidden;float:left;}
div.P0L5K4 div.C0D3R a:hover{ background-color: #eee; }
div.P0L5K4 div.C0D3R a.Active{background:#00ffcc;color:#ff3366;}
div.P0L5K4 div.N0T4C0D3R { clear: both; border: 1px solid #ff3366; overflow: hidden; background-color: #eee;}
div.h3ll0c0d3r{ clear: both; border: 1px solid #ff3366; overflow: hidden;}
div.P0L5K4 div.N0T4C0D3R {height: 100%; padding: 0px; overflow: hidden; }
div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R{ padding: 3px 5px; }
div.P0L5K4 div.C0D3R a{ background:#ff3366; float: left;border-radius:11px 11px 0px 0px;width: 20%; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;font-size: 11px; font-weight: 900; color: #151515;}
</style>
<script type='text/javascript'>
//<![CDATA[
function P0L5K4_C0D3R(P4WN3D, id)
{
var P0L5K4 = document.getElementById(P4WN3D);
var C0D3R = P0L5K4.firstChild;
while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling;
var TT = C0D3R.firstChild;
var i = 0;
do
{
if (TT.tagName == "A")
{
i++;
TT.href = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}
while (TT = TT.nextSibling);
var N0T4C0D3R = P0L5K4.firstChild;
while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling;
var h3ll0c0d3r = N0T4C0D3R.firstChild;
var i = 0;
do
{
if (h3ll0c0d3r.className == 'h3ll0c0d3r')
{
i++;
if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px";
h3ll0c0d3r.style.overflow = "auto";
h3ll0c0d3r.style.display = (i == id) ? 'block' : 'none';
}
}
while (h3ll0c0d3r = h3ll0c0d3r.nextSibling);
}
function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id);
}
function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D, 1);
document.write('');}

//]]>

</script>

<form action="P0L5K4.html" method="get">
<div id="P0L5K4" class="P0L5K4">
<div style="width: 100%;" class="C0D3R">
<a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a><a>tab 4</a><a>tab 5</a></div>
<div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#ffb3c6;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 1

</div>
</div>
<div class="h3ll0c0d3r" style='background:#b3ecff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 2

</div>
</div>
<div class="h3ll0c0d3r" style='background:#FFFF99;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 3

</div>
</div>
<div class="h3ll0c0d3r" style='background:#99B3FF;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 4

</div>
</div>
<div class="h3ll0c0d3r" style='background:#E099FF;display:block;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 5

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>



Ketinggian widget ni aku set 300px..kalau mau tinggi lagi ejas no 300px yang aku kasi besar tu..tulisan tab 1 tab2 tab3 tab4 tab5 tu tukar la ikut suka2 hati kekekekekekekeke.....

senangkan

Code Tutorial | Tinggi dan lebar CSS


-TAG-

Css tinggi dan lebar,Pemahaman tinggi dan lebar,pembelajaran tinggi lebar css


Pembelajaran ni simple dan senang saja..

pada code CSS tinggi ditulis sebagai height...bukan tall...hahaha

manakala lebar pula ditulis sebagai width ...

untuk menentukan ketinggian dan lebar terdapat banyak cara mungkin..huhu..yang aku tau cuma 2 cara saja..sbb 2 cara ni yang paling banyak aku jumpa..

Contoh 1

width:200px

width:40%

nilai ketinggian code di atas tidak sama..

width: 700px lebih spesifik..ceh..

width:40% pula tidak spesifik..bergantung pada situasi tempat..

Contoh 2

#outer-wrapper{width:700px;}

#outer-wrapper{width:40%;}

jika anda setkan lebar outer-wrapper 700px maka lebar dia akan jadi 700px..senangkan..

jika anda setkan outer-wrapper wrapper 40%,lebar tu berdasarkan lebar screen anda..

Contoh 3
Nota : kotak kaler pink tu berukuran 400px darab 400px..haha..




kotak ini di tulis menggunakan tinggi dan lebar px..

code css kotak ni ... height:300px;

code css kotak ni ... width:255px






kotak ini di tulis menggunakan tinggi dan lebar %..

code css kotak ni ... height:100%;

code css kotak ni ... width:90%






ketinggian kotak ini di tulis menggunakan tinggi dan lebar px..

code css kotak ni ... height:554px;

code css kotak ni ... width:200px










kotak ini di tulis menggunakan tinggi dan lebar %..

code css kotak ni ... height:50%

code css kotak ni ... width:50%



Apa macam...boleh faham?...

untuk tinggi dan lebar yang ditentukan oleh











%






tinggi dan lebar dia berdasarkan kotak luar(kaler pink)..contoh kotak pink tu lebar dia ialah 400px..jika anda setkan lebar kotak kelabu tu 50% ...maka lebar kotak kelabu adalah 50& dari 400px = 200px...

senangkan...lalalala

sekian...

Selasa, 22 November 2011

Tutorial cara letak multitab widget pada blog [3 Tab ]


Tag - Multitab widget untuk blogspot,cara letak menu tabview pada blog,


Dulu masa mula2 berblog aku guna widget ni..masa aku guna widget tu mau ada 2-3 kali terai pasang baru jadi..sebab ada setting css lagi..tapi dalam tutorial ni cara pasang widget ni cukup senang..tidak perlu usik setting template...

Aku gabungkan code CSS dan Javascript skali..jadi memang mudah la untuk anda pasang pada blog anda...

Live demo








H3LL0...W3LC0M3



















Mula2 pergi ke desbot --- desaign --- ada gajet --- HTML / Javascript

kemudian masukan code di bawah










<div id='polskahekjor'>
<style type="text/css">
    div.P0L5K4 div.C0D3R
    {height: 24px; overflow: hidden;float:left; }

    div.P0L5K4 div.C0D3R a:hover
    { background-color: #eee; }
div.P0L5K4 div.C0D3R a.Active{background:#00ffcc;color:#ff3366;}

    div.P0L5K4 div.N0T4C0D3R
    { clear: both; border: 1px solid #ff3366; overflow: hidden; background-color: #eee;}

    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r
    { height: 100%; padding: 0px; overflow: hidden; }


    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R
    { padding: 3px 5px; }

    div.P0L5K4 div.C0D3R a
    { background:#ff3366; float: left;border-radius:11px 11px 0px 0px;
    display: block; width: 33%; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 11px; font-weight: 900; color: #151515;}


    </style>

<script type='text/javascript'>

    //<![CDATA[

    function P0L5K4_C0D3R(P4WN3D, id)
    {
      var P0L5K4 = document.getElementById(P4WN3D);
      var C0D3R = P0L5K4.firstChild;
      while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling;
      var TT = C0D3R.firstChild;
      var i   = 0;
      do
      {
        if (TT.tagName == "A")
        {
          i++;
          TT.href      = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");";
          TT.className = (i == id) ? "Active" : "";
          TT.blur();
        }
      }
      while (TT = TT.nextSibling);
      var N0T4C0D3R = P0L5K4.firstChild;
      while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling;
      var h3ll0c0d3r = N0T4C0D3R.firstChild;
      var i    = 0;
      do
      {
        if (h3ll0c0d3r.className == 'h3ll0c0d3r')
        {
          i++;
          if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px";
          h3ll0c0d3r.style.overflow = "auto";
          h3ll0c0d3r.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (h3ll0c0d3r = h3ll0c0d3r.nextSibling);
    }
    function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id);
    }
    function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D,  1);
    document.write('');}

    //]]>

    </script>

<form action="P0L5K4.html" method="get">
<div id="P0L5K4" class="P0L5K4">
<div style="width: 100%;" class="C0D3R">
<a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
<div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#ffb3c6;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 1

</div>
</div>
<div class="h3ll0c0d3r" style='background:#b3ecff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 2

</div>
</div>
<div class="h3ll0c0d3r" style='background:#ecb3ff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>



Penerangan Ringkas -

Sesuai diletakkan pada sidebar yang lebar minimum 180px...Lebar widget ni mengikut lebar sidebar...

Ketinggian widget ni ialah 300px..untuk mengubah ketinggian ubah angka 300px tu...

Ubah tulisan tab 1 tab 2 dan tab 3 ikut suka anda...jumlah patah perkataan untuk setiap tab ialah 10 patah perkataan termasuk space..jika anda masukkan lebih dari 10 tulisan tu nampak pelik..

Sekian..

Senin, 21 November 2011

Tutorial cara buat kotak untuk widget / tulisan #1



Cara buat kotak untuk widget atau tulisan ni senang saja..coding dia simple tapi penggunaan coding ni sangat meluas antara coding yang paling perlu difahami.. ok.. cukup...

Dalam tutorial ni aku sertakan 4 jenis kotak..beserta penerangan ringkas pingkas mingkas kasut..hahhaha



<center><div style="text-align:left;-moz-border-radius:31px 31px;border-radius:13px 13px; padding:5px;height:100px;background:#3D3D3D;color:#bababa;border:2px solid #000fff;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>


kotak bucu semi-bulat




<center><div style="text-align:left; padding:5px;height:100px;background:#3D3D3D;color:#bababa;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>


kotak simple



<center><div style="text-align:left; padding:5px;height:100px;background:#3D3D3D;color:#bababa;border:2px solid #000fff;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>


kotak ber'border'



<center><div style="text-align:left; padding:5px;height:100px;width:300px;background:#3D3D3D;color:#bababa;border:2px solid #000fff;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>

kotak ber'ber'border' dengan kawalan lebar

Penerangan ringkas ;

background:#3D3D3D; -- ini adalah warna background kotak tu..#3D3D3D ialah code warna..tukar ikut warna yang anda mahhuukkaannnn...

color:#ababab; --- ini adalah warna tulisan dalam kotak tu...#ababab adalah code warna tukaq ikut suka hati hang...

border:2px solid #000fff; --- ini code utk border...2px tu tebal border.,cuba tukar 2px ke pada 3000px..mesti pc / lapy anda akan meletup..hahaha... #fff000 adalah code warna untuk border tu...

height:100px; tinggi kotak..tukar angka 100px ikut ketinggian yang anda suka...

width:300px..lebar untuk kotak...jika kotak tu diletakkan pada sidebar..tidak perlu setkan lebar..sebab kotak tu akan ikut lebar sidebar..kalo mau setkan lebar pun blh juga...

overflow:auto; ---jika widget atau tulisan anda lebih panjang atau lebar dari kotak.. akan wujudnya scroll bar..jadi jika kalau malau palau walau tidak mahu scroll bar..pastikan kotak tu lebih tinggi dari widget atau tulisan...

text-align:left; ---code yang akan membuatkan tulisan atau widget anda lepak di sebelah kiri... jika anda tukar code tu kepada --- text-align:center; --- tulisan atau widget akan lepak di tengah2 kotakkkk ... text-align:right untuk tulisan jawi sahaja..('',)

Untuk meletakkan kotak ni pada blog..cara sama macam pasang widget lain...
desaign --- ada gadget---html / javascript..paste kan code dan isi kandungan code sekali kemudian klik



saFe selesai...



code warna rujukSinI



Nota penting : jika anda edit code tu jangan lupa atau silap letak simbol berikut




; : # '



jika anda silap blog anda akan meletup..kebaboom pumpumpum...hahaha

sekian

Tutorial cara buat warna background blog berlainan dengan warna background homepage


Tutorial cara buat warna background berlainan dengan homepage

Memang best jika anda buat warna homepage dan entri..cara buat sangat mudah..caranya ialah dengan menggunakan code CSS dan HTML..

Mula2 pergi ke desbot---desaign---ada gadjet---edit HTML...jangan klik pada expand widget template....

kemudian cari code </head>

kemudian masukkan code di bawah sebelum code
</head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

body {
background:#3366ff;
}

</style>
</b:if>


Tulisan yang kaler pink tu adalah code warna background tu...anda boleh tukar code warna ikut suka hati anda..

untuk menggantikan background yang menggunakan gambar sila rujuk code di bawah..



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

body {
background:url(
http://1.bp.blogspot.com/-7PgdHC-Ox9c/TpF3AsVPn9I/AAAAAAAAAfM/HPbODLCPaLg/s220/httpi.imgur.com4qT7j.gif.gif);
}

</style>
</b:if>



gantikan tulisan kaler pink tu dengan url gambar background anda sendiri...

live demo ada apa entri ni...
Nota Coding : Macam2 yang anda boleh buat dengan code dalam tutorial ni...ia terpulang dengan pemahaman dan kreaviti anda...belek2 la entri tutorial code jika anda ingin memahami coding..

Sekian..

Tutorial cara tukar warna highlight pada blog


Tutorial cara tukar warna pada blog
ni aku jumpa dari blog..eh..aku da x jumpa daaa...nnti kalo aku jumpa aku edit mau bagi bek link sama dia..

Live demo..pada live demo ni anda boleh coba2 terai2 test testing..


Live demo1



Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this

Live Demo2



Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this

Live demo3



Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this Highlight this highlight this


Cara buat efek highlight ni senang saja..main dengan coding css..
Mula2 pergi ke desbot---desaign---edit html....jangan tick pada expand widget template...sebab ini coding css..ada paham..?

Cari code      

]]></b:skin> 

kemudian masukkan code di bawah sebelum atau di atas code yang di cari tadi....




body ::-moz-selection {
background:#000000;
color:#FFFFFF;
}
body ::selection {
background: #ffffff;
color: #000000;
}


background:#000000 ialah warna highlight
color:#FFFFFF ialah warna tulisan yang di'highlight'

untuk tukar warna code..gantikan #000000 kepada kod warna yang anda suka...
Contoh #FF3366 untuk warna pink..

Code warna rujuk

sini



preview..jika ok save,..senangkan

sekian..

Minggu, 20 November 2011

Grey Hat Hacker Template


Grey hat hacker template adalah hasil karya aku yang ke2..template ni memang cool macam designer dia juga..hahaha..nama template tu aku suka2 ja taruh,..hehe..

sidebar template ni sebelah kanan..footer ada 3 section..dengan beberapa efek css yang menarik..jangan malu2 tengok live demo dia..

Live Demo

Klik sini Untuk Download

P/S : Kepada sesiapa yang menggunakan template tu..sila tinggalkan pesanan..aku mau bagi backlink untuk live demo..tapi jika anda tukar template aku terpaksa la remove backlink tu..

sekian thanks...

Sabtu, 19 November 2011

Tutorial cara buat simple Header Untuk Simple template


Tutorial ni atas request pengunjung setia blog ni..walaupun aku kurang mahir untuk membedah isi kandungan simple template..namun aku cuba juga buat..

Simple template ni nama ja simple dan nampak simple tapi coding dia tidak la simple mcm nama template tu..sebab tu aku lagi suka guna template lama..senang mau edit template ikut suka..sebab coding template lama cukup simple..

Mula2 pergi ke desbot---desaign---edit html...jangan tick pada expand widget template...

Cari code <header> (pembuka code) dan padam code tu sehingga </header>(penutup code)....rujuk gambar di bawah..



code yang anda padam tu adalah code header HTML untuk template simple

Oleh kerana anda telah buang code HTML header maka Anda kena buang code CSS header  sebab code tu sudah tiada fungsi lagi....
Berikut adalah code CSS header untuk simple template

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}

Setelah anda delete code HTML dan CSS header tu klik preview..jika ok baru la anda blh buat header sendiri..Simple punya..

Cara buat header..


<center><img src='URL GAMBAR HEADER ANDA'/></center>
Nota penting : untuk coding jika anda terlupa letak simbol remeh seperti ' / >  code tu tidak akan menjadi...
pada template pula code tu akan error..jika anda letakkan simbol remeh di tempat yang tidak betul....akan jadi error juga...


<center><img src='http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg'/></center>

Di atas ni contoh code yang betul...dan di bawah aku sertakan 3 code yang tidak betul..

<center><img src='http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg/></center>
<center><img src='http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg/'></center>
<center><img src=http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg'/></center>

Sekarang kita akan letakkan code tu pada template...

cari code    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
kemudian masukkan code gambar header anda selepas code di atas ni..sila rujuk gambar di bawah..




kemudian klik preview...jika ok save...hasil dia blh rujuk gambar di bawah..


Jadi jika ada error anda boleh rujuk code2 di atas tadi..cuba lihat code anda tergolong kepada code yang betul atau salah..kalau tidak pun anda cuba letakkan code yang betul di atas tu unk percubaan..
..sekian..

Jumat, 18 November 2011

Code Tutorial | #CSS A TAG


Sebelum ni saya ada buat penerangan mengenai HTML A TAG ..

Kali ni penerangan mengenai CSS A TAG..CSS A TAG ni mengawal saiz,warna jenis tulisan HTML A TAG..

Dalam tutorial ni kita akan pelajari 3 asas CSS A TAG iaitu a:link,a:visited dan a:hover...

CSS a:link menentukan warna,jenis,saiz tulisan dll lagi..msh ingat pembelajaran HTML A TAG..? apa saja yang yang menggunakan A TAG ditentukan oleh CSS A TAG
Contoh : a:link
CSS
a:link{color:#ff0000;font-weight:bold;font-size:17px;}

HTML
<a href="http://blogger-blog-tutorial.blogspot.com">Blogger Blog Tutorial</a>

Hasilnya
Blogger Blog Tutorial

CSS a:visited ialah link yang anda telah layari pada sesuatu website atau blog...

Contoh:a:visited
CSS
a:visited{color:#7d7d7d;}

Cuba klik LINK ni..warna link ni aka berubah setelah anda masuk link ni..

CSS a hover ntah mcmana mau terangkan yang aku tau bila anda letakkan mouse pada link..warna link itu akan berubah mengikut warna yang disetkan...

Contoh : CSS a:hover

a:hover {color:#000;}

Cuba letakkan mouse pada link di bawah ni..x perlu klik...

LETAK MOUSE SINI


masih belum faham perkaitan CSS A TAG dan HTML A TAG..? jom tengok penerangan di bawah..

CSS A TAG..ada huruf A..cth a:link , a:visited , a:hover

HTML A TAG  pun ada huruf A sebab tu dorang ada perkaitan...contoh

<a href='http//blogger-blog-tutorial.blogspot.com'>Blogger Blog Tutorial</a>

Kesimpulannya apa saja code HTML pada template anda yang bermula dengan <a dan berakhir dengan </a>   ditentukan warna,saiz tulisan,dll oleh a:link , a:visited , a:hover

apa macam..ada paham..? tanya ja kalau nda paham...OK...daaaaaa..

Sekian

Pasang butang google Plus One

google +1
Google telah telah mengeluarkan butang alternatif kepada Facebook dan tweeter yang dipanggil +1.Jika anda suka dengan sesuatu artikel yang dibaca pada blog atau web anda boleh klik butang tersebut.Klikkan pada butang tersebut membolehkan artikel tersebut mudah dijumpai ketika membuat carian pada google.Butang ini berkesan pada carian search engine kerana ia akan mengira jumlah +1 yang ada.Kiraan ini boleh dilihat jika kita memasuki laman google webmaster tools.

Cara memasangnya.

1.Masuk ke dashboard blogger>Design > Template >Edit HTML



2.Cari kod   </head> dan letakkan dibawah ini diatasnya:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

3.cari kod <data:post.body/> dan letak seterusnya ini dibawahnya:
<div>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>
Size pada kod selain dari standard boleh ditukar kepada small,medium atau tall

4.Kemudian simpan template anda untuk saksikan tampilan butang tersebut.

update 8/5/2013

Kamis, 17 November 2011

Tutorial cara buat recent post dengan gambar Burung Biru Edition


Tutorial cara buat recent post bergambar kali ni bertemakan warna biru..jadi aku namakan Burung biru edition..

Mula2 pergi ke desbot---desaign---ada gadget---html / javascript...copy code di bawah kemudian save..


<center><style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;background:#668CFF;
border:5px dashed #3366FF;-moz-border-radius: 50px 50px; border-radius: 21px 21px; -moz-box-shadow: 0px 0px 80px #3366FF; -webkit-box-shadow: 0px 0px 80px #3366FF;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#3366FF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;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="http://javasriptcode.googlecode.com/files/rpplusimgnt-v1.0.js.txt"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul></center>
<span style="color:#fff; font-size: small;"><a href="http://blogger-blog-tutorial.blogspot.com/2011/11/tutorial-cara-buat-recent-post-dengan_168.html" target="_blank">Get This Widget</a></span>



Live demo...lebar widget mengikut lebar section..jika anda letak widget tu pada sidebar widget tu xkan jadi lebar seperti di bawah ni..live demo ni lebar sebab dia ikut lebar entri..






Get This Widget

Tutorial cara buat recent post dengan gambar Green Puff Edition


Tutorial cara buat recent post bergambar kali ni ialah versi green puff..

Cara pasang widget ni mudah saja..sama seperti widgett lain..tidak perlu edit apa2..

Mula2 pergi ke desbot---desaign---ada gadget---HTML / javascript..copy code di bawah kemudian save...



<center><style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;background:#B3FFE0;
border:5px dashed #00E68A;-moz-border-radius: 50px 50px; border-radius: 21px 21px; -moz-box-shadow: 0px 0px 80px #00E68A; -webkit-box-shadow: 0px 0px 80px #00E68A;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#00E68A;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#7d7d7d;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;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="http://javasriptcode.googlecode.com/files/rpplusimgnt-v1.0.js.txt"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul></center>
<span style="color:#fff; font-size: small;"><a href="http://blogger-blog-tutorial.blogspot.com/2011/11/tutorial-cara-buat-recent-post-dengan_18.html" target="_blank">Get This Widget</a></span>



Live demo...lebar widget mengikut lebar section..jika anda letak widget tu pada sidebar widget tu xkan jadi lebar seperti di bawah ni..live demo ni lebar sebab dia ikut lebar entri..





Get This Widget

UPDATE : untuk mengubah warna background,shadow dan border.. pada area baris atas code tu sila lihat code yang sama seperti code di bawah,,..

tukar code warna pada code yang di highlight

#rp_plus_img{height:212px;overflow:hidden;background:
#B3FFE0;
border:5px dashed
#00E68A;-moz-border-radius: 50px 50px; border-radius: 21px 21px; -moz-box-shadow: 0px 0px 80px #00E68A; -webkit-box-shadow: 0px 0px 80px #00E68A;padding:6px 10px 14px 5px;}


code warna rujuk sini
Rujuk sini

Sekian..

Rabu, 16 November 2011

Tutorial cara buat recent post dengan gambar Purple Lover edition


Tutorial cara buat recent post bergambar kali ni versi purple lover yang di inspirasikan oleh CHA A.K.A Love bug

Cara pasang widget ni sama macam pasang widget lain..aku da edit jadikan widget ni bertemakan purple love

Mula2 pergi ke desbot---desaign---ada gadjet---HTML / Javascript...

Copy code di bawah dan save..

<center><style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;background:#FF99E0;
border:5px dashed #cc00ff;-moz-border-radius: 50px 50px; border-radius: 21px 21px; -moz-box-shadow: 0px 0px 80px #cc00ff; -webkit-box-shadow: 0px 0px 80px #cc00ff;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#cc00ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#7d7d7d;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;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="http://javasriptcode.googlecode.com/files/rpplusimgnt-v1.0.js.txt"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul></center>
<span style="color:#fff; font-size: small;"><a href="http://blogger-blog-tutorial.blogspot.com/2011/11/tutorial-cara-buat-recent-post-dengan_2351.html" target="_blank">Get This Widget</a></span>



Live Demo...lebar widget mengikut lebar section..jika anda letak widget tu pada sidebar widget tu xkan jadi lebar seperti di bawah ni..live demo ni lebar sebab dia ikut lebar entri..






Get This Widget

Tutorial cara buat recent post dengan gambar fancy PINK edition


Tutorial cara buat recent post bergambar pink edition..versi ni untuk pengemar kaler pink..

Cara pasang x susah..aku suda edit semuanya..tinggal pasang di blog ja..

Mula2 pergi ke desbot---desaign---ada gadget---HTML / Javascript...

copy code di bawah kemudian paste dan save selesaii..


<center><style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;background:#EBCCFF;
border:5px dashed #FF33CC;-moz-border-radius: 50px 50px; border-radius: 21px 21px; -moz-box-shadow: 0px 0px 80px #FF33CC; -webkit-box-shadow: 0px 0px 80px #FF33CC;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FF3366;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#7d7d7d;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;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="http://javasriptcode.googlecode.com/files/rpplusimgnt-v1.0.js.txt"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul></center>
<span style="color:#fff; font-size: small;"><a href="http://blogger-blog-tutorial.blogspot.com/2011/11/tutorial-cara-buat-recent-post-dengan_17.html" target="_blank">Get This Widget</a></span>



Live Demo...lebar widget mengikut lebar section..jika anda letak widget tu pada sidebar widget tu xkan jadi lebar seperti di bawah ni..live demo ni lebar sebab dia ikut lebar entri..



Get This Widget


Sekian

Tutorial cara buat recent post dengan gambar version2


Tutorial cara buat recent post version 2 by Blogger blog tutorial..
recent post versi ni nampak cantik sikit berbanding versi yang 1 tu..versi ni ada ringan sikit...

cara pasang recent post ni senang saja..sama macam pasang widget yang lain..

Mula2 pergi ke desbot---desaign---ada gajet----HTML / Javascript..Kemudian copy code dibawah



<center><style type="text/css">
#rp_plus_img{height:424px;overflow:hidden;background:#6e6e6e;
border:3px solid #7d7d7d;-moz-border-radius: 50px 50px; border-radius: 21px 21px; padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#151515;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#fff;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;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="http://javasriptcode.googlecode.com/files/rpplusimgnt-v1.0.js.txt"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul></center>
<span style="color: #fff; font-size: small;"><b><a href="http://blogger-blog-tutorial.blogspot.com/2011/11/tutorial-cara-buat-recent-post-dengan.html" target="_blank">Get This Widget</a></b></span>


angka 10 yang kaler pelik tu anda boleh ubah jika mahu tambah jumlah recent post anda..

Live demo..lebar widget tu mengikut lebar yang di setkan pada section tu..jika anda letakkan widget tu pada sidebar..lebar dia tidak seperti di bawah tu..yang di bawah ti lebar dia ikut lebar entri ni..('',)







Get This Widget

Selasa, 15 November 2011

Code tutorial | #Outer-wrapper


Apa itu outer wrapper..? Penerangan ini berdasarkan classic template.. dalam penerangan ni aku sertakan gambar untuk memudahkan pemahaman...

Outer wrapper ialah pembalut untuk main wrapper dan sidebar wrapper..tanpa outter wrapper blog anda akan jadi lebar selebarnya mengikut lebar screen pengunjung..jika pengunjung menggunakan wide screen lebar sangat la blog anda..

Berikut adalah gambar outer wrapper


pada gambar di atas dalam petak merah tu adalah outer wrapper..ini adalah pandangan umum.. apa yang terdapat pada outer wrapper ialah main wrapper dan sidebar wrapper...



Gambar di atas adalah pada pandangan admin blog..dalam petak merah tu la outer wrapper.....



pada gambar di atas yang dalam petak merah tu adalh main wrapper...




gambar di atas ni adalah sidebar wrapper...

Berikut adalah contoh CSS untuk outer wrapper

#outer-wrapper {
  width: 970px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

Simple kan CSS outer wrapper..efek tu anda blh tambah ikut kemahuan anda..sebagai contoh..anda blh tambah warna background pada outer wrapper...


#outer-wrapper {
  background:#ff3366;
  width: 970px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }
apabila anda masukkan code seperti di atas..warna background outer wrapper dan warna background blog suda berbeza...

Berikut adalah contoh code HTML untuk outer wrapper..contoh ini adalah sebelum anda tick pada expand widget template..sangat berbeza jika anda klik pada expand widget template...

<div id='outer-wrapper'>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='eh kr3w' type='HTML'/>
</b:section>
      </div>

</div>

pada code di atas anda boleh lihat code html untuk main wrapper dan sidebar wrapper..
Apa macam blh ikut...ada paham?...lalalala...senangkan...


jika anda ingin memasukkan header dan footer pada outer wrapper..,,tiada masalah..yang penting anda faham pembuka dan penutup code..

Berikut adalah contoh susunan code CSS dan HTML untuk outer wrapper pada template..



<html>
<head>
<b:skin>
#header
#outer-wrapper {
  background:#ff3366;
  width: 970px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }
#main-wrapper
#sidebar-wrapper
#footer

]]></s:kin>

</head>
<body>
<div id='header'>
</div>

<div id='outer-wrapper'>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='eh kr3w' type='HTML'/>
</b:section>
      </div>

</div>

<div id='footer'>
</div>

</body>
</html>

Senin, 14 November 2011

Tutorial cara letak reply comment pada blog


Disini aku akan menunjukkan tutorial cara letak reply comment pada blog..caranya tidak la susah..senang..mcm mkn kacang..hahaha..




Mula2 pergi ke desbot---desaign---edit html,tick pada expand widget template,

kemudian cari code  <data:commentPostedByMsg/>

kemudian masukkan code di bawah selepas code yang di cari tadi...







<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=GANTIKAN TULISAN INI DENGAN BLOG ID ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>
<big><b>Reply Comment</b></big></a></span>


Code tu perlu diedit dengan memasukkan id blog anda..

Cara cari blog id terlalu senang..lebih senang dari bergerak..hehe..sila rujuk gambar di bawah..


semasa anda pergi ke desaign no id tu dah kluar pada alamat url...

perhatikan betul2..jika anda ada 100 mata gunakan semuanya..ahaha..ambil hanya nombor sahaja..jika kurang atau lebih reply to comment ni tidak akan menjadi...


masukkan id tu pada tulisan yang aku highlight pada gambar di atas..senangkan

UPDATED..:

reply comment hanya akan muncul setelah ada orang komen pada entri anda...


pada gambar di atas yang anak panah tu adalah butang reply comment...bila anda kli butang tu jadi seperti gambar di bawah...jika anda reply comment nama orang yang anda komen tu akan ada pada komen ada...seperti gambar di atas yang dalam petak merah tu..




Sekian

Glow In Dark Template[Beta Version]


Macam tidak percaya..aku mereleasekan template glow in dark..huhu...namun ini hanyalah versi beta atau percubaan..aku memerlukan feedback dari blogger lain untuk memantapkan lagi template ni..

Kepada mereka yang mahu mencuba template ni boleh lah download..di sini..
Template ni x ada header,ruangan komen ada scroll bar,nama blog akan berubah pada setiap entri cth pada entri nama blog akan terpapar bersama tajuk entri,template ni memang ringan..siap boleh lambung lagi..

Akan diperkemaskan lagi..pada masa akan datang..

Live Demo

Download Glow In Dark Template[Beta Version]

Nota : Backup template lama anda sebelum menggunakan template ni..jika anda ada testing blog lagi bagus untuk anda terai test template ni pada testing blog anda...

sekian

Code Tutorial | Kait punca Code CSS dan HTML pada template blogspot


Penerangan ini berdasarkan classic template dan template layout launch 2006..

Sebelum ni aku ada buat penerangan pasal header..seperti yang anda tahu header tu berada di atas bukan sebab CSS atau pun nama dia header.. tetapi sebab pada code HTML header diletakkan di atas..

Pada penerangan tu juga aku ada bagitau bila anda padam seluruh template CSS header,sidebar,widget,entri dll tetap ada pada blog..namun jika anda delete code HTML selepas code sehingga code ...blog anda akan kosong..CSS akan disfuntion..

Berikut adalah contoh CSS dan HTML..code ni memang anda akan jumpa jika anda 'bedah' template yang aku sebut di atas...

#header  - CSS
<div id='header'>  - HTML

#outer-wrapper  - CSS
<div id='outer-wrapper'>   - HTML

#main-wrapper   -  CSS
<div id='main-wrapper'>

#sidebar-wrapper   -   CSS
<div id='sidebar-wrapper'>   -   HTML

#footer   -   CSS
<div id='footer'>   - HTML

Code CSS terletak selepas code <b:skin>  sebelum code  ]]></b:skin>
 manakala
code HTML terletak selepas code <body>   sebelum code </body>

Berikut adalah susunan CSS dan HTML pada template.. dalam susunan ni aku sertakan penutup code untuk code HTML tu..Pembuka dan penutup code aku samakan kaler dia...sila ambil perhatian..




<html>
<head>
<b:skin>

#header
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#footer

]]></b:skin>

</head>


<body>

<div id='header'>
</div>

<div id='outer-wrapper'>

     <div id='main-wrapper'>
     </div>

     <div id='sidebar-wrapper'>
     </div>

</div>

<div id='footer'>
</div>


</body>

</html>



Apa macam boleh ikut x..? macam tu la susunan code CSS dan HTML pada template layout launch 2006 tu..tapi yang ni hanya contoh..x ada efek css dan coding html yang lengkap...hanya untuk pemahaman dan pembelajaran

X faham..tanya ja..sekian..