Hilangkan Blogger NavBar

Fungsi blogger navbar ni untuk menyenangkan korang untuk cari blog lain dalam dunia blogspot n.

Ok lah..Kalau korang nak buang juga senang jer.

1. Login dalam blogger dan klik pada layout.(bahagian manage)

2. Kemudian, klik pada edit HTML.

3. Akan keluar korang punya html layout seperti gambar dibawah.

Pada bahagian warna merah tu gantikan dengan kod dibawah.

#navbar-iframe { display: none !important; }

4. Save the changes.

Perlu diingatkan bahawa blogger navbar tu bukan dipadamkan terus, kod ini cuma sorok kan je. Kalau nak balik blogger navbar tu padam balik kod tu dan Save the changes. Pastu blog korang akan macam nie.

Selamat Mencuba!

Read More

Pasang butang show and hide

Mungkin anda ingin menyembunyikan widgetatau kod /teks pada blog.Fungsi ini macamread  more yang ada pada posting,hanyamenunjukan 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.

Gantikan teks letakkan kandungan yang hendak disembunyikan disinidengan 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. 

Read More

Tambah [Reply Comment] Button

1# Macam Biasa, masuk Dashboard >>> Design/Layout >>> Edit HTML >>> Klik Expand Widget Template
2# Tekan Ctrl+F & Search Keywords :
<b:include data='comment' name='commentDeleteIcon'/>
3# Dah Jupe? Ok! Then, Paste je SALAH SATU Code di bawah ni, SELEPAS code di atas tu:
CODE#1 : LETAK URL IMAGES. ATAU
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR BLOG ID HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='YOUR REPLY BUTTON IMAGE URL HERE'/></a></span>
CODE#2 : TAK PERLU LETAK URL IMAGES

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='background-color:#8FFAFF;border:2px solid #000000;color:#000000;text-decoration:none;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:3px 10px;position:absolute;bottom:10px;left:12px;'>Reply Comment</a>

Nota : Huruf berwarna merah tu boleh ubah Code Background Warna dan Saiz Border, Reply Comment pun boleh ubah kepada ayat sendiri 


Kod Biru = Gantikan dengan Blog ID

Korang tengah wat New Post, Tengok kat alamat URL atas tu ada blogID=123*********

Kod Merah=Gantikan dengan URL Image yang dikehendaki

Contoh yg IX punyer;  URL :  http://img152.imageshack.us/img152/934/replybutton.gif

Ini adalah [REPLY BUTTON] yang BDLab.Blogspot.com sediakan;

Replace URL of image with any image of your choice or you can choose one from below- 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSKsz_CZOHyk_pDKy24w0ynBu9jtctglZYk2A6eiBBXNOTCw8SSl1jw6UQcDH5K-HpkMSLshvMsO-FAo2fo6L3SY-7c8zrWUPdXqJVLJqi3dpxnArM8VRBg1I9_5ICd9RzCoffHuVXzKQ/s320/reply01.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyicRJ8H3d5w5oNw0eqHabzr_o5awy4Hf1eDz0ogPpn3FKc4ePCjgAp6FeB9-OCQMkL8hdRwSeFx1ZccTNTy5j2DzUD73180yq6jwhBgGDWszar88XY6MVpy9qA4Ogfu3cVhRoFjbUaeVU/s320/reply03.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrntltUFwUz-bVSOmpgKcWV-h0NVjjYYQnPht99FI2foK4n3bVPQw3VnJCqaN9R-ss2VCzAvHEG6bDdVORADR1Pem5-A1Kks-BTvw8MuchIV9ZYfsYjw8LTpeFVg_QvfFkP8qq52MLq1p/s320/reply04.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuzvNxU8CJAMzgd2NMWWKqNinOta1vs13TFEJeUM70bjgMhTt6gZ6j4JzsD7UI3NA2QWjvbhWU4FFtoqkNGLyY53e7Rof_UlcvgWkogKcpj7qqodOWh63EVZW_a4XLCmo8kaPctK5ZhaMr/s320/reply02.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gD1KzkR7GbN9PJLF37gOvU-SoJKfaYwz6Nmd_ujcjY-FpPgLMPlZSeU4WpuwewXQ6wbquAXmfZUZ7VpB3UZ1yHlCm-MXVEl_JDo5VkGIJOH-7JGgTEc8LFQFyYExB_kCBeCZyqq-D08n/s320/reply05.png
4# Dan Save Template...IX punyer dah jadi dah.....Trima Kasih kepada BDLab.blogspot.com atas Tutorial ni!

Nampak tak [Reply Button] warna biru gelap tu..Handmade gitu!

Read More

Timbang Berat Blog kita.

Hampa tak ke bape berat blog hampa tuh bila hampa dok bukak page hampa tuh?, maw taw tak page hampa tuh berat banyak mana?, adakah mengalahkan ikan paus? jom test kat sini xD

Click To Your Blog Speed

Read More

Butang Like, Share dan Tweet untuk Blogspot

Langkah 1

Home >> Design >> Edit HTML >> Tick Box

Copy CSS bawah ni dan paste sebelum ]]></b:skin>

.tweet,
.fblike .fbshare {
    background: #E8F3F9;
    border: 1px solid #A4CCE5;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin: 10px 0px ;
    padding: 13px 12px 14px;
    width: 95px;
    float: right;
}

.fbshare {
    background: #ECEEF5;
    border: 1px solid #9DACCE;
    float: left;
    padding: 14px 8px 15px;
    width: 95px;
    margin: 10px 3px 10px 10px;
}

.fblike {
    background: #ECEEF5;
    border: 1px solid #9DACCE;
    padding: 12px 15px 0px;
    width: 320px;
    float: left;
}

Langkah 2

Cari <data:post.body/>

Jumpa dah? Letak code bawah ni selepasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Kalau tak faham boleh contact aku kat http://munzirshafie.com/ ye -->
<!-- Facebook Like Button Start -->
<div class='fblike'><iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</div>
<!-- Facebook Like Button End -->

<!-- Facebook Share Button Start -->
<div class='fbshare'><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/></div>
<!-- Facebook Share Button End -->

<!-- Twitter Share Button Start -->
<div class='tweet'><a class='twitter-share-button' data-count='horizontal' data-via='syazary' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<!-- Twitter Share Button End-->
</b:if>

Yang korang kena buat sendiri:

Ubah width
Tukar username Twitter

Read More

Background Dalam Sesebuah Entri

Background sesebuah post biasanya akan mengikut default yang telah ditetapkan dalam setting blogger. Tetapi ada satu trick yang boleh digunakan untuk menjadikan background yang berbeza untuk entri yang dikehendaki sahaja.

Contohnya entri ini yang menggunakan background bercorak bunga-bungaan, tidak seperti entri lain yang berlatar belakangkan warna putih sahaja.


Tutorial untuk membuat background untuk post adalah begitu senang.

Apa yang bagusnya adalah, anda boleh pilih gambar apa sahaja yang anda mahu untuk background, dan anda boleh pilih untuk hendak letakkan dalam post yang mana satu untuk blog anda.

Apabila anda login pada blog anda, letakkan kod ini dalam new post anda. (pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' bukan 'compose'- ini untuk mengelakkan code warna dicopy sekali.:)

<div style="background:url(Link gambar disini) no-repeat;">
Taip segala entri untuk blog anda disini.
</div>

- Letakkan link gambar pada tulisan biru (kalau anda upload dalam blog kemudian copy url gambar lagi bagus.:)
- jika anda menggunakan gambar bersaiz kecil, sila buang no-repeat.
-Taip apa sahaja entri anda seperti biasa dalam kawasan merah. Atau kalau hendak lebih mudah, buat apa sahaja entri, tetapi ending mesti ada </div>

Itu sahaja.
Apabila anda post anda akan lihat kesannya.

p/s:
-pastikan anda pilih backgdround yang bersesuainya agar pengunjung blog anda tidak pening membaca.

Read More

Cara Letak Linkwithin Dalam Blog

Linkwithin antara blog yang berguna untuk memaparkan post yang berkaitan dalam sesebuah blog. Link within ini berbeza dengan 'related post' biasa kerana linkwithin memaparkan thumbnail bagi entri yang berkaitan.

Contoh:

Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.

Berikut adalah cara ringkas untuk meletakkan linkwithin dalam blog.

1. Buka web www.linkwithin.com

2. Pada paparan yang muncul, masukkan maklumat yang berkaitan.

Jika background anda gelap,tick pada kotak kosong kecil tu, dan pastikan anda masukkan bilangan yang sesuai dengan lebar blog anda.

3. Klik pada install widget


4. Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik add widget


5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)

Read More

Letak Tajuk Entri Pada Read More

Kebiasaannya, apabila sesebuah blog menggunakan fungsi readmore, perkataan yang keluar adalah samada 'read more', 'baca lagi', 'klik untuk teruskan pembacaan' dan lain-lain tanpa melibatkan tajuk sesebuah entri.

Tutorial ini akan menerangkan bagaimana untuk menambah sedikit kod daripada tutorial readmore sebelum ini untuk membolehkan tajuk entri keluar secara automatic selepas perkataan 'readmore' (atau perkataan lain berkaitan'.

Sebelum

Selepas


Cara-cara untuk meletakkan kod untuk trick ini adalah seperti berikut.

1. Login akaun blogger dari dashboard > layout > edit HTML > expand widget templates

2. Klik ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut

<data:post.body/>

3. Dibawah kod <data:post.body/> , ada beberapa kod yang berkaitan dengan readmore, dan buat penambahan kod dibawah selepas perkataan 'readmore'(atau perkataan lain yang berkaitan)
-pastikan kod ini terletak sebelum </a>

<data:post.title/>

Lihat contoh dibawah untuk memudahkan.



4.Apabila selesai anda boleh save dan lihat hasilnya.:)

Read More

Letak Background Gambar Pada Blockquote

Sebelum ini sudah ada tutorial untuk menukar warna background bagi blockquote. tetapi untuk kali ini, tutorial ini akan menunjukkan pula bagaimana untuk meletakkan background bergambar bagi blockquote.

Contoh blockquote dengan background warna biasa


Contoh background dengan background bergambar




Kelebihan letak gambar sebagai background untuk blockquote adalah untuk menjadikan blockquote lebih cantik dan menarik. semestinya anda ingin berbeza berbanding hanya meletakkan background berwarna yang biasa bukan.:)

Untuk menukar kepada background bergambar, tutorialnya adalah mudah sahaja.

Cuma sebelum itu, anda hendaklah tahu gambar apa yang anda mahu letak sebagai background blockquote anda. Ini kerana pemilihan gambar bersaiz besar adalah kurang sesuai. Gambar yang paling sesuai untuk dijadikan background untuk adalah background blockquote adalah jenis seamless tile.

Anda boleh google untuk pelbagai jenis background jenis ini, selain itu disini ada 2 web yang nawarkan seamless tile background. Boleh pilih gambar yang dirasakan bersesuaian dengan warna tulisan pada blog anda.

Free Seamless Tiles 1
Free Seamless Tiles 2

Tutorial untuk menukar background blockquote ini adalah seperti berikut.

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3.Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut

.post blockquote {

4. Kemudian di bawah kod tersebut, letakkan kod ini.

background-image:url(url gambar);

url gambar: tukarkan dengan url gambar yang anda hendak jadikan background. ( Tutorial url gambar : click here)

p/s: contoh kod adalah seperti berikut


5. Apabila selesai, save template dan lihat hasilnya.:)

Read More

Tukar Cursor Untuk Blog Anda

Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

1. Buka website http://www.cursors-4u.com/

2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)

3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telahdiwarnakan seperti dibawah

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

4. Kod akhir sepatutnya kelihatan seperti ini sahaja.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

6. Save dan lihat hasilnya.

Mudah bukan.:)

Read More