
Belajar Nge'Blog
Halaman
Terimakasih telah datang di blog saya
saya ingin mengucapkan terimakasih atas kunjungan anda
Contack Me
Jumat, 04 November 2011
Rabu, 02 November 2011
cara buat popular post bergerak
Untuk membuat popular posts bergerak seperti mana terdapat diblog ini ,kita mestilah memasang widget popular post terlebih dahulu.Jika sudah dipasang terus sahaja ke langkah 4.
Caranya :
1.Masuk ke Design-Page Elements

2.Kemudian pilih add a gadget
3.Ambil popular post
Sesudah widget tersebut dipasang
4.Seterus masuk ke design semula--edit HTML
tandakan pada expand template widget
cari kod seperti dibawah ini:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>
kod berwarna merah perlu ditambah seperti diatas <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>
kemudian simpan template anda
Kelajuan boleh diubah pada scrollamount='3'.>ubah nilai 1 paling perlahan

Tutorial letak efek salju pada blog
Dalam tutorial sebelum ini saya telah muatkan artikel berkenaan cara membuat simbol hati berguguran pada blog.Kali ini pula seakan akan sama juga iaitu meletakkan efek salji pada blog.
Langkah langkah membuatnya:
1.Login ke dashboard --- page element
2.Add a gadget --- HTMLjavascript
3.Masukkan kod berikut padanya:
4.Setelah berpuas hati klik pada save
Selamat mencuba ….. :)
Langkah langkah membuatnya:
1.Login ke dashboard --- page element
2.Add a gadget --- HTMLjavascript
3.Masukkan kod berikut padanya:
warna merah
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljimerah.js"></script>
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljimerah.js"></script>
warna biru
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljibiru.js"></script>
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljibiru.js"></script>
warna purple
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljipurple.js"></script>
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljipurple.js"></script>
warna hitam
<script type="text/javascript" src="https://sites.google.com/site/teknikbuatblog/tbb/saljihitam.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/teknikbuatblog/tbb/saljihitam.js"></script>
warna putih
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljiputih.js"></script>
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljiputih.js"></script>
4.Setelah berpuas hati klik pada save
Selamat mencuba ….. :)

Selasa, 01 November 2011
Kamis, 11 Agustus 2011
Membuat border disekeliling posting
Membuat border disekeliling posting ini selain dari menambahkan seri pada posting juga sebagai pemisah diantara posting.Pada kebanyakan template sekarang sudah ada border ini.Bagaimanapun template yang berwarna putih jarang jarang menggunakan border terpisah ini.Untuk contohnya boleh dilihat garisan biru disekeliling posting pada blog ini.
Cara membuatnya:
1.Log in ke blogger
2.pilih Design--->>Edit HTML
3.Cari kod ini:
.post {
Lebih mudah gunakan Ctrl + F untuk mencari kod* diatas adalah kod yang telah ditambah pada template saya.
Kemudian letak kod berikut dibawahnya:
border: 1px solid #000000;
jika inginkan border yang berlainan gunakan kod ini:
border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;
Border boleh ditukar dari solid kepada dotted,dashed,outset,inset,groove,double dan ridge
Kod: #000000 adalah untuk warna hitam,boleh tukarkan dengan warna yang diinginkan.Begitu juga dengan ketebalan border .
Jika hendak letak warna latar belakang pada posting tambah kan kod berikut pada bahagian bawah kod tadi:
background: #000000;
atau nak letak imej sebagai background masukkan kod ini:
background:url (url image anda disini);
Cuma tukarkan kod warna yang sesuai supaya tampilan lebih menarik
Kemudian save template anda

Langganan:
Postingan (Atom)