Monday, 31 December 2012

How to make Beautiful Custom 404 error page in Blogger

How to make Beautiful Custom 404 error page in Blogger

"The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested." In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page.  Now Blogger Error pages use the same template .This would help template designers in making up custom beautiful 404 Pages.This tutorial will help you in setting up a Custom stylish mouse hover effect 404 page for your Blog.You may seen many 404 designs and images but this is very stylish and and made up of no image .This will also make your blog more professional.This is the much needed one for Every developing or developed blog. Lets see the Live Demo


By Default, your Blogger Error page will display this error message


custom 404 page for blogger


You can Customize this message beautifully to something else from the Blogger Settings.


How to make Beautiful Custom 404 error page in Blogger

 Copy the below codes and paste in that box

<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; }</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;">Please check that there isn&#8217;t a typo in your URL.</h2>

That all! You have a beautiful 404 error page in your blog.Do not forget to share and comment about this post :)

Sunday, 30 December 2012

Mouse Hover Effect Email subscription widget for blogger

This post is written by our guest author.Check how to become a guest author in True Blogger Tricks
Mouse Hover Effect Email subscription widget for blogger
Hello Friends I Am Rajat A Co- Author At TrueBloggertricks. Today  I am sharing how to add an stylish mouse hover effect subscribe us widget which is used by lordhtml. It is A cool and simple widget that you can easily add in your blogger sidebar.  Please Continue..

How To Add An Subscribe Us Widget Like Lord Html

  • Go TO Your Blogger Dashboard
  • From The Drop Down Menu Choose Layouts
  • Then CLick On Add A Gadget
  • From The Pop Out Menu And Choose Html/Javascript
  • THen Paste The Below COding 
<style>
.subscriptionboc
{
 border-style:solid;
 border-width:2px;
 border-color:#000;
 padding:20px;
 width:250px;
    background:#fff;
transition: box-shadow .777s;
-webkit-transition: box-shadow .777s;
-moz-transition: box-shadow .777s;
-o-transition: box-shadow .777s;
-ms-transition: box-shadow .777s;
}
.subscriptionboc:hover
{
 -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
.paratraf
{
     font-size:20px;
    font-family:&#39;georgia&#39;;
    text-align:center;
color:#000;
}
.feed-links{display:none;}
.enteremail
{
   background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #8B8B8B;
    padding: 10px 40px;
border-style:solid;
 border-width:2px;
 border-color:#CACACA;
}
.forspace
{
    padding:15px;
}
.button45
{
     background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    background:#249334;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
</style>
<div class="subscriptionboc">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">For Latest news And Updates Sign Up</div><p>         <div class="forspace">
            <center>
                <input class="enteremail" type="text" style="width:140px" name="email" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}"/></center></div>
        </p>
   
        <input type="hidden" value="truebloggertricks" name="uri"/>
   
        <input type="hidden" name="loc" value="en_US"/>
                    <center>
        <input class="button45" type="submit" value="Sign Up" /></center></form>
</div>
  • In The above coding replace truebloggertricks with your feedburner username
  • Thats All Save The Widget


    About Author Posted by Guest Author,Rajat Garg
    Hello This is Rajat ,from India, I like to explore the ways of blogging, smart earning methods,Likes to clone templates.
    Visit My Blog My Premium Lab | Follow Me On Twitter Or Facebook

    Saturday, 29 December 2012

    Optimizing your post titles for better Search Engine Ranking

    Optimizing your post titles for better Search Engine Ranking

    Blogger / Blogspot default setting defines that in search results, your blog title will appear first then followed by your post title. It is not effective because people tend look for specific contents, which is located inside one of your posts and not represented by your blog title.

    Our website is also not alone in search results, there are others’ too and we have to compete healthily for traffic. Also, the last part of our title might be omitted if search engines consider that our title is too long.As many search engine like google will display only 60 characters or letters. It is a big problem if the blog title appears in the beginning, and the post title that represents the contents appear last (and omitted partially). Therefore, it will be great if the title introduces the contents directly (first), and show the blog title later (and omit-able).

    For example, if you have a blog named “True Blogger Tricks” and you wrote a post titled “Top 10 Best templates of 2013”. Then someone uses search engine and types “best templates 2013” in the search query, normally, your site will appear in the search results as:

    True Blogger Tricks : Top 10 Best Templates of 2013
    The description of the blog
    http://truebloggertricks.blogspot.com/p/10-templates

    Seems OK? Nope, it is a disaster if the search engine consider the title too long and omit some part of it like:

    The description of the blog
    http://truebloggertricks.blogspot.com/p/10-templates

    "Top 10 best what??" is what your potential visitors will say before clicking another title, which contains more clarity.


     After little modification, we can set the title to appear as:

    Top 10 Best Templates of 2013 ~ True Blogger Tricks
    The description of the blog
    http://truebloggertricks.blogspot.com/p/10-templates

    And if search engines think that the title is too long and then omit some part of it, don't worry. The title will still be representative enough as:

    Top 10 Best Template of 2013 ~ True....
    The description of the blog
    http://truebloggertricks.blogspot.com/p/10-templates

    This second type of title appearance pattern certainly performs better in introducing its contents in search results. Contents are first, and blog title later, so that potential visitors can get clear information about the contents fast and effectively.

    How To Optimize your Post Titles :

    • Login to Blogger > Dashboard
    • Click on Drop Down Menu and select Template
    • Backup your Template before making any changes to your blog
    • Now Click on Edit HTML > Proceed > Expand Widget Templates
    • Press Ctrl + F and find the below red code shown below. 

    <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    Then we need to change them with these codes:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>

    Therefore, the resulting codes will look like:

    <head>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>

    Then save the template, and the next time a search engine crawl your blog, the new setting will be applied handsomely.

    Options: the character ~ are shown directly in the title and does not represent any code, so you can change it with another characters like @, -, |, #, etc if you wish.

    You can check whether the codes are working or not by opening one of your posts, and observe its title on the upper part of your browser. For example, in Mozilla Firefox (that I use myself), we can view the title of the page near the upper border of the window .

    Having any difficulties? Feel free to use the comment box.

    Friday, 28 December 2012

    HackingUniversity like Responsive Email Subcription widget for blogger

    Hello friends! Today I will tell you how to add a responsive email subscription widget to your blogger blog which is used by HackingUniversity.Subscription widget is one of the most and important widget for all blogs.They makes the readers to stay with your blog post without visiting your site through mails.This Social subscription widget is made with the aim of promoting and increasing traffic of your blog in various manners. As this widget is responsive in nature,It has the potential to boost your subscribers. Your readers will also get an opportunity to connect with you blog with feedburner.Get ready to see the amazing beauty in action which will nurture your blog . Lets see the Demo

    hackinguniversity like responsive subscription widget

    How to Add this Widget to Blogger ?

    Adding this widget to blogger is very simple just follow these steps:
    • Go to your Blogger Dashboard
    • Then Go To Layouts----> Add A Widget-----> Html Javascript
    • Just paste these Codes in your respective gadget box.
    <style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGi3R3S8_3M5n1Xm_nmhCvFaDLTS7iPNiW56zMPG-XYxDxnCLWSYcBdAFXEFpjZ4B38QCbykUlQ5TXvgWyqWT0zNOYRtXnItfgJgEMqjdntS_3u4sX36aXFfah-RerdokcrwQt2uHuYEs/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSm3g4edthZtEwGv6zcEOhzf8yTI21zdwKqt0yBzO6WA51wgpMiwo3LdsehfROlfvDC1t9DIfEBEd-mkU46RbXLuYK0KdXvzCa24TLTrEZSGqco5oPlKSVLIP9VB7VJNsQ-HZUUQzV7M3p/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7VGSebpyAe0cWIC7GtRNDEpnw-j8CThdR9lsHVuEdz_sNKy_Cb9OVac-ruopzDafknOUWGPqT3b7O51nBtxiSfJENKpSj-J-tsFhfBgx_p9-8bmzBtpWN660qCDn__k4m4WABngsLG-j4/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-FE_2Z2XSGxterS4tM9OV63bZ_Yv2R69KcC0UFJRDedGLmrjSg9Zj2kfHQcR1ahxzzWu6kwYnoUj8WFpXukx9ztEcrEEripiHp3Xx0LPdNc1YPWqmV6qLLM_iFAcQYsY7P3JZKWkmw5Sm/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
    <div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="truebloggertricks" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

    • In above Codes,Replace truebloggertricks with your feedburner username.
    • It all folks! Enjoy this beautiful widget in your blog.Happy Blogging!!!

    Thursday, 27 December 2012

    Effective tips to increase your blogs pagerank

    How to increase your blog pagerank effectively
    Do you want to increase your pagerank? Do you want to know how you can increase your pagerank? Increasing your pagerank is much easier than understanding its algorithm.Let me tell about the pagerank algorithm.

    As an introduction , pagerank represents the importance of a website in the vast internet, where a higher pagerank means better importance in search engines. Pagerank is scaled from 0 to 10 and becomes interesting when involves traffic, The websites with high ranks will win more traffic from search engines.

    Before starting, you should know that pagerank is updated once in 3 months. Therefore, you should not expect any changes soon after you start working on it.

    Dofollow inbound links (backlinks) are the most critical aspect in calculating your pagerank. Dofollow means that your link will be crawled by the bots / spiders of search engines, nofollow is the contrary, and both are set using anchor text attributes. If all your pages in your blog are linked each other perfectly, you will get a pagerank of 1 easily.

    So, here are some methods that can increase your pagerank, starting from the easy ones:

    1. Interlinking post

    Good dofollow linking (internal site navigation) inside your website will be helpful in increasing your pagerank, but it can only helps to reach a pagerank of 1 without external links. Interlinking can be easily done using an archive widget which can be placed in your sidebar, or a sitemap. It will render all your posts / pages connected each other handsomely, since your sidebar / sitemap goes to all your posts / pages.

    2. Natural DoFollow Linking

    When bloggers write something, they usually put some external links as an additional information for their readers. The links inside posts are usually dofollow, unless the bloggers specifically and manually defines nofollow attributes.

    Here is how you can apply it: first you need to write good genunine contents. If then people read and get impressed, there is a good chance that they will put your links in their own website / articles without asked (as additional resources). It gains you more dofollow inbound links, gives you more votes, and you grows your pagerank.

    More great (not just good) contents means more chance of getting natural dofollow backlinks.

    3. Guest post

    This is one of the most used and best technique to increase Page Rank for many past years in blogosphere. Most Big Blogs have options of guest posting through which you can post at their blog and get two or three backlinks (Dofollow) in return to your blog this really helps if you are posting on good Page Rank Blog with the same Niche as yours.

    4. DoFollow Link Exchange

    Link exchange between sites / blogs is a common thing in the blogosphere / internet. If you have some friends who have websites or blogs with good traffic and pagerank, you can request for dofollow link exchanges. When you can get more of this exchanges, you will earn more votes. Thus your pagerank will increase.

    Getting some dofollow link exchanges with quality sites (higher ranked and relevant) are even better.To get link Exchanges,One should be friendly with other bloggers.

    5. DoFollow Reviews

    Asking bloggers to write reviews / advertorial about your site (with your dofollow backlinks inside them) will also help building your pagerank. Some reviewing services gives you dofollow links by default, while in some others, you need to manually state that you require dofollow links in the reviews.

    You will need to spend some funds for this method, which is best for products and services.

    6. DoFollow Text Link Ads

    There are lot of websites that provide services in text link ads such as Infolinks, Chitka, Clicksor,etc,. Some of them provide dofollow text link ads, which can help you to increase your pagerank. These type of ads will make the websites (where they are located) vote for your site and increase your pagerank.

    Text link ads are usually not free and you should spend dollars for it!

    Group Discussion and Questions - Answers:


    1. How high can my pagerank will grow?

    trying to increase pagerank
     The persons who blog as a hobby can easily attain a pagerank of 1 and 2.Some full time blogger like Mustaffa of mybloggertricks , Paul crowe of spiceupyourblog.com and Harish of way2blogging.org can attain a pagerank of 3 to 5 .Super successful and famous bloggers like Darren Rowse of Problogger.net and Brian Clark of Copyblogger.com can get 6-7 in scale.Traffic audit sites like alexa.com can attain a pagerank of 8. Search engines like google,Yahoo and Bing can attain a pagerank as high as 9.And Social Medias like facebook and twitter can get the ultimate 9-10.

    If a blogger wants to attain a pagerank of 8 and above, he's dreaming.



    2. Can leaving comments in other blogs / websites increase my pagerank?

    Yes,sometimes .Only if the blogs comment are dofollow, which allows the search engine bots/ spiders to crawl your links inside the comments sections. Most blogs in the web are Nofollow in their comments section to avoid abuse and spam and not to leave their link juice. Leaving comments in nofollow sites will increase your link popularity, but not pagerank.You need dofollow backlinks to increase your pagerank.If found any dofollow blog, always try to become a top commentors of that blog.

    (True Blogger Tricks is a dofollow and dont forget to comment in this blog!!)

    3. Can social media websites increase my pagerank?

    No, absolutely they cannot. All social medias automatically add nofollow attributes to all links inside them to avoid spam or abuse.It is Same like nofollow commenting, it will increases your link popularity but not your pagerank.

    4. Black Hat pagerank building may work, why don't you mention it here?

    Black hat SEOSearch engines actively fight black hat pagerank building (like keywords spamming, hidden link, etc), because they want to ensure that high ranked sites are really valuable to online society, not just because they can hack things using their techie knowledge.
    It's like getting money, you can get money from providing satisfying services to others, or by robbing or stealing from others. Both give you money, just which methods you want to use. Natural and black hat methods can increase pagerank, your purpose defines which one you will choose.

    Besides, using black hat methods can result in ban or penalty from search engines.

    Its all friends.Feel free to try and don't hesitate to let me know if I missed something.

    Tuesday, 25 December 2012

    Top Blogging Ideas like responsive blogger template(clone)

    First of all, happy Christmas to all my readers and fans.As I am searching for new ideas for my next post , I found a beautiful responsive blogger template used in Topbloggingideas.This is a responsive template which makes everyone to like your blog.This template adopts to all devices such as ipad,iphone,mobile and computer.This template is highly fastloading than any other template.This template is rated as 98 out of 100 google pagespeed.Unnecessary widgets and script are removed to make this template fast loading.Lets see the live demo of this beautiful template.





    Special Features:

    • Highly Fast loading
    • Elegant look
    • Responsive design
    • professional look
    • No Auto readmore widget
    • Beautiful Background
    • Customised Headings
    • Colourful menus
    • Left sidebar
    • Easy Edting
    • Stunning comment section
    • Inbuilt Social widgets
    • And much more

    Note:

           If you are a true and genuine blogger,Kindly please leave the footer link.This single link will not make your template ugly.
     
    If you are satisfied with this template,Kindly Do this,
    • Like us on Facebook.
    • Follow Us on Twitter .
    • Subscribe to our Updates by filling the form below the post where it says "Enter Your Email Here"and click on submit.
    • Join this site with google connect.           
     If you find any errors or doubts in this template,Feel free to ask to the author.

    Sunday, 23 December 2012

    Introducing our new 'Minimal SEO' template For Blogger

    As Christmas festival is nearing , Every one will try or think to give a surprise present to their Dear one.As I am a blogger I am going to give a template as a christmas present to all bloggers.This template is named as Minimal SEO because this template look simple,Elegant and give premium touch.This is a fully redesigned Super SEO template,which is made by Bloggertuts.This template is built for main concept of SEO.This template comes with preinstalled widget and no editing is required after installation.Lets see the Live Demo.




    Special Features of this template :

    • Built for SEO 
    • Elegant look
    • Social widgets
    • Stunning comments section
    • Auto read more widget
    • 3 footer widget
    • Backtotop widget
    • Two navigation menus
    • Menu with submenu
    • Suits for all niche

    Note:

           If you are a true and genuine blogger,Kindly please leave the footer link.This single link will not make your template ugly.
     
    If you are satisfied with this template,Kindly Do this,
    • Like us on Facebook.
    • Follow Us on Twitter .
    • Subscribe to our Updates by filling the form below the post where it says "Enter Your Email Here"and click on submit.
    • Join this site with google connect.