STUDIANA: Desember 2010

Kamis, 30 Desember 2010

cara letak border pada widget

Meletak border pada widget ini boleh dianggap sebagai penyeri pada sesuatu widget, juga sebagai pemisah diantara suatu widget dengan widget yang lain.

Sebagai contoh saya nak masukkan widget search pada blog ini dan saya hendak letakkan border dan juga background.

Mula mula masuk ke dashboard dan pilih Layout

Kemudian pilih Add a Gadget ..

pada senarai yang terpapar pilih search box.

Seterusnya klik butang save pada widget tersebut:
Untuk mendapat widget id anda perlu membuka semula widget tadi dan paparan seperti dibawah

widget id bagi search box tadi yang bertanda warna hijau seperti rajah diatas.

Widget id berada dibahagian atas dihujung sekali iaitu CustomSearch1 Biasanya berakhir dengan widgetId=CustomSearch1.

Kemudian masuk semula ke dashboard—Layout--edit HTML
Cari kod ]]></b:skin>

Dan letakkan kod seperti dibawah ini diatasnya:

#CustomSearch1{
border: 3px solid ;padding:3px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background:url(letak url imej disini)repeat;
}

Pada background url masukkan url untuk imej jika ingin meletak latarbelakang
Kemudian save template.
Untuk widget lain anda cuma perlu dapatkan widget id dengan membuka semula widget yang nak dimasukkan border dan masukkan widget id tersebut pada ruangan teks hijau pada kod diatas.

Minggu, 26 Desember 2010

Cara pasang shoutbox melayang

Dalam artikel sebelum ini saya ada menerangkan cara bagaimana cara memasang shout box secara tersembunyi pada tepi paparan blog.Untuk kali ini pula agak berlainan kerana shoutbox yang diklik akan muncul dibahagian tengah paparan blog dengan kesan gelap dan muncul secara perlahan lahan.Cara membuatnya juga agak mudah kerana cuma perlu masukkan pada widget sahaja.

Cara memasangnya:

1.Masuk ke dashboard-klik pada Layout dan pilih add a gadget

2.Pilih HTML/Javascript

Dan masukkan kod ini:

$(document).ready(function() {

//select all the a tag with name equal to ybl

$('a[name=ybl]').click(function(e) {

//Cancel the link behavior

e.preventDefault();

//Get the A tag

var id = $(this).attr('href');

//Get the screen height and width

var tbbHeight = $(document).height();

var tbbWidth = $(window).width();

//Set heigth and width to tbb to fill up the whole screen

$('#tbb').css({'width':tbbWidth,'height':tbbHeight});

//transition effect

$('#tbb').fadeIn(1000);

$('#tbb').fadeTo("slow",0.8);

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);

//transition effect

$(id).fadeIn(2000);

});

//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();

$('#tbb').hide();

$('.window').hide();

});

//if tbb is clicked

$('#tbb').click(function () {

$(this).hide();

$('.window').hide();

});

</script>

img { border: none; }

#tbb {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#ddt .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#ddt #yblshoutbox {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dTKn2ZSQlTOfDfZPDdCjJ4OwrMBi4LydLWIcbZmi8O9wWS4mqKxHHJH8leWYZUhoZVv95SXyOHO4KcHvYgffM4rhn6J4lrQglk7ZfVSaAsXxowV5Svr0SCMKYUCc4By7QExkiTSTzHU/s1600/shout.gif) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:60px 0 20px 15px;

}

#ttp {

padding:2px 0 0 0;

}

</style>

LETAKKAN KOD SHOUTBOX DISINI

</a></div></div>

Kemudian klik save
#Jangan lupa masukkan kod shoutmix pada ruangan diatas.Ubahkan kod shoutmix/Cbox contoh width="240" height="380" supaya memenuhi ruang bingkai.

contoh kod shoutmix

Jumat, 24 Desember 2010

Cara letak jumlah komen disebelah tajuk posting

Meletakkan jumlah komen disebelah tajuk posting dengan dengan bentuk gelembung boleh membuatkan blog anda nampak lebih menarik.Jika ingin mengubahsuai tampilan pada blog dengan jumlah komen ini, ikuti langkah berikut:

1.Masuk ke dashboard,template dan pilih edit HTML,

Dan cari kod ini pada template:

<h3 class='post-title entry-title'>

3. Sebelum atau selepas kod diatas ,letak kod dibawah ini:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a>
</b:if>

#Bahagian yang berhuruf merah adalah bagi membuat perkataan komen dibawahnya .

Jika tiada kod <h3 class='post-title entry-title'> ,cari kod <b:if cond='data:post.url'> dan letakkan kod diatas sebelum kod ini.

4.Kemudian cari kod ini pula:

</head>

5.Letakan sebelum atau selepasnya kod dibawah ini:

width: 55px;

height: 38px;
font-size: 18px;
margin-top: -15px;

margin-right: 2px;

text-align: center;
}
</style>

6.kemudian preview dan akhir sekali klik save template

Cara men-disable right-click dan block isi postingan blogspot

CODE SCRIPT - Cara men-disable right-click (klik kanan) dan block (select) isi postingan yang ditanya Emo kemaren baru bisa diposting sekarang. BlogButang Emas dulu dipakaikan fungsi ini, tetapi ketika mengganti timplet, fungsi tersebut tidak berjalan. Maka harus disetting ulang. Cara/setting untuk mematikan/menon-aktifkan klik kanan dan block/select isi blog dan penekanan select Ctrl-A bisa pake script yang belibet, maupun memanfaatkan fungsi-fungsi html itu sendiri yang sangat simpel.
Fungsi-fungsi ini berguna jika si empunya blog tidak menginginkan blognya dikopi paste secara gampangan tanpa minta ijin, alias tulisan postingan kitatidak mudah dikopi paste. Walaupun dengan usaha/cara trik-trik lain bisa membuka/memblok/mengkopi-paste isi blog juga. Tapi cara dibawah,lumayanlah bisa mengurangi tindakan korupsi eeeh... kopi-paste. Penjelasan Fungsi html yang dipakai :
oncontextmenu='return false;'

adalah untuk mematikan menu klik kanan

onkeydown='return false;'

adalah untuk mematikan tombol/keyboard Ctrl-A, Ctrl-U (page source) dan tombol keybord lainnya eeeh... kalo ngelihat page source dari menu masih kok. Cara melihat page source pada web/blog yang mematikan fungsi klik kanan mouse, klik kiri mouse dan penekanan keyboard (Ctrl+A, Ctrl+U) adalah : jika pakai firefox, buka menu View, lalu pilih Page Source (Ctrl+U). Hasilnya adalah tulisan postingan dalam 1 baris panjaaaaaaaaaaaaang. Cari aja postingannya ndiri...

onmousedown='return false;'

adalah untuk mematikan klik select mouse

'return false'

adalah untuk mematikan fungsi yang diinginkan

Cara men-disable right-click (klik kanan) dan block (select) isi postingan
Masuk ke edit html
Cari <body>
Gantikan kode <body> tersebut dengan kode dibawah ini

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

Anda bisa memilih 1 fungsi aja atau 2 fungsi atau ketiga-tiganya, terserah deh... anda yang punya blog kok

Sumber

Senin, 20 Desember 2010

cara susun gambar pada posting

Menyusun gambar semasa posting adalah satu perkara yang menyukarkan kerana kebiasannya gambar akan berada dibawah.Kalau dapat diletak sebelah menyebelah tentulah nampak lebih kemas dan menjimatkan ruangan.Sebagai contoh seperti gambar dibawah ini:

Kebiasaanya akan jadi seperti ini tersusun menjadi tiga baris.
untuk mengubahnya kita perlu masuk ke mode edit HTML

Dari compose klik pada mode edit HTML dan akan terpapar kod seperti dibawah :

</div>

</div>

Tambahkan kod warna hijau pada kod gambar seperti diatas

Hasilnya:

bunga merah

Bunga rose

Warna warni

Jika gambar turun juga kebawah(ukuran melebihi ruang) letak atau ubah saiz gambar pada kod.Kalau tak ada pada kod kena tambah seperti dibawah.Perhatikan juga pada kod kadang kadang dah ada(kena periksa jgn ada kod lebih :) ) :

Imej diatas tidak sama besar jadi dengan memasukkan width dan height jadi sama kedudukannya.Cara nya lebih kurang sama dengan apa yg saya terangkan pada artikel susun imej pada sidebar sebelum ini.

Sabtu, 18 Desember 2010

Cara letak divider diantara posting

Divider atau pemisah ini adalah digunakan sebagai pemisah diantara setiap posting pada blog.Ia biasanya dalam bentuk garisan atau imej yang memanjang.selain dari itu juga ia boleh juga sebagai menghiasi lagi pada paparan blog kita dengan divider dalam pelbagai imej yang menarik.Imej yang dipilih biarlah bersesuaian dengan latar belakang blog kerana ada yang hanya sesuai untuk background yang berwarna cerah.

Untuk membuat garisan yang ringkas pada bahagian posting Cuma perlu masukkan kod seperti dibawah ini sahaja pada entri:

Berikut adalah garisan border yang boleh kita masukkan dengan meletakkan kod dibawah pada bahagian yang hendak diletakkan:
<hr>
Hasilnya:

Diatas adalah kod biasa untuk letak garisan melintang dan dibawah ini adalah kod yang boleh kita ubah panjang garisan dan warna.Kod ini cuma perlu dimasukkan sahaja bila membuat posting pada mana mana bahagian yang ingin dimasukkan.

<hr width="50%" size="4" />

Jika hendak letakkan dalam bentuk imej dan pada setiap posting .kod perlu dimasukkan pada template.
Caranya:
Masuk ke dashbaord—template---edit html—

cari kod ini:

.post {

Atau sesetengah template kena letak pada

.post-body {

kebiasaanya kod pada template seperti ini:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
cuma perlu masukkan kod dibawah ini:

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv6zYelFPXR8QHQbrlSfhzBI8fqIaqxXxJ-gCfWDPERc76FStvO2v0EuXidvPNtsuVqYPy3FY-E_D2cQvGXsNW663ZtJCIKHkThilEnoUyZLcR6Rm_2_am3-j_BMEwFXUDNCMQFL4c2UQ/s400/ribbon.gif);

background-position: bottom center;
background-repeat: no-repeat;
margin:.5em 0 1.5em;
padding-bottom:1.5em;

menjadi seperti dibawah ini

.post {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuhcqHD7wcYVEA4rDxHNqeh67CAYaD7wIHsoKZu21rRTTDmR8JGjnNCdWDfpDpwXvPOo86kbf0sxGzsyQpWOcZq9HzH2A74J242LhU4ttq9fKyrFTuz-vS6qjopItG7Mn-t-3c_lr9NgY/s1600/zizzag.gif);
background-position: bottom center;
background-repeat: no-repeat;
margin:.5em 0 1.5em;
padding-bottom:1.5em;

}

Untuk menjarakkan sedikit diantara border dan kandungan posting ubah pada padding

Dari: padding-bottom:1.5em; kepada ; padding-bottom:2.5em;

Kalau nak letak imej contohnya seperti dibawah ini cuma perlu gantikan url pada teks berwarna merah diatas:

Url imej:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOoolO6zrOtFG4ca29O6ZN2W8gitS5f44oFiCjrvKhVJhSCXEuTxqhNGvvMN7j_SAw_kA6yVDEpKNh0vQ3mkBQP_RItrXDOM7Ete20z0cqNmRoJXxfFeicaH_yBamSUILfFOPLJ1OfSL0/s1600/red+border.gif

Url imej: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJ_dYAUJ1iRPtlSMVmi_FiiIkneNSR3cktZJPQYi8QCbix25BJ1MfeAkH_M9_I45_WPbWdvbpFbo8PBlwuwhgsrqSXU54azi6TryNtdKL28F5LH967Gbgl7Q6nOO0I7byvtuCYo3SqFw/s1600/flowerbar.gif

Imej boleh didapatkan diinternet dengan mencari horizontal line atau page divider

Kamis, 16 Desember 2010

Cara membuat link berkelip disertai dengan kerlipan bintang

Cara ini membolehkan link berkelip bila dihalakan cursor padanya.Disamping berkelip ia kan mengeluarkan kerlipan bintang disekeliling.Tidak menggunakan javascript,hanya gabungan css dan imej sahaja.Contohnya boleh dilihat pada blog ini.Kalau berminat hendak membuatnya,berikut adalah langkahnya:

Klik pada template---Edit HTML

Cari kod:

</head>

Dan letak kod ini diatasnya:

atau gunakan yang dibawah ini:

bintang berkelip

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbOu1ApOnRXjE9v94Pj_uwOr9I0jEske9FggW7Jq1TTd8m16uH7nYMPI5o-kVvmpOMvWv8c9tYEA2o83zItXOshO1_Msgeoje1NO7EWQgbZwcEIp6DowcC1_QGkEM449RAeI5ARYrmSc/s1600/str4.gif
cuma tukarkan tulisan merah pada diatas dengan url bagi kerlipan seperti diatas
#sesuai hanya untuk template berwarna gelap.

Simpan template…selesai..

Rabu, 15 Desember 2010

Cara meletakkan butang Twitter (Retweet) pada posting blog

Ada berbagai cara bagi mendapatkan trafik pada blog kita,salah satunya adalah artikel blog itu sendiri.Butang social bookmarking boleh diletakkan pada posting bagi membolehkan pengunjung berkongsi dengan rakan artikel yang diminati.salah satu nya yg boleh diletakkan adalah butang like facebook.Untuk artikel kali ini saya akan tunjukan cara memasang butang ~~retweet~~.butang ini boleh digunakan untuk mempromosi blog kita.selain dari boleh mendapatkan followers kita juga boleh mendapatkan traffic darinya.Butang ini terdapat dua bentuk iaitu biasa dan compact.

Cara meletakkan pada posting blog

Masuk ke dashboard
Klik pada template---edit HTML

Cari kod:

<data:post.body/>

Dan letakkan kod selepas atau sebelumnya.jika diletakkann diatas akan terpapar dibahagian atas posting,sebalik jika dibawah akan terpapar pada bahagian bawah posting

Atau boleh juga diletakkan pada kod ini:

<div class='post-header-line-1'/>

Kod bagi butang full size:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript"> tweetmeme_url = '<data:post.url/>'; </script> <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script>

</div>

kod bagi butang compact size:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript"> tweetmeme_style = "compact"; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

ubahkan pada kod teks hijau jika hendak diletakkan disebelah kiri(left) atau kanan(right)

Selasa, 14 Desember 2010

Cara letak background disekeliling kotak komen

Mungkin korang hendakkan sedikit kelainan pada kotak komen.Apa kata kalau kita letakkan background disekelingnya.Background ini boleh kita letakkan warna sahaja atau pun imej.Cara membuatnya agak mudah cuma masukkan kod dibawah ini sebelum kod ]]></b:skin>

Masuk ke dashboard---template
Edit HTML

dan masukkan kod dibawah ini:

Background warna:

.comment-form { background:#BE81F7; border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }

background imej:

.comment-form { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdBNTwTBfdtWthPA3ANNzQA7jFPThW-K55DDjXFStXq6l300W0ehwXG0t6r55gici-HQr__Z-b-q7TWNnTtZVR5WY6Z8JqsurGwl1T2wS5GEqvFlmBww1FvL2ARtBNainBxQ8ZJgrBxtU/s1600/animated_50.gif); border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }

Bahagian teks berwarna hijau boleh diubah dengan warna yang dingini dan juga imej dengan meletakkan url bagi imej.
kemudian save template.

Selasa, 07 Desember 2010

Cara pasang widget animated recent post

Blogger ada menyediakan widget recent post yang memaparkan posting posting terkini.Recent post ini memaparkan thumbnail juga jumlah komen pada posting.Tapi kekurangan nya adalah bersifat statik.Recent post ini bergerak ini lebih menarik perhatian pengunjung untuk melihat artikel artikel lain yang ada pada blog kita

Caranya:

Masuk ke dashboard:
Pada layout---Pilih Add Gadget

HTML/Javascript

Dan masukkan kod dibawah ini:

width:220px;

overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {

width:208px;

padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPDI_TwGxRNdm2oWqiS8jEgc702fAI8AVjdR5Y-FtJsjm1hYhANmCFFHSnaed92Cqt8d4z6Z0MtzWwlRdR3f6XcAybzNIOiHHhDH49rdCwWL6FNPlDvhX7dvVCTDKroJ6RfjBwOGRZM0/s1600/teknikbuatblogblogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://teknikbuatblog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>

Dibawah ini adalah kod bagi anda yang inginkan widget ini dalam bentuk yang lebih kecil untuk disesuaikan untuk sidebar yang ruangnya agak terhad.

<center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWm_NyEqqlcTYajvtwAu3SzgkVhe_5crv4L16loZU66Enj3b-PBFH2MLNF1I6JZrr2VLVfhUEkSxxaHYnAuR8VOouT5Eenn7yORA4rs9MDngPXjEIL4Lxyk71w-ef2zuA-YcXtfwRQPU/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 5;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://teknikbuatblog.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>

#Jangan lupa gantikan url blog saya,teks berwarna merah diatas dengan alamat blog sendiri.Kalau nak kecilkan size ubah pada kod warna hijau

Minggu, 05 Desember 2010

Cara membuat scrolling bloglist pada blog

Scrolling bloglist adalah seperti mana terdapat pada sidebar blog ini.Mempunyai butang untuk memasukkan link ,memaparkan hanya senarai blog, mengikut update dan tidak menggunakan banyak ruangan .Kebanyakan blog list yang ada adalah panjang jadi dengan menggunakan cara ini adalah lebih mudah untuk menguruskan kannya.

Untuk membuatnya:

Mula mula masukkan bloglist dahulu.
Pada design pilih --page elements-add a gadget--bloglist
Bagi dashboard baru pilih Layout...Add a Gadget...bloglist

Sebelum itu backup template terlebih dahulu.

Kemudian :
masuk ke design—edit html-expand template widget
untuk dashboard baru pilih template...Edit HTML....tandakan pada expand template widget
Kemudian cari kod yg dibawah,yg bertanda dengan warna merah adalah berbeza mengikut tajuk yg diberi pada widget.

<b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kemudian tambahkan kod berwarna hijau seperti dibawah ini.

<b:widget id='LinkList1' locked='false' title='Blog Roll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 300px; width: 160px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>

Kemudian save template

#Lebar dan tinggi widget boleh diubah pada bahagian teks warna oren.
Kemudian save template

Topik berkaitan: Cara letak border,background dan scroll pada widget

Update 23/12/2012

Sabtu, 04 Desember 2010

Cara mengelakkan read more automatik pada halaman statik

Memasang read more secara automatik memang menyenangkan kita kerana tidak perlu lagi memasukkan apa apa kod dan memilih bahagian mana teks yang hendak dipotong.Tetapi masaalahnya bila kita membuat halaman statik pada blog pun ada read more juga.Halaman statik untuk meletakkan sitemap dan tukar link tentunya kita nak paparan penuhkan?Jadi tutorial ini adalah bagi rakan rakan yang ingin mengatasi masaalah dengan read more automatic ini.

Caranya:
Masuk ke dashboard,pilih template>>Edit HTML

Cari kod dibawah ini:

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

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

</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>

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

</b:if>

</div>

Apa yang perlu kita buat ialah tambahkan kod warna hijau padanya.Cara ini telah saya gunakan pada read more automatic dengan thumbnail yang ada pada blog ini.

Jika kod diatas tiada gunakan cara ini:
cari kod dibawah ini:

<div class='post-body entry-content'>

kemudian letakkan kod ini dibawahnya:

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

kemudian cari pula kod ini:

<div style='clear: both;'/> 

dan letakkan kod ini diatasnya:

</b:if>

Selamat mencuba

update 14/9/2013

Kamis, 02 Desember 2010

cara membuat menu dengan menggunakan gambar

Sebelum ini dalam entri yg lepas ada saya tunjukan cara membuat berbagai bentuk menu seperti menu bar tanpa hack,menu horizontal dan kali ini mengunakan gambar pula sebagai menu.Bila menggunakan gambar sebagai menu tentu nya kita mempunyai pilihan membuat berbagai bagai bentuk yang disukai ,tak semestinya asyik bentuk empat segi,bujur.Bagi yg belum tahu apa yang dimaksud menu,menu biasanya terdapat pada bahagian bawah header dengan perkataan yg biasa terdapat padanya seperti home,contact,site map dan sebagainya.

Untuk membuat menu ini kita perlu sediakan gambar dan diupload ke photobucket,imageshack dan sebagainya.Kemudian kita ambil url imej tersebut:

Contohya seperti ini:

http://i219.photobucket.com/albums/cc282/garam63/49Ccopy.jpg

kemudian tambah kod jadi seperti dibawah ini:

<img src="http://i219.photobucket.com/albums/cc282/home.jpg">

Kemudian masuk ke design-page elements
Pilih add gadget-HTML/Javascript

Masuk kod tadi padanya:

Kemudian klik pada edit html
Gambar yg dimasukkan akan muncul..klik pada gambar untuk mengubah saiznya dengan menarik bingkai yg ada pada gambar

Untuk memasukkan link pada button tadi..klik pada gambar kemudian klik ikon create link dan masukkan link yang dikendakki padanya:

Masukkan link pada ruangan enter a url.
Untuk button yang seterusnya ulang semula langkah diatas dengan memasukkan link gambar kedua .
Untuk memastikan saiz adalah sama klik semula pada edit html untuk masuk pada kod tadi
Dan perhatikan pada width dan height pada kod tersebut

Kemudian klik pada save..selamat mencuba