Tutorial Blog | Cara Buat Blog

CARA PASANG FLOATING BUTTON

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

Jika sebelum ini saya menjagar bagaimana ingin sorokkan shoutbox di sisi blog,tutorial kali nie pula saya ingin mengajar bagaimana cara memasang floating button seperti contoh di bawah :

ok untuk membuatnya pertama sekali pergi LOGIN BLOG => DESIGN =>ADD A GADGET => HTML/JAVA SCRIPT

pastu masukkan kod di bawah

<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:240px; right:-12px;'>

</div>

nota:

1)kod yg berwarna merah itu adalah posisi kedudukan floating button anda..anda boleh mengubah kedudukan dengan menambah atau mengurangkan nombor tersebut

2)semakin tinggi nilai yg anda letakmaka semakin rendah kedudukan butoon itu..

selamat mencuba

SOROKKAN SHOUT BOX

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

Tutorial kali nie aku nak ajar korang macam mana nak sorokkan shoutbox macam kt gambar bawah nie...

sebelum

selepas

Untuk membuatnya tidak perlu edit pada kod html dan anda cuma perlu pergi kt design >> add a gadget dan cari html/javascript..

masukkan kod di bawah ini :

<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/AVvXsEjmwvsz2Pti2Je00NKQINyJeXti2wGsCwDJ7lz0GGa_oqPlNXMscoZYzHAFyuowspNw6bb_unhLvlDw9va52jl58Ibzp6ZBc2VliqCHgzwSmlaTLLJXqouDsRHL2JHaQ2-2n2EOQeCfTJbW/s320/tabs.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 CODE SHOUTBOX KORANG KAT SINI

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Note :

1)50px untuk setkan kedudukan shoutbox korang. Semakin tinggi nombor yang korang setkan, semakin ke bawah lah korang punya shoutbox tu.

2)color merah itu masukkan code shoutbox

jika mahir dalam editing anda boleh ubah color and word, anda boleh gunakan adobe photoshop..

MEMBUAT TEKS BERGERAK

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

untuk membuat teks bergerak adalah mudah...step yg lebih kurang dengan tulisan berkelip cuma di sini kita boleh menambah kod untuk mencantikkan lagi tulisan tadi..lihat kod di bawah ini :

<marquee>Teks bergerak</marquee>

kod di atas ini akan menjadi begini :

Teks bergerak

untuk ubah perkataan bergerak dari kiri ke kanan gunakan kod nie pula:

<marquee direction="right" >dari kiri ke kanan</marquee>

dari kiri ke kanan

kod berwarna merah di atas adalah kod yang saya tambah untuk menjadikannya bertukar arah

perkatan pergi dan balik (lihat contoh di bawah)

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

Selamat Datang Ke probuatblog.blogspot.com

nota : (anda boleh menukar kelajuan dengan melihat cara di bawah)

bergerak dengan setting masa sendiri

<marquee direction="right" scrollamount="10" >dari kiri ke kanan dengan tempoh masa 10</marquee>

dari kiri ke kanan dengan tempoh masa 10

nota : tukarkan perkataan scrollamount kt atas nie dengan masa yg anda kehendaki

Berhentikan tulisan y sedang berjalan(sila halakan mouse pada tulisan di bawah)

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">arahkankan mouse pada teks,berhenti</marquee>

arahkankan mouse pada teks,berhenti

untuk membuat tulisan naik,turun cuba kod di bawah nie

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

Selamat Datang Ke probuatblog.blogspot.com

nota(warna backgroung boleh di ubah mengikut kesukaan anda dengan menukar kod bgcolor)

tulisan bergerak bersama gambar

<table style="border-collapse: collapse; width: 338px; height: 75px;" background="http://i822.photobucket.com/albums/zz147/amykozo/BANNAER-PRO-2.gif" 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://i822.photobucket.com/albums/zz147/amykozo/PinkPantherBlackGirlsTee2.jpg" />Selamat Datang ke probuatblog.blogspot.com</marquee></span></td></tr></tbody></table>

Selamat Datang ke probuatblog.blogspot.com

untuk menghasilkan tulisan dan gambar seperti di atas ini,anda perlu mengikut beberapa langkah :

1)background "http://1.bp.blogspot.com/_-RTzkzFP6c0/TP0Qqz1YVEI/AAAAAAAAAB8/5nwXzp2zw98/s1600/jom.jpg" di ubah kepada link background anda

2)pada perkataan berwarna purple width:338px dan height: 75px perlu diubah kepada ukuran tinggi dan lebar gambar background anda.

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

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

5)Colour:#FF0000 di ubah kepada kod warna pilihan.

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

7)src="http://i822.photobucket.com/albums/zz147/amykozo/PinkPantherBlackGirlsTee2.jpg" di ubah kepada link gambar yang bergerak di atas background

8)Selamat Datang ke probuatblog.blogspot.com di ubah kepada teks pilihan anda.

kat bawah saya bagi kod yg boleh anda gunakan jika anda seoang yg kreatif..anda boleh menambah kod2 di bawah sesuai dengan kod yg anda lihat di atas..

bgcolor=warna latar belakang

direction=arah gerakan (left,right,up.down)

behavior=karekter pergerakan (scroll,slide,alternate)

scroll(teks berputar)

slide(teks bergerak sekali dan berhenti)

alternate(teks bergerak dari kiri ke kanan dan berpatah balik)

Title=perkataan muncul semasa mouse berada di atas teks

Scrollamount=meletak kecepatan gerakan

Scrolldelay=mengatur tempoh masa

Loop=mengatur jumlah

Memasang Button Back To Top

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

Back to top adalah satu button yang memudahkan pelawat di blog kita untuk balik ke page atas...untuk memasang button ini pertama sekali login ke blog anda dan pergi ke Design >> Edit Html

sebelum itu pastikan anda sudah download full template untuk back up file jika ada sebarang error..

ok dengan menggunakan kekunci control + F cari kod di bawah ini:

]]></b:skin>

selepas itu letakkan pula kod di bawah ini atas atau sebelum kod ]]></b:skin>

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

selepas anda masukkan kod di atas,sekarang cari pula kod di bawah ini :

</body>

jika sudah jumpa kod di atas,masukkan pula kod di bawah ini di atas atau sebelum kod </body>

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

kod yang saya warnakan biru di atas,anda perlu masukkan url back to top button yang saya sediakan di bawah..anda cuma perlu pilih mana yang sesuai dengan blog anda

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5HA-c_7REvZ3rgx5lVUt4LeKYMFAZd73r5LfWFOQ1H6JBJXowEy2JDncOgqXYbgrAWE0V0DSYSYvfe02lk8p1UWYuq9WV4P-T4lKQ5zd-dnRQgmW4NbKCJhixsklGqcnFUf1NSGSasB8T/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgydXmDSGrMW5XBNe2GJMDF8z3riW-hHA-iYw1Ndtu6s8M38kVVEDQlixN0z9Vw-g11U7uC0CM8eZFFXAdCbzw4Z3NfvtZJ8HaSBWF-HvaRbPtpG9_8Fn-EwInr8DDP6WVLRXM013kRBiaf/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYODamZtjLak0G5MXfnSxFPrrZg6Ql6D2Q76xcLA6bgzV1FuJ2GvogPKiqupHe7FEtopXyUIaMWOHqAziJCD9Q146rvwU2ArntHtbvgETdfAYh14EMFEfTys9EifnFNysxS2dYl6QJVOAC/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_PyojJGlMmyhOAEKlWqqsuzpViy2PtoJ6TJ4ac6vdJAlZDA0q_JcOBuK0aDjEc5LBYhIAl186Ln-Yy3sLZizyBdQaROv81h66lPam36o74wjsj7q2kRsdStf-qdKkAMb273XkQuPGyx66/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNABv5O9ZFYbZRa8oxltJ1KwPRj24GiYXQ5Q7ZwJC2C2tBPBe8zvVuIzpnFE4JI269rsfmVQ35KfEbfN_mqHsPsjR7og4sVnZS6ecvbUJWpiRzOD59KiIBqKVdQHjddh5hJYNWVtMBNQb9/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysoKdz5k15m9SY4lOwAxnzDvonC3doXM3FSkYpzyevt2DmzfVrfOnOfYIu80ZV9Bez3WbW0c3Hq8nXfXM2UEoBH-ljkOknPY5n_mxBiqiHirQbvuarovIAuerWqfrODd8ojT-DHgkVU8o/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sIVI2BoBakioa9dFtYFDKFCLozvn7oN4L4HiX0_YKXTFlMQMQAKHjBS6aaaCPsPS3Px3olyJZY8VJqZYaRbO4R_4l7fxlpqjp4-pFwbJi54WLsFkXpfSlYzd0PRnjx_f5WYjE5UBpoib/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQR27sd-hu-meqkTmcMtGxfqbfE0s53Rp0jX8b0Onaaks0G4MxqWL-PZc8832eOorfQqZvaXzREaOoyBK5BqG_NgH485mjtapyRgG5RYiH4xDQFqp-naPZq20hCU_UrWHMDFEpB16_ziAD/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pmHOT1eBXdqMDwIjl31lTHd6sZKievksaXCiJLd5piABbFqU6ZxxAsBzvr9pGlprfQvDrffZUbIC27keBRSo_RPYwBvi-ULHXP2K4p-5yeVJSxftvKQeLXCjb1CkS34wY7dJmYPa96Lq/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-gDyplqDJasuVGjxZkkbS4DtzRmfNfEXTwS9UeA19qdUSMYLPpXZg-Mfvkn_EpafxyfnrQE9M5Kr8dWjKi6tzbITkyFRqIGdPPIhAr6nQmFOWlTVw1VbaDw5zcJXbYi7hnE61MgHkBYE/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBI7S0h7sv0R6yHC8HTeKrI0wIQadgfUVxZwG7Sg6B2sIB60WSTFbdudnXWOPGT7OT26FgS42S6S0pq0ggic_AkZEKU8mARrvl-Ji2f1bZKExQxisHsrqGE_Zjc6y2yuQaZX9bZg8k0Q1k/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4811syLWhcnufs37TDfWITgkyCRb8ByuAuAanAR9CDSdX62o7soAn6KO8hAnq2sYZQChYdYqQ4SSHSbRO3rS9HgRzLk4Wek_Hug60hiPHF2EkthmxF20AJjD3fuky3VUGphhCrQ3HGw9/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1S0ZuqDzbJZ6XThyphenhyphenfwmkIctwL_JWWUxwjgXbff6bN8V_RPC7l2p_7fTz4eQMKhIL4Vl1iJ3GuUiORxJLmmHgI7ZX0Lzqm-AkgsIwHpUQYrm05drHMUDY0jyfkJ5t5jdi1l9G6seVaW9eJ/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95zkjqF4fk6ju8dOwdxPJBynCqgWdJYCNn2AHcf4aG5PQT8WHuBMiYWYMPmJathFJHJIyKhip7X39fBFyA9BKgfh19hcnR8C8g90SRc3XLgpUkNX4BHp_Tni6hbJ8s7JdxvolZ51S7kI4/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-zSPF7qYZLiTjzgggmkwTzKxOMyZEyuH8idGLMXx24uhRMxeICHMMeDUi4B3c7HbVa142_JC6Q9nDBYfOI-Pn-h2mo-YXNFcUIuuE45bIrlJVTV7HDi_UCnC3dLImt2fRcAaXJ4wjNIg_/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv3T6g_JM_qyuPuaW0KNz00SxFFvZ9-BNl20jEh5LkEar4EFfRPhhc1YGDd55L9f0TJOPTnQkqJp6UUgAePYg08bfZTLhfOyCYqvj0ClbJ8MMIVg1UVDYf4i3w56CQHZ2Nq3Mru11RBhyS/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOcx6dSbKRy5W71L2oFsOvuIO7qy_qnevD0irb8MDJ_tYrG5L4csZq31inw1wjI4YiCankXYJsKoCujLFbRNEqoXT-voV5Dr5fp2FM5zIJ3b0_xPsylUE8bth3F1WqTNxLvV4BszfQhC5r/s400/20.png

Membuat teks ucapan pada komen

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

Membuat teks ucapan ada kebaikannya antaranya adalah boleh mewakili rasa terima kasih kasih kita kepada pengunjung yang memberi komen.Untuk membuat teks ucapan pada komen, anda perlu mengikuti beberapa langkah di bawah ini :

1)Pastikan anda download full template dahulu

2)login blogger >> Design >> Edit html >> Expand Widget Template

3) Setelah itu sila cari kod ini <p><data:comment.body/></p>

4)jika anda tidak menemukannya, sila cari kod yang berkaitan data:comment.body atau lihat contoh di bawah :

<p><data:comment.body/></p>

</b:if>

</dd>

Selepas itu sila copy kod di bawah ini dan letakkannya di bawah atau selepas kod di atas

<span style='color: rgb(255, 102, 0);font-size:85%; float: left;'><span style='font-style: italic;'>Terimakasih Kerana Memberi Komen Pada Artikel Ini</span></span><b><span style='color: rgb(255, 102, 51);font-size:90%;'><b> By Amycozzo </b></span></b>

Jika anda sudah siap pastikan kodnya diletakkan seperti contoh di bawah ini :

<p><data:comment.body/></p>

</b:if>

</dd>

Nota :

1)Kod rgb berwarna merah adalah warna bagi teks yang boleh anda ubah warnaya dengan menggunakan kod rgb

2)Kod teks berwarna merah adalah kod teks yang boleh anda ubah mengikut kesesuaian anda

3) Kod rgb berwarna hijau adalah kod warna untuk teks By Amycozzo yang boleh di ubah menggunakan kod rgb

4) Kod teks By Amycozzo adalah teks yang boleh di ubah kepada nama anda

Sila preview dahulu dan jika tiada sebarang error sila klik save template

Cara Membuat Fungsi Reply Comment Bergambar di Blogspot

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

Pada post yang sebelum ini fungsi reply to komen yang kita lakukan secara tulisan. Pada tutorial kali ini pula kita akan membuatnya secara bergambar.Untuk tidak membuang masa lagi sila ikut langkah2 di bawah ini :

1)Login ke blogger >> Design >> Edit html >> Expand Widget Template
2)Sila download full template dahulu untuk mengelakkan sebarang error yang tidak dijangka
3)Setelah itu cari kod ini >> <b:include data='comment' name='commentDeleteIcon'/>
4)Jika anda sudah menemukan kod yang dikehendaki sila copy kod dibawah ini dan letakkannya tepat dibawah atau selepas kod <b:include data='comment' name='commentDeleteIcon'/>

<span><a expr:href='"https://www.blogger.com/comment.g?blogID=Letakkan blog ID anda disini&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.openundefinedthis.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,
width=450,height=450"); return false;'><img alt='Reply To This Comment' src='URL gambar anda disini'/></a></span>

Untuk mendapatkan Blog ID anda sila pergi ke design >> edit html dan lihat pada url anda. sila lihat contoh di bawah :

Untuk mendapatkan URL Gambar pula sila lihat di bawah ini :

Url:http://photos-b.ak.fbcdn.net/hphotos-ak-snc4/hs095.snc4/36113_133084743383684_100000464777133_299329_8083232_s.jpg

Url:http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs095.snc4/36113_133084750050350_100000464777133_299331_8148477_n.jpg

Url:http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs115.snc4/36113_133084746717017_100000464777133_299330_6337918_n.jpg

Setelah selesai semuanya, Sila preview dahulu dan jika tiada sebarang error klik save template

CARA PASANG FLOATING BUTTON

SOROKKAN SHOUT BOX

MEMBUAT TEKS BERGERAK

Memasang Button Back To Top

Membuat teks ucapan pada komen

Cara Membuat Fungsi Reply Comment Bergambar di Blogspot

Iklan

Followers

Add Me On Facebook

Tutorial

Jom TerjAh Mereka

Blog Archive

Recent Post