Senin, 31 Oktober 2011

Tutorial cara buat super simple homepage#1

Homepage aku yang simple ni di inspirasikan oleh www.google.com..ada banyak website carian tapi google juga yang paling ngetop..antara sebabnya page google simple,ringan.

Sebelum membuat homepage super simple ni anda harus faham konsep pembuka dan penutup code serta asas memaparkan widget pada laman tertentu...pada mereka yang hendah membuat homepage simple, aku syorkan anda menggunakan classic template..lebih senang dan ringan..

Mula2 pergi ke desbot...desaign..edit html...JANGAN tick pada expand widget template.Cari code <body> kemudian masukkan code..<b:if cond='data:blog.homepageUrl != data:blog.url'>
SELEPAS ATAU DI BAWAH code <body>pasti anda tahukan code tu untuk apa..

Kemudian cari code </body> masukkan masukkan code </b:if> SEBELUM ATAU DI ATAS code </body>..kemudian klik preview..blog anda akan kelihatan sepertiini klik untuk tengok ..blog anda akan jadi kosong.. x ada apa2..
jangan save dulu... cari code footer...

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

cut code footer tersebut dan paste sebelum code </body>..contoh seperti berikut...

</b:if>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</body>
</html>
Kemudian preview jika ok save...

Pada desaign--page element...akan kelihatan pelik...add a gadget hanya tinggal pada bahagian footer...
dalam tutorial ni aku x hilangkan bahagian footer.. untuk memudahkan aku memasukkan widget pada masa akan datang...jadi setiap widget pada bahagian footer aku gunakan code yang sama seperti di atas...

Berikut adalah screen shot pada page element jika anda buat seperti tutorial ini...

Gambar di atas adalah sebelum...

Gambar di atas adalah selepas anda buat seperti tutorial...

dan apabila anda hias..hiasan tu akan wujud pada page element...tengok contoh di bawah...

Pelikkan... hahaha..Cara hias tu aku akan buat nanti... kalau mau buat homepage simple pastikan anda faham tutorial ni..jika bingung tanya saja di ruangan komen...
lalalala....sekian

Minggu, 30 Oktober 2011

Tips melajukan page loading blog #3

Tips malajukan page loading blog

tips yang ke tiga adalah penggunaan template....template memainkan peranan penting untuk melajukan page loading..template yang paling ringan untuk blogspot ialah classic template..template ni paling asas..x ada apa2 efek css..

banyak blog yang simple mimple tapi template x simple..
ada yang pakai template yang super cool tapi tidak memaksimakan penggunaan template tersebut...mmg rugila..ibarat beli motor DUCATI tapi bawa dengan kelajuan 70km/j..baik beli HONDA C70...hahaha...apa punya perumpamaan la...

banyak lagi kebaikkan classic template selain ringan seperti senang untuk di edit..segala pembelajaran aku mengenai coding html dan css adalah menggunakan template classic..

Blog ni menggunakan classic template..sebab tu ringan..aku cuma tambah efek yang aku mau...tapi template blog ni aku jadikan super simple template..sebab ada coding yang aku buang..seperti coding css untuk header dan header html,page navigation(sebab tu x ada next dan prev serta homepage..homepage yg ada aku buat sendiri),coding html share(coding ni ada pada setiap template blogspot..tp x ada yang guna pun)

Berikut adalah 2 blog aku yang di uji kelajuan page loading..jom tengok mana lagi laju...

Gambar di atas adalah blog Wordpress..selfhosting domain. Pada home page aku hanya paparkan header php. Javascript yang ada hanyalah slider javascript...
Keputusan ujian..anda blh tgk pada gambar tersebut

Gambar di atas adalah blogspot..pada masa aku buat ujian ni terdapat 2 javascript pada homepage iaitu slider dan neon text..
Keputusan ujian..ada pada gambar tu..

NOTA : WORDPRESS BUKANNYA X LAJU..CUMA AKU X PANDAI NAK EDIT TEMPLATE WORDPRESS..Kepada pengguna WORDPRESS yang terbaca entri ini sila bagitau template wordpress mana yang paling simple dan paling ringan pada ruangan komen untuk di uji kaji..

Berikut adalah keputusan ujian website idola dan inspirasi aku..www.google.com

Berdasarkan keputusan ujian di atas..aku cuma menang grade performance..huhu..website ni memang laju..sebab di pakai enjin jet pejuang..ahahaha

Blog anda bagaimana pula? cuba la test...PingDom Tools Speed Test

Maaf sekiranya ada pengguna WORDPRESS kecil hati,terkilan dengan ujian yang dilakukan..tujuan pengujian adalah untuk pembelajaran,BUKAN untuk merendah-rendahkan
abiliti WORDPRESS...SILA JANGAN SALAH FAHAM...setiap pelantar blog ada pro dan kontra...masing2 ada kelebihan dan kekurangan...Sekian...

Sabtu, 29 Oktober 2011

Cara pasang kursor bintang berjatuhan

Sebagai mana tajuknya tutorial cara kali ini adalah cara untuk memasang kursor bintang berjatuhan.Efek bintang berjatuhan ini akan tampil bila mana cursor digerakkan pada blog.

Berikut adalah cara memasangnya:
1.Login ke Blogger
2.Klik Pada Design → Layout
3. Add a Gadget → HTML/JavaScript

Kemudian pilih warna yang dingini pada kod berikut :

Bintang warna hitam
<script src="https://sites.google.com/site/teknikbuatblog/tbb/black_star.js" type="text/javascript"></script>

Bintang warna hijau
<script src="https://sites.google.com/site/teknikbuatblog/tbb/green_star.js" type="text/javascript"></script>

Bintang warna merah
<script src="https://sites.google.com/site/teknikbuatblog/tbb/red_star.js" type="text/javascript"></script>

Bintang warna puteh
<script src="https://sites.google.com/site/teknikbuatblog/tbb/white_star.js" type="text/javascript"></script>

Bintang warna kuning
<script src="https://sites.google.com/site/teknikbuatblog/tbb/yellow_star.js" type="text/javascript"></script>

Bintang warna biru
<script src="https://sites.google.com/site/teknikbuatblog/tbb/blue_star.js" type="text/javascript"></script>

Bintang warna pink<script src="https://sites.google.com/site/teknikbuatblog/tbb/pink_star.js" type="text/javascript"></script>

Setelah memasukkan kodnya,klik pada save untuk melihat hasilnya.
update 8/5/2013

Jumat, 28 Oktober 2011

Cara buat super simple header | Image Header

Sebelum ni aku ada buat tutorial cara buat super simple header text..kali ni image pula...memang cukup simple..

kalau aku mau buat header pun aku akan buat macam ni..x perlu coding CSS.. kalau anda mau buat macam ni aku syorkan anda buang coding CSS dan coding html yang asal..baru ringan sikit blog..huhu...

Jom ikuti tutorial cara buat simple header

sebelum tu aku mau kasi sikit penerangan tentang code html yang akan digunakan..

<br/> - untuk membuatkan header ke bawah sikit..kalau guna banyak code ni makin ke bawah header tu
<center></center> - untuk centerkan header tu...

<a href="URL Homepage anda"></a> - Link ke homepage bila orang klik gambar tu..
<img src="URL Gambar Header"/> - Url gambar header
<h1></h1> - saiz tulisan..paling besar h1 paling kecil h6..kalau x mau gunakan code ni pun boleh....
<p></p> - perengan..untuk tulis penerangan blog..kira description la

Ok sekarang tengok macamana aku cantum code di atas...

<br/>
<center><a href="http://blogger-blog-tutorial.blogspot.com"><img src="http://blog.jokeroo.com/wp-content/uploads/2011/07/Youve_Been_Hacked.jpg"/></a></center>
<h1><center><p>BLog anda Kena hack...lalalala</p></center></h1>

di atas tu code yang aku dah gabungkan...di bawah ni hasilnya..

BLog anda Kena hack...lalalala

Lebih kurang macam buat banner cara ni...lepas setel ni copy kemudian pergi ke desbot---desaign---edit html..x perlu tick pada expand widget template...Cari code <body> kemudian paste code tadi SELEPASSS CODE <body> atau di BAWAH CODE <body>
Cth :

<body>
<br/>
<center><a href="http://blogger-blog-tutorial.blogspot.com"><img src="http://blog.jokeroo.com/wp-content/uploads/2011/07/Youve_Been_Hacked.jpg"/></a></center>
<h1><center><p>BLog anda Kena hack...lalalala</p></center></h1>

Gambar di bawah adalah contoh screenshot super simple image header..

Senangkan...macam makan kacang tanah...

Sekian...

Kamis, 27 Oktober 2011

Tutorial cara buat backlink pada komen

Aku selalu buat backlink pada blog yang aku komen..supaya senang owner blog mau jejak..

Caranya mudah saja..kalau anda rasa susah..copy ja..huhu...

mula2 anda komen..lepas dah komen baru letakkan backlink..cth:

saya suka entri ni..nice share..<br/><a href="http://blogger-blog-tutorial.blogspot.com">Blogger Blog Tutorial</a>

hasilnya seperti berikut..

saya suka entri ni...nice share..
Blogger Blog Tutorial

senangkan..Sekian

Tutorial cara buat recent post bergambar

Tutorial cara buat recent post bergambar pada blog

Scipt ni dari abu farhan..ramai orang guna script recent post versi ni..cara pasang senang saja...desbot---desaign---ada gadget---html/ javascript..copy code di bawah ...

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

        <script language='javascript'>

    imgr = new Array();

    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7fIt0twNGLJJqBQi9XC27AFQRj2BuluHLi7b93yyUyfjYF31wJ31CY0ckweXWcb7CeUB6j3K8Y7BmY291t-ICabH8VrLICRUIPMEEpvYGM5c_nwOGUklhKDpIsdVBRJEXQ5jgylFTFc/s1600/coretv+no_image.jpg";

    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7fIt0twNGLJJqBQi9XC27AFQRj2BuluHLi7b93yyUyfjYF31wJ31CY0ckweXWcb7CeUB6j3K8Y7BmY291t-ICabH8VrLICRUIPMEEpvYGM5c_nwOGUklhKDpIsdVBRJEXQ5jgylFTFc/s1600/coretv+no_image.jpg";

    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7fIt0twNGLJJqBQi9XC27AFQRj2BuluHLi7b93yyUyfjYF31wJ31CY0ckweXWcb7CeUB6j3K8Y7BmY291t-ICabH8VrLICRUIPMEEpvYGM5c_nwOGUklhKDpIsdVBRJEXQ5jgylFTFc/s1600/coretv+no_image.jpg";

    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7fIt0twNGLJJqBQi9XC27AFQRj2BuluHLi7b93yyUyfjYF31wJ31CY0ckweXWcb7CeUB6j3K8Y7BmY291t-ICabH8VrLICRUIPMEEpvYGM5c_nwOGUklhKDpIsdVBRJEXQ5jgylFTFc/s1600/coretv+no_image.jpg";

    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7fIt0twNGLJJqBQi9XC27AFQRj2BuluHLi7b93yyUyfjYF31wJ31CY0ckweXWcb7CeUB6j3K8Y7BmY291t-ICabH8VrLICRUIPMEEpvYGM5c_nwOGUklhKDpIsdVBRJEXQ5jgylFTFc/s1600/coretv+no_image.jpg";
    showRandomImg = true;

    boxwidth = 255;

    cellspacing = 6;

    borderColor = "#232c35";

    bgTD = "#000000";

    thumbwidth = 70;

    thumbheight = 70;

    fntsize = 12;

    acolor = "#666";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = true;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 10;

    home_page = "http://blogger-blog-tutorial.blogspot.com/";

    limitspy=4
    intervalspy=4000

    </script>

    <div id="spylist">
        <script src='http://kangdadang.googlecode.com/files/recentpostthumbspy-by-abufarhan.js' type='text/javascript'></script></center>

gantikan http://blogger-blog-tutorial.blogspot.com dengan url blog anda..kemudian save..senangkan

sekian

Tutorial cara buat recent post tanpa gambar

Tutorial cara buat recent post tanpa gambar

Recent post versi ni x ada gambar..hanya tajuk entri sahaja..
Live demo

Cara pasang widget..mula2 pergi ke desbot---desaign---ada gadget---html / javascript...copy cody di bawah dan tukar tulisan yang berwarna merah tu kepada url blog anda...

yang warna biru tu adalah jumlah recent post yang akan di paparkan..jadi anda boleh edit mengikut kesesuaian yang anda rasa sesuai dengan belog anda...sekian

Tutorial cara buat efek winter sonata pada blog

Tutorial cara buat efek salji pada blog by Blogger Blog Tutorial

Efek ni memang cool..sebab ada salji..haha..tapi hanya sesuai untuk blog kaler background warna gelap...cara pasang efek winter sonata ni senang..
desbot--desaign---ada gadget---html / javascript

copy code di bawah..paste kemudian save..selesaiii...

Senin, 24 Oktober 2011

Tutorial letak efek salji pada blog

Dalam tutorial sebelum ini saya telah muatkan artikel berkenaan cara membuat simbol hati berguguran pada blog.Kali ini pula seakan akan sama juga iaitu meletakkan efek salji pada blog.

Langkah langkah membuatnya:
1.Login ke dashboard --- page element

untuk dashboard baru klik design---pilih layout

2.Add a gadget --- HTML/Javascript
3.Masukkan kod berikut padanya:

warna merah
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljimerah.js"></script>

warna biru
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljibiru.js"></script>

warna purple
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljipurple.js"></script>

warna hitam
<script type="text/javascript" src="https://sites.google.com/site/teknikbuatblog/tbb/saljihitam.js"></script>

warna putih
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljiputih.js"></script>

4.Setelah berpuas hati klik pada save

Selamat mencuba ….. :)

update 8/5/2013

Rabu, 19 Oktober 2011

Cara pasang butang share melayang

Butang share ini adalah seperti butang share yang lain yang mana kebiasaannya diletakkan dibawah atau pun diatas posting . Butang melayang ini ikut bergerak jika kita melakukan scroll pada blog.Oleh kerana ia bergerak keberangkalian pengunjung untuk klik butang tersebut adalah lebih besar kerana lebih mudah untuk mencapainya .Mengandungi butang untuk google plus,facebook dan juga twitter.

Berikut adalah cara cara bagi pemasangannya:

1.Masuk ke dashboard-Klik Layout-

2.Pilih ---Add a gadget

3.HTML/ Javascript

4.Masukkan kod dibawah ini:

5.Klik pada butang save

Jumat, 14 Oktober 2011

Cara mengembalikan kotak komen yang hilang

Kotak komen yang tidak muncul dibawah posting adalah sesuatu hal yang amat memeningkan.Tanpanya sudah tentu pengunjung tidak dapat memberi komen pada posting.Jika anda kehilangan kotak komen secara tiba tiba dibawah posting,berikut adalah cara bagi mengatasinya.

Langkah langkahya adalah seperti berikut:

Pada dashboard pilih Template---Edit HTML

Kemudian cari kod berikut:

Setelah jumpa kod diatas perhatikan kod dibawah ini:

Kemudian letakkan kod dibawah ini pada pada teks letak kod disini pada kod diatas

<data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup' style='width:100px;height:20px;'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
    </script>

Untuk melihat hasilnya klik pada mana mana posting bagi melihat tampilan kotak komen.

Kehilangan kotak komen mungkin disebabkan beberapa kod telah hilang atau telah terhapus semasa anda mengedit template.Adalah disarankan supaya anda membuat backup bila membuat sebarang perubahan pada template supaya mudah untuk kita mengembalikan kepada asal jika berlaku sesuatu yang tidak dingini.Menukar template adalah pilihan terakhir tapi kita akan kehilangan apa apa yang telah diletakkan pada template.

Cara diatas cuma setelah anda pastikan setting comment pada dashboard adalah betul tapi masih tidak muncul kotak komen.

Cara menetapkan setting kotak komen pada blog

Masuk ke dashboard—setting dan pilih comments
Pastikan setting adalah seperti berikut:
Comment Location--Pilih Embedded

update 8/5/2013

Rabu, 12 Oktober 2011

Membuat kesan drop shadow pada gambar

Meletak imej pada artikel adalah sesuatu yang membawa kesan yang mendalam kerana gambar lebih bermakna dari seribu perkataan.Boleh memberi pelbagai gambaran pada pembaca jika dibandingkan dengan teks saja.Posting kali ini adalah cara bagi memberi kesan drop shadow pada gambar yang ada pada blog anda supaya nampak lebih menarik lagi.drop shadow adalah kesan bayang yang timbul pada sesuatu objek.

Cara membuat kesan drop shadow pada gambar:

Pada Dashboard --Pilih Template--edit HTML

Cari kod ]]></b:skin> pada template dan letakkan kod dibawah ini diatasnya

.drop-shadow img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQnunLlGvL7z9zx9tilJh-kuuo1oZxnaZsErBjW4dpP5w7Wrrok6IT0ak8O9qSz7X23t6Etl8CV6w_erd_lnDEHDYE6f-oMTgXF-TPkeORyzxwiHuLXgItGUP_1q5eRfUcPrcfk6b6FU/s1600/drop+shadow+.png) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

cari kod <data:post.body/>
dan gantikan dengan kod

Kemudian simpan template anda
Selamat mencuba :)

Selasa, 04 Oktober 2011

Cara buat simbol hati(love) berguguran

Tutorial kali adalah bagi anda yang suka menghiasi blog dengan bermacam macam widget iaitu cara membuatkan simbol hati yang berguguran pada blog anda.

Langkah langkah bagi membuatnya:
Log in ke blogger Pilih design--Layout--Add a gadget

Pilih ruangan dibawah header

HTML/javascript

Masuk kan kod ini:

Kemudian klik butang save dan lihat hasilnya.

update 9/5/2013

Minggu, 02 Oktober 2011

Cara pasang screen saver pada blog

Screen saver biasanya terdapat pada komputer dan juga handphone.Kegunaanya adalah jika sedang berada dalam keadaan tidak digunakan ia akan meminimakan penggunaan tenaga.Screen saver bukan sahaja pada komputer,di blog kita juga dapat lihat ianya dipasang.dimana paparan blog akan bertukar kepada warna gelap jika tidak digunakan.

Langkah langkah bagi membuatnya.
Log in ke blogger
klik pada design dan pilih template---edit html

cari kod </head> pada template
dan letakkan kod berikut diatasnya.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script>

dan simpan template anda

update 9/5/2013