Cara Buat Blog Sendiri

Salam semua, hari ini kozumi akan mengajar anda yang berminat untuk cara membina blog atau cara membuat blog sendiri dengan hanya mengikut step yang akan kozumi kongsikan ini.

Pertama sekali, anda mesti mempunyai akaun blogger dahulu, anda boleh mula daftar di sini http://www.blogger.com/ .

Pada paparan pertama adalah seperti di bawah, anda harus klik button "Sign up" seperti gambar dibawah.

Kemudian akan keluar paparan seperti di bawah, anda harus mengisi form yang disediakan. Selepas selesai klik "I agree to the Google Terms of Service and Privacy Policy" dan kemudian klik "Next Step".

Selepas itu akan keluar paparan seperti di bawah dan anda klik pada button "Back to Blogger".

Kemudian akan keluar paparan Confirm Your Profile seperti di bawah. Anda klik button "Create a limited Blogger profile".

Kemudian akan keluar paparan di bawah, anda isi nama paparan yang anda inginkan, nama ini akan terpapar di setiap posting dan comments di dalam blog anda nanti. Kemudian tekan button "Next Step".

Setelah klik button tadi akan keluar paparan seperti dibawah, anda klik button "New Blog".

Paparan dibawah ini merupakan permulaan anda membina sebuah blog yang anda impikan. Tetapkan Title/Tajuk blog dan Address/Alamat blog impian anda mengikut kesukaan anda. Patikan nama dan alamat blog mudah difahami dan diingati. Selepas itu klik button "Create blog!".

Tahniah! anda sudah membina blog impian anda. Ikuti tutorial berikutnya pula yang akan kozumi kongsikan kepada anda cara bagaimana untuk membuat posting dan menghias blog anda kelihatan menarik insyallah.

Letak background Facebook fan page di blog

Cara letak background belakang Facebook Fan page blog

 Salam semua, hari ini koz akan mengajar anda cara meletakkan background di belakang facebook fan page di blog anda. Moga dengan cara ini dapat menghias blog anda menjadi kemas dan mearik dengan keterampilan Facebook fanpage yang menarik ini. Yang pasti setiap anda pasti memiiki Fanpage facebook sendiri bukan? Jadi sesiapa yang tiada silalah buat okey.

Cara  meletakkan background belakang Facebook Fan page blog  mudah sahaja, anda hanya perlu mengikuti langkah-langkah seperti di bawah.

Langkah 1

Buka HTML/JavaScript blog anda pada bahagian atas Blog posts.
Dashboard > Layout > Add a Gadget > HTML/JavaScript

Langkah 2

Kemudian copy dan paste code di bawah ini pada HTML/JavaScript yang anda buka tadi.

<center>
<div id="Klik" style="background:url(URL Background) no-repeat left top; width:728px;height:260px;padding: 69px 0px 0px;text-align: center;line-height: 0 ">
<center><div class="fb-like-box" data-href="UrlFanpageFacebookAnda" data-width="700" data-height="180" data-show-faces="true" data-border-color="#ffffff" data-stream="false" data-header="false"></div><script language="javascript" src="http://kozumiro.blogspot.com/"></script></center>
</div></center>

Langkah 3

Gantikkan code berwarna BIRU dengan nama Url fan page facebook anda.

Langkah 4


Pilih Url background yang anda berkenan di bawah ini dan copy paste ke bahagian code berwarna MERAH.

Biru

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG-5Y2eAc9xy3dvrynN17TXL5GsvOPuFGnh3J-9eLyhvjEb9yC3O-s9HMOVUv_oDpvROUT8-PuSDf811QAvC8CIAm9kh03DkT4aPlx8M-n6bo4CG8mUTV4lBeWVqfs3H86mMEPucN8xFiR/s1600/birufanpage.png

Hijau

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbe2uOtjgcDW5mARSG7HQ4bNMgfulKwlQpkTx8lRIap5eE8KPtvBybHeygo3GcPTWYfe9BwMSZTCJtg6TRyfLO6aW0NHXhxbXIrWaAd0xTkd1jTYnpc1ACxu7o5jfyzcGTkUa4XiPmtib/s1600/hijaufanpage.png

Hitam

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtMWed4i0EmkrSiFwhsgF1YAF61BT_c_7mE_DVgzwruPZ17Sm8-8gep9s2RqA6CsiJzKNyk2SfS0y24GxZdjh6gnhPHj1cEGt8bEe5m8G8zCVDduRVJWpsDyU07If9svwvk089v6gB6JI/s1600/hitamfanpage.png

Merah

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDnMHj4XkJZ5Z4-z0u_6UJt7XGhMDF8z8B67m6nGjUr-C15FxWkv3VF-U6kDB52ppdrsiKmQjm9wRa11tABbwF0pEM4l-8sowUAWW7npnrq9di8ycHjC-PWABDSMkmsqW2wWxfwlJIdmcl/s1600/merahfanpage.png

Pink/Merah jambu

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrz9l89DDhZ1rn0lUqYv2vLD04_u0LmB0TD7bYcPp_qa2am5agfW8Q41D8pMvYTyQGl-7rZMSz2eOP_bpyPg1QV3G-qWa-fCI5Nk_d2uu_4ugYmkxUfvKsxAfohi-6rluvj9gsXOYjXZ3F/s1600/pinkfanpage.png

Purple/ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgLAjEov6lLqNYQYmeYVyMfsYOhP4UxZbHC3hH6rMqCPImOqx8X68AhHyGpdIRZce8taJOuaWvDrSU6rX4kEVELZawmFeY6htHP6East5mtatsk43ouLQOPJa5YEpYTHL3v5dqWza1dZa/s1600/purplefanpage.png



Langkah 5

Save dan lihat hasilnya.
Kalau berjaya tinggalkan url blog anda di bawah untuk koz lihat hasilnya okey^^.

Tutorial Cara Letak Background Di Belakang Shoutbox Versi 2

Hai all...Hari ini koz nak tunaikan permintaan follower setia budak nakal blogspot iaitu far_east. Permintaanya adalah tutorial letak backgroud di belakang shoutbox versi budak nakalnya(maksudnya serupa seperti shoutbox budak nakal). Koz x nafikan ramai gak yang tertanya-tanya cara nak buat shoutbox seperti budak nakal , jadi hari ini koz akan tunaikan permintaan anda. Seperti sedia maklum, koz pernah juga buat tutorial serupa di SINI . Tutorialnya lebih kurang sama , cuma kelebaran dan saiz shoutbox sahaja berbeza. Jadi mari kita mulakan cara membuat tutorial ini:

Langkah 1

Dashboard>Design>Add a Gadget>HTML/Javascript

Langkah 2

Kemudian copy dan paste code di bawah

<center>
<div id="ShoutMix" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1oRJi87xERYz0mbFrQyF2NuO4Ue0s7J1wJOHLD9YF32kVAqFGoZ-aHxu9710bFUvr6e6VcQ7oK6FWpaqSC1ezEgw6LwxQGqTSHO1kYbBRz2YA1MM7LR6V87QnDRntaDICRXBoyqG0E58/s1600/background+shoutbox+pink+2.png) no-repeat left top; width:584px;height:400px;padding: 200px 0px 0px;text-align: center;line-height: 0 ">  

<!-- Begin ShoutMix - http://www.shoutmix.com -->
Letak Code Shoutbox Anda Di Sini
<!-- End ShoutMix -->

<div id="ShoutMix" style="text-align:right;font-family:verdana;font-style:normal;font-size:3;padding: 5px 20px 0px 0px;line-height: 1"></div>
</div></center>

Langkah 3

Ada beberapa perubahan pada code yang harus korang lakukan.Pada code warna merah,letakkan link background yang korang suka dan ukurannya 584 X 543.Pada code warna biru korang gantikan dengan code shoutbox korang dan ukuran shoutbox korang 500 X 300.


Save dan lihat hasilnya...

Di sini ada beberapa design background yang korang boleh guna pakai yang di reka khas oleh koz

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFpJjQhXPkzpgXBXOcLdcKBSxA3Ml4XQSmtcBzgCzhKgEYNOkxaQFJ7wsbmb9Tg0za-GdQsN17fyuDHQ1YgkDEZmAy_Re_FvPAe1vUJq7osV8t-N-HhI8gW6K59iFOPKp-19XR4mNNup_/s1600/background+shoutbox+biru+2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Fw2Tu7vaElMTbEqMnSUInhjoUZemAqsrSPjbmPilVoLMz6CfBflAjmqqA5AhehlFVXF9YPBiUH5OW-onTM-VmhdwLHpwQmCg89AAT82u4kbcvs2OQK4doffZzbni4khG4xE84Ychvy9x/s1600/background+shoutbox+biru.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPIQbGvXd_xmpeWTOTRHIakH5G4kg-vLSelx0UodVDrC37qinMlPCIhI3mSQ2P2MJXvQbD1Qw4rJtF1Af3vhPSoTJ92HRCh3SeJrP2-aSDK-EiY5ILPwjdXP0_V3G86NMJeTKxlGg98P2c/s1600/background+shoutbox+hijau+2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1wSDUXGXEk3WvWZ94IYdN0U0eaBbb4yrF874mbaO_pdZM5SZll75_68VdJUx91EorECAm-8suEDO2rgwUmeAsDtMT35ea0ACn1AEMZhZxVoo5E7EQHkFBzv3Rxxdvc3nNJqB27dDEFHl/s1600/background+shoutbox+hijau.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLANPho8dZ7OEnQOkJpqayNQRFA2xSk9p9hGor4GyIHNl7NkoGWoZJoT306pQErh_9FrRsE9q-JWQx31PoxHkJQEiJNEnBgx0ePTao0vrZ1RJCgWYVxRetakgovBh7WlyVFKR-Yr0NeRSq/s1600/background+shoutbox+merah+2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi129osh92ehNxwAZLVCSwwYPIaL2diwvr_ecgwfaWc5DhRfDaWvb9-IyLMbaaPtCpoZMB9OTNWTRBqJWzxNTXYC5FTaGe1E27AeFMVaiwLZobJysQW5zChM86S9Q2fH3qETN-gjTjtp4SW/s1600/background+shoutbox+merah.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1oRJi87xERYz0mbFrQyF2NuO4Ue0s7J1wJOHLD9YF32kVAqFGoZ-aHxu9710bFUvr6e6VcQ7oK6FWpaqSC1ezEgw6LwxQGqTSHO1kYbBRz2YA1MM7LR6V87QnDRntaDICRXBoyqG0E58/s1600/background+shoutbox+pink+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnOUuczZUJjWTC-VGNdONxPPfHD01VJ7cr5dXP_TWHG-6jNT-FgT7Q1bJ1i7hLPOFr6dnNYgdCpJaGTey9kJDfL2a-_ATaDA9_a1jmSapx_iyRwnpawlb2Tp-GBPHfwxI-UYiLUWjfbpD/s1600/background+shoutbox+pink.png

Moga perkogsian koz ini menceriakan anda^ ^...
Kalau dah buat tinggalkan kredit tuk budak nakal blogspot okey^ ^...

Tips Cara Mengurangkan Error Validasi W3 Blog

Hai all...Hari ini koz nak kongsi dengan korang tips bagaimana cara menggurangkan Error Validasi W3. Cara Membaikinya amat mudah tetapi koz tak janji ia akan berhasil 100%. Mungkin cukup sekadar menggurangkan Error Validasi W3. Berikut adalah langkah-langkah untuk memulakan tiops pada kali ini.

Mula-mula korang Login blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.(backup Template dahulu)

Tips 1
Cara Gantikan DOCTYPE pada blogger

Cari code di bawah

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Kemudian gantikan code tersebut dengan code di bawah

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tips 2

Cari code di bawah

<b:include data='blog' name='all-head-content'/>

Kemudian gantikan dengan code di bawah

<!-- Blogger Default Meta -->
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://www.blogger.com/profile/I' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=1444540683424050591' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/1444540683424050591/posts/default' rel='service.post' title='Budak Nakal Blogspot - Atom' type='application/atom+xml'/>
<link href='http://kozumiro.blogspot.com/feeds/posts/default' rel='alternate' title='Budak Nakal Blogspot - Atom' type='application/atom+xml'/>
<!-- End Blogger Default Meta -->

Sedikit perubahan harus di lakukan pada code di atas.

Code Warna BIRU gantikan dengan ID blog anda.
Code Warna MERAH gantikan dengan Tittle blog korang.
Code Warna HIHAU gantikan dengan URL blog korang.

Kemudian save...
Camat mencuba okey^^..

Beautiful Trafik Budak Nakal

Hai all...wah hari ini koz rasa teruja sangat-sangat bila tengok trafik budak nakal blogspot dalam minggu ini semakin okey dari bulan sebelumnya.Setiap hari tak kurang dari mendapat 900 ke atas.Kalau ikutkan trafik budak nakal blogspot ini penat mencecah 4k sehari.Maklumlah dah beberapa bulan koz tak mengaktifkan diri ini di sebabkan buzy yang teramat sangat.

Sekarang masa nak berblog sudah ada, bolehlah koz aktif semula.Kalau ikutkan memang koz jarang berblogwalking dalam beberapa minggu ini.Saja nak cuba lihat hasil yang akan berlaku jika koz tak melaksanakan blogwalking.

Sekarang apa yang koz nantikan sudah terjawab.Korang lihatlah trafik di atas, okey tak?Bagi yang otai-otai mesti lagi tinggi trafik korangkan kan kan^ ^...hihi...
terutama blog kak yanmie (blog idola koz ni...eceh macam nak bodek lak :P)

Tutorial Check SEO Blog Korang Dengan SEO Analyser

Hai all...hari ini koz nak ajar korang cara nak semak SEO blog dengan menggunakan SEO Analyser.Web ini akan memberi perkhidmatan untuk korang menyemak SEO blog korang dan ia akan memberikan skor keseluruhan bagi blog korang selepas menjalankan proses analyser.

Mari ikuti langkah-langkah di bawah supaya membantu korang check SEO blog korang dengan menggunakan SEO Analyser ini.

Langkah pertama 

Korang kena klik SINI

Langkah dua  

Masukkan URL blog kat ruangan kosong yang di sediakan(www.yoursite.com)

Langkah tiga 

Klik button CHECK.Kemudian tunggu sehingga proses Analysing data 100%

Langkah empat 

Selepas beberapa saat, result SEO blog korang akan keluar...contohnya seperti ni

Kemudian lihat ke bawah untuk mengetahui SEO yng baik dan yang tidak baik untuk SEO Blog korang.

Kemudian korang repair bahagian-bahagian yang perlu korang repair selepas itu korang chesk semuala dengan menggunakan SEO Analyser mengikut langkah-langkah yang telah di ajar tadi.Senang bukan?

Jika korang hendak tahu, untuk mencapai bilangan peratus yang terbaik, korang mestilah mendapat hasil dalam 70% keatas.Bagi yang mendapat peratus 70% kebawah mungkin menyukarkan blog and menjadi salah satu blog yang mesra SEO .

Moga ilmu yang koz kongsi ini dapat membantu korang untuk membantu blog korang dalam menghasilkan blog yang mesra SEO...Selamat mencuba...

Tutorial Cara Buat Falling Objects Di Blog.

Hai all...Hari ini koz nak kongsi dengan korang widget falling...widget ini tujuannya adalah untuk memaparkan image-image kecil berguguran seperti salji...widget ini tidak memberatkan mana-mana blog yang menggunakannya dan pengguaan widget ini amat sesuai digunakan pada korang yang suka menghias blog...widget ini korang boleh menggunakannya dengan mengikut langkah-langkah yang telah di tetapkan...Amat mudah dan cepat...

Setelah selesai ikuti langkah-langkah di bawah cara memasukkan code tersebut di dalam blog korang

Langkah 1

Dashboard>Design>Add a Gadget>HTML>Javascript

Langkah 2

Code tadi korang copy dan paste ke gadget tersebut dan pada bahagian tajuk korang kosongkan sahaja...
Kemudian save dan lihat hasilnya...Selamat mencuba ^ ^...

Dibawah ini ada beberapa picture yang korang boleh gunakan untuk Step 1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tJwQemcGFqvvZYTQEg4SPS_a5vheISfLFHnthee4X76W9ExhaNkbJbvXSMfhpZu4u0SiQ-tQyFW-d9LrrZu7CjmjTKiA8pb03VVrVIb1E638cn3kWmUUa7sXuRsvX0QbHjbwQdaiipdU/s1600/awan.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhErAaQKha7ZZW4NhG4CAqNygWraCVtzx2wft0VRF5tBTpGJGIi49LvPUFSW3hmDa0MCc8TGLgZgCZ61CYp7WLkhlHBKwc2xNJ4BR6hXnfEtPNBfJWggNW_uTg7u8jGB4U9wDNC96lykxG0/s1600/left.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUv3GjK_EbarjzPXeNjTrEg1ErKAAMKDmNe5WkticgqyelcaeKHY3OriAPfSbeMz2g6XIw8MrqvL8bzDf03opgo-6kE4HXvIYYxXo4eR_9PercxAf9rYwp_GxXkk7d9C1Bn6psHM3N5It/s1600/love.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmAJvitl3LVWjrzd121ik2geOvNS8GFW-bSiKZxuu6Qx2pwVL75YPT7Ib1CM9pm91tesWit6W_rBFKCSThM5caJ8nvxT9DU7E_gZ5AbGwWBB0qKm89gAWf5sBbB0RB0kr7Z3ahfnMMNT3y/s1600/star.png

Tutorial Cara tukar Mouse Cursors Blog.

Hai all ...Hari ini koz akan mengajar korang cara nak tukar Mouse Cursors di blog korang...Cara mengubahnya amat mudah...korang hanya perlu mengikut langkah-langkah di bawah:-

Langkah 1

Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2

Korang Cari code di bawah ini ]]></b:skin>  kemudian copy dan paste code di bawah tepat-tepat di atas code ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_2r4z0S8v-H7XPmZQRiotKXeq6P6UzTc7xgY4lbnlrC3g_w04OteD-GSBlEjtW1C8y_U8ULH5OE2mQl0fLisdFyljeTmSr5zrbQEQBvhLgcM2s0os0ZehRiFwH_t3ko2Wwloj4szNkqH/s1600/cursors+comel.png), progress;}

Langkah 3

Pada code berwarna biru anda boleh gantikan dengan gambar mouse cursor yang korang suka.

Dan di bawah ada beberapa warna cursor yang telah koz design, kalau berminat copy dan paste link image tersebut dan gantikan pada code berwarna biru tersebut...

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnMXfT-zNHyES3AQSBQsrh4U7a9o5HVH_Ap8DlJsuDqA0XA7P4l9Tm-xBCHLFA-oDWdRBpZoHuEOtmXgO34_MXQqmkKvY8mkb5xzJvf0PIkvUvZ8NgaBS75tYymFS0n-hvX3g4n9x9b5J/s1600/cursors+comel+black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8yLq-zKIhqKUHYYWIlFJrnCCIh6PI27nafD86eOeNS_D8ch8qnGN79U2NFiDF54M7_7i7h_KEZVJTFVKY-7FCsFXcR5_rLOeSgTDKRTd5mo6C_U4yeexqKUSt9ZDyZJoLol53FL6H1l2j/s1600/cursors+comel+green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFqONACy73vVN77wV-HdiOm7J-0njRl6aPAK8pkPKhquOGeS5ZwAPaRQJ85g7dKjN2Ne-YUxbt-GEgvCOZhvbGFRfAGm6zCAP6blsF43RiKcaSGZ74NtAE1KhsYnmQRxtNDPHhNQ3yXrIR/s1600/cursors+comel+pink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBDWYK-JNRnUp47RWarXSD_orsPWSdwg2lGyrV0TJP9HfDiKpjhex29KPJmKom-zINPZWAUOV2R4vPpQLlx5aBL6lyFqWQ4UIEPs8ohrZbHKnLO30rQOLMvBcSRyi2HISbKrVPrgTKSrVT/s1600/cursors+comel+purple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_2r4z0S8v-H7XPmZQRiotKXeq6P6UzTc7xgY4lbnlrC3g_w04OteD-GSBlEjtW1C8y_U8ULH5OE2mQl0fLisdFyljeTmSr5zrbQEQBvhLgcM2s0os0ZehRiFwH_t3ko2Wwloj4szNkqH/s1600/cursors+comel.png

Setelah selesai, save dan lihat hasilnya...

Camat mencuba^ ^...

Tutorial Cara Buat Spoiler Di Blog Versi 2

Hai all...hari ini koz akan ajar korang cara membuat spoiler versi kedua dari koz...sebelum ini koz ada ajarkan cara membuat spoiler versi pertama...korang boleh lihat di SINI...Perbezaan versi kedua ini adalah ia kelihatan lebih kemas dan teratur...
Spoiler adalah gabungan kode HTML dan javascript yang bertujuan untuk menyimpan atau menyembunyikan widget blog , kumpulan teks , isi posting dan lain-lain...spoiler juga bertujuan untuk mempercepat loading pada posting blog dan cara membuatnya cukup senang...contohnya korang boleh lihat di bawah

copy paste kode ini:

Tutorial Cara Buat Spoiler Di Blog

Apa macam...okey tak? kalau berminat nak cuba buat korang bolehlah copy code di bawah dan paste di bahagian HTML code...code ini boleh digunakan di bahagian sidebar,posting dan javascript...

&lt;div style=&quot;margin: 5px 20px 20px;&quot;&gt; &lt;div class=&quot;smallfont&quot; style=&quot;margin-bottom: 2px;&quot;&gt; &lt;b&gt;copy paste &lt;/b&gt; &lt;i&gt;kode ini&lt;/i&gt;: &lt;input onclick=&quot;if (this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display != &#039;&#039;) { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;&#039;; this.innerText = &#039;&#039;; this.value = &#039;Hide&#039;; } else { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;none&#039;; this.innerText = &#039;&#039;; this.value = &#039;Show&#039;; }&quot; style=&quot;font-size: 10px; margin: 0px; padding: 0px; width: 60px;&quot; type=&quot;button&quot; value=&quot;Show&quot; /&gt;&lt;/div&gt; &lt;div class=&quot;alt2&quot; style=&quot;border: 1px inset; margin: 0px; padding: 6px;&quot;&gt; &lt;div style=&quot;display: none;&quot;&gt;

isi teks/gambar / kode html 

&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

Ada sedikit perubahan harus dilakukan pada code berwarna merah,korang boleh menggantikannya mengikut ayat yang korang suka dan pada code berwarna biru korang boleh meletakkan teks,gambar atau code html di ruangan berkenaan...

Selamat mencuba...

Tutorial Cara Buat TabView Tanpa Mengubah Template

Hai all...Hari ini koz nak ajar korang cara hendak membuat Widget Tabview di blog...Tutorial ini ramai juga buat permintaan supaya koz dapat mengubah script asal yang jika di guna pakai ia juga memberi effect pada code HTML template...Alhamdulillah koz dapat juga mengubah scriptnya yang tidak akan mengganggu script/code template jika menggunakannya.

Widget ini dapat menjimatkan ruang sidebar sesebuah blog...ia juga turut dapat meringankan loanding sesebuah blog...Jika berminat memiliki widget ini, mari ikuti cara-cara atau langkah-langkah membuatnya:-

Langkah 1

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Copy dan paste code di bawah

<div id="widget" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio98V2oipjDqw1DqdSHshmjeg3zx_W0V5fyM4fwG0Wp6Xuj_mDSuPTCRGlgj_qbeeleinTNT4LpMWWx6NI0TVET8wAkgNNJuU3Zt2bjKb1bEcHDkc4bwn3mfLphKLr27fEzEP6kIPCEJht/s1600/bg+widget.png) no-repeat left top; width:350px;height:406px;padding: 50px 10px 0px;text-align: center;line-height: 1 ">

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Main Menu Top Width */
text-align:center ; height: 30px; /* Top High Main Menu
*/
padding-top:8px; vertical-align:middle; border:2px solid #66CCFF; /* Top Menu border color */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:bold; color:#000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #CCF0FF; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:2px solid #66CCFF; /* Main Box border color */ overflow:hidden; background-color:#FFFFFF; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tajuk 1</a>

<a>Tajuk 2</a>

<a>Tajuk 3</a>
</div>
<div style="width:300px; height:310px; " class="Pages">
<div class="Page">
<div class="Pad">

ISI TAJUK 1(TEXT/CODE HTML)

</div>
</div>
<div class="Page">
<div class="Pad">

ISI TAJUK 2(TEXT/CODE HTML)

</div>
</div>
<div class="Page">
<div class="Pad">

ISI TAJUK 3(TEXT/CODE HTML)

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

</div>

Sedikit perubahan harus dilakukan pada code berwarna merah tetapkan tajuk dan code berwarna biru tetapkan isi kandungan mengikut tajuk masing-masing...

Jika ingin mengubah background widget ini,gantikan di code berwarna ungu dan tetapkan saiz gambar berkenaan ( width 350px height 406px )

Save dan lihat hasilnya...

Selamat mencuba^ ^...

Tutorial Cara Buat Widget Post Terkini

Hai all...hari ini koz nak ajar korang cara buat widget post terkini...widget ini akan mempamirkan post terkini yang berada di blog korang...ia juga mengeluarkan gambar berserta jumlah commment yang berada di setiap post terbaru korang...contoh widget tersebut korang boleh lihat gambar di atas...jadi jika berminat memiliki widget ini,sila ikuti langkah-langkah cara pemasangan widget ini:-

Langkah 1

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Copy dan paste code di bawah

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcsBtPKPidYCLFBUw3eWiCqj3enWSUlGnc2fe5F3ieHLRmCRGUjcEkKwKNuJVd9IxZq0hkiX7SRhocyhhsiZ84FhnFg3RcGainpyHGQmidUOus-NgN0zW1SPbi8xufsfRk1R63f1PnA54/s1600/imagebudaknakal.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcsBtPKPidYCLFBUw3eWiCqj3enWSUlGnc2fe5F3ieHLRmCRGUjcEkKwKNuJVd9IxZq0hkiX7SRhocyhhsiZ84FhnFg3RcGainpyHGQmidUOus-NgN0zW1SPbi8xufsfRk1R63f1PnA54/s1600/imagebudaknakal.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcsBtPKPidYCLFBUw3eWiCqj3enWSUlGnc2fe5F3ieHLRmCRGUjcEkKwKNuJVd9IxZq0hkiX7SRhocyhhsiZ84FhnFg3RcGainpyHGQmidUOus-NgN0zW1SPbi8xufsfRk1R63f1PnA54/s1600/imagebudaknakal.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcsBtPKPidYCLFBUw3eWiCqj3enWSUlGnc2fe5F3ieHLRmCRGUjcEkKwKNuJVd9IxZq0hkiX7SRhocyhhsiZ84FhnFg3RcGainpyHGQmidUOus-NgN0zW1SPbi8xufsfRk1R63f1PnA54/s1600/imagebudaknakal.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcsBtPKPidYCLFBUw3eWiCqj3enWSUlGnc2fe5F3ieHLRmCRGUjcEkKwKNuJVd9IxZq0hkiX7SRhocyhhsiZ84FhnFg3RcGainpyHGQmidUOus-NgN0zW1SPbi8xufsfRk1R63f1PnA54/s1600/imagebudaknakal.png";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://Link Blog Korang.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Langkah 3

Pada code berwarna merah latak link blog korang...

Save dan lihat hasilnya...

Tutorial Meletak Button Tumb Follower dan Dashboard Di Blog

Hai all...hari ini koz nak ajar korang tutorial yang berikutnya.Tutorial kali ini adalah cara meletakkan button tumb follow dan dashboard di blog.Button ini terletak di bahagian atas seperti contoh yang berada di blog ini.Dengan cara ini juga dapat memudahkan pengujung anda untuk memfollow blog anda dan dengan cara ini juga dapat mengurangkan penggunaan widget seperti widget Follower yang berada di blog anda sebelum ini.Button Dashboard pula dapat memudahkan anda untuk ke page dashboard dan ia juga berguna kepada blog yang tidak menggunakan navbar.Mari ikuti langkah-langkah membuatnya:-

Langkah 1

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Copy dan paste code di bawah

<div style="display:scroll; position:fixed; top:5px; right:110px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i21.photobucket.com/albums/b271/kozumi_ro/buttonfollowputih.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i21.photobucket.com/albums/b271/kozumi_ro/buttondashboardbiru.png?6" /></a></div></div>

 Langkah 3

Pada code di atas anda harus membuat sedikit perubahan iaitu pada code berwarna Merah, masukkan ID blog anda.ID blog anda boleh dapatkan di Dashboard > Design kemudian lihat di bahagian link alamat blog korang seperti gambar di bawah


Kemudian pada code berwarna Hijau anda boleh meletakkan URL gambar yang anda suka untuk Button follower .Di sini koz ada hasilkan beberapa jenis warna yang anda boleh gunakan.Cara meletakkannya anda hanya perlu menggantikan sahaja URL tadi dengan URL yang anda suka di bawah ini:-


http://i21.photobucket.com/albums/b271/kozumi_ro/buttonfollowputih.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttonfollowbiru.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttonfolloworen.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttonfollowmerah.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttonfollowhijau.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttonfollowpink.png

Kemudian pada code berwarna Oren ialah  URL gambar untuk Button Dashboard.Di sini juga koz ada menghasilkan Button dalam beberapa jenis warna yang anda boleh menggunakannya.Gantikan sahaja URL tadi dengan URL yang anda suka di bawah ini:-


http://i21.photobucket.com/albums/b271/kozumi_ro/buttondashboardputih.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttondashboardbiru.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttondashboardoren.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttondashboardmerah.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttondashboardhijau.png


http://i21.photobucket.com/albums/b271/kozumi_ro/buttondashboardpink.png

Kemudian save dan lihat hasilnya...

Selamat mencuba^^

Vote sekali okey^^