HOME OFFICIAL BLOG Facebook Fanpage Twitter
Blog Contest,Giveaway,Segmen dan lain-lain.: 05-Jun-2013

Wednesday, 5 June 2013

Sidebar Berstyle

Assalamualaikum semua.


Preview:

Bagi anda yang nak menampakkan kelainan pada sidebar blog, jom cuba trick ini. Sidebar berstyle versi shadow box. Warna kotak sidebar ini boleh ditukar mengikut citarasa anda. Ikuti tutorial di bawah.

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi
<div style="background: #FFC8E3 repeat; repeat; padding: 5px; border:2px dashed #990066; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; -moz-box-shadow: 0 0 18px #FF3399 ; -webkit-box-shadow: 0 0 18px #FF3399 ; "><center></center>

Masukkan kod html widget / banner/ ayat anda / image apa saja yang anda nak letak di sini


</div>
Nota :
Tulisan biru - masukkan kod html gadget yang anda nak letak pada kotak sidebar ini. Contohnya kod chatbox atau apa-apa sahaja. Untuk dapatkan kod widget Follower pula, anda boleh rujuk tutorial ini

FFC8E3 - warna background kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah

dashed - jenis garisan kotak. Samaada soliddashed ataudotted

990066 - warna garisan kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.

FF3399 - warna bayang-bayang kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.
( untuk paparan lebih besar, klik di sini)



4) Dah selesai, klik save dan lihat hasilnya.

Selamat mencuba! :) 

Simple template - Letak border shadow pada blog

Assalamualaikum semua.

Trick ini hanya sesuai untuk pengguna template simple. Untuk trick kali ini, blog korang akan dikelilingi border bayang-bayang. Warna bayang-bayang pula boleh ditukar mengikut citarasa korang. Kalau nak cuba, ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.content-inner {

4) Dah jumpa? kemudian copy dan paste kod ini DI BAWAH kod.content-inner { yang korang jumpa tadi
-moz-border-radius: 35px;
border-radius: 35px;
-moz-box-shadow: 0 0 6px 6px #000000;
-webkit-box-shadow: 0 0 6px 6px #000000;
box-shadow: 0 0 6px 6px #000000;

Contoh: 
 .content-inner {
-moz-border-radius: 35px;
border-radius: 35px;
-moz-box-shadow: 0 0 6px 6px #000000;
-webkit-box-shadow: 0 0 6px 6px #000000;
box-shadow: 0 0 6px 6px #000000;

Nota:
6 - ketebalan shadow. Tukar ikut tebal yang korang mahu
000000  - warna bayang-bayang. korang boleh tukar kepada kod warna yang korang suka. Rujuk kod warna di bawah:
( untuk paparan lebih besar, klik di sini)


5) Dah tukar nilai-nilai tersebut, klik preview. Kalau menjadi, klik save template

Selamat mencuba! :) 

Cara Backup Template Blog

Assalamualaikum semua.

Template blog yang terletak di bahagian Edit HTML adalah merupakan script Html yang memberi wajah kepada pattern/ rupa blog anda. Sebarang penambahan gadget atau sebarang trick blog kebiasaannya dilakukan/ diubahsuai di template (edit Html).

Oleh itu, sebelum melakukan sebarang pengubahsuian pada template blog anda, adalah penting untuk anda backup template terlebih dahulu supaya senang untuk backup jika berlaku sebarang kesilapan nanti. Untuk mengetahui bagaimana cara backup template, sila ikuti tutorial di bawah:

1) Sign in akaun blogger anda, seterusnya ikuti tuto bergambar di bawah:




Kemudian, akan muncul paparan seperti di bawah, klik ok :

Done! :) 

Border dan bayang-bayang pada sidebar title

Assalamualaikum semua.


Preview:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

h2 {

4) Kemudian copy dan paste kod di bawah SELEPAS / DI BAWAHkod h2 { tadi
* kod ini adalah untuk border bentuk segiempat. Kalau korang nak bentuk border yang lain, just pilih kat sini

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

nota: FFECF5  - kod warna untuk warna background title sidebar korang
        000000 
kod warna untuk warna border title
        C0C0C0 
kod warna untuk warna bayang-bayang border
korang boleh pilih warna kat bawah ni:
( untuk paparan lebih besar, klik di sini)
5) Klik preview

6) Kalau takde error dan menjadi, terus klik save template dan lihat hasilnya :)

Selamat mencuba! :) 



Border & bayang-bayang pada tajuk post

Assalamualaikum semua.

Preview:
Caranya:

1) Sign in akaun blogger 

2) Dashboard > Design > Edit HTML 

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod untuk title post seperti berikut 

untuk pengguna template watermark, Picture Window dan Travel, cari kod:

h3.post-title {  

untuk pengguna template Ethereal dan Awesome Inc., cari kod:
h3.post-title, h4 { 

untuk pengguna template Simple, cari kod:
h3.post-title, .comments h4 {
4) Kemudian copy paste kod di bawah SELEPAS kod yang korang cari tadi
* kod ini adalah untuk border bentuk segiempat. Kalau korang nak bentuk border yang lain, pilih kat sini
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

contoh rupa kod korang:
h3.post-title, .comments h4 {
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

nota: FFECF5  - kod warna untuk warna background title post korang
        000000 - kod warna untuk warna border title
        C0C0C0 - kod warna untuk warna bayang-bayang border

korang boleh pilih warna kat bawah ni:
( untuk paparan lebih besar, klik di sini)


5) Klik preview

6) Kalau takde error dan menjadi, terus klik save template dan lihat hasilnya :)
Selamat mencuba! :)  Kalau menjadi komen ye!

Bentuk-bentuk border

Assalamualaikum semua.

Border ini boleh diletak sama ada pada title posttitle sidebar, comment box dan lain-lain. Di bawah disediakan bentuk border beserta dengan kodnya. Korang just copy kod-kod border di bawah untuk sebarang trick yang melibatkan border ini.


-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;


-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;



-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;



-moz-border-radius: 35px;
border-radius: 35px;
Selamat Mencuba. Kalau menjadi, jangan lupa nak komen!
 
Fully Design By Nabeel Fikree | All Copyright 2013 © Blog Join