“Geekiesm” Documentation by “Aumkar Thakur” v1.0
Created: 14 September 2013
By: Aumkar Thakur
Email: aumkarakhilesh@gmail.com
Thank you for downloading my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Getting Started - top
Hello, Lets start with installation process for these you need a account on blogger.com where you can create a free blog, In this guide I'm not going to tell you that how you can create a blog on blogger, I assume that you have a blogger account with a blogger blog, so let's get started!
Installing Blogger Template
Follow Below Steps To Install Blogger Template -
Default Settings
After installing the theme, this it the minimun setting to make all widget works fine in this themes.
Layout Explanation - top
Admin Panel is one of the best feature of this theme. It will help you to customize your theme layout easily, you can easily ad or remove new widget from your blog using this admin panel, You can simply access admin panel by clicking on Layout tab.
Here your blog header is located, their are two header in Geekiesm theme. You can use right header to add ads banner or any other type of widget to it.
This are free space where you can add anything like text, images, widget adsense etc
This is most important part of your template, whatever you write goest here it means it show all your blog post. The widget which is yellow in color are dragable and you have to add a code their which we will discuss futher.
This is sidebar are, when you will add any widget like search box or any other thing it will display on right sidebar of the blog.
This is 3 column footer which displays at the end of blog, you can add any widget here.
Customizing Menu - top
To customize the drop down menu located above header follow below steps-
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
To customize menu located below header of your blog follow below steps-
<ul id="top-menu">
<li><a href="#">Anything</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Adding Social Buttons - top
Social Media Follow Us buttons will help your blog/website to make your blog viral on Social Medias, To add this buttons to yout blog follow below steps:
<div class="scl-btn-black">
<a href="http://www.facebook.com/seobloggertemplates" target="_blank">
<img border="0" src="http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png" />
</a></div>
<div class="scl-btn-black">
<a href="http://www.twitter.com/bloglordhtml" target="_blank">
<img border="0" src="http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png" />
</a></div>
<div class="scl-btn-black">
<a href="http://www.plus.google.com/username" target="_blank">
<img border="0" src="http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png" />
</a></div>
<div class="scl-btn-black">
<a href="http://www.youtube.com/username" target="_blank">
<img border="0" src="http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png" />
</a></div>
<div class="scl-btn-black">
<a href="http://www.feedburner.com/username" target="_blank">
<img border="0" src="http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png" />
</a></div>
Adding Label Cloud - top
Label cloud help you to show different types of catagories to your blog. To Add It to your blog follow below steps
Adding Image Slider - top
A Photo Gallery blog should need a slideshow to make the blog attractive one. If your blog post entirely contain numerous pictures like wallpaper or collection of beautiful moons , then there is a chance to make all image in one block, that is to make slider.
To Add this slider to your blog add following HTML code wherever you want. Better to add in your blogger post. So while you are posting, you may want to add lot of image. Then try this widget and make that all image in a slideshow. Add below code in HTML tab in blogger post editor or if you want show anywhere else in your blog, add it in HTML/JavaScript widget in layout page.
<div class="slider-in">
<div id="slider">
<div class="gallery">
<br />
<br />
<br />
<br />
<br />
<li><input checked="true" id="a" name="system" type="radio" />
<img id="motion-left" src="img1.png" />
<div class="description">
DESCRIPTION TEXT</div>
</li>
<li><input id="b" name="system" type="radio" />
<img id="move-right" src="img2.png" />
<div class="description">
DESCRIPTION TEXT</div>
</li>
<li><input id="c" name="system" type="radio" />
<img id="move-over" src="img3.png" />
<div class="description">
DESCRIPTION TEXT</div>
</li>
<li><input id="d" name="system" type="radio" />
<img id="move-down" src="img4.png" />
<div class="description">
DESCRIPTION TEXT</div>
</li>
<li><input id="e" name="system" type="radio" />
<img id="run-around" src="img5.png" />
<div class="description">
DESCRIPTION TEXT</div>
</li>
</div>
<!--End up .gallery-->
<br />
<div class="nav">
<label for="a">1</label>
<label for="b">2</label>
<label for="c">3</label>
<label for="d">4</label>
<label for="e">5</label>
</div>
<!--End up .nav-->
</div>
</div>
<!--End up #slider-->
Setup Email Subscription Box - top
To Customize Email Subscriber box follow below steps-
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=seotemplates', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><p class='mainsubtxt '><span style='color:#37b8eb;'>Email</span> Newsletter</p><p><input class='txtbox' name='email' placeholder='you@example.com' style='width:200px' type='text'/></p><input name='uri' type='hidden' value='seotemplates'/><input name='loc' type='hidden' value='en_US'/><input class='btnsub' type='submit' value='Subscribe'/></form>
Setup 404 Error Page - top
Follow below steps to add advance 404 error page to your blog:<h2>Not Found, Error 404</h2>
<p>We're sorry but we could not find the page you are looking for.
This may happen if you have entered site url incorrectly or this page doesn't exist anymore.
<br/><br/>
You can try searching page again or go back to home</p>
<form action="/search" id="searchform" method=" get">
<input id="s" name="q" onblur="if (this.value == " ") {this.value = "Search...";}" onfocus="if (this.value == " Search...") {this.value = "";}" type="text" value="Search. ..">
<input id="searchsubmit" type="submit" value="Go">< /form>
Display Post With Labels - top
At last I'm going to tell you the most important thing which you have to add in your blog, Follow all the below steps carefully:
<div id='featurebottom1'>
<h2 class='headingfeature'>
<a href="/search/label/fashion">Fashion</a>
</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/fashion?
max-results=4&orderby=published&alt=json-in-script&
callback=recentthumbs&' type='text/javascript'/>
</div>
<div style='clear:both;'/>
</script>
</div>
</div>