Tips for Bloggers...!: 2013

Tutorial 76: Tukar Jenis Font Untuk Post Title dan Sidebar Title

Haii . ok. Seperti yang korang tahu , entry ini ..

Saya nak ajarkan korang macamana nak

"Tukar Font Post Title and Sidebar Title" korang itu.

Untuk POST TITLE

1. Dashboard > Design > Edit Html >

2. Search kod ini : (Tekan Ctrl F untuk memudahkan pencarian)

h3.post-title {

kalau tak de , cari kod ni pulak oke?

.post h3 {

3. Then , bila dah jumpa , kat bawah tuh , ada tak kod lebih kurang macam ni lah ?

font: $(post.title.font);

4. Ada kan ? Oke . Copy and Paste Kod kat bawah ni .. DI BAWAH kod kat atas ni . ( Paham tak ?)

font-family:"Times New Roman",Georgia,Serif;

** Ok . Kalau sudah paste , perkataan MERAH itu , korang bolehlah tukar dengan Nama Font yang lain .
Kalau tak tahu nak cari kat mana nama font tuh , korang boleh lah check dekat Microsoft Word korang.
Mesti ada kann ? Then , Copy Jenis Font yang korang suka.. OK ? >.^

Untuk SIDEBAR TITLE

1. Step nye , sama sengan Step Di atas...

2. Cuma , korang kena cari kod yang ini :

h2 {

3. Kalau dah jumpa . Cari kod ini kat bawah tu..

font: $(widget.title.font);

4. Then , paste je kod yang macam saya tunjukkan untuk Post Tiltle.. oke? :)

5. Bila sudah siap , JANGAN Save lagi . Preview dulu.
Kalau menjadi , terus SAVE oke ?:) Chilll~

Tutorial 75: Meletakkan Gambar di Sidebar Dengan Mudah

Hii , Hari ni , Lyssa nak share lah ciket kan ,

Macamana nak Letakkan Gambar Di Sidebar Korang !:)

Bagi , New Bloggers , ini Untuk kamu !

Senang je ! :)

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Paste kod di bawah ini , di ruangan Html/JavaScript itu .

<center><img src="URL GAMBAR KORANG"/></center>

*Kat mana nak amik URL Gambar Korang Sendiri ? Korang boleh upload kat SINI
*Lepas sudah upload , korang copy code yang bawah sekali tu (Direct Link). Ada paham ?

3. Paste URL korang tuh . Then , bila dah siap , SAVE yerk !

P/S : If korang nak tulis apa kat bawah gambar tuh . boleh KLIK SINI .

Tutorial 74: Centerkan Ayat Di Sidebar

Kalau dekat sidebar..

If korang nak Centerkan ayat2 korang kan ...Korang juz buat macam niyh je ehh ! :))

<center>Ayat yang korang nak kan !</center>

Kalau nak ayat korang jadi macam enter...

Korang juz repeat je kod yang sama.. Contoh :

<center>Ayat 1</center>

<center>Ayat 2</center>

<center>Ayat 3</center>

<center>Ayat 4</center>

Bagi nak centerkan gambar korang di sidebar :

<center>Kod Gambar korang</center>

**So , senang je kan ? Kalau sesapa yang dah tahu tuh.. Tak payah ler buang masa baca entry ini ! HHA:)

Tutorial 73: Bentuk-Bentuk Border

ikut step di bawah !

Ada banyak pilihan oo ~ ^_^

** Border-boder kat atas niyh . korang boleh guna untuk Post Title .. Sidebar pun boleh jugak ! ^_^

Untuk Post Title : seacrh >> h3.post-title { (kalau tak de, carilah kod yg lebih kurang macam ini taw? :)

Untuk Sidebar Title : search >> h2 { (kalau tak de, carilah kod yg lebih kurang macam ini taw? :)

#Example_A {

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

#Example_B {

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

#Example_C {

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

#Example_D {

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

#Example_E {

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

#Example_F {

-moz-border-radius: 35px;

border-radius: 35px;

**! Paste kod yang warna MERAH sahaja di bawah kod yang perlu korang carikan tu yea! :)

Tutorial 72: Bubbles Cursor Effect

Kalau nak tahu.. Meh sini mehh Saya ajarin ! :))

1. Dashboard > Design > Add Gadget > Html/Javascript

2. Then , copy kod di bawah and paste di ruangan html/javascript tuh ye :

<noscript></noscript><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

        // <![CDATA[

        var colours=new Array("#ff0080", "#ff0080", "#ff0080", "#ff0080", "#ff0080"); // colours for top, right, bottom and left borders and background of bubbles

        var bubbles=12; // maximum number of bubbles on screen

        /****************************

        * JavaScript Bubble Cursor *

        * (c) 2010 mf2fm web-design *

        * http://www.mf2fm.com/rv *

        * DON'T EDIT BELOW THIS BOX *

        ****************************/

        var x=ox=400;

        var y=oy=300;

        var swide=800;

        var shigh=600;

        var sleft=sdown=0;

        var bubb=new Array();

        var bubbx=new Array();

        var bubby=new Array();

        var bubbs=new Array();

        window.onload=function() { if (document.getElementById) {

        var rats, div;

        for (var i=0; i<bubbles; i++) {

        rats=createDiv("3px", "3px");

        rats.style.visibility="hidden";

        div=createDiv("auto", "auto");

        rats.appendChild(div);

        div=div.style;

        div.top="1px";

        div.left="0px";

        div.bottom="1px";

        div.right="0px";

        div.borderLeft="1px solid "+colours[3];

        div.borderRight="1px solid "+colours[1];

        div=createDiv("auto", "auto");

        rats.appendChild(div);

        div=div.style;

        div.top="0px";

        div.left="1px";

        div.right="1px";

        div.bottom="0px"

        div.borderTop="1px solid "+colours[0];

        div.borderBottom="1px solid "+colours[2];

        div=createDiv("auto", "auto");

        rats.appendChild(div);

        div=div.style;

        div.left="1px";

        div.right="1px";

        div.bottom="1px";

        div.top="1px";

        div.backgroundColor=colours[4];

        div.opacity=0.5;

        if (document.all) div.filter="alpha(opacity=50)";

        document.body.appendChild(rats);

        bubb[i]=rats.style;

        }

        set_scroll();

        set_width();

        bubble();

        }}

        function bubble() {

        var c;

        if (x!=ox || y!=oy) {

        ox=x;

        oy=y;

        for (c=0; c<bubbles; c++) if (!bubby[c]) {

        bubb[c].left=(bubbx[c]=x)+"px";

        bubb[c].top=(bubby[c]=y)+"px";

        bubb[c].width="3px";

        bubb[c].height="3px"

        bubb[c].visibility="visible";

        bubbs[c]=3;

        break;

        }

        }

        for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

        setTimeout("bubble()", 40);

        }

        function update_bubb(i) {

        if (bubby[i]) {

        bubby[i]-=bubbs[i]/2+i%2;

        bubbx[i]+=(i%5-2)/5;

        if (bubby[i]>sdown && bubbx[i]>0) {

        if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

        bubb[i].width=bubbs[i]+"px";

        bubb[i].height=bubbs[i]+"px";

        }

        bubb[i].top=bubby[i]+"px";

        bubb[i].left=bubbx[i]+"px";

        }

        else {

        bubb[i].visibility="hidden";

        bubby[i]=0;

        return;

        }

        }

        }

        document.onmousemove=mouse;

        function mouse(e) {

        set_scroll();

        y=(e)?e.pageY:event.y+sleft;

        x=(e)?e.pageX:event.x+sdown; }

        window.onresize=set_width;

        function set_width() {

        if (document.documentElement && document.documentElement.clientWidth) {

        swide=document.documentElement.clientWidth;

        shigh=document.documentElement.clientHeight;

        }

        else if (typeof(self.innerHeight)=="number") {

        swide=self.innerWidth;

        shigh=self.innerHeight;

        }

        else if (document.body.clientWidth) {

        swide=document.body.clientWidth;

        shigh=document.body.clientHeight;

        }

        else {

        swide=800;

        shigh=600;

        }

        }

        window.onscroll=set_scroll;

        function set_scroll() {

        if (typeof(self.pageYOffset)=="number") {

        sdown=self.pageYOffset;

        sleft=self.pageXOffset;

        }

        else if (document.body.scrollTop || document.body.scrollLeft) {

        sdown=document.body.scrollTop;

        sleft=document.body.scrollLeft;

        }

        else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

        sleft=document.documentElement.scrollLeft;

        sdown=document.documentElement.scrollTop;

        }

        else {

        sdown=0;

        sleft=0;

        }

        }

        function createDiv(height, width) {

        var div=document.createElement("div");

        div.style.position="absolute";

        div.style.height=height;

        div.style.width=width;

        div.style.overflow="hidden";

        return (div);

        }

        // ]]>

        </script>

**Yang warna merah tuh , korang boleh tukar kod warna yang korang nak ye! DI SINI !!

PERHATIAN!!

Pada sesiapa yang sebelum ini telah menggunakan "SPARKLING CURSOR" ,

diharapkan korang bolehlah delete kod yang itu ,

kalau korang nak guna bubles cursor ini.. orait??

Takot-takot tak menjadi pulak ! :))

Tutorial 71 : Remove Attribution

1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Lepas tuh , tekan Ctrl F dengan serentak dari search kod ini :

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

3. Bila korang dah jumpa kod tuh . korang tukar kat warna merah kar atas dengan perkataan false.

4. Da siap ? Save oke!!

5.Tapi , tunggu dulu ! Tak habis lagi lah ! :)

6. Sekarang , pergi bukak blog korang.. Bukak / Edit Widget Attribution kat bawah tu.. Nanti korang akan nampak Remove button. Tekan Remove tuh.. Dah tekan kan ? Haaa!~ Hasil nyer berkesan !:) kan?:))

Tutorial 70 : Round Hover With Shadow

1. Log in > Dashboard > Design > Edit Html > Tick Expand Widget Templates

2. Tekan F3 atau Ctrl+F search kod kat bawah ini :

/* Header

3. Dah jumpa ?Oke . paste kod ini pula kat ATAS kod yg korang cari tadi tu ok ?:)

/*------ IMAGE ANIMATION------*/
img {filter:alpha(opacity=100);
-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:.80;
}
u {
text-decoration:underline;
border-bottom: 2px dotted #ff0080;
padding: 0px;
}

**Tukar kod colour pink mengikut color yang korang suka ok ? :)

4. Da siap . SAVE !

Tutorial 69 : Reply To Comment

1. Dashboard > Design > Edit Html > Tick Expand Widget Template

2. Tekan Ctrl + F dan cari kod ini :

<b:include data='comment' name='commentDeleteIcon'/>

3. Copy code kat bawah ni , dan paste di bawah kod yang korang cari tadi..

<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>[Reply to Comment]</a></span>

4. Ambil Blog ID anda, dan gantikan di YOUR BLOG ID

**Tak tau Blog ID tu ape ehh?
Cuba tengok atas, bahagian address link sekarang.
Semua nombor selepas blogID tu la Blog ID korang lah!:)

5. Oke ! Boleh Save dah ! :) hehe ..
Tapi .. korang mesti nak reply to comment tu , jadi gambar comel kan ??:)

6 .Senang saje! Tukar kan [Reply to Comment] dengan kod kat bawah ini :

<img alt='Reply To This Comment' src='URL GAMBAR ANDA'/>

7. Da siap ? SAVE ! :) Lihat lah hasilnya! :)

Okie sayang ~

Kat bawah niyh . Lyssa ada buatkan korang button reply tuh..

Kalau korang nak ... jangan segan silu..

Ambik jer kod URL tuh ok ?:)

http://i.imgur.com/GsMcG.png

http://i.imgur.com/Hdvj4.png

http://i.imgur.com/mkiht.png

Tutorial 68 : Slide Float Widget

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Copy and paste kod di bawah , dan paste di ruangan html tadi tu ;)

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ff0000;
background:url() #000000 repeat-x bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

kod (shoutbox,livestream Facebook,exchange link,banner dll) anda

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyHoXvKyjiGBNsJlOVgHUAsr_E7mYayaS8PvybEAFfPTXEa-6ajCSF5EPdRTYw-STmKTYgXwvOIkWlLneBiJIXi-u-1VK5CcPSUO1c3yAfHxAVCK8P6Wn3Ae-GzRgPZs07tPoBlnVWDwA/s1600/close_button.gif" alt="close" title="Close" /></a></div>
<br><div align="right"><font size="3"><a href="http://wanhazel.blogspot.com/"><div style="color: #FF0000;">
<span ></span></div></a></font></div>
</div></div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></center>

**#000000 korang leh ubah warna..cari kod HTML warna..

**kod (shoutbox,livestream Facebook,exchange link,banner dll) anda

**Pastikan nilai tidak melebihi width: 580px; height: 380px.

3. Da siap . SAVE ! :)

Lepas tuh . korang buat cam ni pulak ...

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Copy kod di bawah , dan pastekan di ruangan html tadi tuh :

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
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:220px; right:-0px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="180" height="180"src="http://s2.kimag.es/share/38953289.png" alt="PUSH" title="KLIK ME"/></a>

</div>

** Yang warna merah tuh , korang boleh tukarkan gambar yang lain oke ?:)

3 . Da siap . SAVE ! :)

Tutorial 67 : Double Dashed Hover

1 . Dashboard > Design > Edit Html

2. Tekan Ctrl+F dgn serentak .. dan cari kod ini .. :

a:hover

3. Lepas korang jumpa . korang paste kan pulak kod kt ini kat bawah kod yang korang carikan tadi tuh ....

border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;

Korang boleh tukarkan kod warna merah diatas .dgn kod warna anda sendiri

4. Da siap . SAVE ! :) Lihat lah hasilnya ya! :)

Tutorial 66 : Letak Lagu Dalam Blog

1. Korang pergi kat link ini dulu ! >>> KLIK SINI !

2. Then , korang pilih lagu yang korang nak .! Lihat sebelah kana . Ada tak macam pic kat bawah ni ?:

**korang boleh pilih , nak lagu BARAT or lagu MALAYSIA

3. Lepas klik mana satu pilihan korang , sebelah kanan , akan keluar abjad nama artis . Then , pilihlah mana2 yang korang suka ! Tapi , ingat ! Ada lagu yang tak akan keluar kod or lagu dia . So , pilihlah lagu lain ok?:)

4. Lepas pilih , akan keluar ATU kod di tengah2 halaman tuh ..

5. Copy Code tu dulu ok ?:)

CARA - CARA UNTUK PASANG MASUK KE DALAM BLOG

1. Log in > Design > Add Gadget > Html/JavaScript

2. Paste kod korang tadi di ruangan html tuh..

3. Da siap . SAVE !

4. Try tengok ! Ada tak , lagu tu , kat blog korang ? Kalau tak de , p tukar lagu lain cepat ! HAHA!

Tutorial 65 : Signature di Bawah Setiap Post

sekarang ni saya nak tunjukkan cara2 mcm mana nak buat signature di bawah setiap post

Ikut step di bawah ^_^

**CARA PERTAMA**

1. Korang klik link ini dulu > KLIK SINI !!

2. Ada 4 cara tuh . Korang pilih yang "Using The Signature Creation Wizard"

3. Masukkan nama korang di textfield yang disediakan. Lepas tue, klik button "Next step".

4. Pilih font yang korang suka. Lepas tue, klik button "Next step".

5. Pilih size signature yang korang nak . Then , klik "Next Step".

6. Pilih background color untuk signature korang. Kalau tak nak ada color klik kat checkbox tulis 'transparents'. Pilih pula text color tuk signature tue. Lepas tue, klik button "Next step".

7. Pilih slope yang korang suka k. ? Nak senget banyak ke sikit ke terpulang la kat korang. Lepas tue, klik button "Next step".

8. Lepas tue dia akan keluar "Finished! The signature is ready." means da siap la signature anda. Then anda klik pada link "Want to use this signature?"

9. Korang akan ke page "Generating signature code". Klik pada "Generate HTML code" .

10. Korang akan diberi 2 pilihan samada nak generate code tuk signature sahaja atau signature dan sedikit info spt slogan @ website anda. Klik mana yang anda suka oke ?:)

11. Copy HTML code yang di dlam textbox.

CARA-CARA NAK PASANGKAN SIGNATURE MASUK KE DALAM BLOG

1. Log in > Setting > Formatting

2. Scroll ke bawah sampai korang jumpa "post template"

3. Paste HTML Code yang korang copy tadi .

4. Klik "Save Settings".

5. Untuk melihat samada korang ni berjaya atau tidak , klik pada "Posting" tab dan klik pada "new post". Signature korang akan automatik ada apabila anda membuat entry baru pada blog , oke ?:) hehe..

**CARA KEDUA**

(Bagi yang nak Letak Signature yang korang Reka Sendiri)

1. Log in > Design > Edit Html > Tick Expand Widget Templates

2. Tekan Ctrl + F dengan serentak . Dan cari kod ini :

<data:post.body/>

3. Pate URL Signature korang di bawah kod yang korang cari tadi ok ? :) Contohnye , mcm ini :

<img src="Url Signature Korang" />

4. Da siap . SAVE :) Menjadi tak ? :) huhu ^_^