Notes on Editing Blogspot

Hapus Dan Ganti Menu di Template Maskolis

Posted by Junky Posted on 08:23 with No comments

Pada template original ini yang saya guna dari Mas Kolis 'Creating Website', ada beberapa menu yang saya mau tukar dan hapus.

Menu asli. Menu 1 dan Drop Menu 1 akan ditukar

1. Ganti Menu
Untuk ganti menu, saya cari html code yang berikut.

</div>
<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFasq97dLPyBsLd-f5g47y2jm3TyUnoYsgYeWqe_IbnxWEHH-VrjSNdEzpmn4T9mfFjfcRuiatsPBU4y9VoVpcXZLSCF1wDEdnfayxzPVed9duT1sH-_vGScHzmTRyXMUsV_4ZPWzP2Dk/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Drop Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</div>

dan saya ganti dengan yang berikut:

<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFasq97dLPyBsLd-f5g47y2jm3TyUnoYsgYeWqe_IbnxWEHH-VrjSNdEzpmn4T9mfFjfcRuiatsPBU4y9VoVpcXZLSCF1wDEdnfayxzPVed9duT1sH-_vGScHzmTRyXMUsV_4ZPWzP2Dk/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/about-this-blog.html#'>About This Blog</a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
</ul>

Saya ada dua halaman statis (static page) pada blog ini. Ia adalah 'About This Blog' dan 'Privacy Policy.' Ada 2 URL yang terkait dengan halaman statis ini. Saya akan menggunakan 2 URL ini untuk mengarah kepada halaman tersebut apabila menu nya di ketik.

Tanda pagar '#' yang terdapat pada setiap baris adalah untuk kita mengganti pada URL yang lain. Setiap kali Sub Menu dipilih atau diketik, it akan mengarah kepada URL yang lain ini.

Hasilnya:

2 menu di kanan sudah diganti.

2. Menghapus Menu
Untuk menghapus menu-menu yang lain, caranya ialah seperti begini:



Hasilnya:

Selamat mencoba.

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

Download

Johny Joss Mobile Phone

Download

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:



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.

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.

Create and Edit Drop Down Menu in Blogspot

Posted by Junky Posted on 01:35 with No comments

On this original blog template, there were a few drop down menu, as seen on the picture below. I want to

1) change the menu and direct to another page within my blog
2) remove the ones that I do not need.

Original Menu. I intend to change the ones in the red box and remove the rest.

1. To change the menu, I would need to locate a section of the html code as follows:

</div>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

and change it to the following:

<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFasq97dLPyBsLd-f5g47y2jm3TyUnoYsgYeWqe_IbnxWEHH-VrjSNdEzpmn4T9mfFjfcRuiatsPBU4y9VoVpcXZLSCF1wDEdnfayxzPVed9duT1sH-_vGScHzmTRyXMUsV_4ZPWzP2Dk/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/about-this-blog.html#'>About This Blog</a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
</ul>

I have created 2 static page on my blog. This would be for the 'About this Blog' information and the Privacy Policy, which I intend to fill up later. Blogger generates a URL created for these 2 pages. I have placed the 2 URLs to direct when the menu is clicked.

The '#' located in each line is for a URL to be placed. This means whenever the Sub Menu is selected, it is directed to the URL indicated.

There is also another code that works in a similar fashion which I have used before:

<li><a class='trigger' href='#'>New Items</a>
<ul>

But I do not see any difference if I use the trigger command or just a href line.

Nevertheless, the result are as follows:

The 2 menus in the red box has been changed.

Next is to remove the rest of the menu selection. From the same code above, I would comment out the section that I want to remove.



Final result are as follows:

I prefer using the Comment Out function as it leaves the code intact. I intend to use it at a later stage.

Saving and Installing a Template on Blogger / Blogspot

Posted by Junky Posted on 02:26 with No comments

Let this be my first post on how to install a Blogger/Blogspot template.

It is the most basic of all notes but it is important.

If we are replacing an existing template, we can save that existing template before replacing it with a new template.

To save your existing Blogger / Blogspot template, as follows:

1) Log in to your Blogger / Blogspot dashboard.

2) Select Template > Backup / Restore (located on the top right hand corner)

3) Click on Download Full Template. This is to save the existing template. Take note of the location of the saved xml file.

4) To upload a new template, click on the Choose File button > Locate the new template file that you have downloaded and save. Refer to the picture above.

5) Click on upload to initiate the new template.

6) If you have any existing widgets, select Keep Widgets.

Hapus Dan Ganti Menu di Template Maskolis

Cara Menghapus atau Menukar Banner di Template Mas Kolis

Creating a Google Form and using on a Blog.

Create and Edit Drop Down Menu in Blogspot

Saving and Installing a Template on Blogger / Blogspot

Popular Posts

Blog Archive

My Feedjit