How to install 3rd party Blogger template to Blogger?

Filed Under : Template, XML

How to install the template to Blogger platform?

Answer:

(Standard Blogger Interface) Firstly, install the template and then extract the XML file to your Desktop. And then, go to Layout/Design > Edit HTML and press Browse button to search that XML file. After that press Open > Upload.

(New Blogger Interface): Anyway, for new bloggers out there, if you're using the new interface from Blogger (which has white and orange interface), you must go to Dashboard > and select the "Template" option on your blog (See the pictures below).

And then, to use this template, press the button "Backup/Restore".

In the new prompted window, press Browse and open the template file (xml), finally press Upload.

How to install the menu navigation?

Answer: Okay, this is the easiest part. Firstly, go to Page Element and look at 2 layouts of menu widgets on the top position (See the red scratches below).

Now press the "Edit" link on both positions and edit your blog menu through the widget below.

If you want to move the position of the menu (e.g Home, Contact Us, and About Us), you can simply press the arrow (↑ and ↓) on the left side.

If you are done with all the configuration of the menu, now press "Save".

How to Edit the search engine?

Answer: To edit the search engine, now go to Edit HTML > Expand Widget Templates, and search the code below:

<form action='http://blogger-testing-templatesss.blogspot.com/search' id='searchform' method='get' name='searchform'>

And replace the red code with your blog address, say www.google.com.

How to Install the Slider Widget?

Copy these code below and paste it on the widget called "Slider" (Dashboard - Page Element - Slider "HTML/JavaScript"). And then, change the red code with your wished URL address and the blue code with your Image Source Address (How: Point the mouse cursor around the image you want to use on this widget and press "Copy Image Location") :

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

 <div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

<div class="panel">

<a href="http://max-gameplay.blogspot.com/"> 

<img src="http://4.bp.blogspot.com/-oZIPpKuEiys/T1HcaelTvqI/AAAAAAAABMk/zTuFxjsEFkQ/s1600/1.PNG"/>

</a>

</div>

How to edit the flash slide show of this widget?

Answer: Now go to Page Element and press the "Edit" link on this position (See the red scratch below).

And then, copy paste the code below into the "HTML/Javascript" box you've been presented. Anyway, if you see words inside the HTML/JavaScript box/field, YOU MUST REMOVE IT.

<div class="glidecontent">

<div class="glidemeta">

<h2><a href="http://mytraveltips-theme.blogspot.com/2011/07/i-never-thought-i-would-be-able-to-see.html">Lorem ipsum dolor sit amet</a></h2>

</div>

<img src="http://1.bp.blogspot.com/-e351laZtYKA/TlXECBLWOhI/AAAAAAAAATc/rZF-aFsVj0Q/s1600/2.PNG"/>

</div>

<div class="glidecontent">

<div class="glidemeta">

<h2><a href="http://mytraveltips-theme.blogspot.com/2011/07/my-travel-in-africa.html">Lorem ipsum dolor sit amet</a></h2>

</div>

<img src="http://4.bp.blogspot.com/-LtiuB6f-Z00/TlXD9NkeeWI/AAAAAAAAATY/IPITea2XXCE/s1600/1.PNG" />

</div>

<div class="glidecontent">

<div class="glidemeta">

<h2><a href="http://mytraveltips-theme.blogspot.com/2011/07/unforgettable-moment-of-sun-set-in.html" >Lorem ipsum dolor sit amet</a></h2>

</div>

<img src="http://4.bp.blogspot.com/-pABnUhKIcSE/TiqUDQXJ1bI/AAAAAAAAD4M/2MM3UCVlMxU/s320/1280_1024_nature_wallpaper_106320843.jpg"/>

</div>

<div class="glidecontent">

<div class="glidemeta">

<h2><a href="http://mytraveltips-theme.blogspot.com/2011/07/unforgettable-moment-of-sun-set-in.html">Lorem ipsum dolor sit amet</a></h2>

</div>

<img   src="http://2.bp.blogspot.com/-VAHiYCAwg4c/TiqUURPjJ7I/AAAAAAAAD4U/N9w16uDXp9U/s400/NATURE+WALLPAPER.jpg"/>

</div>

And then, replace the red codes above with your own configurations. For more detail about this, you can visit this page, and scroll to the step about "Q: How to edit the flash slide show widget?".

Q: Why the slide show code above doesn't work on my blog?

Answer: Maybe, you got the wrong file of this template, now download the template file from this page, or through this link.

Q: How to edit the author link?
Answer: To edit the author link, now still on Edit HTML page, and with "Expand widget templates" ticked, now find the code below:

<span class='fn'><a href='http://twitter.com/username'><data:post.author/></a>

The red code username indicates the username of my own Twitter account (mine is DanielLikin).

If you want to use your own Twitter account, you can simply change the username with your own username on Twitter.
If you want to use your Facebook account, you can simply change the URL address http://twitter.com/DanielLikin with your own Facebook profile URL address, it usually goes with http://www.facebook.com/profilenumber.

Q: How to edit links on Facebook and Twitter icons?
Answer: On Edit HTML page, find the code below:

<!-- Configure your Twitter and Facebook account here -->

<a href='http://www.facebook.com/profile'><div class='myfacebook'/></a>

<a href='http://twitter.com/username'><div class='mytwitter'/></a>

<!-- Configure your Twitter and Facebook account here -->

And then, replace the profile address of Facebook with your own Facebook account. And also, replace the Twitter username with your own Twitter username.

You might also like to read :

Share This Article to Other People Across the World !

Del.icio.us | Reddit | Stumbleupon | Technorati |

Thanks!

Get the fresh update from Whatmakesblog.com!

To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe. Your email address will not be shared to any third party

Delivered by FeedBurner

Labels: Template, XML

2 comments:

Infogirl said...: can you tell me how can i hide the adds and the thing says
*Revoluzine Blogger
Ads 468x60px
Featured Posts*

and how can i put my bog header like normal...please tell me

this my blog that i currently working on

http://lawstudentroom.blogspot.com/; November 1, 2011 12:38 AM
joni said...: how to remove the "Slider Bar" ?; May 12, 2012 7:11 PM