5 Themes For Blogger Official Search Box Widget

Updated on: November 20, 2016

Search box is the must have widget in each and every blog. Search box allows your readers to get access to your articles more easily by helping them to find the content what they are looking for. I have already published Stylish search box widgets for blogger, but blogger also provide their official search box widget, which is basically known as Google Custom Search box.

Google Custom Search (CSE) is the best search box on the web because it gives you numbers of benefits that are hard to resist. For instance - Others 3rd party search boxes only analyses your post title with searched query to show search results, but CSE also analyses your post content, meta codes and many other things to show results so that your readers can get most relevant content. Actually, this work as same as Google Search works, but the only difference is that, you get only that data which is linked with your blog. Blogger users get this widget free of cost where as for non-blogger users its cost near about $100/year. You can add this widget by navigating to Layout > Add widget > Select Search box > Save.

CSS Themes for Blogger Default search box widget

The main reason why most of the bloggers don't want to add this official search widget is, that the look and feel of the widget is very very simple but allows you to change the look of the widget. To style and customize your Search widget you must have knowledge of CSS, but many of you don't, that's why, I created 5 beautiful, professional and stylish themes for your widget. What all you need to do is the simple copy paste work. Go ahead, choose your design and follow the instructions.

Stylish CSS for blogger's Search widget

input.gsc-input{background-color:#fff;border-color:#CDCDCD!important;padding:6px!important;border-radius:5px 0 0 5px!important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #ddd;padding:5px;border-radius:0 5px 5px 0;cursor:pointer}

input.gsc-input{background-color:#fff;border-color:#62B3EC!important;padding:6px!important;height:17px;font-size:13px}input.gsc-search-button{margin-left:-1px!important;border:1px solid #62B3EC;padding:5px;border-radius:0 5px 5px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR75YtQeDX20mTgXmrpkAmhiY5A_uuCWc6SDrJHwU80tv9JBg0DKkYuJNaMF7cpUMhHrav_KEyMXZDihlWyBVldocOd6JCWr3lcB0k5UdsXNz9wy-RzWAC5QsxlyQzU3SbSpRT7jKMaCg4/s1600/Search-icon.png) no-repeat center;background-color:#62B3EC;background-size:15px}.gsc-search-button:hover{background-color:#3B78E7;border-color:#3B78E7;border-radius:0 5px 5px 0}

table.gsc-search-box td.gsc-input{padding-right:5px!important}input.gsc-input{background-color:#fff;border-color:#CCC!important;padding:6px!important;height:17px;font-size:15px;color:#9F999D;border-radius:3px 0 0 3px;border-width:1px 0 1px 1px !important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #CCC;padding:5px;border-radius:0 3px 3px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:#fff url(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/s1600/search-icon.png) no-repeat center;border-width:1px 1px 1px 0}

table.gsc-search-box td.gsc-input{padding-right:40px!important}.gsc-search-button{display:none!important}input.gsc-input{padding:5px 0 8px 40px !important;height:22px;font-size:13px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important;box-shadow:2px 3px 3px #292929 inset;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR75YtQeDX20mTgXmrpkAmhiY5A_uuCWc6SDrJHwU80tv9JBg0DKkYuJNaMF7cpUMhHrav_KEyMXZDihlWyBVldocOd6JCWr3lcB0k5UdsXNz9wy-RzWAC5QsxlyQzU3SbSpRT7jKMaCg4/s1600/Search-icon.png) no-repeat scroll 16px 12px;background-color:#444;background-size:12px;text-shadow:1px 3px 3px #0B0A0A}

Recommended: For perfect experience of this style use colorful background image.

table.gsc-search-box td.gsc-input{padding-right:0!important}input.gsc-input{background-color:RGBA(0,0,0,0.5);padding:8px 15px!important;height:22px;font-size:15px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important}input.gsc-search-button{margin-left:-5px!important;margin-right:5px!important;padding:5px;border-radius:50%;cursor:pointer;font-size:0;height:30px;width:30px;background:#fff url(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/s1600/search-icon.png) no-repeat center;border-width:0}

Steps: To customize blogger official search box

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code (use Ctrl + F):

]]></b:skin>

Step 3. Just above ]]></b:skin> place you CSS code.

Step 4. Click Save template.

Great!

Refresh your blog to see your beautiful, professional looking google search box. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

Remove dir="ltr" trbidi="on" from Blogger Posts

Updated on: July 21, 2016

All of you create posts in blogger, but have you ever notice that whenever you create a new post blogger by default add code <div dir="ltr" style="text-align: left;" trbidi="on"> at the top/starting of your blog post (in post HTML). Now the questions are, Why blogger automatically adds that piece of code in your posts? What is the use of that code? Can we remove that code? What happen if we remove that code?

Actually the "ltr" and "trbidi" settings are used by blogger to support both "ltr" and "rtl" justified languages. This piece of code helps your readers to read translated Arabic, Syriac and Mandaean (or rtl) languages properly on your blog. This code is not necessary and you can remove this code from your post.

PROS :-

• Make your post code clean and tidy.
• Remove override CSS code style="text-align: left;".
• Your readers can still translate your page by using tools like Google translator.
• You can reverse the setting at any time (default setting).

CONS :-

• Your blog can no more support translated "rtl" languages.

In 2015 blogger have officially provided the option to remove <div dir="ltr" style="text-align: left;" trbidi="on"> from posts with blogger setting. Yes! now it is so easy to remove the above code with only 3 easy simple steps.

How to Remove the code dir="ltr" trbidi="on" from all posts

Step 1. Login to your blogger account, then navigate to Settings > Language and formatting.
Step 2. In the section "Enable transliteration" select disabled.

Step 3. Click Save settings.

Note: The code will no longer exist whenever you create new post but you have to manually edit the post HTML to remove code from already published posts.

That's all!

Refresh your blog posts list and create a new post. Switch to HTML, and you will find no such code in your blog. Don't thank me, thank blogger for giving us control. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz! :)

Read more ...

Search Results "Sort By Date" Order in Blogspot

Updated on: July 20, 2016

We have already discussed that Search is the necessary part of the blog/blogspot and whenever your users make search over it the resultant page shows results sorted by relevance for the give query for example:

Many of you want to change the order and would like to set "Sort By Date" as the default sorting order not "Sort by Relevance" so that your viewers can see your latest posts first without clicking on link each time to change the order. This method works only with 3rd party search boxes. Follow the given steps carefully.

How To Set "Sort By Date" As Default Sorting Order

Step 1. Login to your Blogger account, then navigate to your 3rd party Search Box code.

For example:

<form action="/search" method="get">
<input type="text" name="q" placeholder="Type Here..."/>
<input type="hidden" name="max-results" value="8"/>
<input type="submit" value="Search" />
</form>

Note: The above code may vary.

Step 2. Find the code </form> and paste the following code just above it.

<input name="by-date" type="hidden" value="true"/>

For Example:

<form action="/search" method="get">
<input type="text" name="q" placeholder="Type Here..."/>
<input type="hidden" name="max-results" value="8"/>
<input type="submit" value="Search" />
<input name="by-date" type="hidden" value="true"/>
</form>

Step 3. Save your code.

Read: How to Change Status message on search result page

Enjoy!

Jump into your blog and make a search. Wait! What? your search result is sorted by date not by relevance. Remember code may vary according to your search box, if the above tutorial doesn't work for you don't worry - comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

How to Increase Video Size in Blogger Posts

Updated on: July 16, 2016

Embedding a YouTube video in your blog post is the best practice to make your post content rich and visually effective. Moreover adding videos in your post helps you to decrease the bounce rate and increases your revenue.

We can easily add videos on our posts by using blogger post editing tool bar but by default blogger post's video size is small and doesn't fill the whole post width, that small size can affect your video impact on readers. So, to increase the size of your blogger video (By maintaining its ratio) so that viewers can see clearly just follow the give tutorial with images.

Steps: How To Change YouTube Video Size

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code (use Ctrl + F):

</head>

Step 3. Just above it place the following code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script>
$('.YOUTUBE-iframe-video').ready(function(){
$('.YOUTUBE-iframe-video').parent().css({
    'position': 'relative',
    'padding-bottom': '56.25%',
    'height': '0',
    'clear': 'both',
    'text-align': 'center',
    'margin': '20px 0'
});

$('.YOUTUBE-iframe-video').css({
    'position': 'absolute',
    'top': '0',
    'left': '0',
    'width': '100%',
    'height': '100%',
});
});
</script>

Step 4. Click Save template.

Done !

All of your embedded YouTube videos will be of full size and responsive with your post width. If you have and issue related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...