How To Install Floating Shout Box

Ok, hari ni saya akan ajar korang macamana nak buat floating shout box  kat tepi blog korang. Float? Macamana tu?
Nak tau? Rujuk gambar rajah di bawah.

So, best tak ada shout box gini? Nak tau tak macamana nak buat?
Kalau nak, ikut langkah-langkah kat bawah ni yea..:-)


1. Korang mesti ada account shoutbox/shoutmix/etc. Register kat SINI
2. Pergi ke Dashboard => Design => Page Elements => Add a Gadget =>        HTML/JavaScript


<br /> <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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRalLPfoFD6-zPDriBGsWXIURXqoTUIXcM4m1GMN6iTEGfEUQbgzIHuiBhs8-05c5d456AfZV9EHbgVaQiq-CHDuWbPVfmwqo1CJm2IdGkDvzwxGO5ebCvpU7t0wKaWuZzEjRSMIBp9De/s320/tabs.png') no-repeat; } .gbcontent{ float:left; border:2px solid #666666; background:#F5F5F5; padding:10px; } </style><br /> <br /> <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><br /> <div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br /> <br />//Letak Coding Shoutmix kat sini<br /> <div style="text-align: right;"><a href="javascript:showHideGB()"><br /> [close]<br /> </a></div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script><br />


3. Pastekan code di atas ke dalam form HTML/JavaScript tersebut.
4. Cari ini : 

5. Then, pergi semula ke account shoutbox korang.
6. Salin code yang diberi.
7. Gantikan perkataan //Letak Coding Shoutmix kat sini dengan code shoutbox korang. (rujuk gambarajah di atas)
8. Setelah selesai, klik save.


*credit to blogcaripasal for the coding..:-)

Costume Meta Tag Untuk Meningkatkan Trafik Dari Search Engine

Kenapa perlu letak custom meta tag? Bukankah default setting ada meta tag nya sendiri?

Sebenarnya  default meta tag yang ada pada kod script template blog anda adalah kurang mesra bagi google search engine kerana tajuk/title meta tag tersebut akan memaparkan nama blog dahulu. Kemudian barulah diikuti dengan tajuk post.

Contoh default meta tag:     

<title><data:blog.pagetitle/></title>

Jadi, untuk memudahkan google search engine senang meng-crawl page anda, tajuk post hendaklah berada di hadapan sebelum nama blog. So, bagaimana nak buat tu?

Senang je, apa yang anda perlu buat adalah gantikan default meta tag tersebut kepada custom meta tag yang lebih mesra untuk di-crawl oleh search engine.

Script custom meta tag:

b:if cond='data:blog.pageType == "item"'><br /> <title><data:blog.pageName/> | <data:blog.title/></title><br /> <b:else/><br /> <title><data:blog.pageTitle/></title><br /> </b:if>

Langkah-langkah mudah untuk install custom meta tag:

1. Pergi ke Dashboard => Design => Edit HTML. 
2. Seterusnya klik pada Expand Widget Templates.
3. Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya taip atau paste kod <title><data:blog.pagetitle/></title> pada ruang Find dan kemudian, tekan kekunci Enter. (rujuk rajah di bawah)
4. Gantikan kod berwarna merah dengan kod yang ada pada text box di atas.
5. Klik Preview . Jika tiada error, sila rujuk langkah 6. :-P
6. Klik Save.

click image to enlarge

Tutorial -Text Box Dalam Blog

Text Box adalah widget yang penting bagi seseorang blogger yang menulis entry yang panjang berjela-jela. So, untuk memudahkan dan menjimatkan ruang para bloggers kebiasaannya menggunakan text box.Text box akan dapat memudahkan para pengunjung untuk mengambil apa yang anda hendak kongsi, kebiasaannya kod, text etc.

Contoh:
   
Text Box adalah widget yang penting bagi seseorang blogger yang menulis entry yang panjang berjela-jela. So, untuk memudahkan dan menjimatkan ruang para bloggers kebiasaannya menggunakan text box. Text box akan dapat memudahkan para pengunjung untuk mengambil apa yang anda hendak kongsi, kebiasaannya kod, text etc.

TEXT BOX pada blog post

1. Untuk text box pada blog post, switch ke "Edit HTML" mod untuk memasukkan kod tersebut.  
2. Pastekan kod anda tadi pada mana-mana bahagian yang anda mahu letak text box tersebut. Anda boleh mencuba dahulu pada mana-mana bahagian dalam kod HTML tersebut. Setelah berpuas hati, anda bolehlah mengikut langkah 3.
3. Pastekan kod atau sentence yang anda mahu letakkan pada text box tersebut pada perkataan KOD DISINI.   
4. Setelah selesai, klik compose dan lihat hasilnya. Ulang langkah 2-3 jika tidak berpuas hati dengan position text box tersebut.                   

click image to enlarge

TEXT BOX pada sidebar

Untuk text box pada sidebar/bahagian lain, klik Design-> Page Elements -> Add a Page Element dan pastekan kod “HTML/JavaScript”. 

click image to enlarge

HTML Script untuk Text Box:

<textarea style="height: 100px; width: 400px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()" >KOD DISINI</textarea>

Jika memerlukan saiz text box yang berbeza, anda cuma perlu edit :

• width:200px;
• height:100px;

 Edit kod 6 digit yang terdapat dalam coding untuk menukar warna text.

color:#ffffff;       (untuk kod warna sila klik sini)