MegaMag Template Instructions

Meg Mag Responsive Blogger Template Document

Readme.html[10/1/2014 1:42:24 PM]

Created: 07/21/2014 By: Jeewani - PBThemez

Thank you for purchasing my Mega Mag Blogger Template. 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!

“Mega Mag Blogger Template” Documentation by “PBT - Jeewani Kumari” V1.0

Table of Contents

1. How to Install a Blogger Template2. Layout Explain3. How to Setup Featured Post Slider4. How to Setupl Latest News Bar5. How to Setup Latest Posts by Label6. How to Change Theme Colors Using Blogger Template Designer7. How to Setup Custom 404 Error Page8. How to Setup Keywords And Discription9. How to Setup Tabbed Menu

10. How to Setup Flickr Images11. How to Setup Sitemap12. How to Setup Main Menu13. How to Setup 728x90 AdSpace14. How to Setup Video Slider15. Sources and Credits

1) How to Install a Blogger Template - top

1. Login to your Blogger Account.

http://themeforest.net/user/PBThemez


Readme.html[10/1/2014 1:42:24 PM]

2. Click "Template" On Right Side Drop Down Menu

3. Now Click on "Backup / Restore" Button.


Readme.html[10/1/2014 1:42:24 PM]

4. Browse Your XML Template File From Your Computer.

5. Select Your XML Template File.


Readme.html[10/1/2014 1:42:24 PM]

6. Now Click on "Upload" Button.

You are done.


Readme.html[10/1/2014 1:42:24 PM]

2) Layout Explain - top


Readme.html[10/1/2014 1:42:24 PM]

1. Header2. 728x90 Ads Widget3. Sidebar 14. Sidebar 2


Readme.html[10/1/2014 1:42:24 PM]

5. Featured Post Slider6. Post Tag 27. Post Tag 18. Footer Column9. Tabbed Menu

10. News Ticker11. FavIcon12. Sidebar 413. Sidebar 3

3) How to Setup Featured Post Slider - top

1. First Go to Blogger > Layout


Readme.html[10/1/2014 1:42:24 PM]

2. Now Click On "Edit" on Featured Post Slider Widget

3. Now Add Your Own Blogger Tag Name to Here


Readme.html[10/1/2014 1:42:24 PM]

4. Now Click on Save

You are done.

4) How to Install Latest News Bar - top



Readme.html[10/1/2014 1:42:24 PM]

2. Now Click "Edit" on News Ticker Widget



Readme.html[10/1/2014 1:42:24 PM]



Readme.html[10/1/2014 1:42:24 PM]

You are done.

5) How to Setup Latest Posts by Label - top



Readme.html[10/1/2014 1:42:24 PM]

Tag Posts Area 1

Tag Posts Area 2

2. Now Click on Edit Game Widget


Readme.html[10/1/2014 1:42:24 PM]



Readme.html[10/1/2014 1:42:24 PM]

4. Click Save Button

You are done.

06) How to Change Theme Colors Using Blogger Template Designer - top



Readme.html[10/1/2014 1:42:24 PM]

2. Now Click on "Template Designer"

3. Now You Can Change Colors on "Advanced" Tab


Readme.html[10/1/2014 1:42:24 PM]

4. After You Can Click "Apply to Blog" Button Top Area

You are done.

07) How to Setup Custom 404 Error Page - top


Readme.html[10/1/2014 1:42:24 PM]

1. First Go To Settings > Search preferences

2. Click on Custom Page Not Found


Readme.html[10/1/2014 1:42:24 PM]

3. Now Copy the Code Given Below and paste it to Here

1234567891011121314151617181920212223242526272829

<style type="text/css">#slider-wrapper,#sidebar-wrapper,#sidebar-wrapper2,#carousel,#slide-widget2,#flex-slider,#slide-widget,#x-slide,#x-slide2,#x-slide3, #top-tab, #switch-left,#news-wrapper,#tagpost-wrapper,#sidebar-wrapper3,#sidebar-wrapper4,#tag-wid,#tag-wid2,#tag-wid3 {display:none;} #main-wrapper {overflow:hidden;width:100%;margin-left:0;float:none;margin-right:0;} #error-404 {margin:50px 20px 40px 320px;autotext-align:center;transition:all .8s ease 0;width:380px;font-family:oswald, Arial, Verdana, sans-serif;} #error-404 span {color:#f39c12;font-size:160px;font-weight:bold;}

?


Readme.html[10/1/2014 1:42:24 PM]

4. Now Click on Save Changes

3031323334353637383940414243444546474849505152535455565758596061626364

.large-heading {font-size:60px;line-height:1.2em;} .light-heading {font-weight:400;} .status-msg-bg {background-color:transparent;} #outer-wrapper {min-height:0;} .status-msg-border {border:0 none;background-image:none;height:100%;} #sidebar-wrapper,#sidebar-wrapper2 {width:100%;float:none;margin-left:0;} .status-msg-wrap,.status-msg-body {height:100%;}</style> <div id="error-404"> <span>404</span></div> <h1 class="large-heading" style="text-align: center;">Page Not Found. :/</h1> <h2 class="light-heading" style="text-align: center;">Sorry, the page you were looking for in this blog does not exist..</h2>


Readme.html[10/1/2014 1:42:24 PM]

You are done.

08) How to Add Meta Keywords And Discription - top

1. First Go to Template


Readme.html[10/1/2014 1:42:24 PM]

2. Click on Edit Html

3. Now You Can Change your Keyword, Description Given Below


Readme.html[10/1/2014 1:42:24 PM]

Look at the example below:

4. Now Click on Save Temlate

12

<meta content='' name='description'/><meta content='' name='keywords'/>

123

<meta content='Get New PC Games, Softwares, Mp3 Songs, Videos, Free PSD Files and everythine' name='description'/> <meta content='Pc Games, Softwares, Mp3 Songs, Videos Songs, PSD Files,' name='keywords'/>

?

?


Readme.html[10/1/2014 1:42:24 PM]

You are done.

09) How to Setup Tabbed Menu - top



Readme.html[10/1/2014 1:42:24 PM]

2. Now You Can See Tabbed Menu Gadget on Right Side Area

Look at The Picture Below

3. Now Click On "Add a Gadget" and Add Your Own Widgets


Readme.html[10/1/2014 1:42:24 PM]



Readme.html[10/1/2014 1:42:24 PM]

You are done.

10) How to Add Flickr Images - top


2. Now Click On "Edit" on Flickr Widget


Readme.html[10/1/2014 1:42:24 PM]

3. Now Copy the Code Given Below and Paste it to Here

Replace 52617155@N08 With Your Flicker Id

1234

<div class="flickr"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&display=latest&size=s&layout=x&source=user&user=52617155@N08</script></div>

?

http://www.flickr.com/badge_code_v2.gne?count=9&display=latest&size=s&layout=x&source=user&user=52617155@N08

http://www.flickr.com/badge_code_v2.gne?count=9&display=latest&size=s&layout=x&source=user&user=52617155@N08


Readme.html[10/1/2014 1:42:24 PM]

You Can use http://idgettr.com/ to Generate Your Flickr Id


You are done.

11) How to Setup Sitemap - top

1. First Go to Blogger > Pages


Readme.html[10/1/2014 1:42:24 PM]

2. Now Click On New Page "Blank Page"

3. Now Select "HTML" page


Readme.html[10/1/2014 1:42:24 PM]

4. Now Copy the Code Given Below and Paste it to Here

123456789101112131415161718192021222324252627282930

<div id="tabbed-toc"><span class="loading">Loading...</span></div><br /><script type="text/javascript">var tabbedTOC = { blogUrl: "http://megamag-pbt.blogspot.com/", // Blog URL containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: false, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Thumbnail size noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL monthNames: [ // Array of month names "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],

?

http://megamag-pbt.blogspot.com/

http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png

http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png


Readme.html[10/1/2014 1:42:24 PM]

Replace http://megamag-pbt.blogspot.com/ With Your Website URL

5. Now Click on "Publish" Post

You are done.

12) How to Setup Main Menu - top

31323334353637

newTabLink: true, // Open link in new window? maxResults: 99999, // Maximum post results preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload") sortAlphabetically: true, // `false` to sort posts by published date showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text};</script><script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>

https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js

https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js


Readme.html[10/1/2014 1:42:24 PM]

1. First Go to Template

2. Click on Edit Html


Readme.html[10/1/2014 1:42:24 PM]

3. Scroll Down and Find This Code :

12345678910

<nav id='nav2'><ul id='menuhlng2'><li class='mhome2'><a expr:href='data:blog.homepageUrl'>Home</a></li><li><a href='#'>About Us</a></li><li><a href='#'>Theme Forest</a></li><li><a href='#'>Contact</a></li><li><a href='#'>Sitemap</a></li><li><a href='#'>404 Error</a></li></ul></nav>

?


Readme.html[10/1/2014 1:42:24 PM]

Change # with yours Pages URL link

6. Bottom Menu Scroll down and Find this Code :

7. Change # with yours Pages URL link

12345678910111213141516171819202122232425

<nav id='nav'><ul id='menuhlng1'><li class='mhome'><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>About</a></li><li><a href='#'>Education</a></li><li><a href='#'>Archive</a><ul class='submenu hidden'><li><a href='#'>Dropdown</a></li><li><a href='#'>Dropdown</a></li><li><a href='#'>Dropdown</a></li><li><a href='#'>Dropdown</a></li></ul></li><li><a href='#'>Music</a></li><li><a href='#'>Business</a></li><li><a href='#'>Games</a><ul class='submenu hidden'><li><a href='#'>Dropdown</a></li><li><a href='#'>Dropdown</a></li><li><a href='#'>Dropdown</a></li></ul></li></ul></nav>

?


Readme.html[10/1/2014 1:42:24 PM]

You are done.

13) How to Setup 728x90 AdSpace - top


2. Now Click On "Edit" on 728x90 AdSpace Widget


Readme.html[10/1/2014 1:42:24 PM]

3. Now copy the followinmg code and paste it to here

1 <a href="With Your Website URL"><img class="" src="Your Adspace Image URL" target:"_blank"; /></a>

?


Readme.html[10/1/2014 1:42:24 PM]

Replace Web Site URLWith Your Website URL

Replace Your Adspace Image URL with website link

Look at the example below:

5. Now Click on "Save Template"

14) How to Setup Video Slider - top


1 <a href="http://megamag-pbt.blogspot.com/"><img class="" src="http://2.bp.blogspot.com/-gxfkaaxHN9Q/UXt6zACiaMI/AAAAAAAACPE/zbMqWnYu0rI/s1600/728.png" target:"_blank"; /></a>

?

http://megamag-pbt.blogspot.com/

http://2.bp.blogspot.com/-gxfkaaxHN9Q/UXt6zACiaMI/AAAAAAAACPE/zbMqWnYu0rI/s1600/728.png

http://2.bp.blogspot.com/-gxfkaaxHN9Q/UXt6zACiaMI/AAAAAAAACPE/zbMqWnYu0rI/s1600/728.png


Readme.html[10/1/2014 1:42:24 PM]

2. Now Click "Edit" on Video Widget



Readme.html[10/1/2014 1:42:24 PM]



Readme.html[10/1/2014 1:42:24 PM]

You are done.

16) Sources and Credits - top

We used the following JS script, images, icons and etc..

FlexsliderliScroll 1.0JQuery Easing PluginTaufik NurrohmanAlen GrakalicSlimbox v2.05Wallpapers AbyssSocial iconsOther iconsBackground WallpaperImage Overlay Hover Effects

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

Jeewani

Go To Table of Contents

http://www.woothemes.com/flexslider/

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

http://gsgd.co.uk/sandbox/jquery/easing/

https://plus.google.com/+TaufikNurrohman/posts

http://cssglobe.com/

http://www.digitalia.be/

http://wall.alphacoders.com/

http://vervex.deviantart.com/art/Somicro-40-Free-Social-Media-Icons-257232757

http://www.iconfinder.com/

http://subtlepatterns.com/

http://callmenick.com/2014/03/06/image-overlay-hover-effects-with-css3-transitions/

MegaMag Template Instructions

Documents

Transcript of MegaMag Template Instructions