Sunday, 29 November 2015

Add Beautiful Search Box Widget for Your Blogger

In this post, steps on how to add customized CSS3 search box to blogger blogs are given. With a custom search box in your blog, your readers both the new and returning ones can easily search for and find anything on your blog.  For blogs that have hundreds of posts, it might be very difficult for readers to find a particular post without the search box, even if they go through the archive. Also,  the analytics from searches performed on your blog lets you know what your readers really want. Other than the default blogger search box which has a dull design, you can add a customized one which is stylish and with a better design. Help your readers find what they need on your blog quickly by adding one of the styles below for the customized search box gadget for blogger.

Add Beautiful Search Box Widget for Your Blogger

  • Log in to Blogger, then go to Layout > click on "Add a Gadget" link
  • From the pop­up window, scroll down and click on the "HTML/JavaScript" gadget:    
  •  Paste the This code inside the empty box
For THIS
 <style>#searchbox {width: 240px;}#searchbox input {  outline: none;}input:focus::-webkit-input-placeholder { color: transparent;}input:focus:-moz-placeholder { color: transparent;}input:focus::-moz-placeholder { color: transparent;}#searchbox input[type="text"] {background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border: 2px solid #f2f2f2;  font: bold 14px Arial,Helvetica,Sans-serif;  color: #6A6F75;  width: 160px;  padding: 14px 17px 12px 30px;  -webkit-border-radius: 5px 0px 0px 5px;  -moz-border-radius: 5px 0px 0px 5px;  border-radius: 5px 0px 0px 5px;  text-shadow: 0 2px 3px #fff;  -webkit-transition: all 0.7s ease 0s;-moz-transition: all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;  transition: all 0.7s ease 0s;}#searchbox input[type="text"]:focus {background: #f7f7f7;border: 2px solid #f7f7f7;width: 200px;padding-left: 10px;}#button-submit{background: url(http://3.bp.blogspot.com/-AdpPwxQzxRQ/VQGGkmYc75I/AAAAAAAAANk/6moDe_NLLRo/s1600/slider-arrow-right.png) no-repeat;margin-left: -40px;border-width: 0px;width: 43px;height: 45px;}</style><form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value=" "/></form> - See more at: http://www.alltechpeople.com/2015/03/add-beautiful-search-box-widget-for.html#sthash.A8vHWFxh.dpuf
              
<style>
#searchbox {
background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/s1600/search-box.png) no-repeat;
height: 27px;
width: 202px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
outline: none;
}

#searchbox input[type="text"] {
background: transparent;
margin: 0px 0px 0px 12px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
font-style: italic;
width: 77%;
color: #828282;
display: inline-table;
vertical-align: top;
}

#button-submit {
background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 30px;
height: 25px;
}

#button-submit:hover {
background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>
                           
<style>
#searchbox {
background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;
width: 250px;
height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
outline: none;
}

#searchbox input[type="text"] {
background: transparent;
padding: 5px 0px 5px 20px;
margin: 10px 15px 0px 0px;
border-width: 0px;
font-family: "Brush Script MT", cursive;
font-size: 12px;
color: #595959;
width: 65%;
font-weight: bold;
display: inline-table;
vertical-align: top;
}

#button-submit {
background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-top: 10px;
width: 19px;
height: 25px;
}

#button-submit:hover {
background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
outline: none;
}

#button-submit::-moz-focus-inner {
border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
<input id="button-submit" type="submit" value="" />
</form>
                           
 <style> #searchbox { width: 280px; background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat; } #searchbox input {     outline: none; } input:focus::-webkit-input-placeholder {     color: transparent; } input:focus:-moz-placeholder {     color: transparent; } input:focus::-moz-placeholder {     color: transparent; } #searchbox input[type="text"] { background: transparent; border: 0px; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 14px;     color: #f2f2f2 !important;     padding: 10px 35px 10px 20px;     width: 220px; } #searchbox input[type="text"]:focus { color: #fff; } #button-submit{ background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat; margin-left: -40px; border-width: 0px; width: 40px; height: 50px; } #button-submit:hover { background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png); } </style> <form id="searchbox" method="get" action="/search" autocomplete="off"> <input name="q" type="text" size="15" placeholder="Search here....." /> <input id="button-submit" type="submit" value=" "/> </form> - See more at: http://www.alltechpeople.com/2015/03/add-beautiful-search-box-widget-for.html#sthash.A8vHWFxh.dpuf
  • Now Save Template

How To Convert Blogger Template Into Responsive Or Mobile Version

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

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

  • Just Login to your Blogger Profile and select your blog.
  • Now go to Dashboard > Template > Edit HTML.
  • Click anywhere inside the code area, then press the CTRL + F keys and search for this code
  • Now Find Code <head>
  •  Now <head> just after that, paste this code
  • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  • Now Find Code ]]></b:skin>
  •  Now  ]]></b:skin> just before that, paste the whole CSS code given below. You can customize its color codes as you wish.
  • @media screen and (max-width : 1280px) {

    /* For Size Screen Less than 1280 ---*/
    @media screen and (max-width: 1280px) 
    {

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

    }

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

    /* For Size Screen Less than 480 ---*/
    @media screen and (max-width: 480px) 
    {

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

    }


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

    /* For Size Screen Less than 320 ---*/
    @media screen and (max-width: 320px) 
    {

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

    }
    Note:- If You Want sidebar Hide sidebar from mobile Version
  • Now Save Template
  • Now you Have a mobile Version
  • Enjoy It

Thursday, 26 November 2015

How To Customize Text Selection Color on Blogger/Blogspot

Hello Reader Are searching about How To Customize Text Selection Color on Blogger/Blogspot Then this tutorial for you .By text selection color, what do I mean is whenever someone selects the text with mouse on your blog post then by default its color. Got it? Default background color is always blue and text color is white. Ready to add some more colors to your blog on this HOLI season?

How To Customize Blogger Text Selection Color

  • Just Login to your Blogger Profile and select your blog.
  • Now go to Dashboard > Template > Edit HTML.
  • Click anywhere inside the code area, then press the CTRL + F keys and search for this code
  • Now Find Code ]]></b:skin>
  •  Now  ]]></b:skin> just before that, paste the whole CSS code given below. You can customize its color codes as you wish.
  • /*--------- Text selection Customization by ATP------------- */
    ::selection {
    background:#4D23E6/*------This is the background color on selection-----*/
    color:#fff/*------This is text color on selection-----*/
    }
    ::-moz-selection {
    background:#e67e22; 
    color:#fff
    }
    ::-webkit-selection {
    background:#e67e22;
    color:#fff
    }
    Note:- you change RED market area by your color
  • Now Save Template
  • Enjoy It

How To Customize Blogger Scrollbar

thought about if you could customize browser scrollbar color/width on your blogger blog? You can see the live examples on our blog itself. We have changed its scrollbar's color & width too. Isn't it nice? :) Follow this simple step by step tutorial and do the same on your blog. Make your blog look more professional, eye catchy, user friendly and of course, colorful too. 

How To Customize Blogger Scrollbar

  • Just Login to your Blogger Profile and select your blog.
  • Now go to Dashboard > Template > Edit HTML.
  • Click anywhere inside the code area, then press the CTRL + F keys and search for this code
  • Now Find Code ]]></b:skin>
  •  Now  ]]></b:skin> just before that, paste the whole CSS code given below. You can customize its color codes as you wish.
  • /*--------- Scrollbar Customization by alltechpeople--------- */
    ::-webkit-scrollbar {
    width:8px;
    height:8px;
    }
    ::-webkit-scrollbar-track {
    background:#FFF;  /*------This is background color of scrollbar track ------*/
    -webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
    border:1px solid #D8D8D8;
    }
    ::-webkit-scrollbar-thumb {
    background:#2E1198;  /*------Thumb color ------*/
    -webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
    }
    ::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4); /*------Shadow on hover------*/
    }
    ::-webkit-scrollbar-thumb:active {
    background:#333;   /*------Thumb color when it is active------*/
    -webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
    }
Note:- you change RED market area by your colour
  •  Hit save button :). In the above CSS code, I have added proper comments to change the color codes to make it easy for every one. If you have further questions, follow the comment route, am eagerly waiting to help you do the job :).
: Did you face any problem with your blog template while adding these styles? Just ask me in comments and I'll join you there soon. Now do share, subscribe and like our page buddy, you can do it. :) 

How to Create and Embedded Timeline on Blog

Hey, readers! Today I came up with an awesome article regarding How to Create and Embedded Timeline on Blog,Yes! The article is about How to Create and Embedded Timeline on Blog In simple steps.it is very easy to way to solve your problem.

How to Create and Embedded Timeline on Blog


  • First of all, Sign in to your Twitter Account.Now Go To Settings and click on widgets
  • then Click the “Create new” button to build a new timeline for your website.
  • Choose the type of embedded timeline you would like to use from the five listed.
User TimelineEnter the account name of the user whose tweets you want to display.
FavoritesEnter the account name of the user whose favorites you want to display.
ListSelect a public list that you own and/or subscribe to in the drop-down menu.
SearchEnter your search query (you can use hashtags, as well).
CollectionSelect one of your collections.

  • Customize the design by specifying the height, theme (light or dark), and link color to match your website. You can also configure your embedded timeline to auto-expand Tweets containing media, exclude replies in the user timeline version, and choose “Safe” mode in searches to exclude sensitive or profane content from appearing.
  • Choose whether or not to opt-out of tailoring Twitter.
  • Click Create widget and then copy and paste the code into the HTML of your site.

How Add Twitter Follow Button on blog

The follow button is a small widget that allows users to follow a Twitter account from any webpage. The follow button uses the same implementation model as the tweet button, and its integration is just as simple.

How Add Twitter Follow Button on blog

  • Go to the Twitter Resources page for buttons and select the Follow button.
  • Customizable options appear that include:
    • The user’s Twitter handle;
    • Button to select whether or not to show the username;
    • Large button size option;
    • Opt-out of tailoring Twitter;
    • Language.
  • Choose the options you want, preview the button
  • copy and paste the HTML code to embed on your website.
  • That it

How To Add DISQUS Comment System in Blogger Blog?

Disqus is a yet another commenting system which is flexible enough to support API integration including Facebook, Twitter, Google, Open URL, and users can even login through their personal Disqus account (where all our conversation is being recorded). Another thing which makes it better, than any other commenting system is its, robust functionalities.

There is an easy way of integrating Disqus in Blogger. We have to just register a new account over Disqus and by Widget integration it will override all the old/previous comments. Thus, Disqus would be installed successfully.

How To Add DISQUS Comment System in Blogger Blog?

  • Firt of all go DISQUS & create Account
  • Click on Settings (on top beside your profile photo) & Click on 'Add Disqus to Sites'
  • After that Click on 'Start Using Engage' Now Add On site profile, fill up the details
  • Click on Finish Registration'
  • Choose your blogging platform (here is Blogger)
  • In step instruction, click on 1
  • Click on 'Add Widget'
  • we have fished working with the first step so, now head to the second one. In order to import your old comments from previous platform just go to Tools > Import and proceed to the next step.
On reaching Import menu there will be two options, but we have to select "Import comments from Blogger" so that it imports all those comments which are previously published on the site.
 
  • After selecting "Import Comments", it will take you to a new page where it will ask for accessing your blog's data. Just give it the permission by pressing "Grant Access" button
  • After granting the permission go back to the Import >> Tools Page. Now you will be able to see a new option there i.e. "Choose a blog to import from" which will allow you to import comments from your blog. From the list select a blog to import comments. Once, the blog is selected press the "Import" button.
  • Congratulations,You've added DISQUS in your blog

How to Add Adsense Ads Below Post Title Or Anywhere in Blogger?

Sometime you must be worried about your less google adsense revenue and try to be the best to increase the revenue but all in vain and can never be successed in such situation. Although we know that google adsense highly revenue mosltly depands upon the SEO of your blog "highly seo rank of your blog better will be the google adsense income" So in today post we will give you some amazing tips through which you can easily increase your google adsense revenue.

How to Add Adsense Ads Below Post Title Or Anywhere left in Blogger?

  • Firs of all We will have to parse our AdSense code>>>(Parse It Here)
  • Now, copy the parsed Adsense code.
  • Just Login to your Blogger Profile and select your blog.
  • Now go to Dashboard > Template > Edit HTML.
  • For Footer 
  • Click anywhere inside the code area, then press the CTRL + F keys and search for this code
  • Now Find Blow  Code 
                       <data:post.body/>
  • Now, place the below code just above <data:post.body/>
  • <b:if cond='data:blog.pageType == &quot;item&quot;'>
    PLACE YOUR AD CODE HERE
    </b:if>
  • Now, replace the PLACE YOUR AD CODE HERE with the Parsed Ad Code.
  • Click on Save Template button.
  • Done!!
Note:- 
For Center
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align="center">
PLACE YOUR AD CODE HERE
</div>
</b:if>
For Left Or Right
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:left; margin:10px;">
PLACE YOUR AD CODE HERE
</div>
</b:if>

Replace left to right if you want to show ads on the right side wrapped with text.

Blogger


More »

Android


More »