Latest: Make Responsive Blogger Template | - | Recommended: Facebook Tips, Tricks And Tutorials
Subscribe For Free Latest Updates!

We'll not spam mate! We promise.

Sunday, 27 July 2014

How To Make or Design Responsive Blogger Template


Responsive Designs becomes a part of professional web designing in these days. Even Your website or blog everyone prefers responsive web design. Many of big blogs are now using responsive web design instead of different Mobile versions. Responsive design also reduce loads and even an seo friendly. But the main question is we can design website template as responsive but can we design Blogger based template as a responsive? Yes you can. Blogger becomes a big CMS platform for blogs development. Even blogger have many great features as compare to WordPress. Template designing is much more easier in blogger as compare to WordPress. But we always think that blog theme are not such professionals like WordPress theme but i don't think so. For attractive theme designing we need HTML, CSS, JS, jQuery, Ajax like few designing languages which are enough to design an attractive theme and these are compatible with Blogger.
Today i will teach you have you can convert your current design into responsive blogger template.
Make or Design Responsive Blogger Template

What Does Responsive Design Means ?



Making a Design responsive is way to use same theme for devices in other words responsive make design compatible for different size devices like Desktop, Laptop, Tablet, Smartphones. Responsive designing done by using stylesheets means its reduces the load of coding. In these days every blog prefer responsive instead of separate mobile version and the major problem with mobile version is its not useful for different screen sizes like if website is design according to smartphone then may not work correctly on tablets. So this problem is solved by Responsiveness. 


Which is best Responsive Design or Mobile version ?


  • Responsive Design are SEO Friendly as compare to separate Mobile version.
  • Responsive design adjust itself according to all dimensions Like on Smartphone, Tablet or other devices.
  • Responsive Design reduce site loading speed that means your overall performance will increases.
  • Responsive Designs also increase your Earnings and you can use responsive adsense ad unit for maximize your earning. 
To Check or Test Responsiveness of your design. You need to any tool i suggest



Convert Your Current Blogger Template Into Responsive



Before continue with this process make sure that it requires basic knowledge about HTML5 and CSS3 because i only can guide about method and implementation is totally depend on your template codes means all the class and id vary from template to template so their is not fixed pattern to do this.
  •  First of all open your Blogger Blog >> Then Go to template Section
  • Click on Edit HTML and then paste below given meta code just below <head> tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  • Now Add Responsive Style sheets search for code which looks like ]]></b:skin>
  • Then paste paste responsive codes just above it
Here is the sample of all the Responsive CSS queries you have to paste them and then start add your current classes and id of css for responsiveness

@media screen and (max-width : 1280px) {

/* For Size Screen Less than 1280 ---*/
/* CSS CODE HERE FOR DESKTOP ---*/

}


@media screen and (max-width : 1024px) {

/* For Size Screen Less than 1024 ---*/ 
/* CSS CODE HERE FOR TABLETS ---*/

}


@media screen and (max-width : 768px) {

/* For Size Screen Less than 768 ---*/ 
/* CSS CODE HERE FOR SMALL TABLETS ---*/

}


@media screen and (max-width : 640px) {

/* For Size Screen Less than 640 ---*/
/* CSS CODE HERE FOR IPHONE ---*/

}


@media screen and (max-width : 480px) {

/* For Size Screen Less than 480 ---*/
/* CSS CODE HERE FOR SMARTPHONES ---*/

}


@media screen and (max-width : 320px) {

/* For Size Screen Less than 320 ---*/
/* CSS CODE HERE FOR SMALL MOBILES ---*/

}

Copy and paste the above format and replace /* CSS CODE HERE ---*/ for all device with css codes of your all classes and id of Header, Post Body, Sidebar, Footer and other section of your blog.

@media screen tag is for make css responsive for working different screen size

(max-width : **px) is for maximum width upto which codes will work just like if you place code in the section of 320 it means when the screen size is smaller than 320 then it will works and if screen size is larger than 320 then it will not works. 

Suppose if you place css in size 480 but not in 320 that means code place in 480 works from the Range of  Size (0 - 480) but if place any css in 320 then CSS codes of 480 will works in range (320 - 480). Only for same classes or ids if use then in both screen sizes.


Lets See an Example


@media screen and (max-width: ****px)
{

#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }

}

Note:- Don't use same classes, ids and css shown in example. This is just to explain the format become for each media screen. In same way you have done for all sizes.

Use classes and ids currently used in your blogger template for Main Wrapper, Header section, Content, Sidebar, Footer and other small section and then add css codes.


Some Important CSS Queries For Responsiveness.



1. Always use Width in % instead of pixels just like Width:50%; or adjust percentage according to our requirement.

2. Always use em for size instead of px like 10em instead of 10px.

3. Margin:auto; for alignment into center and it using values for margin from left or right then use them in %

4. Display:none; to hide any particular section.

Important Note:- Sometimes while designing a responsive template we may feel that our codes are not working. Actually Responsive code will open works if your whole sections width should be in % because in case if your any section have fixed width then it will don't lets your code work to show responsiveness.

I hope you like this blogging tutorial for responsive designing. This article is just to explain how responsive codes work but if are not families will HTML and css then i only suggest you to hire any right guy like me :D to make your design responsive.
Read More >>

Friday, 25 July 2014

How To Use or Add Google Analytics to Blogger


Install-Google-Analytics-to-blogger
Google Analytics is best ever traffic measurement tool developed by Google Inc. Google Analytics display and accurate real time report for all traffic metrics like Page views, Unique visitors, Bounce rate, Top visited pages, GEO Locations of visitor, Referring websites and much more other facts which are helpful in understanding the behavior of our Blog or Website.Google Analytics are best comparison tool ever for traffic between website or blog in GA you can observe your top organic Keywords which help to focus finding top rated keywords which are performing better for blog. So overall Google Analytics is best option to track and optimize our Blog traffic.
Today i will explain you how attach your Blogger Blog with Google Analytics. Blogger and GA both are Google's services. Blogger is used to create free blog where we post contents. If don't have any blog yet then learn How To Create Free Blogger Blog but within a blog traffics play important role so it necessary to observe the flow of your traffic which help to make better strategies for better growth. GA is best way even if you will able to gain more traffic then earning will also increase for more info must check out How To Monetize Your Blog. To Use Google Analytics on your Blogger blog you need to make some settings as explained below.


Settings For Google Analytics Account


  • First of all Go to Google Anaytics and Sign in by using gmail account.
  •  Then form will appear for website information add all information accurately just like Account name, Website name, Website URL and other settings.
Google Anaytics website details
  • After that click on Get Tracking Id button for further process
  • Then new window will appear with Tracking ID now its time to install Google Analytics in your Blog or website
Google Analytics Tracking ID

Add GA Tracking ID in Blogger


Their are two different ways to use Google Analytics within blogger you can use both methods if you want or otherwise follow any method will find easy and best

1st Method:-


  • Copy Tracking ID code display on Google Analytics Page which sometime looks like UA-40440418-1
  • Now open your blogger's blog in which you want to add this tracking id 
  • Then Go to Settings >> Other and at last their is an option of Google Analytics
  • Add Your GA Tracking ID in that box and then Save Your settings.
Google Analytics to Blogger
In case this method will not works for tracking your blog then i suggest you to add tracking id by using 2nd method because above method is only working for Blogs which having dynamic layout.

2nd Method:- 

 
  • If you follow the above method but you are not satisfied and want to use this method then Again Go Back To your Google Analytics page of Tracking ID
    Then copy the whole JavaScript coding of ID
  • Now come back to your blogger blog and Go to Template section and then Click on Edit HTML
  • After that search by CTRL+F for </body> in coding box
  • Then paste Tracking ID script just </body> tag and save your settings.
Google Analytics to Blogger Template
Now Your Google Analytics Installation is successfully done wait for few min or hours depend on your traffic volume to starting showing report in Google Analytics for your Traffic.

I hope you like this topic and learn how to add Google Analytics easily on your Blogger blog. In same You can setup GA for websites. 
Read More >>

Facebook

Blogging

Money Tricks

Android

Internet



Copyright © - 2014. Safe Tricks - All Rights Reserved
(Articles Cannot Be Reproduced Without Author Permission.)
Author : | Powered by: Blogger