Teknik Buat Blog|Tutorial Blogger

Meletak iklan didalam posting

noreply@blogger.com (sibersensasi) — Wed, 25 Mar 2015 02:17:00 +0000

Iklan yang diletakkan didalam blog boleh menghasilkan pendapatan sambil anda berblog.Namun iklan yang diletakkan hendakah di posisi yang sesuai bagi menarik pengunjung mengklik iklan diblog anda.Salah satunya adalah dengan meletakkan didalam posting.

Cara meletakkan iklan didalam posting
1.masuk kedashboard blog anda
2.Klik pada theme dan pilih edit html

3.cari kod <data:post.body/> pada template ,gunakan CTRL+F (jika belum biasa gunakan ikuti tutorial ini)

4.Salin kod iklan dan letakkan seperti dibawah ini

<data:post.body/>
<center>CODE IKLAN ANDA</center>

5.Klik pada preview dan simpan template anda jika tiada error

Mengapa blog saya tiada pada carian Google?

noreply@blogger.com (sibersensasi) — Wed, 18 Feb 2015 15:03:00 +0000

“Saya telah buat blog sendiri,tapi bila saya search google masih tak jumpa.dimana silapnya”.Demikian lah antara soalan yang selalu timbul bagi anda yang baru dalam membuat sebuah blog.Sebagai sebuah blog yang baru cuma anda saja yang tahu kewujudannya.Ia akan terperap begitu sahaja jika anda tidak mengorak langkah untuk memperkenalkannya pada umum.Yang akhirnya akan tersebar di alam siber.

Langkah langkah yang perlu dibuat setelah berjaya membuat sebuah blog

1.Memperkenalkan blog pada google

Langkah awal ini adalah bagi memasukkan alamat blog anda pada google agar blog anda dapat diindeks pada senarai google.
Masuk ke web Add URL-Google

Masukan alamat blog anda pada ruangan URL,taipkan teks catcha yang dipaparkan dibawahnya dan klik butang submit request.

2.Ping blog anda

Tujuan ping adalah untuk memberitahu search engine seperti google bahawa anda baru saja update blog.Ping perlu dibuat setiap kali anda membuat artikel baru pada blog.Laman web untuk ping blog adalah seperti pingomatic,feedshark dan sebagainya

3.Berkongsi artikel blog.

Terdapat banyak laman web bagi berkongsi artikel seperti pingbusuk,pingje.org, blogr dan blogged.my.Pingbusuk akan ping entri anda secara automatik(dengan memasang widget diblog anda),sementara yang lainnya perlu dibuat secara manual.Anda akan menerima banyak trafik(pengunjung) dengan berkongsi artikel di laman web tersebut.Artikel anda akan mula tersenarai dalam carian google

4.Blogwalking

Blogwalking adalah satu cara untuk mempopularkan blog anda dan menerima trafik.Caranya ialah dengan berkunjung kelaman laman blog dan meninggalkan pesan atau sapaan di chatbox yang ada diblog tersebut.klik link pengunjung yang ada dichatbox tersebut untuk keblog seterusnya.Pasang juga widget(chatbox) tersebut di blog anda.

Demikian lah antara cara cara yang dapat mempopularkan blog anda dan memudahkan tersenarai di search engine.Anda akan dapat lihat hasilnya dalam beberapa hari sahaja.

Cara menukar bullet list pada blog

noreply@blogger.com (sibersensasi) — Tue, 30 Dec 2014 07:33:00 +0000

Salah satu cara bagi memperindahkan artikel semasa posting adalah dengan meletakkan bullet list.Blog list bawaan dari blogger adalah berbentuk titik bulat sahaja.Bullet ini boleh anda gantikan dengan bentuk yag lebih menarik.

Cara memasukkannya pada blog:

1.Pada dashboard klik pada template
2.Pilih edit HTML
3.Pada template cari kod ]]></b:skin>

dan letakkan kod dibawah ini diatasnya

post ul li {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSEML2e4Eh2OJK9kzDRe8ekAvEg0Bxxv0xTsKI45_Sflv52Pps6M_mO1tLSgvJ3ptIp0ygOUIOFIqzm_3sV1HgMo-9YEXcMLOeCoDRGWa7Hzq-jpTNxlrfIKvozFzlKSfl06byIJgGNzd/s1600/1.gif');
}

kod yang berwarna oren adalah url bagi bullet list.Anda boleh upload bullet yang ingini dan letakkan url pada kod tadi.
Senarai bullet list sebagai contoh,boleh didapati seperti dilaman websitebullets.com.

Cara upload imej pada blogger:

Caranya amat mudah,cuma semasa posting atau buka mana mana posting dan masukkan imej.Setelah imej dimasukkan klik kanan pada imej tersebut dan pilih copy link location.Sesudah dapat link tersebut, imej tadi boleh lah dipadam.Imej yang telah dimasukan telah tersimpan diblogger(picasaweb).

Selamat mencuba

Cara mempercepatkan loading blog

noreply@blogger.com (sibersensasi) — Sun, 16 Nov 2014 09:07:00 +0000

Kecepatan loading sesuatu blog amat berpengaruh pada pencarian melalui sesuatu search engine.Blog yang mempunyai banyak gambar akan melambatkan lagi proses loading sesuatu blog.Bagi mengatasi masaalah ini,kod skrip boleh dimasukkan bagi mempercepatkan loading blog

Cara membuatnya:
1.masuk ke dashboard blogger
2.Klik template dan pilih edit html
3.Cari kod </head> dan masukkan kod dibawah ini diatasnya:

4.Kemudian simpan template anda

Widget artikel terkini dengan efek sliding

noreply@blogger.com (sibersensasi) — Thu, 05 Jun 2014 13:17:00 +0000

Widget dari blogger kebanyakan adalah dalam bentuk statik.Dengan sedikit ubahsuai dengan menjadikan ia bergerak akan nampak lebih menarik lagi.Widget ini seakan seakan seperti pada artikel cara pasang widget animated recent post tetapi lebih menarik lagi kerana tidak meninggalkan ruang kosong apabila bertukar artikel.

Langkah langkah bagi membuatnya:
1.Masuk kedashboard blogger
2.Pilih layout....Add a gadget

3.HTML/Javascript
4.Masukkan kod dibawah ini

<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

</div>

Nota:
a)kod berwarna oren adalah kecepatan berpindah dari post ke post
b)kod warna merah pula adalah jumlah artikel yang hendak dipaparkan
c)kod berwarna hijau masa berhenti/pause
Yang boleh anda ubahsuai jika diperlukan

5.Kemudian klik save untuk menyimpan widget anda.

Widget popular post hitam dan merah

noreply@blogger.com (sibersensasi) — Sun, 02 Mar 2014 13:26:00 +0000

Sebelum ini admin pernah membuat artikel mengenai Cara pasang widget popular post berwarna warni.Kali agak berbeza sedikit kerana ia berwarna hitam dan merah serta akan bergerak bila dilalukan mouse diatas nya.

cara memasangnya pada blog:
1.Masuk ke blogger dan masukkan widget popular post pada blog anda
Pada dashboard pilih Layout dan klik pada Add A gadget

2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang sesuai

3.Seterusnya pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F
Kemudian letakkan kod ini diatasnya

/*Popular Post by http://www.bloggerspice.com */
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li:hover {
border:4px groove #fff;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
#PopularPosts1 ul li a {
-webkit-text-size-adjust: auto;
-webkit-text-stroke-width: 0px;
color: #ffffff;
display: block;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 18px;
margin: 0px 40px 0px 0px;
min-height: 30px;
orphans: 2;
padding: 0px;
text-align:-webkit-auto;
text-decoration: none !important;
text-indent: 0px;
text-transform: none;
white-space: normal;
widows: 2;
word-spacing: 0px;
}
#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px;
}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:10px;
right:5px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border:2px solid #ccc;
background:#353535;
box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{
background:#000000;
width:90%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#C50101; width:93%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#1a1a1a ;width:93%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{
margin:0;
padding:0px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:relative;
margin:6px 0;
border: 1px solid #c2c0b8;
-webkit-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
padding:10px;
}
.PopularPosts .item-title a{
font: normal bold 36px Segoe UI;
font-size:16px;
color: #ffffff;
}
.PopularPosts .item-title a:hover{
color:#ffffff;
text-decoration:none;
}
.widget-content.popular-posts li{
font: normal normal 16px Segoe UI;
}
.item-snippet {
height:2.5em;
overflow:hidden;
}

5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template

sumber:bloggerspice

Cara pasang expandable recent comments

noreply@blogger.com (sibersensasi) — Sun, 02 Feb 2014 11:06:00 +0000

Widget Recent Comments adalah Widget Blogger baru, yang menampilkan ulasan pembaca bersama-sama dengan Tarikh dan masa.Widget ini yang sangat menarik yang membolehkan anda mudah melihat kandungan Komen, anda tidak perlu klik pada pautan tajuk atau commenter untuk menunjukkan komen.

Cara memasangnya:

1.Pada dashboard klik layout dan pilih Add a gadget

2. Kemudian pilih HTML/Javascript

3.Salin kod dibawah dan masukkan padanya

4.Simpan widget anda

sumber:thatsblogging

Cara letak butang navigasi atas dan kebawah

noreply@blogger.com (sibersensasi) — Thu, 16 Jan 2014 11:02:00 +0000

Butang keatas dan kebawah boleh digunakan untuk menavigasi ke bahagian atas dan bahagian bawah kandungan halaman, terutamanya apabila pada halaman utama terdapat banyak rencana atau apabila artikel yang mempunyai terlalu banyak komen. Butang ini mempunyai fadeIn dan kesan fadeOut, ini bermakna ia akan pudar sedikit apabila kita bergerak ke bahagian atas bawah halaman dan ia mempunyai fungsi naik ke atas atau ke bawah blog

Cara meletakkan butang kebawah dan keatas

1.Pada dashboard pilih template dan klik edit HTML

2.Cari kod ]]></b:skin> dengan menggunakan Ctrl+F

3.Letakkan kod dibawah ini diatasnya

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YHhZApHtnyBTHwtgwgrh4TWwwGlfDIm8tKWODS5YWfICsZtILfv0xuYXPNDAbpZtVMc8HbBVfIhe9MEj80q80alEEVioGG7rM4gMBCdJW0dDHreW_D_nrr95FlqsQ8hyg7YP5p5eso8/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXXvXnHzuvexSmLcTXrLeRYHIAC6J_KAnH2AtnYZwFG3SNpCf7VxSIhnCcrisfUXiqO3FXcC54GylhGo7epDy6NwcPe1Az4vGgYhOU1tGjiVGbE3JV6escC9fsJsZutkXEMUOT7zVcSis/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Nota:teks berwarna hijau adalah jika anda hendak mengubah kedudukan butang.
Untuk menukar warna latar belakang ubahkan teks white dengan warna yang dingini

4.Seterusnya cari kod </body>

dan letakkan kod ini diatasnya

5.Simpan template anda
sumber:helpblogger

Cara letak site map pada blog

noreply@blogger.com (sibersensasi) — Thu, 02 Jan 2014 05:22:00 +0000

Salah satu kekurangan yang ada pada blog ialah ia tidak mempunyai indeks atau peta laman bagi sesuatu blog bagi menyenangkankan pembaca mencari sesuatu kandungan posting.Blog archive dan labels pula tidak memaparkan keseluruhan kandungan,jadi untuk mencari sesuatu posting atau artikel yang diingini adalah agak sukar.

Artikel kali ini akan membolehkan anda meletakkan site map pada blog yang akan memaparkan indeks kesemua post yang ada dan dipisahkan oleh kategori.Ia juga memaparkan posting terbaru dengan teks New!

Cara memasukkan site map pada blog anda:
1.Masuk ke dashboard blog anda dan pilih blog anda
2.Pilih pages dari senarai dan klik pada new page dan pilih blank page

3.Pada ruangan posting klik pada tab HTML dan letakkan kod berikut:

* ubahkan http://teknikbuatblog.blogspot.com dengan alamat blog anda
4.pada sebelah kanan klik pada Options dan pilih Don't allow (hide existing) for the reader's comments

5.Kemudian klik pada publish

Nota:
untuk mengubah warna dan saiz font tukarkan nilai pada teks berwarna merah
Untuk mengubah warna link pula pula ubah nilai pada teks berwarna hijau

sumber:helpblogger

widget label berbentuk daun

noreply@blogger.com (sibersensasi) — Wed, 18 Dec 2013 07:19:00 +0000

Label adalah merupakan salah satu cara untuk memberikan kategori pada setiap postingan kita. Pemberian label pada setiap artikel kita, akan sangat bermanfaat untuk memudahkan pengunjung dalam memilih kandungan dengan kategori yang sesuai dengan yang mereka cari dan membolehkan pengunjung dengan mudah mengakses kandungan yang mereka perlukankan.

Posting kali ini adalah unuk memberi kelainan pada paparan widget label.paparannya adalah berbentuk bujur sperti daun.bagi yang inginmembuanya berikut adalah langkahnya

Cara membuatnya.
1.Masuk ke dashboard blogger
2. Pilih template -> Edit HTML Cari ]]></b:skin> dan salin kod label seperti dibawah dan
letakkan diatas kod ]]></b:skin>
3.Simpan template anda

.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    float: left;
    font-size: 116%;
    list-style: none outside none;
    transition: all 0.3s ease 0s;
}

Cara pasang widget related post nrelate

noreply@blogger.com (sibersensasi) — Sun, 17 Nov 2013 13:25:00 +0000

Sebelum ini Admin ada membuat posting tentang cara memasang artikel terkait linkwithin.Nrelate adalah satu widget yang serupa dengan linkwithin tetapi lebih menarik kerana anda mempunyai pilihan bagi mengubah setting pada widget ini.Terdapat enam styles widget yang boleh anda pilih serta pilihan untuk tidak memaparkan logo nrelate pada paparan widget.

Cara memasangnya:
1.Masuk ke web nrelate.com
2.pada sebelah kanan web terdapat ruangan untuk daftar dengan nrelate

3.klik pada create and acccount

4. Isikan form yang muncul dengan butiran yang dikehendakki dan klik pada complete sign up
5.kemudian email akan dihantar bagi mengesahkan pendaftaran tadi
6.Buka email dan verify pendaftaran tadi
7.Selepas berjaya log in ke akaun anda
Paparan berikut akan terpapar setelah berjaya log in ke akaun anda

8.Klik pada menu install
9.Pada paparan seterusnya pilih logo blogger

10.Masukkan url blog anda dan klik submitt

11.Pilih version untuk widget anda

12.Pada add page element pilih blog yang diperlukan dan klik add widget

Jika anda ingin membuat perubahan pada widget,log in ke nrelate dan pilih menu setting,disana anda boleh menetapkan bentuk paparan dan sebagainya dan akhir sekali jangan lupa pilih save untuk menyimpan setting anda.

Cara pasang pop up facebook like box dengan timer

noreply@blogger.com (sibersensasi) — Fri, 01 Nov 2013 00:43:00 +0000

Facebook like box ini akan muncul sebaik sahaja pengunjung blog anda.Facebook like box ini mempunyai kaunter masa sebelum ia hilang secara automatik dan boleh juga ditutup dengan butang close yang ada

Cara memasangnya:
1.Masuk ke blogger
2.Pada dashboard pilih template >> Edit HTML

3.Salin kod dibawah dan letakkan diatas kod </body>

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='TEKNIKBUATBLOG'
//]]>
</script>
<style>
#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 8*/width:450px;border:10px solid #900000;z-index:200;-moz-border-radius: 9px;-webkit-border-radius:

9px;margin:0pt;padding:0pt;color:#900000;text-align:left;font-family:arial,sans-serif;font-size:13px;
}
#fblikepop body{background:#FFF none repeat scroll 0%;line-height:1;margin:0pt;height:100%;
}
.fbflush{cursor:pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;
}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 8*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;
}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;
}
#fblikepop h1{background:#900000 none repeat scroll 0 0;border-top:1px solid #900000;border-left:1px solid #900000;border-right:1px solid #900000;color:#FFFFFF !important;font-size:14px !important;font-

weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#FFFFFF;border-top:1px solid #9000000;padding:10px;minCCCCCCght:50px;
}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;
}
#fblikepop #buttonArea a:hover {color:#900000 !important;text-decoration:none !important;border:0 !important;
}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#333 !important;
}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;
}
</style>
<script type='text/javascript' src='https://sites.google.com/site/mmktricks/jquery.js'></script>
<script type='text/javascript' src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script type='text/javascript' src=https://sites.google.com/site/teknikbuatblog/tbb/fbLIKEpopup.js></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
   timeout: 20,
   wait: 0,
   url: 'http://www.facebook.com/ TEKNIKBUATBLOG ',
   closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'></div>

Catitan:
•    Tukarkan Teknikbuatblog dengan username Facebook anda.
•    Timer boleh telah diset pada 30 saat,jika anda ingin mengubahnya Cuma perlu edit bahagian
      timeout:30

• Widget ini akan terpapar sebaik sahaja pengunjung berkunjung keblog anda.Jika ingin dipaparkan

selepas 1 minit atau lebih ubah bahagian wait:0

Sumber: MMK tricks

Tukar previous post dan next post kepada tajuk artikel

noreply@blogger.com (sibersensasi) — Thu, 10 Oct 2013 08:27:00 +0000

Salah satu ciri yang ada pada wordpress tapi tiada pada blogger ialah perkataan newer post dan older post dipaparkan dengan tajuk artikel.Kebaikan mempunyai tajuk posting ialah keberangkalian pengunjung akan klik artikel seterusnya yang akan meningkatkan page view pada blog anda
.

Cara memasangnya pada blog.

Masuk ke dashboard pilih template,klik pada edit HTML

Gunakan ctrl+F untuk mencari kod pada template ( klik sini untuk cara guna HTML editor terbaru blogger)
Cari kod </head>
Letakkan kod ini sebelumnya

Seterusnya cari kod </body>
Dan letakkan kod ini diatasnya

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(//([^/_]+)(_.*)?.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
href = href.replace(/.blogspot.[^/]+//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("<< Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
href = href.replace(/.blogspot.[^/]+//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post >><br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if>

Kemudian cari kod ]]></b:skin>
Dan letakkan kod berikut diatas/sebelumnya

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

Simpan template anda
Credit to MS-Potilas :Yet Another Blogger Tips Blog

Cara letak contact form pada blog

noreply@blogger.com (sibersensasi) — Mon, 16 Sep 2013 00:46:00 +0000

Untuk pengguna blogspot, jika ingin meletakkan contact form anda mungkin memilih Formstack,Foxyform,dan sebagainya.Sekarang anda tidak perlu menggunakannya lagi kerana blogger telah mengeluarkan contact formnya sendiri.

Cara memasukkan contact form pada blog

Masuk ke dashboard , pilih layout dan klik pada add a gadget

Kemudian pilih more gadget dan masukkan contact form

Cara meletakan pada page statik
Setelah memasukkan contact form pada blog seperti langkah diatas,kemudian pada dashboard pilih >>Template>>edit Html

Pada template cari ContactForm(gunakan Ctrl+F)
Klik anak panah dihujung untuk membuka kod seterusnya

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
        </div>
      </form>
    </div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Kod warna merah perlu dipadam.
Kemudian save template anda
Pada dashboard pilih pages>>new page>>blank page
Masukkan kod ini pada page kosong tersebut dan masukkan namakan page tersebut dengan nama yang anda inginkan.

Cara pasang widget popular post berwarna warni

noreply@blogger.com (sibersensasi) — Fri, 06 Sep 2013 07:39:00 +0000

Popular post adalah salah satu widget yang disediakan oleh blogger bagi memaparkan posting yang popular pada sesuatu bulan,minggu atau sepanjang masa.Anda boleh memilih bagaimana ia akan dipaparkan.Tutorial ini adalah cara untuk mengubahsuai paparannya dalam bentuk yang berwarna warni.

Langkah bagi membuatnya:

1.Masuk ke blogger dan masukkan widget popular post pada blog anda
Pada dashboard pilih Layout>>Add A gadget

2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang diingini.

3.Seterusnya pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F(rujuk sini)
Kemudian letakkan kod ini diatasnya

#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}
#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}
#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ulli:first-child:after{content:"1"}
#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ulli:first-child + li:after{content:"2"}
#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ulli:first-child + li + li:after{content:"3"}
#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ulli:first-child:after,
#PopularPosts1 ulli:first-child + li:after,
#PopularPosts1 ulli:first-child + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template

Tukar perkataan post a comment dengan imej

noreply@blogger.com (sibersensasi) — Wed, 28 Aug 2013 23:49:00 +0000

Komen adalah satu cara yang baik bagi menjalin hubungan dan berinteraksi dengan pengunjung blog.Diakhir setiap posting mempunyai perkataan add a coment.Ia boleh ditukarkan kepada bentuk imej supaya nampak lebih menarik lagi.

Cara menukarnya:
1.Masuk ke Blogger>> Dashboard PilihTemplate ->Edit HTML

2.Cari kod yang berwarna merah(Ctrl+F) rujuk tutorial ini cara menggunakan fungsi search

<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a>

Cari kod seterusnya <data:postCommentMsg/>,kelihatan seperti dibawah ini
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Tukar <data:postCommentMsg/>dengan kod imej seperti dibawah

4.Akhir sekali simpan template anda

Widget komen terbanyak dengan avatar

noreply@blogger.com (sibersensasi) — Sun, 18 Aug 2013 03:52:00 +0000

Widget ini adalah untuk memaparkan komen terbanyak diblog.Yang menarik tentang widget ini adalah ia mempunyai avatar disamping bilangan komen.Pemasangannya adalah bagi menggalakan pengunjung memberi komen pada artikel diblog anda.

Cara pemasangannya:
1.Masuk keblogger
2.Pada dashboard pilih Layout dan klik pada Add a Gadget

3. dan pilih HTML/Javascript

Masukkan kod berikut padanya:

4.Klik save untuk melihat perubahannya.

Nota:
Untuk mengecualikan nama anda dari senarai ubah pada someotherusertoexclude dengan nama anda

credit to MS-potilas (http://yabtb.blogspot.com)

Cara pasang google map pada blog

noreply@blogger.com (sibersensasi) — Wed, 07 Aug 2013 04:54:00 +0000

Pemasangan google map membolehkan pelanggan mengetahui lokasi perniagaan anda.Ia adalah elemen utama bagi sesiapa yang menjalankan perniagaan online.Dengan pemasangan Google map ini membolehkan pelanggan mencari lokasi dengan lebih tepat.Jika anda ingin memasangnya pada blog berikut adalah caranya:

1.Masuk ke web https://maps.google.com/
2.Masukkan alamat pada ruangan search dan klik search.

3.paparan interaktif peta akan terpapar,anda boleh memilih untuk meletakkan peta satelit atau peta biasa .terdapat menu pilihan untuk meletakkan detail pada peta anda seperti foto dan sebagainya.

4.Klik pada butang link

5.Salin kod yang terpapar pada bahagian Paste HTML to embed in website

6.kemudian masuk ke blogger >>pada dashboard pilih pages>>new page>>blank page>>pilih tab HTML dan masukkan kod tadi.Boleh juga diletakkan pada post anda,klik pada tab html pada posting dan salin kod tadi.

7.kemudian klik publish

Cara guna HTML editor terbaru blogger

noreply@blogger.com (sibersensasi) — Sat, 27 Apr 2013 13:37:00 +0000

HTML editor adalah tempat dimana kita boleh mengubahsuai template mengikut citarasa sendiri.Blogger telah mengeluarkan HTML editor terbaru.Sebelum ini anda perlu tandakan Expand widget template jika hendak memaparkan keseluruhan kod yang ada pada template.Berbeza dengan yang baru kita boleh memilih untuk terus ke widget widget tertentu pada template.Jika sebelum ini anda menggunakan fungsi search (Ctrl+F) pada browser (contohnya seperti Mozilla Firefox) untuk mencari kod pada template,pada HTML editor terbaru ini kod tidak akan dijumpai jika menggunakan Ctrl+F pada browser.

Untuk mencari kod pada HTML editor terbaru ikutilah langkah berikut ini

Klik dimana mana bahagian didalam HTML editor dan tekan butang Ctrl + F pada keyboard.Ruangan search akan dipaparkan pada bahagian atas ruangan HTML editor.

Taipkan teks yang hendak dicari pada ruangan search dan tekan butang enter.Teks yang dijumpai akan dihighlightkan.Bagaimana pun sesetengah browser tidak boleh digunakan untuk mencari teks pada editor baru ini.Saya menggunakan Mozilla Firefox dan ia berfungsi.Editor lama rasanya lebih senang digunakan dan sesuai untuk kebanyakan browser .

Cara pasang widget Live Traffic

noreply@blogger.com (sibersensasi) — Fri, 22 Feb 2013 04:54:00 +0000

Widget live traffic memboleh anda mengetahui dari mana datangnya pengunjung sebaik saja mengunjungi blog anda.Jika anda ingin memasangnya.ikutilah langkah dibawah ini.

1.Masuk ke web feedjit.com
2.Klik pada choose your Feedjit

3.Pilih feedjit completely free dan klik pada sign up

4.Bahagian ini anda boleh mengubah saiz widget,background,jenis teks,border dan button

Pada bahagian bawah kita boleh memilih untuk memasang widget ini pada blogger blog,wordpress dan sebagainya. Kemudian klik pada go

5.Kemudian muncul instruction for installing on blogger

Klik pada butang click to open a new window and install on blogger.

6.Muncul Add Page element...Klik pada add widget

7.Live traffic telah siap dipasang pada blog anda

Cara pasang artikel terkait linkwithin

noreply@blogger.com (sibersensasi) — Sun, 30 Dec 2012 02:21:00 +0000

Widget ini akan memaparkan secara rawak artikel yang berada didalam blog anda.Pemasangan nya adalah baik kerana akan meningkat pageview bagi blog anda.Ia akan meningkatkan populariti blog yang memasangnya kerana kemungkinan pengunjung akan klik artikel lain yang terpapar pada widget ini.

Cara memasangnya.
1.Masuk ke web linkwithin.com
2.Disebelah kanan akan terpapar satu form seperti dibawah ini

   Isikan maklumat berikut:
   Email:masukkan alamat email anda
   Bloglink:alamat blog anda yang bermula dengan http://
   Platform:pilih blogger
   Width: pilih bilangan artikel yang hendak dipaparkan.
Tick pada My blog has light text on a dark background jika blog anda mempunyai latarbelakang gelap dengan tulisan cerah.
Kemudian pilih get widget

3.Klik pada install widget

4.Pada page element pilih blog yang ingin dipaparkan linkwithin jika anda mempunyai lebih dari satu
blog.Kemudian klik pada add widget

Masuk semula keblog anda widget tersebut akan terpapar.Kedudukan dibawah posting adalah yang terbaik.Jika berada ditempat lain anda boleh pindahkannya.

Cara memindahkannya:
Kemudian masuk pada dashboard blog anda
Pilih layout dan kedudukan linkwithin akan terpapar.Anda Cuma perlu seret dan ubah kebawah ruangan catatan blog.

Cara buat borang tempahan

noreply@blogger.com (sibersensasi) — Tue, 30 Oct 2012 05:42:00 +0000

Dunia perniagaan secara online berkembang pesat,mempunyai satu laman web atau blog perniagaan adalah perlu bagi peniaga memperkenalkan jualan masing masing.Borang tempahan adalah suatu kemestian bagi sesuatu blog atau web perniagaan bagi membolehkan pelanggan memesan sesuatu barangan.Untuk tutorial kali ini saya akan tunjukan cara membuat borang tempahan yang membolehkan pelanggan memesan barangan dari laman blog perniagaan anda.

Terdapat banyak laman web yang menyediakan borang tempahan secara online.Salah satunya adalah laman web response-o-matic.com.

Langkah bagimembuatnya:
1.Masuk ke web response-o-matic.com
2.Klik pada get started….

3.Isikan form signup yang muncul,isikan ruangan nama,email dan password dan klik sign up, paparan untuk sign in akan muncul jika anda telah berjaya mencipta akaun dengan response o matic.

4.Buka email anda untuk pengesahan pendaftaran, masukkan email dan password tadiuntuk log in

5.Selepas pengesahan email anda akan dibawa kepaparan bagimencipta form.Terdapat ruangan nama dan email(boleh dipinda dengan mengklik pada edit),klik pada add question untuk menambah butiran yang diperlukan pada form,bila dah siap klik pada continue.

6.Kemudian muncul option untuk form yang akan anda buat.Yang bertanda upgrade adalah option yang perlu anda bayar jika hendak menggunakannya.Pada bahagian ini masukkan butiran pada email & sms

notifications supaya bila ada tempahan anda akan menerima email,kemudian klik continue.

7.Paparan kod html akan muncul,salin kesemua kod ini.

8.Log in ke blog anda

9.Klik pada pages dan pilih new page….blank page

10.Masuk kan nama pages sebagai borang tempahan.klik tab HTML dan pastekan kod yang disalin tadi pada ruangan tersebut(bukan pada mode compose).Kemudian klik pada publish.

Pada pages akan keluar senarai page yang telah dibuat tadi

Tentunya bagi laman web atau blog perniagaan anda perlu membuat pages(halaman) seperti senarai produk,borang tempahan,hubungi saya dsb.Anda perlu buat langkah bermula pada langkah ke 9 untuk membuat halaman(page) yang berasingan.Pada pages terdapat tiga pilihan iaitu:

Top tabs ----tab navigasi berada diatas
Side links ----tab navigasi akan berada ditepi blog
Don’t show---jika anda ingin membuat link dengan butang link tersendiri.Anda perlu buka page dan ambil link yang terpapar pada ruangan search dibrowser.

Sebelum ini juga ada posting tentang membuat pages dan anda boleh rujuk disini.

Selamat mencuba …:)

klik butang +1 jika suka artikel ini :) :)

Membuat facebook page dan like box

noreply@blogger.com (sibersensasi) — Sat, 25 Aug 2012 04:57:00 +0000

Facebook like page adalah satu jaringan sosial yang penting bagi meningkatkan populariti sesuatu blog atau web site.Pemasangan facebook like box pada blog akan membolehkan pengunjung mengklik like jika suka dengan blog anda

Cara membuat facebook page

1.Log in dahulu ke facebook anda

2.Pada senarai menu sebelah kiri terdapat pages----create a page

atau boleh juga masuk ke http://www.facebook.com /pages/create.php

3.Kemudian pilih brand or product

4.Pilih website dari senarai option dan namakan page yang anda
inginkan pada brand or product name,

5.Tandakan pada I agree with facebook page terms dan klik pada get started

6.Kemudian anda akan dibawa ke paparan setup page anda

7.Pada profile picture anda boleh masukkan imej untuk page anda

8.Kemudian pada about masukkan keterangan berkenaan page anda

(Boleh juga skip pada bahagian ini kerana anda boleh memasukkan
kemudian pada page anda)

9.Kemudian dapatkan dan salin url page anda pada ruangan url dibrowser.

Langkah seterusnya:

Cara membuat like box
Masuk ke halaman berikut http://developers.facebook.com/docs/reference/plugins/like-box/

Setting pada Facebook Like Box:
- Facebook Page url: Masukkan url page anda disini
- Width: Lebar like box
- Color scheme: pilihan warna terang atau gelap
- Show Faces: Jika anda ingin menampilkan imej profail bagi facebook
- Border color: Masukkan kod warna jika ingin meletak border atau kosongkan untuk transparent.
- Show stream: Jika ingin memaparkan posting terakhir anda.
- Show header: akan memaparkan tulisan header "Find Us on Facebook".
Preview akan terpapar di sebelah kanan form setelah disikan.
Klik pada get code (salin kod likebox anda disini)

Paparan kod akan keluar terdapat kod dalam kategori HTML5,XFBML,
IFRAME dan URL .
Salin kod pada IFRAME

Memasukkan widget pada blog

Kemudian masuk kedashboard blog anda:
Bagi dashboard baru:
Pilih Layout….Add a gadget

..HTML/Javascript

bagi dashboard lama:
Pilih design…page elements…add a gadget
Dan masukkan kod facebook like anda disini dan klik save

update 8/5/2013

Cara membuat cursor sendiri

noreply@blogger.com (sibersensasi) — Sun, 15 Jul 2012 06:18:00 +0000

Sesetengah blog yang anda lawati mempunyai kursor yang unik dan menarik. Ada yang membuat kursor dengan tulisan nama sendiri dan ada yang meletakkan gambar sebagai kursor.Mungkin anda ingin membuatnya ,jadi tutorial ini akan menerangkan cara cara untuk membuat kursor anda sendiri.

Untuk tutorial ini saya menggunakan perisian AdobePhotoshop CS5.
1.Pada menu file pilih new dan masukkan setting seperti berikut

Width 80pixels,height 45 pixels,resolution 75pixels dan background content transparent
Klik ok setelah memasukkannya.

2.Kemudian kita akan masukkan anak panah untuk kursor ini,pada toolbar pilih rectangle tool (ikon kotakdisebelah bawah ikon panah)dan ambil custom shape dari senarai yang terpapar

3.Gunakan move tool dantandakan(tick)pada show transform control untuk memutarkan anak panah .Kotak yang muncul membolehkan anda membesar,memutar dan mengubah kedudukan.

4.pilih text tool ,jenis tulisan,warna dan taipkan teks yang anda inginkan

5.Simpan kursor yang telah dihasilkan

Ambil menu file pilih save as masukkan nama fail pada file name dan pilih format png (boleh juga format gif) pada format dan klik save.

Ok dah siap pun cursor text anda.

Cara nak letak gambar sebagai kursor

1.Anda perlu sediakan imej yang hendak diletakkan sebagai kursor.Jika imej besar perlulah dipotong terlebih dahulu

memotong imej dengan photoshop:

2.Masukkan imej>>klik open>>pilih imej yang diperlukan
Pilih crop tool,kemudianklik an seretkekotakpadabahagian yang hendakdipotong.Tekan enter

3. Jika sudah berpuashati.Simpan imej anda dengan format jpeg.

4.Seterusnya ikut pada langkah 2 diatas(memasukkan anak panah)
masukkan imej yang telah anda crop..

5.File pilih>> open dan browse imej tadi.Gunakan move tool,klik dan seret ke sebelah kursor yang telah dibuat

Untuk ubah saiz pastikan show transform controls diaktifkan.kemudian save imej dalam format png atau gif.

Cara meletakkan cursor pada blog

Imej yang telah siap perlu diupload pada web site yang menyediakan kemudahan upload imej seperti imageshack atau tinypic bagi mendapatkan dapatkan url untuk imej.Setelah selesai upload dan dapatkan url tadi.

Kemudian masuk ke design>>template>edit html

cari kod </head>

dan letakkan kod seperti dibawah sebelum kod </head>:

Masukkan url imej yang anda upload dan gantikan pada bahagian teks berwarna oren.

Kemudian save.