cara pasang butang show and hide

Mungkin anda ingin menyembunyikan widget atau kod /teks pada blog.Fungsi ini macam read  more yang ada pada posting,hanya menunjukan separuh sahaja teks pada posting dan bila diklik pada read more akan menunjukkan sebahagian lagi teks.Kod ini akan memaparkan butang yang mana bila diklik boleh memaparkan bahagian yang tersembunyi

klik butang dibawah untuk melihat contohnya

Teks tersembunyi disini

Gantikan teks letakkan kandungan yang hendak disembunyikan disini dengan kandungan yang dingini:

<div id="spoiler" style="display:none">
letakkan kandungan yang hendak disembunyikan disini
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>

Teks show/hide pada butang boleh ditukar mengikut kesukaan anda.Boleh diletakkan pada sidebar atau posting.

Membuat tulisan berbayang

1.Klik pada menu fail pilih new
2.Buat satu dokumen baru bersaiz 500x200 piksel











3.Pada background ini saya masukkan warna biru
  klik pada palet untuk warna dan gunakan eyedropper dan pilih warna yang dikehendakki











4.Seterusnya klik pada paint bucket tool pada tool bar untuk memasukkan warna






5.Gunakan horizontal type tool dan taipkan perkataan - untuk tutorial ini aya gunakan :sensasi










6.Kemudian seret pada border yang terbentuk bagi mengubah saiz teks and tekan butang enter
7.Kemudian salin layer teks tekan butang Ctrl+J















8.Pilih menu edit—transform—flip vertical untuk menterbalikkan tulisan











9.Klik pada menu edit --transform dan pilih skew dan laraskan supaya tulisan yang menegak tadi nampak menyerong










10.Laraskan opacity pada layer teks terbalik tadi kepada 26%





Untuk membuat tulisan kesan beralun seperti  dipermukaan air,pilih filter—distort—riple—pilih ok pada paparan rasterize the type dan laraskan amount kepada 266%

Cara buat tab view menu

Posting kali ini adalah membuat tab menu view yang mana sesuai dipasang pada blog yang mempunyai side bar yang luas.Pemasangan menu seperti ini adalah menjimatkan ruangan kerana menu disatukan secara tab pada satu tempat.Satu lagi kelebihan menu ini adalah tidak perlu mengedit template,Cuma di masukkan pada add gadget.Jadi lebih mudah untuk membuatnya tanpa perlu khuatir tidak berfungsi setelah membuatnya.Cuma kita perlu mengubah sedikit saiz dan juga warna pada kod agar bersesuaian dengan template kita.  

jika sekiranya berminat untuk membuatnya ikuti langkah ini:

Masuk  keblogger
Pilih design->> Page Element
Add a Gadget
Pilih  HTML/Javascript
Dan masukkan kod ini

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab  1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Cara memasukkan tajuk dan link posting pada menu:

pada bahagian kod Tajuk 1,tajuk2 dan tajuk 3 tukarkan dengan tajuk menu anda

Kemudian pada isi menu tab 1,isi menu tab2 dan isi menu tab 3 anda perlu masukkan link posting padanya.

Untuk mendapatkan link posting anda boleh dapatkan pada ruangan alamat dibrowser semasa membuka posting.

Contoh alamat atau link posting artikel

http://jendela-id.blogspot.com/2010/08/cara-buat-tab-view-menu.html

anda perlu ubah kepada:

<a href="http://jendela-id.blogspot.com/2010/08/cara-buat-tab-view-menu.html " target="_blank">cara buat tab view menu</a>

teks berwarna oren adalah tajuk artikel---tukarkan dengan tajuk posting anda

cara letak link seperti pada blog saya:

KEMBALI KEATAS


Kemudian klik save

Update 25 November 2012

cara buat border lengkung pada blog

Menukar tampilan bagi mengindahkan blog tentunya merupakan antara yang tidak dapat tidak dilakukan oleh seseorang blogger.Selain dari cantik dan tidak memberatkan loading blog adalah antara yang perlu diberi perhatian bila melakukan sesuatu perubahan pada template.Sebelum ini saya ada membuat entri tentang membuat border disekeliling posting.tapi dalam bentuk persegi.Kali ini pula dipenjuru border adalah dalam bentuk bulat.

Untuk membuatnya:

1.Masukk ke blogger dan pilih design
2.Klik edit HTML dan tandakan pada Expand template widget
3.Cari kod h2.date header{

dan letakkan kod ini dibawahnya

border-left:3px solid #0000FF;
border-right:3px solid #0000FF;
border-top:3px solid #0000FF;
border-bottom:0px solid #0000FF;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;

4.cari kod . post-body {

dan letakkan kod ini dibawahnya

border-right:3px solid #0000FF;
border-left:3px solid #0000FF;
5. Kemudian cari kod ini pula, .post-footer {
Tambah kod ini dibawahnya
border-left:3px solid #0000FF;
  border-right:3px solid #0000FF;
  border-top:0px solid #0000FF;
  border-bottom:3px solid #0000FF;
  -moz-border-radius-bottomleft:15px;
  -moz-border-radius-bottomright:15px;

6.Untuk mengganti border pada sidebar pula cari kod ini:

.sidebar .widget { 

dan letakkan kod ini dibawahnya

border:1px solid #0000FF;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px

Kod berwarna oren adalah kod bagi warna biru,boleh ditukarkan dengan kod warna yang  bersesuaian.

7.Seterusnya save template .

Cara pasang widget jumlah post dan jumlah komen

Salah satu widget yang sering kita lihat dipasang pada blog adalah bagi memaparkan jumlah komen dan juga jumlah posting yang ada pada sesuatu blog.Dengan adanya widget ini akan membolehkan pengunjung mengetahui jumlah komen dan posting yang ada diblog anda.

Bagi membuatnya:

1.Masuk ke blogger
2.pilih design-->> page elements
3.Pilih Add Gadget--->>HTML/Javascript
   dan masukkan kod dibawah ini:

<center><script style="text/javascript">function numberOfPosts(json) {document.write('Jumlah Posting: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="URL blog anda/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script><script src="URL blog anda/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfComments(json) {document.write('Jumlah Komen: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="URL blog anda/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script><a href="http://jendela-id.blogspot.com/2010/08/cara-pasang-widget-jumlah-post-dan.html"><small>get this</small></a></center>

4.Tukar perkataan berwarna oren kepada nama alamat /url blog anda
5.Kemudian save .