Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Numbered Page Navigation for Blogger

Friday, February 19, 2010 | 0 comments

Blog pager akan memudahkan pembaca blog anda untuk meneroka ke dalam arkib blog anda berbanding dengan "Newer Post" dan "Older Post" link.

Memasang blog pager hanya memerlukan beberapa langkah mudah.

Langkah 1:
Login ke akaun blogger anda

Langkah 2:
Save template anda terlebih dahulu

Langkah 3:
Klik "Layout" -->"Edit Html"

Langkah 4:
Copy dan paste skrip dibawah betul-betul sebelum


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Langkah 4:
Kemudian menambah kod JavaScript di bawah posting anda yang akan menggantikan "Newer / Older Posts" link. Kemudian cari kod bahagian ini (atau yang serupa) dalam template anda:

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Add code dibawah selepas teks </b:section>:

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

Langkah 5:
Save

P/S Jika ada sebarang masalah dalam topik ini,sila tinggal komen anda diruangan komen dibawah.


Simple countdown & count up widget for blogger

| 0 comments

Countdown widget sangat berguna kepada sesiapa yang ingin mengingati tarikh-tarikh penting dalam hidup seperti hari lahir,hari ulangtahun perkahwinan dan berbagai lagi.Dengan simple countdown widget ini,anda dapat mengingati setiap tarikh-tarikh penting dan ia akan kelihatan kemas didalam blog anda.Anda boleh membuat seberapa banyak tarikh-tarikh penting dengan menggunakan widget ini.
Anda boleh lihat contoh widget ini didalam blog saya di sebelah kanan sidebar "Special Event".
Menambah Simple Countdown widget adalah sangat mudah iaitu:-

Langkah 1:
Hanya login ke Blogger akaun anda.

Langkah 2:
Klik --> Layout -> Add a Gadget -> HTML / Javascript

Langkah 3:
Kemudian,copy dan paste code dibawah ke dalam pop-up HTML/Javascript window
/*
Untuk Countdown tarikh-tarikh penting
*/
<ul><li>
<script>
//SILA TUKAR TEKS Hari Raya Aidilfitri mengikut kehendak anda cth:Besday Aku
//SILA TUKAR TEKS Selamat Hari Raya Aidilfitri mengikut kehendak anda cth:Hepi Besday kat Aku
var before="Hari Raya Aidilfitri!"
var current="Selamat Hari Raya Aidilfitri!"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var futurestring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)
if (difference==0)
document.write(current)
else if (difference>0)
document.write("There are, "+difference+" days until "+before)
}
//SILA MASUKKAN TARIKH COUNT DOWM ANDA IKUT FORMAT year/month/day
countdown(2010,09,10)
</script></li></ul>
<ul><li>
<script>

/*
Untuk CountUp tarikh-tarikh penting
*/
<ul><li>
<script>
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" days"
document.write("We have been married for "+difference+"!")
}
//SILA TUKAR TEKS We have been married for mengikut kehendak anda cth:Kami dah bersama selama
//SILA MASUKKAN TARIKH COUNT UP ANDA IKUT FORMAT year/month/day
countup(2002,01,22)
</script></li></ul>


Langkah 4:
Save

P/S Kalau ada yang kurang faham atau sebarang masalah mengenai topik ini,sila tinggal pertanyaan anda diruagan komen dibawah.InsyaAllah saya akan cuba sedaya upaya termampu.

Top Commenters Widget for blogger

Thursday, February 18, 2010 | 1 comments

Jika blog anda memiliki pengunjung setia dan Commenters, jadi salah satu cara untuk menunjukkan rasa terima kasih anda pada mereka adalah dengan menambah dalam blog anda "dofollow" blog, atau anda boleh menambah Top-Commenters widget dalam blog anda.
Menambah Top-Commenters widget adalah sangat mudah iaitu:-

Langkah 1:
Hanya login ke Blogger akaun anda.

Langkah 2:
Klik --> Layout -> Add a Gadget -> HTML / Javascript

Langkah 3:
Kemudian,copy dan paste code dibawah ke dalam pop-up HTML/Javascript window

<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src=http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=
7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2F
YOURBLOGURL.BLOGSPOT.COM&num=20&filter=YOURNAME
type="text/javascript"></script>



Langkah 4:
Save

Add automatic image frame in blogger

Friday, February 12, 2010 | 3 comments


Kali ini,saya nak berkongsi satu tips yang memudahkan anda untuk upload image tanpa perlu edit frame terlebih dahulu.Kebanyakan kita para blogger,mesti nak image didalam blog kelihatan cantik dan kemas dengan dihiasi frame.Jadi,kebanyakan kita akan edit image untuk menambah frame sebelum di"upload" ke dalam blog.

Di disini ada cara mudah untuk anda,anda hanya perlu upload image terus ke dalam blog,dan automatik,frame akan teruus menghiasi image anda.

Langkah 1:
Login ke blog anda.

Langkah 2:
Klik "Layout".

Langkah 3:
Klik "Edit Html"

Langkah 4:
Cari (atau tekan ctrl F) --> /head

Langkah 5:
Copy skrip dibawah

<style type='text/css'>

.post img {

border: 3px solid gray;

padding: 3px; /*Inner border size*/

background: #F5A9D0; /*Inner border color*/

}

.post img:hover {

border: 3px solid black;

padding: 3px; /*Inner border size*/

background: #F6CEE3; /*Inner border color*/

}

</style>

Langkah 5:
Dan paste sebelum perkataan /head
Contohnya:

<style type='text/css'>

.post img {

border: 3px solid gray;

padding: 3px; /*Inner border size*/

background: #F5A9D0; /*Inner border color*/

}

.post img:hover {

border: 3px solid black;

padding: 3px; /*Inner border size*/

background: #F6CEE3; /*Inner border color*/

}

</style>

</head>

P/S Anda boleh mengubah suai background,border & padding size dan melihat contoh frame pada semua image dalam blog saya.

Highlight Author Comment dalam Blogspot

Thursday, February 11, 2010 | 0 comments

Tips ini untuk sesiapa yang minat nak Highlight Author Comment dalam blog anda.Cara ini akan membuatkan komen dari penulis blog nampak menonjol dari komen pengunjung blog anda.


1. Login --> blogger.com
2. Kemudian Klik "Layout --> Edit HTML".JANGAN LUPA BACKUP TEMPLATE ANDA DAHULU
2. Cek kotak
"Expand Widget Templates" .
3. Copy skrip dibawah pastekan sebelum
]]></b:skin> atau copy kedalam CSS comment anda.

.comment-body-author {
background: #E6E6E6;
/* Background color*/
color: #000;
/* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
/* Position*/
}


4. Kemudian "search" skrip dibawah didalam skrip template anda:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. Anda perlu menambah code berwarna merah diatas kedalam skrip blog anda.Kedudukan skrip mesti la betul.
6.Dan akhir sekali,anda boleh la klik "Save"


Recent Post Dengan Slide

Wednesday, February 10, 2010 | 52 comments

Sekarang mesti ramai yang nak letak recent post macam slide kan..nampak kemas ,cantik dan up to date..Betul tak??Entri kali nie,saya tunjukkan langkah2 nak pasang recent post dengan slide dalam blog anda.Sila ikuti langkah-langkah dibawah...

Dan pada yang tak faham recent post dengan slide nie,boleh tengok dalam blog saya di "sidebar" title "Popular Entri".

Langkah 1 :

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2 :

Salin kod di bawah dan paste pada ruang Content HTML/Javascript.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
margin-bottom:-20px;
padding:0px 0px -20px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:262px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#FFFFFF;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#A32929;
font-size:12px;
height:0px;
overflow:hidden;
margin: 0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:0px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:0px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = " ";
showPostDate = false;
showcomments = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://Masukkan URL blog anda disini.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>


Langkah 3 :
Klik "Save"

Nota:Anda boleh mengubah saiz slide.
Panduan : width:280px; (saiz slide)
width:262px; (saiz teks pada slide)
background:#FFFFFF; ( background slide)
color:#A32929; (Warna teks)
numposts = 5; (Jumlah Entry yang anda akan paparkan)
home_page = "http://Masukkan URL blog anda disini.blogspot.com/";(Sila gantikan url MERAH dengan url blog anda)

Add scrollbar to blog post

Tuesday, February 9, 2010 | 0 comments

Scrollbars to Blog Post body

Untuk membuat scrollbars pada setiap blog posts, anda perlu login ke Blogger akaun, klik Layout -> Edit HTML dan cari "post".Kemudian Add perkataan yang berwarna red seperti yang ditunjukkan dibawah :-

.post {
height:200px;
overflow:auto;
}

Result:Ini akan membuat scrollbars pada setiap post seperti dibawah:-

Scrollbars within Blog Post


Kadang - kadang ,anda tidak mahu scroll bar pada setiap blog posts,tetapi hanya pada sesetengah parenggan dalam blog post sahaja.

Contohnya,
.scrollbox {
height:100px;
width:400px;
overflow:auto;
}


Save template. Kemudian,bila anda mahu menulis post , switch dari “Compose” mode ke “Edit HTML” mode.



Add tags (perkataan red)sebelum dan selepas ayat-ayat yang anda mahu berada dalam scrollbar
.
Contohnya:




Kemudian, anda boleh sambung menulis dengan switch semula ke "Compose"mode.

Selepas anda selesai menulis,dan anda publish entri anda,anda akan dapati scrollbar dalam entri anda,seperti dibawah:-

Style Vision

Friday, February 5, 2010 | 0 comments



Features:
Instructions:How to install a Blogger template
Coder / Designer:Dhampire / New WP Themes
Compatible with:FFIEChrome
Language:English
Properties:3 Columns, Adapted from Wordpress, Fixed width, Green,Right sidebar, White
Categories:Neutral
SOURCE:BTEMPLATE

Rustic Portrait

| 0 comments




Features:
Instructions:How to install a Blogger template
Coder / Designer:Anshul / TemplateLite
Compatible with:FFIEChrome
Language:English
Properties:3 Columns, Adapted from Wordpress, Brown, Fixed width, Left sidebar
Categories:Family, Grunge, People, Personal pages, Photography

SOURCE : BTEMPLATE

Menjana unique visitor dengan cepat

Thursday, July 17, 2008 | 0 comments

Kalau korg dpt terapkan metod ini dengan btul kt web / blog korg, maka akn blaku kesibukan lalu lintas pengunjung yang luar biasa tiap2 ari..xpyh nk bersusah payah memikirkan SEO atau berpenat-penat utk promosi blog/bisnes kite kt sume org..
Blog jgk akn dibanjiri backlink secara signifikan dari hari ke hari, tanpa bersusah payah link kesemua tempat di dunia Internet.
meh le kita pakat cuba…

Perkara yang harus korg lakukan adalah ikut langkah-langkah berikut:-

1. Tulis posting artikel mcm posting saya ni, dgn cara or gaya tsendiri atau copy-paste je artikel ni. Then, bg tajuk yg menarik.

2. Anda hanya perlu meletakkan Link URL di bawah ini untuk artikel yang anda tuliskan dalam blog / web.



1. Free Templates

2. Jogja-Blogger

3. Tutorial Blogging Internet Bisnis Online

4. pVidia Blog

5. Stop Dreaming Start Action (Jonru)

6. Bisnis di Internet

7. Blogging-Surfer

8. Tintalughahwi

9. Igauan

10. Ad-dai’

11. kakngah

12. Zie Fauzi

13. Happiness (zuliana)

14. Hatta In Da’ House
15.Husaini's Blog(http://husaininazari.blogspot.com)
PERATURAN

1. Sebelum meletakkan web-web di atas di komuniti Link URL ke posting web / blog korg, sila hapuskan link nombor 1.Selepas itu pindahkan Link no.2 menjadi no.1, yang No.3 jadi No.2, yang No.4 jadi No.3 dan seterusnya. Setelah itu masukkan link anda di urutan bawah (No.15).

2. Ingat! Jangan Ubah urutan daftar link itu.

Jika setiap blogger mengikuti formula tersebut, maka bakal menghasilkan backlink seperti berikut:
Bila posisi anda pada no.15, jumlah backlink = 1


Posisi no.14, Jumlah backlink = 5

Posisi no.13, Jumlah backlink = 25

Posisi no.12, Jumlah backlink = 125

Posisi no.11, Jumlah backlink = 625

Posisi no.10, Jumlah backlink = 3,125

Posisi no.9, Jumlah backlink = 15,625

Posisi no.8, Jumlah backlink = 78,125

Posisi no.7, Jumlah backlink = 390,625

Posisi no.6, Jumlah backlink = 1,953,125


Posisi no.5, Jumlah backlink = 9,765,625

Posisi no.4, Jumlah backlink = 48,828,125

Posisi no.3, Jumlah backlink = 244,140,625

Posisi no.2, Jumlah backlink = 1,220,703,125

Posisi no.1, Jumlah backlink = 6,103,515,62



YA LEBIH DARI 6 JUTA BACKLINK !!!

Bayangkan jika ini boleh berjalan dengan sempurna maka korang akan mendapatkan backlink maksimum 6,103,515,62 dari berbagai blog yang korang tak pernah bayang sblum ni.Jika ada pengunjung ke blog korang dari Link List yang disebutkan di atas maka korang akan secara automatik dapat lalu lintas ke web / blog korg jgk.
Ingat! Aturan permainan,link blog korg harus mulai dari urutan (No.15), sehingga hasil dapat Maksimum backlink. Jangan salahkan aku jika korg tak ikut cara ni dgn betul dan link korg tiba2 berada di urutan No.1 dan menghilang di daftar link. Jadi mulai urutan adalah di bahagian bawah (No.15).




OK..SELAMAT MENCUBA..SEMOGA SAMA-SAMA BERJAYA.






Nota Ringkas : Sapa tak tahu cara nak copy paste text ni tinggalkan link kat sini. Nanti leh saya ajar.


 

Ratuhati Kami

  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith

IslaMy

© Copyright 2010-2011 KITA SEMUA SAMA All Rights Reserved.
| Published by LoveJurnal | Powered by Blogger.com.