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.

Ulasan drama Jepun : Grave of the Fireflies

Sempena hari merdeka ini aku hendak mengulas satu drama Jepun yang telah aku tonton tidak lama dahulu. Drama ini aku terjumpa di dalam youtube. Drama anti perang ini asalnya adalah dalam bentuk animasi kemudian diterjemahkan dalam lakonan filem. Drama ini berkisar tentang perjuangan hidup dua orang adik beradik di era perang dunia kedua di Kobe, Jepun.

Seita dan Setsuko dua watak adik-beradik asalnya adalah dari keluarga yang berada dan bahagia. Bapanya seorang yang berpangkat kapten dalam tentera laut telah dipanggil untuk berperang dan tinggallah Seita yang masih remaja (abang) untuk memikul tanggungjawab menjaga adik perempuan iaitu Setsuka dan ibunya. Tidak lama kemudian ibunya meninggal akibat cedera dalam serangan bom. Kedua adik-beradik ini tiada tempat untuk tinggal setelah rumah mereka juga hancur dalam serangan bom dan kerana kasihan mereka telah diambil dan tinggal dengan seorang berpangkat makcik dari sebelah ibunya.

Makciknya mempunyai empat orang anak yang perlu dijaga. Pada awalnya Seita dan Setsuka dijaga oleh makciknya dengan amat baik dengan makanan yang cukup walaupun bekalan makanan pada masa itu dicatu oleh pihak kerajaan. Apabila keadaan semakin meruncing dan catuan makanan semakin berkurang dan tiada barang untuk digadai untuk membeli makanan, makciknya meminta Seita menggadai cincin ibunya untuk membeli makanan. Seita menurut kata tetapi Seita hanya menyimpan sebuah tin gula-gula yang menjadi kenangan untuk adiknya yang merupakan hadiah daripada makciknya itu. Apabila bekalan makanan habis, makciknya hanya memberi makanan yang secukupnya kepada anak-anaknya tetapi tidak kepada kedua beradik tersebut. Makciknya yang pada awal kedatangan mereka sangat dialu2kan tetapi telah berubah menjadi seorang yang mementingkan diri sendiri dan bersikap tidak berperikemanusiaan selepas mendapat tahu suaminya mati di medan perang. Peperangan yang tidak pernah dia restui suaminya sertai membuatkan dia berperang dengan orang sekeliling. Makanan yang berzat hanya diberikan kepada anak-anaknya sahaja. Makciknya mengungkit akan sikap Seita yang tidak mahu membanting tulang untuk mendapatkan makanan. Ini membuat Seita yang kuat egonya kecewa dan mengambil keputusan keluar dari rumah makciknya bersama Sesuka dan mahu berdikari.

Mereka berdua tinggal di pondok perlindungan yang ditinggalkan di sebuah kawasan tasik. Tempat ini merupakan syurga untuk mereka berdua kerana terdapat kelip-kelip pada waktu malam. Kelip-kelip inilah yang menjadi tajuk cerita ini. Seita membelanjakan duit-duit ibunya masih ada untuk membeli makanan dan memasak untuk adiknya setiap hari. Apabila kehabisan duit Seita terpaksa mencuri untuk meneruskan kehidupan. Semakin hari badan Setsuka semakin susut dan sakit. Seita membawa adiknya berjumpa doktor dan doktor mengatakan Sesuka kekurangan zat makanan tetapi tidak diberikan ubat dan nasihat apa yang perlu beliau lakukan.

Seita membawa pulang adiknya ke pondok dan memujuk dan berjanji pada adiknya beliau akan membawa pulang makanan dari pekan. Seita cuba menghabiskan sisa-sisa duit yang ada untuk membeli makanan tetapi diberitahu duit tersebut tidak laku lagi kerana Jepun telah kalah dalam peperangan. Berita tersebut membuatkan dia berasa marah terhadap bapanya kerana selama ini dia mencanang pada dirinya Jepun akan menang dan kekalahan tersebut menandakan bapanya turut meninggal. Kepulangan beliau bersama makanan untuk Setsuka tidak bermakna lagi apabila didapati Setsuka telah meninggal.
Seita membawa mayat Setsuka di kawasan bukit untuk dibakar dan abunya disimpan di dalam tin gula-gula yang menjadi kesayangan adiknya. Beberapa minggu kemudian Seita dijumpai mati di stesyen keretapi bersama tin gula-gula yang masih ada ditangannya.

Drama ini diadaptasi dari novel Akiyuki Nosaka yang berbentuk semi autobiography. Novel ini dihasilkan sebagai satu cara untuk beliau meminta maaf kepada adiknya yang mati akibat kekurangan zat makanan yang berlaku pada era perang Jepun tahun 1945 kerana beliau merasakan beliau bertanggugjawab atas kematian adiknya dan sebagai cara untuk beliau menerima kenyataan kematian yang penuh tragis itu.

Drama ini sangat bagus dan lebih tertumpu kepada kesan kehidupan kepada kanak-kanak akibat peperangan dan kesan daripada peperangan adalah kurangnya makanan. Drama ini adalah cermin kepada peperangan yang berlaku di serata dunia sekarang. Adios!!!

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(Untuk dashboard baru pilih...Layout...add a gadget)

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://teknikbuatblog.blogspot.com/2010/08/cara-buat-tab-view-menu.html

anda perlu ubah kepada:

<a href="http://teknikbuatblog.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

(ReMade) Episod 1 - Kuaters tinggal di puncak bukit.

Episod pertama Pengembaraan Alam Ghaib..Menjejaki mistik di Kuaters Empangan lama.Setelah penat mendaki,kami berehat seketika di deretan kuaters yang pertama.Ketika itu kami langsung tidak menyedari atau dengar 2 bisikan di celah-celah kepenatan kami berempat.Setelah pulang ke studio dan ingin membuat proses penyuntingan,kami terkejut ada suara kelima yang berbisik `i kill you`...i kill you (name)??..bisikan kedua itu kami tidak dapat mentafsirkannya.So itulah bukti pertama yang kami dapat dari lokasi tersebut yang menandakan unsur-unsur mistik juga wujud di waktu siang.Ada juga orang tempatan yang `membuat` bercerita tentang adanya pembunuhan kejam berlaku dikawasan tersebut dan ada juga mengatakan yang kawasan kuaters terbabit telah lama ditinggalkan sejak tahun 70an lagi.Namun kami tidak dapat memastikan kesahihan kisah-kisah yang disampaikan dari mulut ke mulut.Namun kami tetap terkejut dengan kehadiran suara yang cukup jelas di dalam video ini.Jom kita saksikan..

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://teknikbuatblog.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 .