Slash Blogger Template Documentation - Expand Your Business

Expand Your Business

We are who can Expand Your Business at Global Level

Hot

Post Top Ad

Home Blogger Templete Documentation Slash Blogger Template Documentation

Slash Blogger Template Documentation

Slash Blogger Template Documentation
Slash Blogger Template
By Salman Farooqui
Email - salman0015@gmail.com
Thank you for purchasing this 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. Slash Blogger Template is a multipurpose template that can be used for many things like tech site, blog, news site and more.

We will learn to install this template in parts. First the header and then the three columns and footer. Then we will learn how to customize this template. But before that you have to first go to Template in your blog Dashboard and click on Backup/Restore Button on the top. Then click on Browse and locate your template xml under Template File folder in the Slash Template provided to you. You have been provided two template files, one with the adsense ad slot in the header and one template file without the ad slot in the header section. Choose the template file that best fits on your blog. Just upload the template and start following this tutorial on how to make it work on your blog.
Table Of Contents

(A) Header
(B) Column1
(C) Column2
(D) Column3
(E) Footer
(F) Other Setting
(G) Changing Colors (Template Designer)
(H) Sources and Credits



In Slash Blogger template the Header section need modification at two places - Ad Slot and Mega Menu


Responsive Adsense Ad Slot (optional)

Slash comes with two template files. One with a responsive header adsense slot on the right of blog title and one without it. To make use of responsive adsense ad slot, follow the below steps,
(1) Go to your Adsense Account
(2) Choose +New Ad Unit
(3) In The Ad Size Drop Down choose Responsive Ad Unit
(4) Copy the code you get
(5) Now, go to your blog Layout section and add the code you got from adsense to html widget on the top right corner of your screen.

It will automatically resize and serve a different dimension ad when you view on diffrent screen resolution.

Mega Menu

Slash Template is very feature rich and one of the best feature of this template is the Ajax powered responsive Mega Menu. It takes your blog label links and show 4 latest posts from them when the user hovers(mouseover) on that label link. The best thing about it is that it doesn't have to reload to show posts in different categories. Just take your mouse to the label link and it will fetch 4 latest posts from that label.
Click the Edit link in your Mega Menu Widget.

It will open up your Mega Menu Widget with a blank box.


You have to add the codes in it.

<ul class='w2bmenu' id='menu'>
        <li> <a href='/'>Home</a> </li>
        <li> <a href='#'>Social Media<span class='subdown'/></span></a>
                <ul>
<li><a href='http://slashtemplate.blogspot.com/search/label/facebook'>Facebook</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/twitter'>Twitter</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/youtube'>Youtube</a></li>               
</ul>
        </li>
        <li> <a href='#'>Gadgets<span class='subdown'/></span></a>
                <ul>
<li><a href='http://slashtemplate.blogspot.com/search/label/salman'>Design</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/farooqui'>Templates</a></li>               
</ul>
        </li>
        <li> <a href='#'>Startups<span class='subdown'/></span></a>
                <ul>
<li><a href='http://slashtemplate.blogspot.com/search/label/games'>Games</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/market'>Marketing</a></li>
<li><a href='http://slashdemo.blogspot.com/search/label/apps'>Apps</a></li>               
</ul>
        </li>
        <li> <a href='http://slashtemplate.blogspot.com/p/write-for-us.html'>Write For Us</a> </li>
</ul>



The code in green color is part of dropdown menu. The code in skyblue color doesn't have a drop down mega menu. It's just simple links. You can add any link to them not necessarily the label link. But for mega menu label links are required.
The code between <li> and </li> is what makes an item in a menu. Lets say we have

<li><a href='http://slashdemo.blogspot.com/search/label/something'>SomeText</a></li>

Here you just have to replace the red text with your full label link and yellow text with the title that appear for that link.
To add more drop down items in mega menu simply add more of the above line before or after the green code.
Save your widget after making the required changes.

If you are facing any problem in creating your mega menu, just hit me an email with the links and text you want. And i will send you the codes to add.

(B) Column1
Back To Top


Automated Featured Slider

Another cool widgets for your blog. Unlike other Slider where you have upload the image and update the text every time you want to change the slider content, this is automated. Just add a label of featured in your post and this slider will pick it up, display the image (the big and the small) , the post title and the snippet from your post. You don't need to edit anything here.

Lets say you created a post and you think it's important and should be featured. When you have finished writing your post, just add an extra label of featured among other labels that you give to your post. 5 latest posts that have featured label included in it will be shown on this featured slider.
If you don't want the label featured appear on your posts on your older posts that are no longer featured, you can simply remove it via your posts list. However, this is not required and won't affect anything.

(C) Column2
Back To Top

Post Lists By Category

Well mainted categories are always the most important aspect of any blog. This template have a very powerful category interface and that too with style and colors. Lets see what we have to edit to make these category lists on on your blog. Go to Layout will you see this.


Click on Edit link on the widget. It will open up this box.


You have to add the codes in content box for showing category lists. We have 3 diffrent kinds of category list.

Title with Thumbnail and Summary


Add this in the content box of the widget for showing this style of category list.

<div class='recentbylabels'>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/technology?published&alt=json-in-script&callback=labelthumbs"></script>
</div>


Replace green color number with the number of posts you want to show for each category. In the above example 3 posts will be shown for Technology category.
You have to replace the red color text will the label name of the category.
For example, your full label url is - http://somme.blogspot.com/search/label/hotspot
Here hotspot is the label name.

If you want to add more category list to your blog, click on Add a Gadgets Link and it will open up a list of official widgets you can add.
Choose HTML/JavaScript Widget.


A new box will appear.



Add the category name in Title and any category code provided here in the content box. Make the required changes. You can add as many categories as you like. Have fun.

Title With Summary


For this kind of category list. Add the below code in HTML/Javascript widget.

<div class='recentbylabels'>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = false;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/tech?published&alt=json-in-script&callback=labelthumbs"></script>
</div>

Replace green with number of posts and red with label name.

Title With Thumbnail


For this kind of category list you have to add the below code.

<div class='recentsbylabels'>
<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/startup?published&alt=json-in-script&callback=labelingthumbs"></script>
</div>

Replace green with number of posts you want to show and red with label name.

(D) Column3
Back To Top

Well, you don't need to know anything about column3. It's the sidebar section. Just go to layout and add/remove widget from it.


However, if you want to show the social icons + feedburner email subscription box like i have on demo blog. Go to Layout > Click Edit on Connect Widget > In the content box add the following code.

<div class='connect'>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYEdJj2OTfgSMDVzUUANaUPyUyo8XRdRjMcF-d8unW4VMLpHDMeySBuCNe4hPNF8Bax2TX8-AvS1pNoWq3TuKDAfQuuhHtyNGkS5lQWCdqquagCmPFsW4TkoBelmqCliDYKc_9hPHJ5I/s1600/rss.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu9xSWjFw95CaJD99TMFMyVpDhZzYUQSvvd3_ywYTlF3iub3-ef1TU2Z2AQvmqjdMF_DuSgT7dFIaGsaHcwfo9EPb64uZkfoIbZIsm4L1mKmEdWcAR5bmAx470nDFqgNQntE0tkH0yaY/s1600/twitter.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_WLy9J8FoGi4aubSajHESP6i8cCd8oRe8P-wxzkoMJFtSUOktiWCCuuARa_rXQ-7nY_S6gkHzdjQGnf6SCg7IsKvL_sayK4EBxWEtE25q1-E7HuFZC1LZ32pbhFItNxTq5UuhRC75ocE/s1600/email.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNfJeEsmUt5ssJT3N2kAX7-S2sgpBfFZ6D7zTMPZQxLjGMI6HxWswT-JBREMgSA7j3jRaPSMXSM6RrZg0aF3rkNwtmY5b-SqOIe16GFY4v4un9v5R3cDXGj8gN-QQdDY6xWawxYpgARWk/s1600/googleplus.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMTiwlIDCNF5Lq7OCJKMGNc5MbeCVJ9dviJQjvKaQJFPtmc1St30x4fGIeDft66dLzIxnDnV5ta_PdKsPJCSEcQwEJAOkTGApLhaUI9o2lIYxlJlJPvGPI3oQus_LbtkDDNgPpG8dYhw/s1600/facebook.png" /></a>
</div>
<div class='emailform'>
Join over 500 Followers
</div>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtokickblogger', 'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify" class="emailtop"><p><input name="email" class="emailtext" type="text" /></p><input name="uri" value="howtokickblogger" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" class="emailsub" type="submit" /></form>

Replace # with the repective social media links. For example, we have-
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu9xSWjFw95CaJD99TMFMyVpDhZzYUQSvvd3_ywYTlF3iub3-ef1TU2Z2AQvmqjdMF_DuSgT7dFIaGsaHcwfo9EPb64uZkfoIbZIsm4L1mKmEdWcAR5bmAx470nDFqgNQntE0tkH0yaY/s1600/twitter.png" /></a>
Change it to
<a href="http://twitter.com/themeforest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu9xSWjFw95CaJD99TMFMyVpDhZzYUQSvvd3_ywYTlF3iub3-ef1TU2Z2AQvmqjdMF_DuSgT7dFIaGsaHcwfo9EPb64uZkfoIbZIsm4L1mKmEdWcAR5bmAx470nDFqgNQntE0tkH0yaY/s1600/twitter.png" /></a>

The yellow color code is the code for a single social media icon. To have more social icons, simply keep adding it.

Replace the green color code with your feedburner feed name if you want to make use of feedburner email subscription option.


Back To Top

This blog includes a three column responsive footer. You can add/remove widgets in it from your blog's layout section.


If you want to show latest posts like i have in my demo blog. Here's the code for it.

<div class='recentbylabels'>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/?published&alt=json-in-script&callback=labelthumbs"></script>
</div>

Replace green color with the number of latest posts you want to show.


I have included some links on the footer of the blog which is needed and present on almost all the blogs. Go to Layout, open Footer Links widget

This box will appear.

You have to add codes in your box.

Add this code in your widget

<a href='/'>Home</a>
<a href='#'>About</a>
<a href='#'>Advertise</a>
<a href='#'>FAQs</a>
<a href='#'>Privacy Policy</a>

Change green color text with the title text of the links and # with their respective links. Add more of these lines to add more links.

(F) Other Settings
Back To Top

By default the date on your blog's label pages show full lenth date format which doesn't look very good. To change it go to Settings > Language and Formatting > Change Date Header Format from the dropdown menu. The image show what i used for my demo blog. For your blog, the choice is yours.



(G) Change Colors
Back To Top

You can easily change the colors present in slash blogger template by easily selecting the element and picking up a color from the color wheel. You can do this with the help of blogger's Template designer feature. This Template is designed to support this cool blogger feature.
To access Blogger Template Designer, go to your blog dashboard, then click on template, a new screen will come with your template preview image and a Customize link below it, click on customize and your Template Designer will open up. Now click on Advanced in your Template Designer and you will see the list of all the section that you can customize. Click on them to customize their color and fonts.


I did my best to create a nice color scheme in my template but you may need different colors.

(H) Sources And Credits
Back To Top

I've used the following resources in my template.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. Mail Me salman0015@gmail.com No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Tags
Author Image

About Admin

Labels:

Post Top Ad

Author Details