Thursday, January 8, 2015

Nav Bar Menu

  1.     Login to Blogger  Dashborad
  2.     Click on Drop Down Menu and select Layout
  3.     Add a HTML/JavaScript Gadget
  4.     Paste below code in it.

Save Template and Enjoy 

Monday, January 5, 2015

How To Configure "Tracks" Template

Find this in "Edit HTML":
<ul class='menu-primary-itemsnbt' id='menu-primary-itemsnbt' role='menubar'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
<li><a href='#'>Uncategorized</a></li>

Replace "#" marks with real URLs and change anchor texts as you like.

How To Add Links to Secondary Menu

Find this in "Edit HTML":

<ul class='menu-secondary-itemsnbt' id='menu-secondary-itemsnbt' role='menubar'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Downloads</a>
<ul class='sub-menu'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='sub-menu'>
<li><a href='#'>Office</a>
<li><a href='#'>Uncategorized</a></li>

  • Replace "#" marks with real URLs and change anchor texts as you like.

How To Configure Social Buttons

Find this in "Edit HTML":

<ul class='social-media-iconsnbt'>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-vimeo-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-tumblr-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-delicious'/></a></li>
  <li><a href='#' rel='nofollow' target='_blank'><i class='fa fa-stumbleupon'/></a></li>
  <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' target='_blank'><i class='fa fa-rss-square'/></a></li>
Add your own social links replacing "#" marks.

How To Add Links to Footer Menu

Go to "Layout". Click on "Edit" link of "Edit This Menu" widget.

Now add your links to that link list widget

How To Install ZM Music Blogger Template [Video]

ZM Player: ZM provide you auto music play button,  Audio Music is a quickly buffring, this player is support to all browsers.and user friendly design.
Navigation Menu: We have added a Beautiful navigation menu in this theme. It appears just  Sidebars so that users can navigate your site with ease.
Responsive Design: Awesome Responsive Design for your Website, Designs for Inspiration.
SEO-Friendly: We have also connected an SEO Plugin in this template, which would surely help you to increase your organic traffic in quick succession.

How To Customizing Social Buttons?

Go To >> Template >> Edit HTML >>
 Now search for the following coding in the template. After finding it Replace URLs with your URLs and Save the template.

How To Customizing Social Buttons?

Go To >> Template >> Edit HTML >> Now search for the following coding in the template. After finding it Replace URLs with your URLs and save template.
<a class='fb_dedi marrt25' href='' id='plus-facebook' target='_blank'/>
<a class='tw_dedi marrt25' href='' id='plus-twitt' target='_blank'/>
<a class='gplus_dedi marrt25' href='' id='plus-gplus' rel='publisher' target='_blank'/>

How to Customize Menu?

Go To >> Template >> Edit HTML >> Proceed. Now search for the following coding in the template. After finding it Replace # with your URLs andSave the template.
<a href='#' title='Home'>Home</a>

<a href='#' title='Radios'>Radios</a>

<a href='#' title='Browse'>Browse</a>

<a href='#' title='Discover'>Discover</a>

<a href='#' title='Apps'>Apps</a>

<a href='#' title='My Favorites'>My Favorites</a>

<a href='#' title='More'>More</a>

<a href='#' title='Blog'>Create Playlist</a>

How To Make New Post ? (Exclusive Instruction)

Go To >> New Posts >> HTML >> Now Past coding in the HTML. Replace # with your MP3 URLs Plus Replace Image URL with your Image URL and Click Publish.
<img border="0" src="" /><br />
<a href="#">Songs Name 1</a><br />
<a href="#">Songs Name 1</a><br />
<a href="#">Songs Name 1</a><br />
<a href="#">Songs Name 1</a><br />
<!--more--><a href="#">Songs Name 1</a><br />
<a href="#">Songs Name 1</a>

Installation and  Instructions ZM Music Blogger Template

Thursday, January 1, 2015

YourMag Responsive Blogger Template

Your Mag is a complete Responsive Blogger Template for a news or magazine site with the focus of attracting and keeping visitors on their site. This theme perfect for Search Engine Optimization. Its High User Friendly Blogger Template. Its perfect for News, Magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features. With a focus on reducing bounce rates, while increasing ad exposure, this theme will keep your visitors scrolling with more content all while maximizing your ad revenue!


Slash Blogger Template By Salman Farooqui

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.

Email -

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>
<li><a href=''>Facebook</a></li>
<li><a href=''>Twitter</a></li>
<li><a href=''>Youtube</a></li>
        <li> <a href='#'>Gadgets<span class='subdown'/></span></a>
<li><a href=''>Design</a></li>
<li><a href=''>Templates</a></li>
        <li> <a href='#'>Startups<span class='subdown'/></span></a>
<li><a href=''>Games</a></li>
<li><a href=''>Marketing</a></li>
<li><a href=''>Apps</a></li>                

        <li> <a href=''>Write For Us</a> </li>

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=''>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>

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 - 
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>

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>

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="" /></a>
<a href="#"><img src="" /></a>
<a href="#"><img src="" /></a>
<a href="#"><img src="" /></a>
<a href="#"><img src="" /></a>
<div class='emailform'>
Join over 500 Followers
<form onsubmit="'', 'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post" action="" 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="" /></a>
Change it to
<a href=""><img src="" /></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>

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 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.