Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

Friday, September 9, 2011

Widget Yang Patut Ada Dalam Blog


Aku nak share dengan korang semua , tentang segala bagai widget yang gempak2 dalam blog aku ni , tak kisahlah korang nak kata tak gempak ke , tapi bagi aku , widget2 yang ada kat blog aku cukup gempak dan berguna . Semua widget ni , aku da try dan setakat ni takde pape error atau bug yang aku jumpa . Cara nak pasang pun senang . Jadi tunggu apa lagi , jom tengok widget gempak yang ada. ^^










1 - Like Facebook Fan


Widget ni penting untuk blog aku , senang nak kumpul fanpage di facebook , hasilnya aku dapat lebih 800 fans hanya dalam masa sebulan. gempak kan? kehkehkeh . Like fanpage ada dua jenis , 1 yang autoclose dan 1 lagi versi manual close . Free je . Tak payah bayar. ^^













2 - Kaki Share


Satu widget yang bagus bagi aku , senang nak share entri ke semua laman sosial , yang penting ada button G+, tweet dan button like facebok. Senang aku nak spamkan wall facebook aku lagi , hehe













3- Kaki Chat (Meeting Room)


Widget ni aku dapat sponser dari kakinetwork.com , korang jangan jeles plak , kalau korang nak beli , cuma 10 ringgit je setahun , dapat domain sendiri lagi . Jadi korang tak payah dah nak pakai shoutmix bagai tu , sebab ramai yang suka spam dan auto blogwalking klau pakai shoutmix. Jadi jom tukar pakai metting room , Ada free version , boleh cuba. 













4 - Comment Vote


Satu widget yang gempak , dah macam button like dgn unlike facebook dah , aku tak guna comment vote ni lagi setakat ni , tapi mungkin aku guna nanti , kalau aku guna sekarang  korang jeles nanti , HAHA
















Kalau korang nak tahu , semua widget ni dibuat oleh kakinetwork.com , korang boleh dapatkan semua ni kat website kakinetwork.com , serius gempak geng kakinetwork reka. Korang boleh dapatkan di sana. selain tu kakinetwork ada sediakan background blog yang cantik2. 





Entri ni tak ditaja oleh siapa2 pun , aku buat entri ni sebab nak share dengan korang widget apa yang menarik dalam blog aku ni , Aku cadangkan kat korang semua ,  baik cepat guna sebab widget2 ni penting untuk blog korang. ^^








Monday, September 5, 2011

Tutorial : Letak Button Back To Top







Aku tengok lah, ramai blogger yang tak letak widget 'back to top' kat blog , bagus widget ni, senang nak naik ke atas , tak payah nak scroll dah..



Jom kita letak kat blog , caranya



Dashboard ->  Design -> Add a Widget -> HTML/javascript dan paste code dibawah ni






<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="http://img529.imageshack.us/img529/1986/96133335.png

" /></a>



Yang warna merah tu code bagi gambar default, korang boleh tukar dengan gambar yang korang suka , kalau tak nak tukar , pakai je yang default punya .



Dan simpan .

Tuesday, August 2, 2011

Tutorial : Buat Sitemap Di Blog

Assalamualaikum , baru dapat online , penat sangat hari ni , hari ni aku dah gaji , so banyak bill yang kena pergi uruskan , bill broadband aku yang paling penting sebab semalam dah suspended , bill tak banyak pon, baru rm 170 ringgit je, tapi dah kena potong , tak sempat nak post entri ni semalam .HAHA . Ok2 , tak nak melalut panjang-panjang , ada orang tanya aku , macam mana nak buat SITEMAP cam blog aku ni , simple dan cantik (aku cakap) dan senang orang nak cari entri korang yang bersepah -sepah tu . Huhukk







Aku nak buat tutorial , tapi still tak de mase buat masa ni , aku bagi korang link je dulu ekk, aku pun buat pakai tutorial ni juga. :)





http://www.adamxis.com/2011/01/tutorial-letak-sitemap-di-page-tab.html



SELAMAT MENCUBA . Tak paham , boleh tanya aku :)

Friday, June 17, 2011

Tutorial : Bentuk Border Dan Cara Nak Letak Border Dalam Menubar Dan Sidebar



Assalamualaikum , hari ini aku nak buat satu tutorial , bagaimana nak letak border dalam blog kita, kalau korang tak tahu border tu apa, boleh tengok di MENUBAR , SIDEBAR  aku ,  di mana aku gunakan border jenis Example D untuk blog aku ni . Tapi kita kenali dulu jenis - jenis border yang ada ..




JENIS - JENIS BORDER



Di bawah ini jenis dan bentuk border yang ada ..










Example A

background: #790101;

border: 1px solid #790101;

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

}








Example B

background: #790101;

border: 1px solid #790101;


-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

}








Example C

background: #790101;

border: 1px solid #790101;


-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

}








Example D

background: #790101;

border: 1px solid #790101;


-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

}








Example E

background: #790101;

border: 1px solid #790101;


-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

}








Example F

background: #790101;

border: 1px solid #790101;


 -moz-border-radius: 35px;

border-radius: 35px;

}





Sebenarnya, ada banyak lagi bentuk border yang ada , tapi di atas adalah bentuk - bentuk border yang selalu orang pakai .





CARA LETAK BORDER DI MENUBAR






Sekarang kita belajar cara nak letak border kat MENUBAR dulu ek .



1) Memula korang kena buat satu LINK LIST , caranya , korang masuk DESIGN >> PAGE ELEMENT >> ADD GADJET >> LINK LIST , masuk kan link yang korang nak dan simpan .



2) Kemudian masuk ke EDIT HMTL , jangan lupa klik expand widget templates dan kemudian tekan ctrl + f untuk mencari code html dibawah ini





.tabs-inner .widget li a {






3) Kalau dah jumpa , korang ambil code border diatas dan paste mengikut urutan seperti gambar di bawah .










4) Dan preview blog korang tu , kalau dah puas hati , boleh save . 








CARA LETAK BORDER DI SIDEBAR (GADJET)














1) Untuk letakkan border dalam sidebar korang , korang cuma cari code html seperti di bawah ni





2) Kemudian masuk ke EDIT HMTL , jangan lupa klik expand widget
templates dan kemudian tekan ctrl + f untuk mencari code html dibawah
ini .





.sidebar .widget h2 {




3) Kalau dah jumpa , korang ambil code border diatas dan paste mengikut urutan seperti gambar di bawah .





4) Dan perview blog korang tu , kalau dah puas hati , boleh save .






KENALI CODE BORDER



Bonus untuk korang, jom kita kenali apa maksud di setiap code - code border tu .

Contoh korang nak gunakan border jenis D , korang akan guna kan code border seperti di bawah ni kan ? Sekarang kita ketahui code - code tersebut .




background: #790101;




border: 1px solid #790101;





-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;






} 





MERAH : Ini adalah code bagi background border , yang code #790101 , tu adalah code warna bagi maroon , korang boleh tukar mengikut warna pilihan korang di sini , pilih code warna kesukaan korang dan ganti kan dengan code #790101 itu .





 OREN : 1px bermaksud ketebalan border korang tu , korang boleh tukar ikut ukuran kesukaan korang dan  yang code #790101 adalah code bagi warna maroon ,  korang boleh tukar dengan warna kesukaan korang . boleh cari di sini http://www.computerhope.com/htmcolor.htm




HIJAU :  Ini adalah code untuk bentuk border korang tu , code ini amat penting , jangan usik apa - apa ...






BIRU : Ini 'penutup' bagi code border , jangan lupa letak pula , nanti tak jadi border korang tu ..







Sebenarnya , border ini boleh digunakan di banyak tempat . Sesuai diletakkan sebagai bentuk blog , tak de la blog kita petak je . Harap korang dapat fahami apa yang aku tunjukkan ni , kalau tak faham, boleh tinggal komen ye . Aku bukan la pakar HTML , tapi aku suka mengkaji , dan hasil nya, ini lah template blog yang aku buat sendiri . Mula - mula pening juga, tapi aku gunakan google sebagai sumber rujukan aku , jadi aku mula faham maksud code - code HTML ni .. Huhu , Good Luck ! 





tags : border , bentuk , jenis , code , HMTL , apakah border , maksud border , sidebar , menubar

Monday, June 13, 2011

Tutorial : Open Link in New Tab





Untuk membolehkan apa sahaja link yang ada dalam entri blog korg menjadi
ke new window, korang hanya perlu mengikut beberapa langkah dibawah.



1. Buka Template Editor

- DASHBOARD -> DESIGN -> EDIT HTML



2. Cari tag <head>

- Tambahkan <base target='_blank' /> pada barisan dibawahnya.



contoh :



<head>
<base target='_blank' />






3. Save apa yang telah korang editkan.

Friday, April 29, 2011

Tutorial : Memasang Navigation Breadcrumb Di Blog

Assalamualaikum :)

Apakah itu Navigation Breadcrumb ? Navigation Breadsrumd ialah satu link yang ditayangkan , Ia adalah link dimana artikel anda berada atau boleh disebut sebagai lokasi dari artikel anda . Navigation Breadcrum ini diletakkan di atas judul artikel/postingan. Lihat contoh di bawah .





Anda juga boleh lihat contoh Navigation Breadcrum berikut.



Home » Tutorial Blog » Memasang Navigation Breadcrumb Di Blog



Home » Page » Islam » Iman Mutiara



Ada banyak manfaat dan kegunaan dari navigation breadcrum.



Navigation Breadcrum mungkin tidak sepenting keyword dalam SEO. Tapi yang jelas Navigation Breadcrum ini merupakan salah satu dari faktor SEO. Jadi,
sedikit banyaknya juga akan mempengaruhi kedudukan blog anda di search
engine, terutama google.



Tak nak cakap banyak , jom kita belajar ek :)



1. Login ke Blogger » Design » Edit HTML » Tick



2. Selepas itu , cari kode <b:if cond='data:post.title'> dengan menggunakan CTRL+F



3. Tambahkan kode berikut di bawahnya.


<b:if cond='data:blog.pageType == "item"'>

<a href='http://namablog.blogspot.com/'>Home</a> &#187;

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop>

&#187;

</b:if>

<data:post.title/>

</b:if>

Pastikan kedudukan kode seperti berikut :-











Jangan lupa ganti tulisan warna biru dengan URL blog anda.



Selepas itu simpan template.




update 


 
Anda
boleh menambahkan garis di bawah Navigation dengan menambahkan kode
<hr /> di bawah kode <data:post.title/> di atas.



Selamat mencuba .

Thursday, April 28, 2011

Tutorial : Ketahui Jumlah Post dan Jumlah Komen

Assalamualaikum :)

Pernahkah anda pikir nak kira berapa jumlah post dan komen yang ada didalam blog anda ? Inginkah anda bagitahu pelawat anda jumlah entri yang anda ada ? kalau itu jadi persoalan , jawapannya adalah mudah sekali !







Ikuti tutorial di bawah.


1. Login akaun blogger, dari dashboard > Design > Add A Gadget > Html Javascript

2. Copy kod di bawah dan letakkan ke dalam ruangan Html Javascript





<center><script style="text/javascript">

    function totalPosts(json) {

    document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');

    }

    function totalComments(json) {

    document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');

    }

    </script>

    <script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>

    <script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script></center>

    <small></small>



Dan save !

Selamat mencuba ! :)

Tutorial : Disable Highlight Text





 Assalamualaikum!

Anda tak suka post anda kena copy ? Di sini ada satu tutorial
macammana untuk anda halang post anda dicopy
sewenang-wenangnya. Dengan memasang script Disable Highlight Text, ianya akan menghentikan serta merta fungsi select dan juga Ctrl+C. 








1. Pergi ke Dashboard > Layout > Add A Gadget > HTML/Javascript.


2. Copy code di bawah ni dan letakkan pada HTML/Javascript.





<script type="text/javascript">


/***********************************************


* Disable Text Selection script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)


* This notice MUST stay intact for legal use


* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code


***********************************************/





function disableSelection(target){


if (typeof target.onselectstart!="undefined") //IE route


target.onselectstart=function(){return false}


else if (typeof target.style.MozUserSelect!="undefined") //Firefox route


target.style.MozUserSelect="none"


else //All other route (ie: Opera)


target.onmousedown=function(){return false}


target.style.cursor = "default"


}





//Sample usages


//disableSelection(document.body) //Disable text selection on entire body


//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>


<script type="text/javascript">


disableSelection(document.body) //disable text selection on entire body of page

</script>




3. Save dan lihatlah hasilnya.

Selamat mencuba :)

Tutorial : Disable Right Click



Assalamualaikum :)




1. Anda pergi ke Dashboard > Design > Add a Page element > Html/Javascript





2. Anda copy kod bawah dan paste dalam Hhtml/Javascript





<script language=JavaScript>


<!--






//edit by unwanted









var message="
Masukkan Mesej Anda Disini";






///////////////////////////////////



function clickIE4(){



if (event.button==2){



alert(message);



return false;



}



}






function clickNS4(e){



if (document.layers||document.getElementById&&!document.all){



if (e.which==2||e.which==3){



alert(message);



return false;



}



}



}






if (document.layers){



document.captureEvents(Event.MOUSEDOWN);



document.onmousedown=clickNS4;



}



else if (document.all&&!document.getElementById){



document.onmousedown=clickIE4;



}






document.oncontextmenu=new Function("alert(message);return false")






// -->



</script>

Yang warna merah tu anda letak ayat anda sendiri ya . :)
▲
Top