tutorial blogspot: June 2010

Cara Membuat Menu Dropdown

Assalamuallaikum semua..Kali ini mrul ingin berkongsi tips blog iaitu dropdown menuDropdown menu adalah menu yang berisi sekumpulan teks atau link yang disingkat menjadi sebuah menu tunggal.

Contoh:

Kandungannya akan muncul jika anda mengklik pada menu tersebut sehingga boleh menjimatkan ruang di blog anda.

Langkah-langkah membuat menu dropdown :

1.Sign blog anda.

2.Klik Design.

3.Klik Add a Gadget.

4.Klik HTML / Javascript.

5.Copy kod dibawah ini, paste pada kotak HTML / Javascript.

<select onChange="document.location.href=this.options[this.selectedIndex]. value;"> <option value="http://alamatblog.com/#" selected>Blogroll</option> <option value="http://alamatLink.com/">Nama Link</option> <option value="http://alamatLink.com/">Nama Link</option> <option value="http://alamatLink.com/">Nama Link</option> </select>

Nota :- Gantikan perkataan berwarna merah dengan alamat link yang ingin dipasang.

-Gantikan perkataan berwarna biru dengan name link yang ingin ditampilkan

-Jika anda ingin menambah link baru ..Tambah kod dibawah ini sebelum kod </select>.

6.Save.

Selamat Mencuba..

Cara Memasang Page Navigasi

Kali ini saya ingin berkongsi tips blog, iaitu cara memasang page navigasi.Page navigation adalah sebuah widget yang digunakan pada web ataupun blog untuk memperlihatkan posting pada blog per halaman,contoh seperti gambar diatas.

Langkah-langkah membuat page navigasi :

1.Sign blog anda.

2.Klik Design.

3.Klik Add a Gadget.

4.Klik HTML / Javascript.

5.Copy kod dibawah dan paste pada kotak HTML / Javascript.

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

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

</style>

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.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=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';

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"><u>'+thisNum+'</u></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 = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

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>

6.Save.

Selamat Mencuba..

Cara Membuat Macam-Macam Text Area

Text area ini akan ada ruang baru dalam suatu ruangan blog yang memiliki beberapa tujuan, antara lain, memudahkan bagi pengunjung untuk mengkopi teks atau kod yang anda sisipkan dalam posting.

Terdapat 6 jenis text area dan anda boleh mengunakannya mengikut citarasa anda.Sila pilih yang manakah text area yang anda inginkan?

1.Text Area Standar/Biasa.

Contoh :

<textarea>Silahkan Tulis apa saja di sini</textarea>

2.Text Area Yang Boleh Diatur Ruang.

Contoh :

<textarea cols="20" rows="5">Silahkan Tulis apa saja di sini</textarea>

3.Text Area Password.

Contoh :

4.Text Area Garis Putus.

Contoh :

<textarea cols="20" rows="5" style="border: 2px dashed ;">Silahkan Tulis apa saja di sini</textarea>

5.Text Area Klik Auto Blok.

Contoh :

<textarea rows="5" cols="25" onclick="this.focus(); this.select();">Silahkan Tulis apa saja di sini</textarea>

6.Text Area Tombol Blok.

Contoh :

Cara Menampilkan Total Post, Comment Dan Online User

Kali ini mrul ingin berkongsi tips menampilkan total Post, Comment dan Online user.Trik ini memudahkan pengunjung mengetahui seluruh total post,comment dan online user.

Langkah-langkah menampilkan total post,comment dan online user.

1.Sign blog anda.

2.Klik Design.

3.Klik Add a Gadget.

4.Klik HTML / Javascript.

5.Copy kod dibawah dan paste didalam HTML / Javascript.

Nota :Gantikan perkataan berwarna merah dengan alamat blog anda.

6.Save.

Selamat Mencuba..

Membuat Background Posting

Dalam membuat background posting ada dua alternative iaitu membuat background dengan warna dan membuat background dengan bantuan gambar.

1.Membuat dengan warna.

Agar warna background posting menjadi berbeza-beza setiap posting, ketika anda ingin memulai untuk membuat posting, pilih Edit HTML jangan pilih Compose.Mulakan posting anda dengan kod seperti ini.

Tulis posting disini.

</div>

Nota :Gantikan perkataan berwarna merah dengan kod warna yang anda inginkan.

2.Membuat background dengan gambar.

Ketika anda memulai untuk membuat posting, pilih Edit HTML jangan pilih Compose.Mulakan posting dengan kod seperti ini :

Tulis posting disini

</div>

Nota : Gantikan perkataan berwarna merah dengan URL image yang anda inginkan.

Contoh :

Mutiara Kata
* Menangisi perpisahan akibat gagal bercinta adalah satu pembaziran mutiara jernih kita dan juga menguji sejauh mana kebodohan kita tetapi dengan menangisi dan menyesali akan dosa kita lantas meminta pengampunan dariNya akan lebih menjamin dunia dan akhirat
* Seseorang yang berperibadi kuat umpama besi waja semakin dibakar oleh keadaan semakin dititik olrh cabaran hidup semakin teguh dan waja untuk menhadapi hidup. Seseorang yang berperibadi lemah laksana tanah apabila diketuk oleh cabaran hidup ia akan berkecai
* Ajaran seorang ayah dan ibu seperti karangan bunga yang indah bagi kepalamu dan suatu kalungan bagi lehermu
* Sesungguhnya hati orang yang bodoh itu ada di mulutnya tetapi hati orang yang bijaksana ada di hatinya

Selamat Mencuba..

Membuat Emotion Pada Blogger

Untuk membuat emotion pada blog.Caranya cukup mudah, Cuma memasukan kod berikut pada post kita.Dengan ini post kito terlihat lebih menarik dengan adanya smiley berikut.