WordPress AND Blogger | Templates or Themes | Widget or Plugin | Tutorial | Tricks |

My Blogger Tricks Templates Download For Blogger-wordpress and Blogger

2013-06-20T05:41:00.000-07:00

Demo | Download

Template Name	My Blogger Tricks Blogger Template

Designer	Varun Chaudhary
Features	SEO Optimized Elegant menu Fast loading Back to top button Clean and simple looks Fully Monetized Top Customizable Sticky Bar
Descriptions	My Blogger Tricks Blogger Template is a free blogger template clone of famous site My Blogger Tricks. It has a beautiful menu and is very well SEO optimized. It also has a top sticky bar i.e. it is at the top even when you scroll down. It has a beautiful footer where you can add posts with thumbnails. Apart from these it has many other features such as Ads ready, Widget ready, Bookmark ready etc

Responsive Drop Down Menu For Blogger-Wordpress and Blogger-My Blogger Tricks

2013-06-19T06:50:00.002-07:00

Disable Mobile Template

Note If you have activated mobile view for your blog then you must first disable it by going to:

Blogger > Template
click the gear icon
Select No. Show desktop template on mobile devices.
Save

Add a Responsive Menu To Blogger

Go To blogger > Template
Backup your template
Click Edit HTML
Search for these lines or similar. These lines of code exist at the top section of your template

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

Replace all the above code with our custom Meta ViewPort code:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

I have also included a UTF-8 character set for using some Special characters instead of images.

5. Now Search for </b:skin>. Click the black arrow to expand the code.

6. Paste the following Styles just above </b:skin>

/*-----Responsive Drop Down Menu by MBT ----*/
body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}

#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

Customization:

To change the menu background edit:#50B7DC
To change the background color on hover edit: #5FC6EB

7. Now search for <body> Just below it paste the follow code which will create the menu structure:

<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>My Blogger Tricks</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>

Customization:

Replace the text My Blogger Tricks with your blog title.
To add spaces between words use the unicode  
I am sure you know how to create new tabs but to create a tab for a drop down list use the following format:

Paste the following code below <ul> or above </ul> to create a drop down list:

<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
</ul>
</li>

The above menu will create only one drop down list and not multi-level drop down lists because it makes no sense to complicate the design layout for mobile devices. Keeping it simple is best.

8. finally save your template and you are all done!

How to Create Self hosted wordpress blog-Tutorial to set up (Start) Self hosted wordpress Website

2013-04-16T10:35:00.001-07:00

Step 1:Purchase Domain Name and Hosting Plans

Host service Provider Commonly give CPanel or Vista Panel Platform...Sample Image of CPanel and Vista Panel(VPanel) Provided Below.Please note Red Marked sections

1.Account Deatils(FTP,Username,MySQL etc.)

2.Add on Domain

3.MySQL Database

4.Online FTP Manager

5.Script Installer(Fantastico Script Installer)

Cpanel

Vpanel

Now Start Your Website>>>

Step2: Note DNS Provided by Host service Provider

Step3: Login intoDOmain registration control Panel,There You can see "Name Server Option" Click on It

Step 4: Provide DNS Provided by Host service Provided(1,2,or 3 DNS) .wait for 24 Hour inorder to update DNS

Step 5:Login into control panel of Hosting website

Step 6: Click on Addon domain Option

Step 7:Type Your Domain in the Required Area

Step8: It will Create a Folder in Disc Space provided by Host service Provider.It can view by Click on "Online File manger"

Step9: Click on 'Online File Manager' or user FTP Tools Like Filezilla

Now Start to Install WordPress >>>

You can Install Wordpress by Fantastico One Click Script Installer(If Host service Provider Provide To You) Else Install it manually

Manual Wordpress Installation

Download Latest Version of Wordpress from Wordpress.org

Step 10: Enter into "root" folder /htdocs or /www (depend on Host provider)

Step 11 : Click on Upload Option

Step 12: Click on Browse Option.Select Downloaded wordpress .zip file and upload it(Click on Tick Mark)

Now you Extracted and Uploaded Wordpress

You can View it Inside /htdocs

Step 13: Select "wp-cofig-sample.php" and open it and edit underlined part and Save it as "wp-config.php"

Now Finished wordpress Installation>>>

Step 14: Go to http://www.yourdomainname.com/wp-admin

Step 15: Provide Username and Password and enter into Wordpress Control Panel and Enjoy Blogging

How to Create Free wordpress (.wordpress.com) blog-Tutorial to Start Wordpress Free Blog

2013-04-15T07:07:00.000-07:00

Step 1: Go to wordpress.com

Step:2 Click on 'Create Your Wordpress.com Blog Now '

Step 3: Provide your email id

Step 5: Type username and Password

Step 6: select your domain

Step 7: Click on Create Blog

Do not Forgot to Verify Your E-mail id

Best of Luck....................

How to Start a Blogger (.blogspot.com) blog-Tutorial to Start blogger Blog in 2 Step New version

2013-04-14T08:48:00.000-07:00

Step 1: Create a Google Account

Step 2: Go to blogger.com

Step 3: Click on New Blog option

Step 4: Select Your Blog Title and Domain Name

Step 5: Select Templates

Step 6: Click on Create Blog Option

Done......Start Your Blog Now... Best of luck

BlackLight Premium free Wordpress Blogger Templates Download Link

2013-04-04T22:00:00.001-07:00

The BlackLight Blogger Template is premium blogger template for personal bloggers, online magazines, newspapers or community blogs

Demo | Downloads

Tiny News Premium free Wordpress Blogger Download Link

2013-04-04T21:47:00.001-07:00

Tiny News is a Premium Blogger template theme meant for quickly starting up your own NEWS website on blogger.The template is tiny but has lots of options and labels.This template is simple and best blogger template for newspaper and magazine sites. All you need to do is define which labels and categories posts will appear on the home page, because this template is lebalwise function of Javascript.
Basnetg Tiny News is my another blogger premium template with 3-column/three columns,Widget-ready, fixed width, white, gray, blue, red, sidebar widgets template/theme created for blogger.

Demo | Downloads

How to use this template?

Here are some instructions:

1, Download zip folder

2, unzip folder and upload XML file to Blogger

3, How to change Logo:

To change Logo Find this CSScode as below:

#logo{ float: left;

width: 240px;

height: 45px;

margin: 20px 0 auto 10px;

padding: 0;

background: url(http://3.bp.blogspot.com/-AYs9K0KBKnw/UBfEd18StGI/AAAAAAAAAwg/EL5ZI71oXvY/s1600/basnetgtinynewslogo.png) no-repeat;

}

Now change the above red link URL for image for your site logo.

4, How to use ads on header

This is very simple, From your Blogger dashboard go to design tab and then you will find widget ready for ads format 468x60px

you can put there banner code for ads or AdSense code whatever you like.

5, Sidebar ads section is also the same as header ads widget but the ads format is 300x250 px.

6, To change menu find the below code and replace every # with your link URLs

<div id='menu'><ul>
<li><a href='http://tinynewstheme.blogspot.com'>Home</a></li>
<li class='cat-item cat-item-3'><a href='#' title='View all posts filed under Politics'>Politics</a>
<ul class='children'> <li class='cat-item cat-item-13'><a href='#' title='View all posts filed under World'>World</a>
</li> <li class='cat-item cat-item-17'><a href='#' title='View all posts filed under Terrorism'>Terrorism</a>
</li>
</ul>
</li> <li class='cat-item cat-item-4'><a href='#' title='View all posts filed under Business'>Business</a>
</li> <li class='cat-item cat-item-6'><a href='#' title='View all posts filed under Current News'>Current News</a>
<ul class='children'> <li class='cat-item cat-item-5'><a href='#' title='View all posts filed under Celebrities'>Celebrities</a>
</li> <li class='cat-item cat-item-7'><a href='#' title='View all posts filed under Technology'>Technology</a>
</li> <li class='cat-item cat-item-8'><a href='#' title='View all posts filed under Washington'>Washington</a>
</li>
</ul>
</li> <li class='cat-item cat-item-9'><a href='#' title='View all posts filed under Hot Topics'>Hot Topics</a>
</li> <li class='cat-item cat-item-20'><a href='#' title='View all posts filed under Miscellaneous'>Miscellaneous</a>
</li>
</ul>

7, To show categories/ labels on home page, Find This code:

label1 = "Politics";
label2 = "Business";
label3 = "Miscellaneous";
label4 = "Current Views";
label5 = "Hot Topics";
label6 = "Technology";
label7 = "World";

and now change the value of each label shown with red color, that means label name of your site that you want to show Latest post from each label on your home page.

8, Save the template

Big News Times Premium Free Wordpress Blogger Download

2013-04-04T21:29:00.000-07:00

Big News Times is Blogger template,converted by blogger template designer in Nepal Gyanu Basnet Version includes advanced jQuery News Ticker, dropdown menu and error fixed

Demo | Downloads

How to install Basnetg Big News template for Blogger

Download the template .
Upload template to blogger .
To change Logo or Site Name:
Find the code:

<div class='header'

<h1><a href='http://basnetg-bignews.blogspot.com/'>Big News Times</a></h1> <h2>Basnetg</h2>

5. Then change to your Site name and logo with Big News Times and Basnetg that I highlighted with black.

6. To add your 468x60 ads on right site of header find this code

<div class='bannertop'> <a href='http://www.basnetg.com/'><img alt='Basnetg.com - Premium WordPress Themes' border='0' src='http://4.bp.blogspot.com/-Mlh8IWjAng8/T4AbffvxU1I/AAAAAAAAARQ/ND_BD6pifT4/s1600/basnetgbanner468.png'/></a> </div>

Here I've used banner ads with image link but if you would like to add google adsense then put your adsense code i.e. parsed adsense code within

<div class='bannertop'> your adsense code goes here </div>

it means replace your 468x60 adsense code with

<a href='http://www.basnetg.com/'><img alt='Basnetg.com - Premium WordPress Themes' border='0' src='http://4.bp.blogspot.com/-Mlh8IWjAng8/T4AbffvxU1I/AAAAAAAAARQ/ND_BD6pifT4/s1600/basnetgbanner468.png'/></a>

8. Change top top right links

<div class='toplinks'><a href='http://basnetg-bignews.blogspot.com/'>Login</a> | <a href='http://basnetg-bignews.blogspot.com/'>Contact</a></div>

change all black link and name for your.

9.Now make search box to search for your site content.To do this find this code:

<div class='topsearch'>

Now you will find code like below:

<div class='topsearch'>
<form action='http://basnetg-bignews.blogspot.com/' method='get'>

Now change your blog url in above code <form action='your-blog-url' method='get'>

10. To change menu links and name find this code:

<div class='menu'>

and change all the menu link url and name to your.

11. To edit sidebar find the code below and edit what you need to edit

<ul class='sidebar'>

12. to fix label find this code

label1 = "news";Title1 = "WORLD NEWS";

change all label name within inverted comas, to your content labels

there are 12 labels and titles

City Life Premium Free Wordpress Blogger Templates Download

2013-04-04T21:21:00.000-07:00

This Template is CSS based template so its very fast template for Blogger. This Template is very useful for Blogger News and magazine site

Demo | Download

How to install Basnetg City Life template for Blogger

Download the template Zip Folder from Download Link above.

extract all with help of win zip.

Upload template XML file to blogger .

Configur Your Meta Tags Find below meta tags and change description and keywords in red.

Search Code Fix
As far as I know for search you can change it with google search or if you would like to keep as is please find the search code

<div class='header_right'>

Then Find this code:

<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'> <input id='searchbox' name='s' onblur='if (this.value == '') {this.value = 'Keyword Search';}' onfocus='if (this.value == 'Keyword Search') {this.value = '';}' type='text' value='Keyword Search'/> <input id='searchbutton' type='submit' value=''/> </form>

Now Replace with below code

<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'> <input id='searchbox' name='q' onblur='if (this.value == '') {this.value = 'Keyword Search';}' onfocus='if (this.value == 'Keyword Search') {this.value = '';}' type='text' value='Keyword Search'/> <input id='searchbutton' type='submit' value=''/> </form>

1, To Change Header Logo

find the code below:

<div class='header_left'> <h1 class='sitename'><a expr:href='data:blog.homepageUrl'> Basnetg CityLife </a> </h1> </div>

Now Change red Basnetg CityLife with your site Name.

2 To Change Menu

Find the code below:

<div class='menu'> <div class='menu-mainmenu-container'><ul class='menu' id='menu-mainmenu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-167' id='menu-item-167'><a href='http://basnetgcitylife.blogspot.com/'>Home</a></li><li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-193' id='menu-item-193'><a href='#'>U.S. Cities</a></li><li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-194' id='menu-item-194'><a href='#'>European Cities</a></li><li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-195' id='menu-item-195'><a href='#'>Oceanic Cities</a></li><li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-196' id='menu-item-196'><a href='#'>Asian Cities</a></li><li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197' id='menu-item-197'><a href='#'>African Cities</a></li><li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198' id='menu-item-198'><a href='#'>Middle-East Cities</a></li></ul></div> </div>

Now change all red # with your link URL .
3,To change Submenu

<div class='submenu'> <div class='menu-submenu-container'>
<ul class='submenu' id='menu-submenu'>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-225' id='menu-item-225'><a href='#'>City Maps</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-226' id='menu-item-226'><a href='#'>Currencies</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-227' id='menu-item-227'><a href='#'>Panoramic Gallery</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-228' id='menu-item-228'><a href='#'>LIVE! Webcams</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-221' id='menu-item-221'><a href='#'>Travel Savings</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-222' id='menu-item-222'><a href='#'>Car Hire</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-223' id='menu-item-223'><a href='#'>Tours & Guides</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-224' id='menu-item-224'><a href='#'>City Watch</a></li>
</ul>
</div> </div>

Change all Red # and name to your Link URL and Link Name for submenu and page.

4 To change social Links

<div class='headtools_right'> <a href='https://twitter.com/Basnetg1' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='http://1.bp.blogspot.com/-nnOJbahqcyU/UDk72KHzZ3I/AAAAAAAAA7s/Fc48KlSTSBM/s1600/button_twitter.png' style='border: 0px; margin: 0px 5px 0px 0px;'/></a> <a href='https://www.facebook.com/basnetgfans' target='_blank' title='Like us on Facebook'><img alt='facebook' src='http://1.bp.blogspot.com/-axrzGOm8AlQ/UDk7-q92fsI/AAAAAAAAA70/a9knpc_yObQ/s1600/button_facebook.png' style='border: 0px; margin: 0px 5px 0px 0px;'/></a> <a href='http://feedburner.google.com/fb/a/mailverify?uri=BasnetG' target='_blank' title='Subscribe to our RSS Feed'><img alt='rss' src='http://2.bp.blogspot.com/-WqokSeg9Mnw/UDk8HTdo6oI/AAAAAAAAA78/A1G-sCC46L0/s1600/button_rss.png' style='border: 0px; margin: 0px 0px 0px 0px;'/></a> </div>

Change red links to your social links

5, To change Labels and Categories on Homepage
Find this code:

label1 = "U.S. Cities";
Title1 = "U.S. Cities";

label2 = "European Cities";
Title2 = "European Cities";

label3 = "Middle-East Cities";
Title3 = "Middle-East Cities";

label4 = "Asian Cities";
Title4 = "Asian Cities";

label5 = "Oceanic Cities";
Title5 = "Oceanic Cities";

label6 = "African Cities";
Title6 = "African Cities";

label7 = "Nepal";
Title7 = "Nepal";

label8 = "Feature";
Title8 = "Feature";

Now preview and Save Template, You are Done!

Source Template-Premium Free Wordpress Blogger Themes

2013-04-04T21:14:00.000-07:00

Source Blogger Template is a Premium Blogger Template in a creative business style.The source theme is designed by Gabfire Themes for WordPress