Info untuk semua blogger yang menguruskan hal blog.: Blogger Tutorials

Showing posts with label Blogger Tutorials. Show all posts

Bagaimana Pasang Widget Facebook Popup Like Box Timer Dalam Blogspot

Salah satu cara untuk tingkatkan like adalah dengan pasang Facebook Popup dalam blog.

Namun, apabila dicari tutorial berkaitan Facebook Like Popup banyak tutorial yang tidak menjadi.

Jadi, saya ambil inisiatif untuk membantu anda pasang widget Facebook Like Popup Timer yang betul-betul menjadi dan berfungsi.

Saya sudah cuba berkali-kali dan widgetnya terbukti berfungsi. Saya ambil daripada Kaki Network. Boleh lihat demi di bawah:

DEMO

Tutorial Pasang Widget Facebook Like Popup Timer

Ikut 4 langkah mudah pasang widget:

1. Pergi ke Blogger dashboard > Template > Edit HTML.

2. Cari kod:

<body>

Kalau tidak jumpa, cari yang ini:

<body

Tip: Guna Ctrl + F untuk memudahkan carian anda.

3. Di bawahnya, letak kod ini:

<style type='text/css'>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;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{background:none repeat scroll 0 0 #000000;display:none;height:100%;left:0;opacity:1!important;position:fixed;top:0;width:100%;z-index:100}#fblikepop #closeable{float:right;margin:7px 15px 0 0;}#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;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{overflow:hidden;}#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !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 src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
    kakinetworkdotcom01username="pages/Putera-izmancom/329480917076612",
    kakinetworkdotcom01title="Sila Like Untuk Menerima Info Berguna",
    kakinetworkdotcom01skin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyCk9kTexsc5n5_n58zq47HLFCVsUv1929M1XTHdTMkA3oTTHMkDBRJoF7THpIaAUiTcjgsEaT3vgVkBPNXwou4HrW138qXDZARKnc2BsqVC6pNmlOM6NSiY5fK0XRFf77l2wm_8GGsg/s1600/FBLikePopUp04.png",
    kakinetworkdotcom01time="30",
    kakinetworkdotcom01wait="0",
    kakinetworkdotcom01lang="my"
//]]>
</script>
<script src='http://yourjavascript.com/21313234350/tawaunetwork.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
    $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Sebelum nak tambah kod di atas, edit dahulu.

Cari kod:

pages/Putera-izmancom/329480917076612

Gantikan dengan URL Facebook page anda.

4. Save template.

Penerangan Kod

kakinetworkdotcom01title="Sila Like Untuk Menerima Info Berguna",

Boleh ubah:

Sila Like Untuk Menerima Info Berguna

Dengan apa sahaja ayat yang anda mahu.

kakinetworkdotcom01skin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyCk9kTexsc5n5_n58zq47HLFCVsUv1929M1XTHdTMkA3oTTHMkDBRJoF7THpIaAUiTcjgsEaT3vgVkBPNXwou4HrW138qXDZARKnc2BsqVC6pNmlOM6NSiY5fK0XRFf77l2wm_8GGsg/s1600/FBLikePopUp04.png",

Boleh ubah:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyCk9kTexsc5n5_n58zq47HLFCVsUv1929M1XTHdTMkA3oTTHMkDBRJoF7THpIaAUiTcjgsEaT3vgVkBPNXwou4HrW138qXDZARKnc2BsqVC6pNmlOM6NSiY5fK0XRFf77l2wm_8GGsg/s1600/FBLikePopUp04.png

Dengan URL gambar yang anda mahu.

kakinetworkdotcom01time="30",

Boleh ubah:

30

Dengan masa yang anda mahu. 30 itu untuk 30 saat. Andai mahu ia paparkan selama 5 minit, tukar sahaja 30 jadi 300.

Andai Widget-Nya Tidak Berfungsi, Bagaimana?

Punca ia tidak fungsi adalah kerana plugin jquery.

Tambah plugin ini untuk buat ia berfungsi:

1. Cari kod:

</head>

2. Di atasnya, tambah kod ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

3. Save template.

Jika tidak berjaya juga, mohon komen di ruang komenter.

Daripada Penulis

Sebenarnya banyak lagi widget-widget Facebook Popup yang betul-betul berfungsi.

Salah satu yang saya jumpa ialah Facebook Popup (Like Box Widget).

Kalau anda baca diruang komenter dalam blog teresbut, ada jumpa satu lagi widget Facebook Popup versi Twitter Bootstrap.

Dan jangan lupa G+ entri ini. Terima kasih.

Klien saya tanya,

"Danial, boleh tak buat disable copy-paste dalam blog saya."

Dan sudah tentu boleh. Saya cari dan cari tutorialnya. Kebanyakan yang saya jumpa semua kodnya panjang-panjang belaka.

Lalu, saya teringat satu laman yang ada buat tutorial mengenai disable right-click. Dan, alhamdulillah jumpa juga kod yang ringkas.

Sekadar beberapa baris sahaja.

Berapa baris? Baca lagi...

Tutorial Pasang Kod Disable Copy-Paste Dalam Blog

1. Pergi ke Blogger Dashboard > Template > Klik "Edit HTML."

2. Cari kod ini:

<head>

3. Di bawahnya, tambah kod ini:

<script language='JavaScript1.2'>
function disableselect(e){
return false}
function reEnable(){
return true}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable}
</script>

4. Dan "Save template."

Mudah bukan. :)

Daripada Penulis

Sebenarnya banyak lagi artikel-artikel tentang blog yang bernilai untuk dikongsikan kepada anda. Cuma saya ada sedikit penyakit kebelakangan ini.

Iaitu: Malas.

Mentang-mentanglah sudah habis sekolah. Sikap malas makin menjadi-jadi. Kalaulah saya boleh keluar semua idea dalam kepala saya ini dengan mudah. Nescaya blog anda semakin hebat, berautoriti lagi disayangi Google!

Dan like artikel ini.

Selepas berjaya buat, jangan lupa tinggalkan komen di bawah. Supaya saya jadi lebih rajin lagi. Hoho.

Sumber gambar.

Sebelum ini saya ada pos entri tentang HTML5, dan kali ini tutorialnya lebih mendalam lagi.

Oleh kerana saya banyak buat servis Blogspot maka secara tidak langsung banyak perkara baru yang saya pelajari.

Kenapa kita perlu blog HTML5?

Salah satu sebabnya ialah untuk Google lebih suka pada blog kita. Bila Google suka pada blog kita, maka trafik dari enjin carian semakin mencanak.

Itulah sebabnya.

Jadi: Bagaimana nak buat blog kita jadi HTML?

Baca lagi...

Tutorial Buat Template Blogger Valid HTML5

Sebelum anda nak tukar template jadi HTML5. Mohon backup dahulu.

Boleh rujuk tutorial ini untuk backup template anda: How to Backup your Blogger Template.

Sudah? Bagus.

Maka tukar template jadi HTML5.

Pergi ke bahagian: Blogger Dashboard > Template > Dan klik "Edit HTML"

1. Ganti kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dengan:

<!DOCTYPE html>

2. Ganti kod:

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Dengan:

<HTML expr:dir='data:blog.languageDirection' prefix='og: http://ogp.me/ns#' xmlns='http://www.w3.org/1999/xhtml' xmlns:fb='http://ogp.me/ns/fb#'>

3. Ganti:

</html>

Dengan:

</HTML>

4. Buang SEMUA kod:

<b:include name='quickedit'/>

5. Buang kod:

    <b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
</b:if>
</b:includable>

6. Ganti SEMUA kod:

<style>

Dengan:

<style type='text/css'>

7. Lalu ganti SEMUA (Jika ada):

<center>

Dengan:

<div align='center'>

8. Ganti SEMUA (Jika ada):

</center>

Dengan:

</div>

9. Save.

Sekarang blog anda sudah HTML5 (hampir) sepenuhnya. Kenapa hampir? Sebabnya adalah ada sesetengah kod Blogspot yang kita tidak boleh edit atau buang untuk jadikan blog kita HTML5 sepenuhnya.

Semak Blog Kita Sudah HTML5 atau Belum

1. Pergi ke: W3C Markup Validator

2. Masukkan URL blog anda di kotak, "Address".

3. Dan klik, "Check".

Gambar HTML5 errors W3C Markup Validator

Andai Errors-nya kurang 100, sudah bagus. Andai terlebih?

Buang widget:

Blogger Follower
Statistic

Daripada Penulis

Sejujurnya, memiliki blog HTML5 banyak kelebihannya. Bukan sahaja dapat trafik mencanak-canak, malahan ia membuat blog kita jadi lebih moden lagi berautoriti.

Andai anda tidak faham atau blog anda errors-nya melebihi 100, komen sahaja di bawah. Saya sedia membantu anda mengurangkan errors-nya lagi, dengan pantas.

Semoga berjaya. :)

Info untuk semua blogger yang menguruskan hal blog.

Bagaimana Pasang Widget Facebook Popup Like Box Timer Dalam Blogspot

Tutorial Pasang Widget Facebook Like Popup Timer

Penerangan Kod

Andai Widget-Nya Tidak Berfungsi, Bagaimana?

Daripada Penulis

Bagaimana Disable Copy-Paste Dalam Blogspot (Kod Ringkas)

Tutorial Pasang Kod Disable Copy-Paste Dalam Blog

Daripada Penulis

Tutorial Buat Blogspot Jadi HTML5 Yang Google Amat Suka

Tutorial Buat Template Blogger Valid HTML5

Semak Blog Kita Sudah HTML5 atau Belum

Daripada Penulis

Categories

Total Pageviews

Search This Blog

Followers

Translate

Popular Posts

Blog Archive

Feedjit