Cara Menghapus atau Menukar Banner di Template Mas Kolis

Posted by Junky Posted on 19:53 with No comments
Satu pertanyaan yang sering ditanya di comment Template Mas Kolis ialah bagaimana cara menukar atau menghapus banner image atau header image di template-template Mas Kolis seperti template dua ini:



Johny Ganteng Store



Johny Joss Mobile Phone


Caranya begini

1) Di Blog menu, click Template > Edit HTML
2) Cari code #header-warpper. Gunakan Ctrl+F untuk mencari perkataan 'header-wrapper' dan ketikkan Enter

Code nya seperti berikut:

#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCygqm7_g2DC43yAJYhZHHBg2fqGvQZUcuwpcUloJWJeQnh3cX7HTmeHrdF6z-DqbFtKUCTNgIkmI-KHo_LEp4YBBJ_Q8gnDTNf5HPZG30T67H-hhsMZyhyScloBjF2O5Pi-BEZG6XjsiK/s1600/header.png);width:940px;height:140px;border-top:0px solid #ddd;margin:0 auto}

Bannernya adalah yang berikut: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCygqm7_g2DC43yAJYhZHHBg2fqGvQZUcuwpcUloJWJeQnh3cX7HTmeHrdF6z-DqbFtKUCTNgIkmI-KHo_LEp4YBBJ_Q8gnDTNf5HPZG30T67H-hhsMZyhyScloBjF2O5Pi-BEZG6XjsiK/s1600/header.png


a) Untuk Menghapus
Untuk menghapus banner berikut, kita comment out code nya:

 <!--COMMENT OUT
#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-q_y4RkR6VB_OrJ1Jj6xpN4XkkaEYI7yWcLTkSpAid_YWlVi5YgLu6KUdUmO6pcMavx3ZTdxzRcLUHuQM2ynCpAWjMph29jAGv4bcfMbXkz-FJuS7ET3-N-Ac00mFod6rXqHGDX0IbWMl/s1600/header.png);width:970px;height:140px;border:0 solid $bordercolor;margin:0 auto}
-->

Mauskkan COMMENT OUT pada permulaan dan akhir code seperti diatas, seperti yang merah diatas.



b) Untuk Menukar
Untuk menukar pada banner yang lain, kita tukar image URL nya. Dengan menggunakan code header-wrapper di atas, kita tukar URL nya seperti berikut:

#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72J0g758U2RRV_ocygEZKYV9NV57xS07vt_l7JzwQLAVTZOJLJRoISOorPbG3qUFwsKtfUvgctHnZkimIXOxnoXkLSIPYdSyOJkkRDUQpDgdJKYtyDDDV8SOw-PQ4zflxMtA4I3zI0j_H/s1600/Baner.4.jpg);width:970px;height:140px;border:0 solid $bordercolor;margin:0 auto}



c) Untuk Menyesuai
Kita boleh tukar ukuran banner dengan menyesuaikan ketinggian (height) dan lebar (width). Dengan menggunakan code header-wrapper,

#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-q_y4RkR6VB_OrJ1Jj6xpN4XkkaEYI7yWcLTkSpAid_YWlVi5YgLu6KUdUmO6pcMavx3ZTdxzRcLUHuQM2ynCpAWjMph29jAGv4bcfMbXkz-FJuS7ET3-N-Ac00mFod6rXqHGDX0IbWMl/s1600/header.png);width:970px;height:140px;border:0 solid $bordercolor;margin:0 auto}

Jadi banner ini boleh diperpanjangkan untuk menutup header blog anda.


Tinggalkan comment dibawah ini kalau ada pertanyaan lanjut.

Read more »

Creating a Google Form and using on a Blog.

Posted by Junky Posted on 00:30 with No comments
On a e-commerce blog, it is quite common to place an Order or an Enquiry form somewhere as part of your blog. This provides a way for you to capture the details of your prospective customers and an avenue for them to send to you a query.

A sample Enquiry Form would look like this:




This is done on Google Form on Google Docs. I have to say that Google Form is quite flexible as there are a lot of options that can be placed to create a truly customise form document.



1) Creating Google Form
On Google Form, there are 3 basic selections
i) Question Title. This is the query header for the information that is required on the form
ii) Help Text. Any assistance. I would normally leave this blank.
iii) Question Type. This is the type and format of the response. 
iv) Required Question. There are certain queries that are compulsory. You can flag this here.

The information that is captured here goes to a specially created Google Spreadsheet and it is time-stamped. The data can be used if you want to keep in touch with your customers and update them of any new developments.

On the Menu Header, there is a selection for View Live Form. This would display the Google Form in realtime. 


2) Using the Google Form on a Blog.
Once you are happy with the format of the form, we can transfer it to our blog.

On the Google Form creation page, click on the Send Form button on the right hand side and select Embed. This would display the HTML code of the form. Copy this code. 

Go to the blog where you want to place the form.
On the blog menu, select Page > New Page.
At the top left hand corner, select HTML instead of Compose.
Paste the HTML code here. Preview and Save.

And your Enquiry Form is now live.

As this is a static page, you can create an Enquiry or Order button and point it to this static page via simple HTML coding.
Read more »