Menukar header blog

Untuk menukar atau mengedit header blog dengan cara yang mudah, apa yang anda perlu tahu ialah saiz header. Saiz header blog anda boleh diketahui dalam template blog. Caranya dengan menyalin(copy) url header yang pada blog anda terlebih dahulu. Seterusnya pergi ke Dashboard => Layout => Edit HTML. Tekan Ctrl+F dan paste url yang telah di copy tadi pada ruangan Find dan tekan enter. Anda dapat melihat kod seprti ini #header . Anda juga akan melihat perkataan width dan height. Itulah saiz header anda.

Jika anda menginginkan header yang menarik, anda boleh membinanya dengan menggunakan photoshop tetapi jika anda tidak berkemahiran untuk menggunakan photoshop, memadailah dengan menggunakan aplikasi yang ada pada photobucket.com . Ianya seakan seperti aplikasi paint dan picture manager yang ada pada windows, tetapi mempunyai tambahan tools yang menarik.

Untuk membina header dengan cara ringkas dan mudah, pilih satu background yang sesuai dengan blog anda untuk dijadikan header yang baru. Header asal juga boleh di edit. Cara mudah untuk mendapatkan background dengan mencarinya di dalam Google Image.

Apa yang penting pada background tersebut ialah saiznya mesti sama atau lebih besar dari saiz header yang asal. Uploadkan header yang telah anda pilih ke dalam akaun photobucket. com anda. Jika tiada, silalah berbuat demikian kerana akaunnya percuma. Selesai memuat naik background, corp background tersebut mengikut ukuran header. Ukuran width dan height mestilah sama. Edit gambar tersebut menggunakan tools yang ada pada aplikasi tersebut. Letakkan teks yang sesuai. Untuk menjadikannya menarik, ikutlah daya kreativiti anda. Setelah berpuashati, save header itu. Salin url header tesebut dan gantikan pada url header pada template blog. klik preview dan jika tiada sebarang masalah (error) dan setelah berpuas hati dengan header anda yang baru, klik save.

Contoh:

Url pada header template New-Moon yang di download pada btemplates.com


Header template New-Moon.

Membina header drop down menu

Untuk membina header drop down menu seperti contoh yang di tunjukkan di atas, copy css script dan html script di bawah dan editkan terlebih dahulu dalam notepad. Edit kod warna pada css script yang bertanda background:# dan colour:# dengan melayari http://html-color-codes.com/ dan masukkan link anda pada perkataan link dan tukarkan perkataan tajuk kepada tajuk anda pada html script di bawah. Jangan ubah apa-apa kod atau tag selain daripada apa yang Mari bina blog nyatakan di atas.

Untuk memasukkan script css yang telah anda edit, klik layout dan klik edit html. Kemudian, tick kan pada Expand widget template. Seterusnya tekan Ctrl+F dan taip perkataan </b:skin> atau </style> dan tekan enter. Pastekan css script yang telah di edit itu sebelum atau di atas kod </style> . Setelah di pastekan script css tersebut klik preview dan jika tiada sebarang masalah ataupun error timbul, kembali semula pada edit html tadi dan taipkan pada ruangan find (ctrl+f) perkataan </head> dan pastekan html script yang telah di edit sebelum atau di atas perkataan </head> tersebut.Seterusnya klik preview,dan jika tiada berlaku sebarang masalah ataupun error, klik save dan anda boleh melihat hasilnya.

Jika terdapat sebarang masalah pada script tersebut, sila maklumkan kepada Nescafeais pada ruangan komen posting ini.

p/s: Jika anda tidak mahir memahami script css dan script html, Mari bina blog manasihatkan anda supaya tidak membina header drop down menu ini kerana dikhuatiri anda script template akan menghadapi masalah(error), tetapi jika anda menginginkan juga untuk membinanya, Mari bina blog sedia membantu anda..

Css script

/* Category menu*/ #catmenucontainer{ height:29px; background:#0099FF; display:block; padding:0px 0px 0px 0px; font: 11px Arial, sans-serif; font-weight:bold; text-transform:uppercase; border-top:1px solid #0099FF; } #catmenu ,#catmenu ul { margin: 0px 0px 0px 0px; padding: 0px; list-style: none; height:39px; }#catmenu a { color: #ffffff; display: block; font-weight: bold; padding: 7px 10px 7px 10px; } #catmenu a:hover { background:#ffffff; color: #0099FF; display: block; text-decoration: none; }#catmenu li { float: left; margin: 0px; padding: 0px; } #catmenu li li { float: left; margin: 0px 0px 0px 0px; padding: 0px; width: 130px; } #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited { background:#CCCCCC ; width: 160px; float: none; margin: 0px; padding: 5px 10px 5px 10px; color:#ffffff; } #catmenu li li a:hover, #catmenu li li a:active { background:#ffffff ; width: 160px; float: none; margin: 0px; padding: 5px 10px 5px 10px; color:#0099FF; }#catmenu li ul { position: absolute; width: 10em; left: -999em; z-index:200; }#catmenu li:hover ul { left: auto; display: block; } #catmenu li:hover ul, #catmenu li.sfhover ul { left: auto; }

HTML script

<div id="'catmenucontainer'"><div id="'catmenu'"><ul><li><a href="'link'">Home</a></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /></ul></div></div>

Scrolling Text

Pada permulaannya Mari bina blog akan menunjukkan bagaimana membina scrolling text yang mudah dan ringkas yang hanya menggunakan perkataan.

Contoh:
Hasilnya akan kelihatan seperti paparan dibawah ini.

Selamat Datang ke Maribinablog.blogspot.com

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee>Selamat Datang ke Maribinablog.blogspot.com</marquee>



Untuk menambahkan background berwarna pada teks, penambahan perkataan bgcolour dan kod warna HTML perlu dibuat.

Kod warna HTML boleh di ubah di http://html-color-codes.com/

Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang ke Maribinablog.blogspot.com

Copy,paste dan edit tag di dalam notepad untuk membinanya.

<marquee bgcolor="#000033">Selamat Datang ke Maribinablog.blogspot.com</marquee>


Jika anda ingin mengubah arah pergerakan teks, sama ada ke kiri, kanan, atas ataupun bawah,penambahan perkataan direction dan kod arah pergerakan perlu dibuat.

Kod arah pergerakan:

left= ke kiri
right= ke kanan
up= ke atas
down= ke bawah

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang Ke Maribinablog.blogspot.com

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee direction="right" bgcolor="#000033">Selamat Datang Ke Maribinablog.blogspot.com</marquee>


Untuk menjadikan teks bergerak secara ulang alik, penambahan perkataan behavior beserta kodnya perlu di buat.

Kod behavior= alternate

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang Ke Maribinablog.blogspot.com
Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee behavior="alternate" direction="right" bgcolor="#000033">Selamat Datang Ke Maribinablog.blogspot.com</marquee>


Untuk membina scrolling text yang boleh di hentikan dengan cursor mouse, penambahan perkataan onmouseover, onmouseout dan scrollamount perlu dibuat. Kod this.stop(), this.start () dan kelajuan pergerakan scrolling text juga perlu di masukkan.

Kod scrollamount = 1- 5 (anda boleh mengubah mengikut angka pilihan anda, tetapi semakin tinggi nilainya semakin laju pergerakan teks tersebut.)

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang Ke Maribinablog.blogspot.com

Copy,paste dan edit tag di bawah ke dalam notepad untuk membinanya.

<marquee behavior="alternate" direction="left" bgcolor="#000033" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">Selamat Datang Ke Maribinablog.blogspot.com</marquee>


Anda juga boleh mengubah pergerakan teks secara variasi dalam satu pergerakan.Penambahan perkataan height dan kod saiz perlu dibuat. Tag untuk pergerakkan ke 2 perlu di tambah.

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah.

Selamat Datang Ke Maribinablog.blogspot.com

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee behavior="alternate" direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" bgcolor="#000033"><marquee direction="right" behavior="alternate">Selamat Datang Ke Maribinablog.blogspot.com</marquee></marquee><br />


Untuk membina scrolling text yang mempunyai background bergambar terdapat beberapa tag dan kod yang perlu di tambah.Untuk menukarkan background berwarna kepada background bergambar gantikan perkataan bgcolour kepada background beserta link gambar tersebut. Saiz ukuran background juga perlu di tambah.

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah.

Selamat Datang ke Maribinablog.blogspot.com Di harap anda mendapat manfaat dari posting di sini.

Perkataan-perkatan yang di highlightkan perlu di ubah.

width:338px dan height: 75px diubah kepada ukuran tinggi dan lebar gambar background anda.

background=="http://i593.photobucket.com/albums/tt12/Maribinablog/retro_blue_background.jpg" di ubah kepada link background tersebut.

border="1" iaitu border bagi gambar background di ubah kepada saiz border pilihan anda.

bordercolor="white" iaitu warna border di ubah kepada warna border pilihan anda.

font-size:+30 di ubah kepada saiz font pilihan anda dan mengikut kesesuaian tinggi gambar background

Colour:#FF0000 di ubah kepada kod warna pilihan.

width: 30px dan height: 30px di ubah kepada ukuran saiz gambar yang bergerak di atas gambar background.

src="http://www.uptownshelby.biz/blogger_logo.png" di ubah kepada link gambar yang bergerak di atas background

Selamat Datang ke Maribinablog.blogspot.com Di harap anda mendapat manfaat dari posting di sini di ubah kepada teks pilihan anda.

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<table style="border-collapse: collapse; width: 338px; height: 75px;" background="http://i593.photobucket.com/albums/tt12/Maribinablog/retro_blue_background.jpg" border="1" bordercolor="white"><tbody><tr><td><span style="font-family:arial black;font-size:+30;color:#FF0000;"><marquee><img style="width: 30px; height: 30px;" src="http://www.uptownshelby.biz/blogger_logo.png" /> Selamat Datang ke Maribinablog.blogspot.com Di harap anda mendapat manfaat dari posting di sini. </marquee></span></td></tr></tbody></table><br />

Photobucket slideshow

Apabila kita meletak slideshow dari akaun photobucket, terdapat button link dibawah slideshow yang mungkin menggangu pandangan kita. Adakah button link tersebut boleh di hilangkan?

Pada artikel kali ini, Mari bina blog akan menunjukkan bagaimana menghilangkan button link yang berada di bawah photobucket slideshow. Apa yang perlu anda lakukan ialah pastekan embed code slideshow tersebut pada notepad. Delete tag html seperti contoh pada gambar dibawah ini.


Setelah selesai, copy dan paste ke dalam posting ataupun coloum tepi blog anda.

Hasilnya akan menjadi seperti slideshow di bawah ini.

Membina fungsi audio mp3

Terdapat beberapa cara bagaimana untuk memasukkan fungsi audio mp3 kedalam blog. Cara yang biasa digunakan ialah dengan menyalin kod HTML dari sites yang menyediakan fungsi tersebut dan pastekan ke dalam blog anda. Antara sites yang menyediakan fungsi itu ialah:

http://www.esnips.com
http://musicplayer.sourceforge.net
http://www.radioblogclub.com
http://www.clickcaster.com

Satu cara lagi ialah dengan membina mp3 player secara manual dalam blog anda.

Untuk membina fungsi mp3 secara manual, anda memerlukan flash player yang bertindak sebagai pemain audio dan audio(mp3) yang hendak dimainkan.

Bagi pemain audio(flash player),anda boleh menyalin embed code di bawah dan paste ke dalam notepad terlebih dahulu.

Manual play:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="always" flashvars="valid_sample_rate=true&external_url=masukkan URL audio mp3 di sini" type="application/x-shockwave-flash" height="40" src="http://www.odeo.com/flash/audio_player_standard_black.swf" width="300" wmode="transparent"></embed>

Auto play:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="always"flashvars="auto_play=true&valid_sample_rate=true&external_url=masukkan URL audio mp3 di sini" type="application/x-shockwave-flash" height="40" src="http://www.odeo.com/flash/audio_player_standard_black.swf" width="300" wmode="transparent"></embed>

Kemudian, pergi ke www.upload-mp3.com. Anda perlu membuat pendaftaran terlebih dahulu dan ianya adalah percuma. Setelah selesai proses pendaftaran, muat naik(upload) lagu mp3 anda dan tunggu sehingga proses upload tamat. Salin url bagi mp3 yang anda ingin masukkan ke dalam blog. Hanya salin url tersebut seperti contoh yang di bawah ini.

http://www.upload-mp3.com/files/53697_rrnfd/ACAB-Setelah.mp3

Setelah selesai menyalin url tersebut, kembali ke notepad yang telah anda paste kan dengan embed code audio (flash player) tadi dan paste kan url mp3 anda pada perkataan masukkan URL audio mp3 di sini.

Akhir sekali, salin embed code yang telah siap di edit itu dan paste ke dalam blog anda ataupun di ruangan column tepi.

Cara pasang Read more blog di blogspot

Pilih Layout >> Edit HTML.

Klik pada Expand Widget Template.

Cari di dalam tag HTML seperti yang di highlightkan dalam gambar didala script HTML template anda dengan menekan ctrl+f, taipkan tag yang di highlightkan itu dalam ruangan find, kemudian tekan Enter.

Padam dan copy n paste dengan tag HTML di bawah:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

Setelah selesai, klik save atau anda boleh preview dahulu untuk mengujinya.Jika semuanya berjalan lancar, klik pada Setting >> Formating

Scroll ke bawah sehingga anda jumpa Post Templates.Copy n paste tag HTML dibawah, kemudian klik save setting:



<span class="fullpost"></span>

Untuk menggunakan fungsi ini, anda hendaklah menaip artikel/posting anda menggunakan Posting >> Create >> Edit HTML.Perkataan yang ditaip seperti contoh dibawah akan bertukar kepada fungsi read more..

<span class="fullpost">Masukkan perkataan/ayat yang hendak di read more kan..</span>

Membina kotak

Bagaimana membuat kotak seperti ini

Kadangkala kita ingin membina kotak - kotak yang boleh di add text kan pada posting ataupun column tepi,tetapi tidak tahu bagaimanakah caranya. Alangkah baiknya jika tools di blog mempunyai tools seperti microsoft word, tetapi malangnya tools yang seperti itu tidak ada.

Mari bina blog akan menunjukkan bagaimana untuk membinanya. Apa yang paling penting sekali ialah anda perlu memahami kod script HTML bagi kotak-kotak tersebut. Hanya perlu mengedit untuk saiz kotak, warna dan ketebalan border.

Untuk membina kotak, copy tag HTML dibawah dan paste pada notepad. Edit text atau link. Setelah selesai mengedit, copy dan paste kan pada posting atau bahagian column tepi anda.

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 100px; height: 100px; text-align: center; "></div>