Cara Justify Text Di Sidebar

Biasanya text2 yang ada disidebar akan berada di posisi kiri. Memang kurang menarik. Samada text menggunakan gadget text, HTML/Javascript atau Bloglist. Kita boleh justifykan text tersebut dengan beberapa cara. Ada 3 cara yang biasa Ana gunakan. Sebenarnya nak jawab soalan Man di Cbox ni..

man: tuan, mcmana nk buat text yg kita create dlm gadget supaya center alignment atau justified? text nmpak xmnarik sbb tersandar sebelah kiri je...

Ok...kita boleh justify pada semua text di sidebar atau pada widget2 tertentu saja. Kalau nak justifykan semua, cari kod berikut dalam Edit HTML Antum.

.sidebar {
......
......
text-align:justify;
}

Tambah saja kod merah seperti diatas.

Kalau nak justifykan pada widget tertentu, boleh pilih 2 cara ni.

Antum bukak Layout => Add a Gadget. Pilih HTML/Javascript atau Text. Masukkan kod merah seperti contoh dibawah.

<div style="text-align: justify;">The Al-Qur'an is fully Approved by THE MINISTRY OF HOME AFFAIRS MALAYSIA (KDN) with assistance from THE DEPARTMENT OF ISLAMIC DEVELOPMENT MALAYSIA (JAKIM)
(Ref. No. KDN.Q.03/914/2.3/Q/77/98)</div>

Cara kedua ni pening sikit yer..Kalau susah guna aje 2 cara diatas. Masuk ke Edit HTML dan cari id untuk widget text Antum.. Lihat contoh.

<b:widget id='BlogList1' locked='false' title='' type='BlogList'/>
<b:widget id='HTML2' locked='false' title='Laman Pilihan' type='HTML'/>
<b:widget id='Text3' locked='false' title='Hadis' type='Text'/>

Text merah tu contoh id untuk BlogList Widget. Biru untuk id HTML/javascript. Ungu untuk gadget text.

Jika sudah dikenalpasti widget yang ingin dijustifykan, tambah kod begini sebelum kod ]]></b:skin>.

#BlogList1 {
text-align:justify;
}
atau

#HTML2 {
text-align:justify;
}
atau

#Text3 {
text-align:justify;
}

Preview dan lihat hasilnya.. Kalu jadi save la.

Ok selesai, harap membantu. Pilih mana2 cara yang mudah. Selamat mencuba!!

Menambah Background Pada Blog

Ini cara untuk menambah latarbelakang pada blog kita.. Contoh macam blog ini, Ana hiasi dengan background bintang2 kebiruan. Background ini sesuai untuk template yang tidak terlalu besar, atau ukuran lebar tidak melebihi 950px. Kalau besar macam mana nak nampak kan. Ok caranya..

1. Antum pilih la apa2 gambar yang ingin dijadikan background. Kalau nak cantik gambar tu mesti ikut saiz resolution dekstop Antum. Biasanya 1204x768px. Upload gambar tersebut untuk dapatkan linknya.

2. Seterusnya cari kod dibawah.

body {
background:#000000;
margin:0;
color:#333333;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

3. Dah jumpa, gantikan dengan kod dibawah.

body {
background-image:url(http://alamat gambar.jpg);
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed;
background-position:bottom left;
background-repeat:no-repeat;
}

4. Gantikan tulisan merah dengan alamat gambar Antum.

5. Preview dan lihat hasilnya. Klik butang save jika Antum berpuas hati.

Menambah Kotak Pada Footer

Footer adalah salah satu bahagian penting pada satu² blog. Biasanya kita akan isikan dengan copyright, jenis template atau sebagainya. Boleh juga diisi dengan segala macam widget. Ok kali ini kita akan cuba membahagikan footer ini kepada 3 colom. Caranya..

1. Macam biasa terus ke bahagian Edit HTML. Jangan tanda pada kotak Expand Widget Template. Sebelum tu backup template dengan Download Full Template untuk langkah berjaga2. Tambahkahkan kod CSS ini sebelum </b:skin>.

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

2. Kemudian cari kod berikut.

<b:section class='footer' id='footer'/>

3. Kalau xwujud, cari yang seakan2 dengannya. Dah jumpa, gantikan dengan kod dibawah.

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

4. Kod berwarna merah adalah warna garisan dibawah colom tersebut. Antum boleh tukar warnanya mengikut citarasa masing2. INI KOD WARNA. Boleh preview tuk lihat hasilnya, jika berhasil klik butang save..

Selesai..

Sumber Asli : BlogerBuster

Avatar MyBlogLog Pada Kotak Komen

Pada sahabat yang bertanya.. Sebenarnya ada dua cara untuk pasang avatar pada kotak komen, setakat yang Ana jumpa. Ana lebih suka menggunakan avatar MBL ni. Pernah juga menggunakan avatar author komen, tapi ada beberapa masalah. Ok caranya...

1. Pertama, mestila kene ada akaun MyBlogLog kan, kalau xde daftarla dulu. Dah selesai baru boleh ikut step seterusnya..

2. Kalau dah ade akaun, terus ke bahagian Layout => Edit HTML. Tandakan pada kotak Expand Widget Template.

3. Tambahkan kod dibawah sebelum kod </head>.

<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)

version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/

if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}

//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

//metto tutto minuscolo perchè indexOf è case sensitive

if (autore != ""){
alt="MyBlogLog: " + autore;

myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>

4. Seterusnya cari kod ini.

<b:loop values='data:post.comments' var='comment'>

5. Dah jumpa, tambahkan kod berikut dibawahnya.

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

Ok siap..Klik save template..

Selamat mencuba..

Sumber Asli : O-Om.com

Slider ala Zinmag Primus Template

Hari ade kesempatan nak buat tulis tutorial pasal ni. Sebenarnya slider ni Ana ambil dan edit dari template Zinmag Primus ini. Terjumpa template ini dan dihiasi dengan slider yang menarik. Dah lama mencari akhirnya jumpa jugak. Terima kasih pada Theme Author: Jinsona Design.

Ok ini caranya..Sebelum tu Ana nak kasi tau, maby sesetengah template xsesuai dengan tuturial ni, so kene pandai² sendiri la. Ana akan letakkan kod² asal dari template Zinmag dan sedikit tambahan.

1. Masukkan kode rss ini sebelum kode ]]></b:skin>

#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px; /* Panjang Slider */
float: left;
position: relative;
height:200px; /* Lebar Slider */
}

.slide h2 { /* Tajuk Post */
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px; /* Panjang Tajuk Post Slider */
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet { /* Petikan Post */
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p { /* Post By Disini */
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img { /* Gambar Pada Slider */
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper { /* Butang Stop */
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

2. Kemudian masukkan javascript ini dibawah kode ]]></b:skin>.

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>

3. Kemudian cari kode dibawah ini:

<div id='header-wrapper'>
..........
.........
</b:section>

4. Tambahkan kode berikut dibawahnya.

<!-- Casing -->
<div id='casing'>

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

5. Selesai proses penambahan kode.

Tambahan:

1. Perhatikan text² yang berwarna dan ikut saje arahannya.

2. Slider ini berukuran panjang 1000px. Tukarkan mengikut kesesuaian template Antum. Boleh edit di bahagian kode css atau pada step pertama.

3. Kalau nak tambah bilangan post, tambahkan saja kod dibawah sebelum </div>
<!-- /Mover -->

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

4. Kalau ade yang kurang jelas sila tinggalkan komen dibawah yer. Jangan malu bertanya..

Ok... Selamat Mencuba!

Menukar MBL Recent Reader ke Versi Lama

Tampilan MyBlogLog versi lama ini nampak lebih kemas. Widget ini telah diubahsuai dari yang asal agar kelihatan lebih kemas. Bukan Ana yang ubahla.. Boleh tengok tutorial asal di Blogger Sifu ini.

1. Untuk menukar MBL recent reader ke versi lama sila gantikan kod sedia ada dengan kod dibawah. Pastikan Antum menukar ID_MBL dan NamaUserMBL dengan kod id Antum (ada dalam kod baru tu).

<script src="http://pub.mybloglog.com/comm2.php?mblID=ID_MBL&amp;c_width=330&amp;c_sn_opt=n&amp;c_rows=2&amp;c_img_size=h&amp;c_heading_text=&amp;c_color_heading_bg=eeeddf&amp;c_color_heading=111&amp;c_color_link_bg=eeeddf&amp;c_color_link=c13a10&amp;c_color_bottom_bg=ffffff" type="text/javascript"></script>

<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/community/NamaUserMBL/">
Lihat Teman</a></p>
<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/yjoin/?ref_id=ID_MBL&ref=w">
Join AlmansuQie</a></p>

2. Text biru juga boleh ditukar mengikut selera Antum.

3. Seterusnya ke bahagian Layout => Edit HTML. Tambahkan kod dibawah sebelum kod ]]></b:skin>.

td.mbl_fo_hidden{
display:none;
}
td.mbl_join_img{
}
td.mbl_join{
}
tr#tr0{
display: none
}
th.mbl_h{
display:none;
}

OK siap......

Cara Menghilangkan Tajuk Blog

Tajuk untuk sesuatu blog memang penting bagi memberi gambaran kepada pengunjung mengenai blog tersebut. Cuma yang kurang bestnye text dan color yang disediakan oleh blogger tidak banyak pilihan dan kurang menarik serta susah untuk dipadankan dengan image di header. Biasanya kita akan menampilkan tajuk blog terus ke dalam image di header. Seperti blog ini.

Ok ada dua cara untuk menghilangkan tajuk blog di header. Cara pertama boleh rujuk disini "Memasukkan Gambar Di Header"

Cara kedua dengan menambah kod ini visibility:hidden; di bahagian header.

Dalam keadaan Loggin. Dibahagian Layout pilih Edit HTML. Cari kod lebih kurang begini.

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

atau..

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
visibility:hidden;
}

Tambahkan kod berwarna merah.

Ok siap...

Blogspot Dengan Gaya Wordpress

Pernah tengokkan wordpress?? Kali ini kita buat template kita macam wordpress skit. Kita main sorok-sorok widget. Contoh blog Ana ni..Bila berada di laman utama, semua widget muncul dan bila dibuka salah satu post, sebahagiannya akan tersembunyi. Menarik tak?? Sekaligus mempercepat proses loading.. Ok caranya..

1. Loggin ke Blogger, pada Layout pilih Edit HTML. Jangan lupa tandakan pada kotak "Expand Widget Template"

2. Seterusnya cari kod widget yang nak disembunyikan. Contoh, Ana nak sembunyikan "Recent Reader". Ini kodnya..

<b:widget id='HTML18' locked='false' title='Recent Reader' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div> <b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Tambahkan kod berwarna merah.

<b:widget id='HTML18' locked='false' title='Recent Reader' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div> <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

4. Siap untuk satu widget. Kalau nak sorok yang lain gunakan cara ni juga yer. Dah siap semua, klik Save dan lihat hasilnya.

Selamat Mencuba!!

Sunber: Kolom Tutorial

Cara Menghilangkan Status Message

Status message ini akan muncul di atas posting bila kita tekan label atau kita search artikel dalam blog tersebut. Ada sesetengah orang tidak suka dan rasa menyemak je kan, dan terasa nak buang terus status ini. Ok jangan risau, ini cara membuangnya.

1. Sekiranya kita menekan label, ia akan muncul begini,


2. Sekiranya artikel yang kita cari menggunakan kotak search yang disediakan atau pada navbar tiada, maka status begini akan muncul.



3. Loggin ke Blogger, pada layout pilih Edit HTML. Jangan lupa tandakan pada kotak “Expand Widget Templates”. Untuk langkah berjaga2 sila "Download Full Template dulu".

4. Seterusnya cari kod ini.. Guna Ctrl+F untuk lebih cepat. Delete kod berwarna merah.

<!-- posts -->
<div class='blog-posts'>

<b:include data='top' name='status-message'/>

5. Siap padam klik butang save.. Insyaallah xkan muncul lagi. Kalau Antum memerlukannya kembali, cuma kembalikan kod merah tu ke tempatnya.