Tutorial Bina Blog: December 2011

Letak border pada blog

Preview:

Bagi anda yang nak menampakkan kelainan pada blog, boleh cuba trick ini. Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.content-inner {

4) Kemudian, copy dan paste kod di bawah SELEPAS kod .content-inner { yang korang cari tadi:

border: 3px solid #000000;

Contoh:

.content-inner {
border: 3px solid #000000;

Nota:
3px - Tebal border. Tukar kepada nilai yang korang mahu
solid - Style garisan border. Sama ada solid, dashed atau dotted.
#000000 - Warna border. Tukar kepada kod warna yang korang mahu. Pilih kod warna di bawah:
( untuk paparan besar, klik di sini)

5) Lastly, klik preview, dan jika tiada error, klik save template.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Hilangkan Navigation Bar - Cara 2

If cara pertama tak menjadi, cuba pula cara yang ni okeh, jom ikut step by step:

1) Sign in akaun blogger

2) Dashboard >> Design >> Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini

/* Variable definitions

4) Kemudian copy dan paste kod ini SEBELUM / DI ATAS kod /* Variable definitions tadi

#navbar-iframe { display: none !important; }

5) Klik preview, dah hilang nav bar? klik save template.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Floating Button

Preview:

Floating button digunakan untuk memudahkan reader connect dengan sosial network korang. Selain menjimatkan ruang, ianya juga nampak kemas dan cantik. Floating button ini akan muncul pada sebelah sisi kanan atau kiri blog korang. Selain sosial network, korang juga boleh letak button lain untuk floating button ini (cth: email, link blog, youtube dan etc), bergantung kepada apa yang korang nak reader connect.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-12px;'>

<a class='linkopacity' href='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />

</div>

Nota:
- Pada tulisan berwarna biru, masukkan url facebook, twitter dan blog korang.
- Pada tulisan berwarna merah, masukkan url button yang korang nak. Search button di google atau mana-mana image hosting. Kalau nak gunakan yang sedia ada pun takde masalah, tak perlu search.
- Yang warna purple pula, boleh tukar mengikut kesesuaian blog. Left boleh ditukar kepada right.

4) Save dan lihat hasilnya.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Hilangkan Navigation Bar

Kebiasaanya akan ada satu nav bar warna biru pada bahagian paling atas blog. Mungkin korang rasa nav bar tu menganggu ruang dalam blog atau nampak tak cantik. Cara nak remove nav bar ni senang je. Ikuti tutorial di bawah

* kalau tak jadi juga, cuba tutorial yang ni pula ye.

1) Sign in akaun blogger

2) Dashboard > Design > Template Designer

3) Di bahagian Template Designer, klik Advanced > Add CSS

4) Copy kod di bawah dan paste pada ruang Add CSS tadi

#navbar-iframe {
display: none !important;
}

Contoh:

5) Kemudian klik "apply to blog" dan "view blog" untuk lihat hasilnya.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Tukar Newer post, Home dan Older post kepada icon

Sebelum:

Selepas:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

expr:title='data:newerPageTitle'><data:newerPageTitle/>

Bila dah jumpa, gantikan kod warna merah tu dengan kod di bawah (newer icon):

<img src="http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png"/>

4) Kemudian, dengan dengan menggunakan ctrl + F lagi, cari pula kod

expr:title='data:olderPageTitle'><data:olderPageTitle/>

dan gantikan kod warna merah dengan kod di bawah (older icon):

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/go5.png'/>

5) Sekali lagi, dengan menggunakan ctrl + F, cari kod

expr:href='data:blog.homepageUrl'><data:homeMsg/>

dan gantikan kod warna merah dengan kod di bawah (home icon):

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png'/>

Nota:
Pada url berwarna biru, korang masukkan url icon yang korang nak. Search icon tersebut dekat google or mana-mana image hosting. Ataupun just ambik icon yang disediakan di bawah:

(Untuk dapatkan url image, right click pada icon > copy image location )

Credit icon - azhafizah.com

6) Lastly, klik preview, dan jika tiada error, klik save template.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Letak Copyright pada blog

Preview:

Cuba scroll ke bahagian paling bawah blog ini, ada tertera perkataan Copyright© All Rights Reserved Jombinabelog.blogspot.com kan? Caranya, ikuti tutorial di bawah:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

</body>

4) Kemudian, copy kod di bawah dan paste SEBELUM kod </body> yang korang cari tadi

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>

<center>Ayat Copyright anda di sini</center>

Nota:
Pada Ayat Copyrigth anda di sini ,masukkan ayat copyright yang korang nak letak.

Contoh:

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>

<center>Copyright© All Rights Reserved Jombinabelog.blogspot.com</center>

</body>

5) Klik preview, jika tiada error, klik save template dan lihat hasilnya.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Letak ayat di bawah setiap post

Preview:

Untuk trick ini, ayat yang korang masukkan akan muncul di bawah setiap post.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

<data:post.body/>

4) Kemudian, copy kod di bawah dan paste SELEPAS kod <data:post.body/> yang korang cari tadi

<hr/><center>Ayat anda di sini</center><hr/>

Nota:
pada Ayat anda di sini ,masukkan ayat yang korang nak letak

Contoh:

<data:post.body/>

<hr/><center>Sharing is caring ^_^</center><hr/>

5) Klik preview, dan jika tiada error, klik save template dan lihat hasilnya.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Sembunyikan Shoutbox pada sisi kanan blog

Preview:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img560.imageshack.us/img560/7910/tkuningo.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

MASUKKAN KOD SHOUTBOX ANDA DI SINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Nota:
- Gantikan teks MASUKKAN KOD SHOUTBOX DI SINI dengan kod shoutbox korang.
- Url berwarna biru dalam kod di atas merupakan url shoutbox button. Korang boleh pilih button pelbagai warna di bawah. Just copy paste url yang disediakan dan gantikan pada url biru dalam kod di atas

http://img846.imageshack.us/img846/6586/tnavy.png

http://img267.imageshack.us/img267/5049/tmerah.png

http://img560.imageshack.us/img560/7910/tkuningo.png

http://img829.imageshack.us/img829/127/pinkcair.png

http://img710.imageshack.us/img710/7861/pinkkg.png

http://img36.imageshack.us/img36/3569/orenx.png

http://img84.imageshack.us/img84/6496/hijau.png

http://img97.imageshack.us/img97/6060/ungucair.png

4) Save dan lihat hasilnya.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Hilangkan tarikh pada post

Caranya senang je:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > seterusnya ikuti tutorial bergambar di bawah

3)Kemudian klik save.

Selamat mencuba!

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Letak Home button dalam blog

Home button berfungsi untuk memudahkan pelawat blog kembali semula ke halaman utama blog anda setelah banyak page yang dibuka. Untuk trick ini, home button akan muncul pada penjuru blog, sama ada di kedudukan top atau bottom, left or right. Cara nak pasang home button ni senang je, ikuti tutorial di bawah:

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; bottom:10px; left:-12px;'>

<a class='linkopacity' href='Url blog anda' style='margin-left: 1em; margin-right: 1em;' title='HOME'><img border="0"width="50" height="50" src="Url Home icon" /></a><br />

Nota :
Url blog anda - Url / link blog korang ( contoh: http://jombinabelog.blogspot.com)
bottom dan left - untuk ubah kedudukan button, tukar kepada top / bottom dan left / right
Url Home icon - letakkan url gambar icon home yang korang mahu. Boleh search dekat google atau mana-mana image hosting, atau just pilih home button yang disediakan di bawah:

http://img189.imageshack.us/img189/2902/98425686.png

http://img190.imageshack.us/img190/3407/13314253.png

http://img641.imageshack.us/img641/7218/24934856.png

http://img703.imageshack.us/img703/5702/45961315.png

4) Save dan lihat hasilnya.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Tukar perkataan "Comment"

Preview:

Sebelum

Selepas:

Caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Kemudian rujuk tutorial bergambar di bawah:

3) Save dan lihat hasilnya.

Selamat mencuba! :)

Special:

wOoWW...!!!!!

dia dicabar untuk SENYAP...

Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!

watch a movie...

Sharing is caring ^_^

Letak icon sebelah tarikh komen

Preview:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

<dd class='comment-footer'>

4) Dah jumpa? ok, copy dan paste kod di bawah SELEPAS / DI BAWAH kod <dd class='comment-footer'> yang korang cari tadi :

<img src='URL gambar icon'/>

Contoh:

<dd class='comment-footer'>
<img src='http://dl8.glitter-graphics.net/pub/1008/1008838wybxuht5da.gif'/>

Nota:
Pada URL gambar icon, masukkan url gambar icon yang korang suka. Icon-icon mini yang comel korang boleh dapatkan kat sini. Untuk cara dapatkan url gambar pula, rujuk di sini. Ataupun korang just copy paste url image yang disediakan di bawah: