Tingkatkan traffic search engine dengan costum title meta tag

Default setting yang di buat blogger.com pada title meta tag yang terdapat pada script template anda sebenarnya kurang mesra kepada google search engine. Ini kerana, title meta tag tersebut akan memaparkan nama blog terlebih dahulu dan kemudian di ikuti dengan tajuk entri atau artikel. Di bawah ini adalah contoh title meta tag yang terdapat pada blog anda.

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

Untuk menjadikan blog anda mesra dengan google search engine, title meta tag yang terbaik adalah title meta tag yang akan memaparkan tajuk entri atau artikel terlebih dahulu dan di ikuti dengan nama blog. Apa yang perlu anda lakukan adalah menggantikan default title tag kepada title meta tag yang lebih mesra dengan google search engine. Anda boleh lihat costum title meta tag tersebut di bawah.

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


Untuk menggantikan default title tag kepada costum title meta tag, hanya perlu ikut beberapa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Design => Edit HTML. Seterusnya klik pada Expand Widget Templates.

Langkah 2

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.

Langkah 3

Salin kod berwarna merah di bawah dan paste (gantikan) pada kod <title><data:blog.pagetitle/></title>

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

Akhir sekali, klik Preview dan jika tiada mesej Error terpapar, klik saja Save.


Sumber...http://maribinablog.blogspot.com

Read more »

Jquery Sliding Login Panel di atas header blog

Untuk membina Jquery Sliding login panel di atas header blog,  sila ikut beberapa langkah di bawah.

 1. Log in dashboard--> Template --> Edit HTML --> Proceed.

 2. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>

 3. Copy dan paste kod css ini, di atas atau sebelum kod ]]></b:skin> 

#slide-panel{
background-color:#000;
border-bottom:2px solid #838383;
display:none;height:80px;
margin:auto;padding-top:20px;
}

.slide{width:950px;
margin:auto;
}

.btn-slide:link,.btn-slide:visited{
color:#fff;
float:right;
display:block;
font-size:14px;
font-weight:bold;
height:28px;
padding:3px 0 3px 0;
line-height:28px;
text-align:center;
text-decoration:none;
width:70px;
font-family:Arial;
background:#000;
margin-top:-2px;
-moz-border-radius:0px 5px 0px 5px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}

.loginform{
width:950px;
margin:0 auto;
color:#999;
font-family:Arial,Helvetica,sans-serif;
}

.formdetails{
color:#FFF;
font-size:12px;
padding:5px;
}

.formdetails input{
border:none;
padding:2px 5px;
background-color:#EFEFEF;
}

.loginregister{
color:#999;padding:5px;
}

.loginregister a:link,.loginregister a:visited{
color:#90fff6;
font-size:12px;
}

.loginregister a:hover{
color:#fff';
}

.loginform h2{
padding:10px 10px 10px 0;
font-size:18px;
font-weight:normal;
text-transform:uppercase;
}

.loginform ul li{
display:inline;
}

.loginform ul li a:link,.loginform ul li a:visited{
color:#FFF;
font-size:12px;
text-decoration:underline;
}

input#signIn{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JdJekUSmIhOOXUYVn1XSye4_UcfpU2Qe7eLFYff7sTH5t94yQc19MBIioRsJvHlDdlt6sw5g5cH-APabHi1c7NzBL-KIgXbNinrZOjHwdvy2sGGcAGkSw7RugmhrlnMZcM_pxGPKwZw/) no-repeat;
width:94px;
height:25px;
cursor:pointer;
padding-bottom:5px;
}

input#Email,input#Passwd{
background:#414141;color:#fff;
}

input:focus#Email,input:focus#Passwd{
background:#545454;
}

 4. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </head>

 5. Copy dan paste kod ini, di bawah atau selepas kod </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Masuk'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/>Ingatkan saya</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Daftar&#173;</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Lupa kata laluan anda?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Sign in </a></div>

6. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.

p/s: Untuk menukar warna background panel dan button, sila edit kod yang di highlightkan dengan warna merah.
Sumber.....http://maribinablog.blogspot.com

Read more »

5 cara untuk top monetize blog anda

Jika anda mahukan cara-cara untuk mendapatkan wang daripada blog anda, maka artikel ini adalah untuk anda. Dalam artikel ini, kita membincangkan beberapa kaedah di mana anda boleh mendapatkan wang daripada blog anda dengan cara yang mudah dan mudah.

1. Advertising :

Salah satu bentuk yang paling biasa dan paling mudah Pengewangan blog anda melalui pengiklanan. Blog anda boleh menjana pendapatan melalui pelbagai bentuk pengiklanan. Blog anda boleh menampilkan semua jenis iklan seperti pautan teks, iklan banner, atau iklan imej. Terdapat banyak program pengiklanan boleh didapati di Internet, sebagai contoh, Google AdSense, Pay per Post, Amazon Associates, dan eBay Gabungan.

2. Merchandising :

Ini merupakan satu lagi cara pengewangan blog anda. Anda boleh menggunakan blog anda untuk menjual pelbagai jenis barangan. Kebanyakannya penjualan barangan di blog berlaku melalui perkhidmatan seperti CafePress. Penyedia perkhidmatan menyesuaikan pelbagai produk dan barangan supaya anda boleh menjual mereka di blog anda.

3. Review :

Anda boleh menjana pendapatan blog anda dengan menulis ulasan di blog anda. Ulasan boleh dikaitkan dengan produk, perniagaan, acara, filem, malah sebuah buku baru. Agensi yang berkaitan dengan topik kajian anda akan membayar anda untuk menulis semula. Hanya memberi perhatian kepada peraturan akaun mata wang asing baru ini, mereka retak ke atas ulasan yang hanya dibuat untuk komisen. Tahu produk anda, anda sedang mengkaji benar-benar baik sebelum menggunakan kaedah ini.

4. E Book :

Penulisan EBook adalah cara surefire daripada pengewangan blog anda. Anda menulis EBook dan kemudian menjualnya di Internet melalui blog anda. Jika anda mahu, anda juga boleh menggunakan blog anda untuk melakukan pemasaran untuk beberapa EBook ini. Ini merupakan cara terbaik untuk mendapatkan wang dari blog. Ini akan menolong terutama bagi mereka blogger yang telah ditubuhkan pada diri mereka Wide Web Dunia sebagai pakar dalam satu bidang atau topik yang lain. Anda boleh meningkatkan pegangan dalam bidang ini dengan menyediakan pembaca tetap blog anda dengan petikan en eksklusif atau maklumat eksklusif mengenai EBook anda.

5. Sell advertising space :

Akhir sekali, satu lagi bentuk pendapatan tunai di blog anda adalah untuk menjual ruang iklan. Anda boleh mengenakan bayaran mingguan atau bulanan, teks pautan atau meletakkan banner pada laman web anda untuk laman-laman lain. Sebaik sahaja anda boleh membuktikan aliran trafik anda setengah jalan yang baik, ini adalah cara yang baik untuk mendapatkan wang daripada blog anda

Source: http://my.hicow.com/

Read more »

Cara pasang Recent posts floating bar widget di Blogspot

Recent posts floating bar  seperti yang boleh anda lihat di bahagian bawah blog ini adalah widget yang sangat menarik. Widget tersebut memaparkan tajuk post terkini yang berefek slider.

Untuk memasang widget Recent posts floating bar slider ini pada blog anda, sila ikut beberapa langkah di bawah.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

2. Seterusnya tick "Expand Widget Templates"

3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod </head>

4. Copy dan paste kod css ini, di atas atau sebelum kod </head> 

 <style type='text/css'>

#bd {
float:bottom;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-top:5px;
font-size:12px
}

.text {
color:#98BF2F;
margin-left:8px
}

div#news-1 .gk_news_highlighter {
font-family:Verdana, Arial;
font-size:11px;
color:#666
}

div#news-1 {
width:960px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlLCgd82p35dfZvxFBCM0maHBn5blzYY2_Vc-EWjwUH-OuNyDWTEPQn5jSypRYXTj3IaEhLrxnX2VKBAI7TtDmKPIs71FGBp8b70S2DzhM7pq6K985tCelfQNhqEmcmoqH_-C4FLoW3va/s320/gradient.png) repeat-x 0 -100px;
clear:both;
overflow:hidden
}

div#news-1 .gk_news_highlighter_wrapper {
float:left;
width:820px;
height:24px;
line-height:24px;
overflow:hidden;
position:relative
}

div#news-1 .gk_news_highlighter_item {
width:auto;
height:24px;
padding-left:20px;
display:none;
position:absolute
}

div#news-1 .nowrap {
white-space:nowrap
}

div#news-1 .gk_news_highlighter_title {
padding-left:5px
}

div#news-1 .gk_news_highlighter_desc {
padding-right:5px
}

div#news-1 .gk_news_highlighter_interface {
float:left;
width:120px;
height:24px;
text-align:right;
line-height:24px;
z-index:1000
}

div#news-1 .gk_news_highlighter_interface .text {
float:left;
display:block;
width:auto;
padding-left:5px;
font-weight:700
}

div#news-1 .gk_news_highlighter_interface div {
width:30px;
float:right
}

div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
cursor:pointer;
width:13px;
height:24px;
display:block;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFUXBqizlX1ZtkTosfVif71mpkaym1LsYQH1pk7kkcwEYGalxy2obqTHgeobHjOdm4sX5HcJqsWwYfI_TmvoCn2RNBG-kcrdXABx7mq7U8dQ_DFT1bZFsPYLdiaeKghURPK5HMNWZmQo/s1600/play.png&#39;) no-repeat 0 50%;
float:left
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position:-13px 50%
}

div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
color:#FFF
}

div#news-1 .gk_news_highlighter_interface a.next {
float:right;
background-position:-26px 50%
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position:-39px 50%
}

</style>

5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>. 

Bagi blog yang menggunakan template dari template designer, cari kod </footer>


6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>

 Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer>

 <div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = &quot;no&quot;;
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
icon = &quot; &#187; &quot;;
label = &quot;&quot;;
numposts = 30;
home_page = &quot;http://maribinablog.blogspot.com/&quot;;
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick[&quot;gk_news_highlighternews-1&quot;] = {
&quot;animationType&quot; : 3,
&quot;animationSpeed&quot; : 200,
&quot;animationInterval&quot; : 2000,
&quot;animationFun&quot; : Fx.Transitions.linear,
&quot;mouseover&quot; : 1};
</script>

7. Edit kod yang di bold dengan warna merah dengan menggantikannya kepada URL blog anda dan juga bilangan post yang hendak dipaparkan.

8. Seterusnya klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, sila edit nilai pada kod yang di bold dengan warna biru pada langkah 4.

width:960px; (Panjang bar)
margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya)

9 . Akhir sekali, jika anda berpuas hati dengan kedudukan bar tersebut, klik Save.

Sumber.... http://maribinablog.blogspot.com

Read more »