Thumb Up Widget.

Widget-widget di bawah ini bertujuan untuk mempercantikkan sesebuah blog.

Sekiranya anda berminat untuk menggunakan widget-widget ini anda hanya perlu Copy kod yang di sediakan dan Paste di mana-mana ruang HTML di blog anda.

THUMB UP RIGHT

Icon

Icon

Icon

THUMB UP LEFT

Icon

Icon

Icon

READ MORE...

Lucky Number Widget.

Widget-widget di bawah ini bertujuan untuk mempercantikkan sesebuah blog.

Sekiranya anda berminat untuk menggunakan widget-widget ini anda hanya perlu Copy kod yang di sediakan dan Paste di mana-mana ruang HTML di blog anda.

Di minta kerjasama anda sekiranya menggunakan widget-widget di bawah jangan melakukan sebarang pengubahsuaian terhadap widget-widget tersebut.

Terima Kasih di atas kerjasama anda.

Icon

Icon

Icon

Icon

Icon

Icon

Icon

Icon

Icon

Icon

READ MORE...

Pengenalan Jenis-Jenis 'Css Border Style'.

Apa itu 'Css Border Style' ? 'Border style' ialah garisan sempadan yang biasa di lihat di sesebuah blog.

Sebagai contoh anda boleh melihat pada bahagian profile, garisan sempadan atau bingkai gambar.

Cara mudah untuk menerangkan 'Css Border Style', sila lihat kod berwarna biru di bawah sebagai contoh:


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

Terdapat beberapa jenis 'Border Style' yang biasa di gunakan seperti :

1. solid

2. dotted

3. dashed

4. groove

5. ridge

6. inset

7. outset

READ MORE...

Crystal Ball Widget.

Widget-widget di bawah ini bertujuan untuk mempercantikkan sesebuah blog.

Sekiranya anda berminat untuk menggunakan widget-widget ini anda hanya perlu Copy kod yang di sediakan dan Paste di mana-mana ruang HTML di blog anda.

BOTTOM LEFT

Icon

Icon

Icon

Icon

Icon

Icon

Icon

Icon

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...

Memasang Feed Di Blog.

Bagaimana hendak menggunakan RSS feed di blog ?

Sekiranya anda mahu mencuba, sila ikuti beberapa langkah di bawah dengan berpandukan screenshot yang disediakan untuk memudahkan anda.

1. Masuk akaun blogger

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Feed'.

Lihat screenshot di atas.Masukkan Url feed di bawah dan gantikan semua text berwarna merah kepada URL blog anda.Sekiranya anda mahu mendapatkan update terbaru dari blog yang lain masukkan URL blog tersebut.


http://galeriotomotif.blogspot.com/atom.xml

Anda boleh memasukkan URL feed di bawah ini sekiranya anda mahu menampilkan post atau artikel terbaru blog anda.


http://galeriotomotif.blogspot.com/feeds/posts/default

Sekiranya anda mahu menampilkan komen terbaru di blog anda, gunakan URL feed di bawah.


http://galeriotomotif.blogspot.com/feeds/comments/default

Apabila anda sudah memasukkan salah satu URL feed di atas pilih 'Continue'.Halaman seperti screenshot di bawah akan di paparkan.

Sekiranya anda berpuas hati pilih 'Save' dan 'View Blog' untuk melihat hasilnya.

READ MORE...

Menghilangkan Tarikh Atau 'Post Date'.

Jika anda mahu menghapuskan tarikh atau 'Post Date' artikel di blog.

Langkah yang terbaik ialah menyembunyikannya,anda tidak perlu menghapuskannya.

Bagaimana hendak melakukannya ??? Ikuti langkah mudah di bawah ini.

1. Masuk akaun blogger anda.

2. 'Layout'-->'Edit Html'.

3. Tandakan pada ruang 'Expand Widget Template'

4. Cari kod di bawah ini


h2.date-header {

Atau


.date-header {

5. Jika sudah menemui kod di atas, tambahkan kod di bawah ini.


visibility: hidden;

6. Bagaimana untuk menambah kod ini ?

7. Lihat kepada text kod berwarna merah di bawah


h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

8. Setelah selesai semua langkah-langkah di atas.

9. Pilih 'Preview' untuk melihat hasilnya

Sekiranya anda berpuas hati.

10. 'Save Template'.

Selamat Mencuba

READ MORE...

Membuat 'Mouseover Image Effect'.

'Mouseover Image Effect' ialah gambar bertukar apabila 'mouse' diletakkan

Untuk melihat contoh sila letakkan mouse anda pada gambar di bawah :

Untuk membuat effect ini anda hanya perlu copy kod di bawah.Gantikan URL Image yang berwarna biru kepada URL Image anda untuk gambar pertama dan URL Image berwarna merah untuk gambar kedua dan gantikan juga URL yang berwarna hijau kepada URL blog anda.


<a onmouseover="if (document.images) document.FlashFloatimage.src= 'http://i637.photobucket.com/albums/uu99/syamzone/flowerpot_animatedgift.gif';" onmouseout="if (document.images) document.FlashFloatimage.src= 'http://i637.photobucket.com/albums/uu99/syamzone/flowergiftlompat.gif';" href="http://syamzone.blogspot.com"><img border="0" src="http://i637.photobucket.com/albums/uu99/syamzone/flowerpot_animatedgift.gif" name="FlashFloatimage"/></a>

Paste di mana-mana halaman html yang anda mahukan.

©syamzone.blogspot.com

READ MORE...

Membuat 'Navigation Bar' Untuk Halaman.

Mungkin anda sudah biasa melihat 'navigation bar' untuk halaman seperti screenshot dibawah ini.

Jika anda mahu membuat 'navigation bar' ini.Anda boleh mengikuti beberapa langkah mudah di bawah ini.

Masuk akaun blogger anda.

Pilih 'Layout'-->'Add a Gadget' dan Copy kod html dibawah.


<style>

.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;

}

.showpageArea a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;

}

.showpageArea a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}



.showpageNum a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;



}

.showpageNum a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;



}

.showpagePoint {font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

font-weight: bold;

border: 1px solid #333;

color: #fff;

background-color: #000000;




}



.showpage a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;



}

.showpageNum a:link,.showpage a:link {

font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

text-decoration: none;

border: 1px solid #0066cc;

color: #0066cc;

background-color: #FFFFFF;}



.showpageNum a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

</style>






<script type="text/javascript">



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';




var pageCount=5;

var displayPageNum=3;

var firstPageWord = 'Awal';

var endPageWord = 'Akhir';

var upPageWord ='Sebelumnya';

var downPageWord ='Selanjutnya';






var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';



for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

itemCount++;

}

}



for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}



fFlag++;

}



if(p==(thisNum-1)){

html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';

}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';

}

}



if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){



if(thisNum>1){

if(!isLablePage){

html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}else{

html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}

}



html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;



if(thisNum<(postNum-1)){

html += downPageHtml;

html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';

}



if(postNum==1) postNum++;

html += '</div>';



if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");



if(postNum <= 2){

html ='';

}



for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&&pageArea.length>0){

html ='';

}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

</script>



<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>


Apabila anda sudah Copy kod html di atas Paste di ruang 'Add a Gadget' seperti screenshot ini :

Sekiranya ruang 'Add a Gadget' berada di atas 'Blog Posts', anda hanya perlu 'Drag' ruang 'Add a Gadget' ke bawah seperti kedudukan yang ditunjukkan screenshot di atas.

Langkah seterusnya 'Save' dan 'View Blog' untuk melihat hasilnya.

READ MORE...