Menambah Image Caption.

Tujuan menambah Image Caption supaya image / gambar lebih mudah di fahami dan kelihatan lebih menarik.

1. SIGN IN akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

.imgcontainer {
position:relative;
float:left;
}
.caption {
font: normal 1em/1.3em arial;
background:#fff;
color:#000;
position:absolute;
bottom:0;
left:0;
margin-bottom:20px;
text-align:center;
width:100%;
opacity:.75;
filter:alpha(opacity=85);
}

7. SAVE TEMPLATE.

8. Pilih POSTING --> NEW POST --> EDIT HTML

9. UPLOAD IMAGE dan tambahkan dengan kod di bawah gantikan Url / text berwarna merah.

<div class="imgcontainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJkM3xS9HMcGVJoZWm_FoDLrGa8ngcH7793fb_e5b89BdfwAXjR5-X09_zCVSQlIEf0P0n2mDYChAlH969lTAlWVSZin-1tGFu356JcBcRQgp1TaWIVqiaxP_hLsjrUyuZkJN7xsK4qB4/s1600-r/syamzonebannerexchange.png"/>
<div class="caption">Tricks Untuk Blogspot</div>
</div>

10. Setelah selesai PUBLISH POST.

READ MORE...

Menambah Profile Shadow.

1. SIGN IN Akaun Blogger

2. LAYOUT --> EDIT HTML.

3. Cari kod ini.

.profile-img {
border:1px solid #CCCCCC;
float:left;
margin:0 5px 5px 0;
padding:4px;}

4. Tambahkan kod di bawah.

  profile-shadow: 5px 5px 5px #ccc;
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;

5. Contoh : Lihat kod berwarna merah.

.profile-img {
border:1px solid #CCCCCC;
float:left;
margin:0 5px 5px 0;
padding:4px; profile-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
}

Pilih SAVE.

READ MORE...

Memasang 'Random Header Image'.

1. Sign in akaun blogger.

2. Pilih Layout --> Edit HTML.

3. Cari kod ini.

]]></b:skin>

4. Copy kod di bawah dan letakkan di bawah kod tadi.

<script type='text/javascript'>
var gbr= new Array()
gbr[0]="http://IMEJ1.png"
gbr[1]="http://IMEJ2.png"
gbr[2]="http://IMEJ3.png"
gbr[3]="http://IMEJ4.png"
gbr[4]="http://IMEJ5.png"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gbr[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

5. Gantikan text / kod berwarna biru.

6. Save.

Sumber EasyBlogTricks.

READ MORE...

Menampilkan Photo Profile Secara Random.

Untuk menampilkan photo profile secara random / rawak, sila ikuti beberapa langkah mudah di bawah.

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>

6. Gantikan kod yang di cetak tebal dengan kod di bawah.

<script>
var pic, alt;
pic = new Array;
pic[0] = "URL-PHOTOANDA";
pic[1] = "URL-PHOTOANDA"; pic[2] = "URL-PHOTOANDA";
alt = new Array;
alt[0] = "My Photo";
alt[1] = "My Photo"; alt[2] = "My Photo";
var now = new Date();
var seed = now.getTime() % 0xffffffff;
function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return ( seed >> 16 ) % n;
}
var num = rand(3);
document.write("<a href='http://www.blogger.com/profile/XXXIDBLOGANDAXXX'><img alt='" + alt[num] + "' border='0' class='profile-img' height='80' src='" + pic[num] + "' width='60'/></a>");
</script>

7. Gantikan kod berwarna biru URL PHOTO ANDA dan XXXIDBLOGANDAXXX

8. Setelah selesai, Save template.

Perhatian !!! Gantikan XXXIDBLOGANDAXXX cth : 559095719554575399

9. Selamat Mencuba.

Sumber Anang's Blog.

READ MORE...

Membuat Frame/Bingkai Untuk 'Profile'.

Menjadikan penampilan image profile anda lebih menarik dengan menambahkan bingkai/frame.

Sekiranya anda mahu mencubanya ikuti langkah mudah di bawah :

Sign in akaun blogger.

Pilih 'Layout' --> 'Edit Html'.

Sebelum meneruskan langkah-langkah seterusnya.

Pastikan profile anda diaktifkan.Supaya senang untuk anda 'Preview' hasilnya nanti.

Jika profile sudah diaktifkan.

Cari kod di bawah ini :

.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}

Atau

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor; }

Gantikan text kod berwarna merah dengan kod di bawah :

border:3px outset #CCCCCC;

Anda boleh menukar ketebalan bingkai 1px,2px,4px dan seterusnya mengikut citarasa anda

Manakala untuk menukar warna bingkai gantikan kod warna #CCCCC kepada kod warna pilihan anda.

Jika sudah selesai melakukan langkah-langkah di atas pilih 'Preview' untuk melihat hasilnya

Sekiranya berpuas hati 'Save Template'.

READ MORE...