Thursday, October 16, 2014

Avada - Responsive Multi-Purpose WordPress Theme

Avada - Responsive Multi-Purpose WordPress Theme : IF you want to start or you are running a website in WordPress  and you haven't checked this theme out ! Then you are at the dark age .... Yes Dark age , Actually avada theme is developed for multi-purpose websites niche i.e you can use it for your commerce website.If not interested in the mentioned niche you can start another niche website , Avada never force you to just stick to a specific niche and specific design. Avada Provides you alot of opportunities to customize the outlook of your theme , you can customize the background section.You can also play with the Advanced Options , Mega Menus , Unlimited colors , Page Parallax , Page Builders and visual effects of this theme.Due to it's Clean design and well documentation it has become the number one selling WordPress theme.More then One lac users are using this theme for different type of websites. Ranging from design and functionality Avada present SEO ready package for the users which will surely help you in getting a massive number of traffic to your website. There are many incredible features of Avada , the most important and cool thing is that it is fully responsive template . Moreover this theme comes with Premium Sliders , 5 header designs , A visual Page Builder , WooCommerce Compatibility , and SEO optimized scripts.This theme provides you option to customize the width of your site to your desired pixels , so you are not compelled to just a fixed width.There are beautiful two option one is dark and another is light skin , you can change to your desire one very easily.At the Contact section amazing contact form is present via which your customers or clients can contact you very smoothly easily.There are 500+ Google fonts present in this theme , you can also apply and upload custom fonts. Avada theme is Built with HTML5 & CSS3, a lot of thought and care went into this theme making it a pleasure to use. Avada has a ton of incredible user reviews and lots of awesome features.You can get the live demo and download link below in the download section.
Avada - Responsive Multi-Purpose WordPress Theme

Avada - Responsive Multi-Purpose WordPress Theme Features

  • Fusion Core Plugin
  • Mega Menu Built-in
  • Full Control of Site Width
  • Custom Backgrounds
  • WooCommerce Compatible
  • CSS3 Animations
  • Dark and Light Skins
  • Unlimited Colors / Skins
  • Advanced Header Options
  • Crips Vector Font icons
  • Form Plugin Options
  • SEO Base Built-In
  • Clean, modern, multi-purpose design can be used for any type of website
  • The Ultimate Multi-Purpose WordPress Theme
  • WordPress 4.0 Tested and Approved, and compatible with WP 3.2+
  • WordPress Multi-Site (WPMU) Tested and Approved
  • Built with HTML5 and CSS3
  • SEO Optimized, Great SEO base already built-in (compatible with SEO Plugins like Yoast)
  • Well organized, commented & clean code
  • Cross-Browser Compatibility: FireFox, Safari, Chrome, IE8, IE9, IE10, IE11
  • 100% Responsive Theme – and you can easily turn it on or off
  • Easy to use Fusion Builder, a visual page builder
  • Full control over site width; content area and sidebars
  • Retina Ready, Ultra-High Resolution Graphics
  • Social Icons and Theme Icons are Font Icons, no Images
  • Automatic Theme Updater
  • Dual sidebars throughout the theme
  • 1-6 Column Support
  • One Page Parallax feature for any page
  • CSS3 animations enable or disable on desktop/mobile
  • Child Theme Compatible – includes basic child theme!
  • Strong focus on typography, usability and overall user-experience
  • Super-Enhanced Performance For Viewers
  • Amazingly Cool jQuery Enhancements
  • Includes the Font Awesome icon set, fully integrated
  • 60 Layered PSD’s for customization
  • Compatible with Ubermenu (uber does not support sticky headers)
  • Compatible with Many Popular Plugins

Avada - Responsive Multi-Purpose WordPress Theme DEMO AND DOWNLOAD LINK

Read More


Wednesday, October 1, 2014

SEO For a New Website/Blog

SEO For a New Website/Blog : Time to play with Search Engines , so let's rock . Again here is Ifti ..... after posting an incredible post "The Game of SEO" , i am going to post another cool article about SEO. Actually this article will help both the experts and newbies to start a new website/blog and bring it to the peak point in search engines.Every one has his/her own views about SEO , but what i am sharing is my personal experienced tips. I am not here to impress any one , but honestly i am sharing some unique tips which may help you to grow your business , blog , and website hits.The thing is not only the result in search engines , you will also earn high amount of revenue if your website / blog has lot of visitors.Which means SEO is directly proportional to the revenue your blog / site generate.If you are starting a corporate site or eCommerce site ,or if you are totally new to SEO , you should check my 1st article 'the game of seo' mentioned above and surely the label SEO. Once by checking these articles you will not be beginner , and because it is always difficult to make changes to things once it is done ,then to implement it correctly from the scratch.Actually the articles i mentioned above to check includes all the basics of SEO i.e How to play with Anchor text , how should be your Content ? How you will use Image alt tags? And where you will use h1 tag , h2 tag etc ?Therefore , once you learned all these steps you can optimized your new blog / website very easily by implementing the techniques. In this article ,we will discuss all the SEO tips and tricks for starting a new website / blog .


seo

SEO For a New Website/Blog

  • First of all decide the platform / technology to use for your website i.e either go for Blogger or WordPress which are the two well known and friendly CMS in the world.I will suggest Blogger for newbies because it's very easy to play with it.And if you have some taste of Code and want something big to archive then say no to Blogger and run for WordPress.
  • Design a website but Responsive ! Actually this is the era of iPhones , iPad , Tablets , and Smartphones , having a responsive website / blog will help your smartphones visitors to easily navigate through your blog and will love to stay there.So make sure the theme / template you are using is responsive.
  • The third step is purchasing a domain name and hosting  , now where to buy ? Where to trust ? That's great. I will prefer Namesilo via GoDaddy , actually Godaddy got viral in few years but now they are kicking their customers.I bought a domain from them , and they deleted my domain without any reason , and now they have listed it in their premium listings for 100$ , i will say WTH is that? Actually i am not compelling you to buy domain from Namesilo but i give you that advice now it's your choice where to trust!
  • Buying a domain and having no idea about naming ? Well , Do keyword research first for the domain you are buying ! If your domain name is a specific keyword you want to rank , it will easily be ranked.
  • Jump Back to the step two and come back here ! Done ? Okay .. Now after a cool responsive design focus on the navigational structure of your website .Actually this is the main thing the users will interact with your website / blog.Having a well organized navigation menu and clear categories names will help your visitors to navigate via your blog easily and once the visitors are happy the Google is Happy!
  • After implementing all the above steps focus on sitemap.Actually sitemap is the collection of URLs for your blog / website in the form of xml file.The sitemap is extremely useful if the sites are new ones , it allows you to submit all the links of your site to Search engines for crawling.Now how to generate Sitemap? If you are on Blogger first submit your Blog to Webmaster tools after that go to http://ctrlq.org/blogger/ and type your Blog url and click on generate sitemap.Once Done Copy the xml part as shown in the below snapshot.
  • Now After copying the xml part go to webmaster otools , and select your Blog . Now Click On  Add sitemap as shown below and paste the xml part over there and hit submit sitemap as shown.Actually you can submit any site Sitemap to google webmaster just by entering the file name in the field (xml part goes here) like if you have a website sitemap (example.com/sitemap.xml) just add sitemap.xml in your google sitemap section that's it.
  • It will give you a message of Pending , just wait for 12 hours and it will be live there. That's it!
  • FOR WordPress use this Plugin http://yoast.com/WordPress/SEO , this plugin will help you in optimizing your Blog / Site SEO for sure.
  • And if you are on any other CMS you can use www.web-site-map.com/ to generate your site sitemap.After generating this site will give you an xml file  , just upload it to the root directory of your site. That's it.
  • 301 and 302 Redirects ! Okay now what this sh*t is? Actually redirect means to forward an URL to another URL .There are two types of redirects 1) 301 Redirect - It is used for pages which has been moved permanently and 2)302 Redirect - this is for pages which are moved temporarily .Actually in these cases the search engines will replace the moved pages with the new ones . But if you have implemented the 302 redirect the search engine may not replace your site page Now how to Do that? At the Server Level (.htaccess file) by adding the following line :
Redirect 301 / OldPage http://www.yourdomain.com/newPage
  • And If you are the WordPress CMS , just install the redirection Plugin and that's it.
  • Another important Tip is removing 404 errors ! Now what 404 error is ? Actually whenever you remove a post / page from your website and visitor hit that page so he/she will found a new page , that the requested resource was not found on the server! These errors are very bad for the user experience on the website.These links are also bad for traffic and ranking . First of all we will learn where to find these 404 errors? Actually you will have to visit your site Google Webmaster tools and at the left side select CRAWL from the menu and then Crawl errors , there you will get all these links.Now How to fix these errors ? Well , i will say implement a 301 redirect from the Old Version of the page to the new version.All Bloggers just checkout my post "Replace Blogger 404 Page with beautiful Search box".
  • URL (Uniform Resource Locator) , actually url plays an important role in indexing your site posts .It is shown just below the title tag in search engine ! Okay i got it , it's important now how to work with it? What should it look Like ? Well , Never exceed the length of URL from 3 words , some SEO experts are ranging it from 3-5 but i will say 3 or 4 words is the best option.Also never use extremely long URL , use the focused keywords in the URL , it will be better if it is unique.Use - (dashes) between words so it is treated as space between two words by the Search Engines.In the URL never use uppercases , always use lowercases. Take a look on the below Quoted URLs
The Good URL

www.example.com/pakistan-tourists-guide/pakistan-map/
THE BAD URL
www.example.com/pakistan1/article.html
www.example.com/india1/post.php?id=24&title=abc

  • The last and most important tip i am sharing is INTERNAL LINKING which is the key for ranging.Actually it is a type of hyperlink which improves visitors engagement on your website .Let suppose you are posting about Blogging and you have another post which is related to Blogging and you mentioned that link in your recent post that is called internal linking.Actually internal linking helps and navigate the search engines and humans to discovers your website easily.By visitors engagement number of pages per visit , time on site and conversions will increase which will decrease the bounce rate which is a positive effect in SEO for your site.
 
  • From the above Structure you may have guessed what to DO ? Still nah ? Well , let me elaborate it , use specific keywords in the Anchor text . We Called it Rich Keyword Anchor text, but remember don't increase the density ! I mean don't start adding the same keyword in every post but with variation.Use Synonyms and replace the keywords with the new in each new anchor text. 
So what's up ? Rome was not built in a day , of-course SEO is not the game of 2 or 3 days it is the 2nd name of wait and patience! Implement all the above Steps and you will see 100% results.Stay tuned for more fantastic posts about SEO , Happy Blogging!
Read More


Wednesday, September 17, 2014

How To Add 3D Flip Effect To an image in Blogger using CSS3

CSS3 3D Flip Effect To an image in Blogger: Every one is adding images to Blogger , yeah it's damn true but why not you add it uniquely ? That is 3D Flip effect using CSS3 . CSS3 has just brought the revolution to the web world , playing with the codes you can rotate your images , objects , buttons etc in any degree . Moreover you can apply your own custom colors to enhance the effect of design of your blog , websites etc.Let's play with this awesome feature of CSS3 to add 3D Flip Effect To an image in Blogger.In this tutorial you will have to deal with 2 codes , one is simple some divs tags and other one is CSS for styling image.

DEMO

How To Add 3D Flip Effect To an image in Blogger using CSS3 

  • Actually i have made it very simple for you guys , you just have to add your image link in the script .
  • First of all Go To Post Section , Click on Create Post and then switch into HTML Section copy the below script and paste it over there.
<div class="profile-image">
 <div class="flip-3d">
 <figure>
 <img src="yourimage.jpg" />
 <figcaption>Caption text goes over here!</figcaption>
 </figure>
 </div>
</div>

  • Replace yourimage.jpg with your desired image url. 
  • and in the figcaption tags add the text you want to appear on hovering the image.
  • Now Just Copy the below CSS code and paste it just below the above script

<style>
.profile-image {
  margin-bottom:20px;
}
div.flip-3d {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d-skills {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d figure {
 position: relative;
 transform-style: preserve-3d;
 transition: 1s transform;
 font-size: 1.6rem;
}
div.flip-3d figure img {
 width: 100%;
}
div.flip-3d figure figcaption {
 position: absolute;
width: 105%; height: 50%; top: 0;
 transform: rotateY(.5turn) translateZ(1px);
 background: rgba(255,255,255,0.9);
 text-align: center;
 padding-top: 45%;
 opacity: 0.6;
 transition: 1s .5s opacity;
}
div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>

  • You can also play with  the different properties and selectors of CSS by changing the above Code , but if you are new to CSS just add the image url and caption text , don't edit it if you are new to programming!

So What's Up : Any Problem in implementing the Code? Did you like this tutorial , please share your beautiful thoughts with us , stay blessed Happy Blogging!
Read More


Saturday, August 16, 2014

How To Optimize image Size and Quality in Photoshop

Optimize image Size and Quality in Photoshop For Blogger / WordPress:Whenever we upload images to our Blog / Site it should be well optimized.Otherwise the huge size and boring quality of image can be the cause of low speed and dull look of your blog / site.Moreover if you are using limited hosting it will ruin your storage space and you will tap your head and will have to buy expensive hosting, for that you have to spend dollars !! But who wants to waste his/her dollars , if he/she can save it my way ;).Anyhow let's come to the main point that How we will optimize the image size and quality , for optimizing we will use the Photoshop and will say thanks to adobe for creating this awesome software.
Image we gonna optimize 
How To Optimize image Size and Quality in Photoshop

Before
How To Optimize image Size and Quality in Photoshop

After
How To Optimize image Size and Quality in Photoshop


How To Optimize image Size and Quality in Photoshop

  • Open Your Photoshop File
  • Load the image
  • Now Click On File from the menu as shown below
How To Optimize image Size and Quality in Photoshop

  • Now Select Save for Web or directly press (ALT+CTRL+SHIFT+S) from keyboard
  • And the below windows will pops up
  • Click On 4 ups and then again select Optimized as shown in the below image
How To Optimize image Size and Quality in Photoshop
  • Now hit save 
  • And Upload your Optimized image to your site !
  • Bingo we optimized and save alot of space and increased the quality of image ;)
Read More


Monday, August 11, 2014

Replace Blogger 404 Page with Beautiful Search Box in Blogger

Blogger is not dynamic as WordPress , and can't compete with WordPress  however experts matters every where.Here we have found a way via which you can easily Replace Blogger 404 Page with Beautiful Search Box.This will make your blog navigative and easy to understand.Whenever some one enters any wrong URL or any address it will show the search box and link to the home page via which he/she can get back into the homepage or can search your blog for any other query! Moreover the design of this search box is very cute it will give a great touch to a fancy design of your blog.Let's see how it works!

 Replace Blogger 404 Page with Beautiful Search Box in Blogger

  • Go To Blogger Dashboard 
  • Click On Settings
  • Then Click On Search Preferences
  • In Errors and redirections section Click On Edit (custom page not Found)
  • Copy the below script and paste it over there
<style>
#search-button-links1 {
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    width: 580px;
    font-size: 18px;
    color: #000;
    text-align: center;
    text-decoration:none;
    line-height: 42px;
    border-width: 0;
    background-color: #5caddf;
margin:5px;
    cursor: pointer;
}
#search-box1 {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form1 {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text1 {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#search-button1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}
</style>
<div id='search-box1'>
  <form action='/search' id='search-form1' method='get' target='_top'>
    <input id='search-tex1t' name='q' placeholder='Search ThatsBlogging' type='text'/>
    <button id='search-button1' type='submit'><span>Search</span></button>
  </form>
</div>
<p style="color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none">This Page has been removed for safety purposes | Visit <a href="http://thatsblogging.blogspot.com">ThatsBlogging</a>

Modifications

You can change the text highlighted in red to the desired text you need! The above section of this code is just a chunk of code for CSS and the below is 2 divs which will help to declare the search box area.Hope you got it , if you got any problem feel free to comments below.Stay Blessed , Happy Blogging!

Read More


Tuesday, July 8, 2014

iTemplate an Incredible Blogger Template

iTemplate is a new blogger template designed by ThatsBlogging .iTemplate theme comes with many bombastic features which really makes it an incredible theme.This theme has fully responsive design and an incredible outlook which fits on high end mobile screen, To test this template responsive design just resize your browser.

iTemplate info

  • Template Name : iTemplate 
  • Template Price: 0 $
  • Release Date : 07/09/14
  • License : Free 
  • URL : ThatsBlogging.Blogspot.com
  • Designer : Iftikhar uddin

Features of iTemplate Blogger Template




  • Incredible Outlook
  • Grid Style
  • Pagination Ready
  • Fantastic Footer
  • Cool Navigation Menu
  • Latest Coding
  • Beautiful Subheading style
  • Popular Post Widget
Free of Cost
and many other features!

Configuration

  • For adding Facebook Like Box , just go to layout >> Click On edit Love us widget , Copy the below script >> Change ThatsBlogging and write your own fb page username and paste it over there that's it.
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Thatsblogging&amp;width=300&amp;height=248&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;" style="border:none; overflow:hidden; width:300px; height:248px;" ></iframe>
  • For Beautiful look change the number of posts per page to 6 as shown below


  • For Changing Logo Go To Blogger Dashbaord >> Click On Template >> Edit Template >> Search for tinypic as shown below and replace the image link with your desired logo link. 
  • For Changing Links in the Top menu search for Home or Templates in the template html code , then change the links to your blog links.
  • For Changing Order Now Button Link Go to Template HTML again and Search for ordernow , there change the services link to your desired link.
  • If you want any other thing to change , just drop comments below i will help you!
Read More


AdSense Ads Not Showing On HomePage - Problem Solved

AdSense Ads Not Showing On HomePage: It happens when you are new to Blogging and  AdSense world.The Problem is your AdSense ads will not be displayed on the home page of your blog or website.Actually it's not a big problem but you have to set your blog preferences.And that's all the secret behind fixing this Problem.


How To Fix This Problem

  • Go To Blogger Dashboard 
  • Click On Settings
  • Click On Preferences


  •  Now Just Scroll Down little below
  • You will see the below area called Meta Tags as shown
  • Now Enable Search Description (click on yes) and give a little description about your blog.
  • That's it
So What's Up : You may have search alot about this problem ,every one is explaining it in it's own way but the solution is here.Stay Blessed , Happy Blogging!


Read More


Advertisement

Want To Hire me / Need a Professional Template?

If you want something really unique and bombastic , Order a Template ...You will must say wow to the Design!!