Blogger's Official Featured Post Gadget [LATEST]

Featured Post Gadgets is one of the most essential gadget for any website or blog. Unfortunately for a long there was no such Gadget in the Blogger.com platform. That's why we have to use third party templates or HTML/JavaScript code to display a featured post. But the good news is finally Blogger introduced their official Featured Post Gadget.


Featured Post Gadget:

I think most of you are very much familiar with the Featured Post Gadget. But there are many beginners who may be don't know about this gadget, that's why I want to writ about it briefly...

Featured Post gadget is a simple way to show off the content that matters most. This gadget is to help make it easier to showcase the posts you want your readers to see. With Featured Post Gadget, you can choose posts you’ve shared on your blog and highlight them wherever you’d like.


How to Add Featured Post Gadget:

After Signing into your Blogger account follow the steps below to add the Featured Post Gadget...

• Now from the Blogger Dashboard click on Layout.
• Then click on Add a Gadget link where you wanna place the gadget.
• Then from the Popup Gadget list click on Feature Post.

• Now on the Configure Featured Post window First Select the Post that you want to Feature. You can Search the post by Labels or Post Title. After selecting the Post, configure the following points...

• Gadget Title: You can set the Title as you wish or you can keep the default one.
• Post Snippet: Here you will have the following option to Mark.

• Show Post Title
• Show Text Snippet
• Show Image

• Check the Preview available in this window to make sure that the gadget is OK according to your expectation.

• Finally click on the Save button.

That's it after saving the Gadget, just View your blog to see the added Featured Post Gadget on your blog. If you’d like to highlight something new, you can change the post you feature at any time. Happy blogging!

Please Share This Post

Stay with techie-asif.blogspot.com for more IT related post

6 Stylish Custom Search Box for Website/Blogger

Hello Blogger, Its been a long time last I had published any post on Blogger and Blogging section. Actually by this time I was working with other popular section of this site, like Gaming, Software and Android Apps. And I had published many Exciting Full Version Games for Free. However although I had taken too long, but finally from today I'm gonna start writing on Blogger and Website Widgets.


In today's post I'm gonna share 6 different stylish Search Box Widget for Website and Blogger. Search Box is an essential and necessary part of any Site for the convenience of the visitors to find the content from it. But sometime you may not find the right Search Box widget, which suite best with the design of your site. Or sometime the default search box may not attractive and efficient enough to bring effective result.


You can choose the Search Box for your site from the 6 search box I'm sharing today. These Search Box are very stylish and attractive. The code that I'm sharing will work on any HTML site. In this post will only show how you can add these Search box to your Blogger blog. Let's start...


How to Add Custom Search Box to Blogger:

• First Log into your Blogger Account and go to Dashboard.
• Then click on Layout Option.
• Here click on Add a Gadget link where you want to place the search box.
• The from the gadget list select HTML/JavaScript.

• Now inside the popup window Paste the any Search Box code from given below.
• Finally click on Save Button 

Style > 1:

  <style>  
 #searchbox {  
   background: #d8d8d8;  
   border: 4px solid #e8e8e8;  
   padding: 20px 10px;  
   width: 250px;  
 }  
 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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVmOdvTplHoSTx2oVGQU_xpc7O8R2mMCcUaaWNHdJ3TKXD45ZO647HkpqvqNQOuFP2TH8j69vQk_hFiOodxwBhAhBVCHKJ0roAbZyStxOCQynSBxJNIBuwyzvBwBttT_7CXQ6wq0PMWrM/s1600/search-dark.png) no-repeat 10px 6px #fff;  
   border-width: 1px;  
   border-style: solid;  
   border-color: #fff;  
   font: bold 12px Arial,Helvetica,Sans-serif;  
   color: #bebebe;  
   width: 55%;  
   padding: 8px 15px 8px 30px;  
 }  
 #button-submit {  
   background: #6A6F75;  
   border-width: 0px;  
   padding: 9px 0px;  
   width: 23%;  
   cursor: pointer;  
   font: bold 12px Arial, Helvetica;  
   color: #fff;  
   text-shadow: 0 1px 0 #555;  
 }  
 #button-submit:hover {  
   background: #4f5356;  
 }  
 #button-submit:active {  
   background: #5b5d60;  
   outline: none;  
 }  
 #button-submit::-moz-focus-inner {  
   border: 0;  
 }  
 </style>  
 <form id="searchbox" method="get" action="/search">  
 <input name="q" type="text" size="15" placeholder="Type here..." />  
 <input id="button-submit" type="submit" value="Search" />  
 </form>  

Style > 2:

 <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVmOdvTplHoSTx2oVGQU_xpc7O8R2mMCcUaaWNHdJ3TKXD45ZO647HkpqvqNQOuFP2TH8j69vQk_hFiOodxwBhAhBVCHKJ0roAbZyStxOCQynSBxJNIBuwyzvBwBttT_7CXQ6wq0PMWrM/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;  
 border: 2px solid #f2f2f2;  
   font: bold 12px 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDy4jsVm_DKnbeL60Bc-bEogAsE_u-OJG-vR57cSn1dLOdWv-SKDA_5IcgMGxbRsFEtqB3DIIRkJ7AJX49ruM_-rRiLOnewJaeNaOQxUJwfKZhniM4FyOX2CZA7mdGLeRXA2mu-AECACfh/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="Enter keywords here..." />  
 <input id="button-submit" type="submit" value=" "/>  
 </form>  

Style > 3:

  <style>  
 #searchbox {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCvOquxTLfSB6ELjkD5b1MEpdE5il6ed7lYXhF7C0_rmjyXJ9EN7EKWlkjO6HGX5XbZz4XF4EIUjx5ub7u6Y7HLyfM1feFxenW_GRl_QM3Kt7XR68xbmyY7o1oAoZbkGoH9nkssiQLLm4/s1600/searchbar.png) no-repeat;  
   width: 208px;  
   height: 29px;  
 }  
 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: 3px 0px 0px 20px;  
   padding: 5px 0px 5px 0px;  
   border-width: 0px;  
   font-family: "Arial Narrow", Arial, sans-serif;  
   font-size: 12px;  
   color: #828282;  
   width: 70%;  
   display: inline-table;  
   vertical-align: top;  
 }  
 #button-submit {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDkqGaQV9tSLd5Eywuj59vnhKGAzl1YqUcO-NuzrDwQQ3qypP_CkNyxGOzRvjUMFm0Hbse_j_TbAYnm0QA0i-RNrlfAzBUugEX5Vr3BFunmjfMpDvdQRUNFFVYM2wH3q4wMhMQ2d4PqHbM/s1600/magnifier.png) no-repeat;  
   border-width: 0px;  
   cursor: pointer;  
   margin-left: 10px;  
   margin-top: 4px;  
   width: 21px;  
   height: 22px;  
 }  
 #button-submit:hover {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIiAh7qYH4vqVSm8Go7OjKS9SrdPkWRvEdoDcPmaueaIFc2CL32aRR_yvfxx1CIO6KtnVBr0vQfZy2bksolT9keFDsAKCZCMh-mfUHtha1r-Gh9EWsCQucReQJm1MkQeLpVicTb7ZUIQo/s1600/magnifier-hover.png) no-repeat;  
 }  
 #button-submit:active {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIiAh7qYH4vqVSm8Go7OjKS9SrdPkWRvEdoDcPmaueaIFc2CL32aRR_yvfxx1CIO6KtnVBr0vQfZy2bksolT9keFDsAKCZCMh-mfUHtha1r-Gh9EWsCQucReQJm1MkQeLpVicTb7ZUIQo/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 name="q" type="text" size="15" placeholder="search..." />  
   <input id="button-submit" type="submit" value="" />  
 </form>  

Style > 4:

 <style>  
 #searchbox {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0QgE8JiXe_zRjGnzRbD1sB_-eY78G7DgPcSnOb_d1xrcCl3mLgHyq5K30QudKNbenFgcKzFkq2EV258ZVuGB1OTs_Ei73HLLd0L8sHcyVSmGyjoAr1DglPB6oiwjB4_A0vRFxy_gKJfrr/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOwhr_w6VouPju9-i2yhIqccdsOriiHWCR_N1Wx2OV2AJhbm0h0KRu7-A07jeV901nznVr9jBv3ELvEuoPVVm2OL5ZyRadYztzfG6W7z1i4IMTOT0YBYthZpvhi9J612G2QnZNAxZD2gcc/s1600/search-button.png) no-repeat;  
   border-width: 0px;  
   cursor: pointer;  
   width: 30px;  
   height: 25px;  
 }  
 #button-submit:hover {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPRZps2uA9en5fqtfkaO-Ui4j86cRCTzsZ1XxzmhVuK8s57_eT_-dWgaq9thp013vEfZi1UtU6GxtEk8rR-D55-ZPpvHfIR_WRd_fyz4ymesXosrsU0ac2nmnUiSDejvhMUnH3webN69m7/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 > 5:

 <style>  
 #searchbox {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiu7QhBPoeYNId_IRyT75BjuvlChpsaJqIvOs_mJVhrbWp_zahfnM5wKW6TrXKejx0QA_E50z2ClP6yiKW72VBX-A66t1cW7CVjKzM_wTHWquoqfw_oCO8aRcKiOD9Ala5SsUCJXAtrTIt/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0K3Ld56ZoX7KdiQJBfQofl5Cq6WQz-mzkwzk25Pi6_dqQSpZznSOtutr_JduIxk-O5oFK47rYh7vS5ILOI34XtnWKequwbzjng239n33_BuVzXCiQpQPj1jUuqMcdtjDpiYR7P4nsOOcm/s1600/magnifier.png) no-repeat;  
   border-width: 0px;  
   cursor: pointer;  
   margin-top: 10px;  
   width: 19px;  
   height: 25px;  
 }  
 #button-submit:hover {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilS6XeBuPtHferKWhTeD8ZFK99Sgi3UnbVX0SRfZdBliE3b1CnEsu6cY5hmJL-gOwXKozkPKNExV21WIT1U3GZqGBeHP6Z2tMhyphenhyphen_MIHElpYZItFQmnIp79SBADdD28TKI63b8KvDZo6Zm4/s1600/magnifier-hover.png) no-repeat;  
 }  
 #button-submit:active {  
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilS6XeBuPtHferKWhTeD8ZFK99Sgi3UnbVX0SRfZdBliE3b1CnEsu6cY5hmJL-gOwXKozkPKNExV21WIT1U3GZqGBeHP6Z2tMhyphenhyphen_MIHElpYZItFQmnIp79SBADdD28TKI63b8KvDZo6Zm4/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 > 6:

  <style>  
 #searchbox {  
 width: 280px;  
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_WfZA1JukoXPbJS_hQv2KVyiq-GH_CWBiMODo0bi0fMuqioQfMmnc2i6yyqG-495D8NqaXBD-IOMJ0tYlGis3vjLjE8_0tQyGxoGIqxTt8JzrTD2YFTvN_t9O5h7tApDcygMO1Mrs1nr/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadSx4PrjnxNU32xw5PeknevtSAyWmhg_eeTYp9_1Xr4HcDOOg-fEiqBQIXBbP41LceyeTxDEeL9rGOMUXFxNA8kL_keiUvLlRAgW8bgDuYVoeMb33b2wdGnyDrwkUo_IhOQnA2ie9Qbl1/s1600/search-icon.png) no-repeat;  
 margin-left: -40px;  
 border-width: 0px;  
 width: 40px;  
 height: 50px;  
 }  
 #button-submit:hover {  
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI4Culo9UL19En-TBYQX9ockEXWznOzN5safyJ0pi4Sb5Z6LsMAKVVhugIETbUUVGoEpuQ9EFuuMgNbSq__X4-iXBGvSHnhkTvz2rOKAfYMbZ23MhQ1MtqgFxUFl1nnmRg0V204A21t2lT/s1600/search-icon-hover.png);  
 }  
 </style>  
 <form id="searchbox" method="get" action="/search" autocomplete="off">  
 <input name="q" type="text" size="15" placeholder="Enter keywords here..." />  
 <input id="button-submit" type="submit" value=" "/>  
 </form>  

That's it. After completing the addition of the new search box to your blog, now view you blog to check the Search Box. If everything is correct you will see that you blog has a new Search Box.

Please Share This Post

Stay with TecHieASiF for more IT related post

How to Add a Widget Below First Post in Blogger!

Earlier I had shared two post important post on displaying Blogger Post on homepage - Show Blogger Posts in Gird Style and Adding Read More button to Blogger post. Now the question is why I am mentioning these posts. Actually the trick that I'm going to share in today's post very much goes with these two posts. If you are showing your Blog's posts in Gird Style or Automatic Summary then you will have to add a widget below first post to show any element like Adsense Ads. In this post I am gonna  show how to add a widget below first blogger post.


Normally you can add gadgets in your blog from the layout option, but you only can add the gadgets in that place where the design section allows you. So, if you want to add any widgets below the first blogger post then you need to add a gadget section in your Blogger Layout. By the way you can apply this gadget in any design, the above mentioned two design is not a requirement. And you can add such widget by using a simple HTML code that I'm sharing.

When you will add a gadgets section and show any widget below your first post then it will be look like the above image. If you are blogging on blogger platform then you can easily add a widget in your blog as show in that image. OK let's see how to do the trick.

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.

Adding Widget Below First Blogger Post:

• First Sign into your Blogger Account and go to Dashboard.
• Then click on Template and then click on Edit HTML button. You will land on the HTML page.

• Here in the HTML page find this line  <b:include data='post' name='post'/> and Just below it Paste the Following code.

  <b:if cond='data:post.isFirstPost'>  
 <div align="center" style="margin:10px auto;">  
 Here goes the code of the element you want to show  
 </div>  
 </b:if>  

• Note: The Bold text indicates that where you will have to paste the code of the element. (eg. Adsense Ad Code)
• Customization: The Red line in the above code is for Margin-Top and Margin-Bottom, this is in case if you want the element to move towards or away from the entire. You can also add any style like Background Color, Border etc.

• Finally click on Save Template Button to apply it. (Preview to make sure Everything is OK)

That's it, Now view your blog and you will see that the added widget is appearing below the first post of your blog.

Stay with www.iTTimesbd.com for more IT related post

How to Remove Locked Widget from Blogger !!

I always say that I like Blogger.com for blogging among the all blogging platform. This is because of its flexibility. If you have developing knowledge then you can customize anything of blogger. But sometimes when we install custom template on our blog or in blogger default template it contains it contains some locked widgets in layout which can't be removed from layout option. In this post I am gonna show how to remove locked widget from blogger.

Related Post: How to Remove Powered By Blogger from Blogger

If your are using Blogger default template in your blog then you might have seen Navbar and Attribution widgets don't have Remove button. This is because these widgets are locked. Blogger Layout is an option where you can find all widgets of your blog. If you don't want to display any widget then you can remove it from Blogger Layout option. But you can't remove it from here it is locked. To remove a locked widget, first you need to unlock that widget. Let's see how to do it...


How to Unlock Widgets in Blogger:

• First Sing into your Blogger Account and go to Dashboard.

• Then click on Template option and click on Edit HTML button. You will land on your blog's HTML page.

• Here in this HTML page find the Widget which you want to Remove. If that widget is locked then its code will be something like below...

<b:widget id='HTML1' locked='true' title='Widget Title' type='HTML'> </b:widget>
</b:widget>

• Now look at the above Widget Coding , Here locked='true' Attribute shows that the widget is locked.

• Replace true To false to Unlock the widget.

• Finally click on Save Template button to apply the change.

Now the locked widget will be unlocked and it will have remove button by which you can remove it.


How to Find Licked Widget: If you can't find the widget code in the HTML page then you should find the widget using its Widget ID. Let's see how to get widget id...

• Sign into your Blogger Account and go to Layout Option.

• Then click on Edit link of the locked widget and a popup window will open.

• Here in this window you will get the Widget ID from address bar. It will something like below image.

• Now Note down the Widget ID and go to Blogger Template option.

• Then click on Edit HTML button and find the using the Widget ID.

• Now Unlock the widget using the above method.

How to Remove Widgets from Blogger:

• Now go to Blogger Layout option.

• Then click on Edit link of the widget that you want to remove.

• Finally click on Remove button.

That's it. Now I hope can you unlock the locked blogger widgets and remove it very easily.

Stay with www.iTTimesbd.com for more IT related post

Simplest Related Posts Widget for Blogger !!

I always say that widgets are very important for blogs and websites. Because using widgets in your blog you can not only stylize your site design but also some widget can increase your site's visitors. The widgets which helps your to increase site's visitor is the most important. Earlier I had share some Important Widgets for Blogger. Today I'm gonna share a simple related posts widget with you.


The related posts widget that I am sharing today is very simple but very effective. The most amazing thing about this widget is its coding. This widget is coded with a simple Jquery. If you're blogging on blogger platform then you can add this widget in your blog easily from Layout option. When you add this widget in your blog then it will show 5 related posts at bottom of every post as shown in the below image...


Demo:--->

Adding Simple Related Post Widget:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on Layout option and click Add a Gadget link.

• Then from the Gadgets list choose HTML/JavaScript.

• Now Paste the following code in the content box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script> <script type="text/javascript"> relatedPostsWidget({ 'containerSelector':'div.post-body' ,'loadingText':'loading...' });</script>


• And finally click Save button to complete the addition.

That's it. Now visit any post of your blog and you will see that related posts are appearing at bottom of that post.

Stay with www.iTTimesbd.com for more IT related post

3D Revolving Live Visitor Counter Widget for Blogger!!!

Online visitors counter gadget is a types of gadgets that shows and counts the online visitor of a blog. There are different types of visitors counter available to add on blogger blog. 3D Revolving Online Visitor Counter is one of them. If you add 3D Revolving Online Visitor Counter in your blog then when visitors visit your blog the 3D Revolving Online Visitor Counter will count the both visitors number and show the location of the visitors.

Using a simple HTML code you can add 3D Revolving Online Visitor Counter in your blog. In this post I will show How To Add 3D Revolving Online Visitor Counter On Blogger Blog.

Add 3D Revolving Online Visitor Counter:

1. At first go to your Blogger Dashboard and then click Layout.
2. Then click Add a Gadget option where you want to add 3D Revolving Online Visitor Counter.
3. Then from the gadget list select HTML/ Javascript.
4. Now Copy the below code and Paste it in the Content Box.


<div style="text-align:center; margin:0px; padding:0px; width:220px;"> <embed src="http://rd.revolvermaps.com/f/g.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="window" allowscriptaccess="always" allownetworking="all" width="220" height="220" flashvars="m=0&i=3gj6ivse4v3&r=false&v=true&b=000000&n=false&s=220&c=ff0000"></embed><br /><img src="http://jd.revolvermaps.com/c/3gj6ivse4v3.gif" width="1" height="1" alt=""/><span style="font-size: 60%;"><a href="http://livetechnologybd.blogspot.com/2014/02/add-3d-visitor-counter-on-blog.html" target="_blank">Get this Widget</a></span></div>


5. Then click the Save button.

That's it. Now go to your blog and you will see 3D Revolving Online Visitor Counter.

Customization:

• Counter Size: You can change the size of this visitor counter. To change the size of this counter you just need to change the width="220" height="220" digit of the above code as you want.

Please Share This Post or At Least Press  G+1  on Every Post

Stay with www.iTTimesbd.com for more IT related post

Facebook Popup Like Box Widget for Blogger!

Now Doubt, Facebook is one of the largest social networking site of the current world. As it has a huge numbers of active users, it can be great source of online traffic for any website or blog. Nowadays it is trends that every site has its official Facebook Page. But as most of you know that having a Facebook page is not enough, You need to have a good numbers of likes in that page also to get regular traffics from that page. Pacing like box on a site is the popular way of collecting likes. In this post I'm gonna share a simple script by which you will be able to place Popup like box on your site.

Earlier I had shared several Facebook like box widgets for blog and website. But popup like box is something special. Actually among all the Facebook like box widgets popup like box is the most successful one. Once you place the Facebook popup like box on your site then while visiting your site a popup like box will appear on the visitors screen before the page. If you are blogging on Blogger.com then you can add this Facebook Popup like box widget to your blog by adding  a HTML/JavaScript to your blog.


Adding Facebook Popup Like Box to Blogger:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on Layout option and click Add a Gadget link.

• Then from the Gadgets list choose HTML/JavaScript.

• Now Paste the following code inside the content box.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>  
 <style>  
 #fanback {  
 display:none;  
 background:rgba(0,0,0,0.8);  
 width:100%;  
 height:100%;  
 position:fixed;  
 top:0;  
 left:0;  
 z-index:99999;  
 }  
 #fan-exit {  
 width:100%;  
 height:100%;  
 }  
 #Burptech {  
 background:white;  
 width:420px;  
 height:270px;  
 position:absolute;  
 top:58%;  
 left:63%;  
 margin:-220px 0 0 -375px;  
 -webkit-box-shadow: inset 0 0 50px 0 #939393;  
 -moz-box-shadow: inset 0 0 50px 0 #939393;  
 box-shadow: inset 0 0 50px 0 #939393;  
 -webkit-border-radius: 5px;  
 -moz-border-radius: 5px;  
 border-radius: 5px;  
 margin: -220px 0 0 -375px;  
 }  
 #Burp {  
 float:right;  
 cursor:pointer;  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoiqXxVfb7oTOyqYNxbAfWQqyUAdDZekLyuRU10EuZrz9dJ0iuB4AXrYrlHbExnRcwiOd8oZbAUosoliSmJ8n5U8O7qgPNKtMZzF5BhFoNKAeep6ryFk6340pXGUw0Q4tl5nHnMwdEitb/s1600/Burp.png) repeat;  
 height:15px;  
 padding:20px;  
 position:relative;  
 padding-right:40px;  
 margin-top:-20px;  
 margin-right:-22px;  
 }  
 .remove-borda {  
 height:1px;  
 width:366px;  
 margin:0 auto;  
 background:#F3F3F3;  
 margin-top:16px;  
 position:relative;  
 margin-left:20px;  
 }  
 #linkit,#linkit a.visited,#linkit a,#linkit a:hover {  
 color:#80808B;  
 font-size:10px;  
 margin: 0 auto 5px auto;  
 float:center;  
 }  
 </style>  
 <script type='text/javascript'>  
 //<![CDATA[  
 jQuery.cookie = function (key, value, options) {  
 // key and at least value given, set cookie...  
 if (arguments.length > 1 && String(value) !== "[object Object]") {  
 options = jQuery.extend({}, options);  
 if (value === null || value === undefined) {  
 options.expires = -1;  
 }  
 if (typeof options.expires === 'number') {  
 var days = options.expires, t = options.expires = new Date();  
 t.setDate(t.getDate() + days);  
 }  
 value = String(value);  
 return (document.cookie = [  
 encodeURIComponent(key), '=',  
 options.raw ? value : encodeURIComponent(value),  
 options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE  
 options.path ? '; path=' + options.path : '',  
 options.domain ? '; domain=' + options.domain : '',  
 options.secure ? '; secure' : ''  
 ].join(''));  
 }  
 // key and possibly options given, get cookie...  
 options = value || {};  
 var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;  
 return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;  
 };  
 //]]>  
 </script>  
 <script type='text/javascript'>  
 jQuery(document).ready(function($){  
 if($.cookie('popup_user_login') != 'yes'){  
 $('#fanback').delay(5000).fadeIn('medium');  
 $('#Burp, #fan-exit').click(function(){  
 $('#fanback').stop().fadeOut('medium');  
 });  
 }  
 });  
 </script>  
 <div id='fanback'>  
 <div id='fan-exit'>  
 </div>  
 <div id='Burptech'>  
 <div id='Burp'>  
 </div>  
 <div class='remove-borda'>  
 </div>  
 <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?  
 href=https://www.facebook.com/ittimesbd&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'  
 style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>  
 </div>  
 </div>  
 <script type="text/javascript">(function() {var rt = document.createElement('script'); rt.type = 'text/javascript'; rt.async = true;rt.src = 'http://www.realtimewebsite.com/js/rtws.js'; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(rt, s);})();</script>  

Customization:

• In the above code Replace https://www.facebook.com/ittimesbd with your Facebook Page URL. 

• By default the Like Box will appear 5 seconds after the is loaded. To change this delay, just change the number of this tag .delay(5000)

• Finally click on Save button to complete the process.

That's it, Now view your blog to check the Facebook Popup Like Box that you have added to your blog. If any problem then leave your comments below.

Please Share This Post or At Least Press  G+1  on Every Post

Stay with www.iTTimesbd.com for more IT related post

How to Replace Blogger Navigation Links with Image!

Hello Blogger! Today I have come with an interesting and important trick for you all. If you are blogging on Blogger platform then I am sure you re very much familiar with the Blogger Navigation Link - Older Posts <--> Home <--> Newer Posts. These links located at the bottom of the blog page. This post is completely dedicated to them who are not satisfied with thins link and want to replace these navigation link with buttons or image. And by going through this post you will be able to replace these navigation links.

Have look at image above when you will replace Navigation links then Navigation buttons or images will be shown in place of them. All you need just to find the navigation link code inside the HTML page of your blog and replace them with the code that I'm sharing. You can also use the Navigation buttons or image of your own choice. Let's see how to do the trick...

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.

Replacing Blogger Navigation Links with Image:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on Template and then click on Edit HTML button. You will land on the HTML page.

To Replace the Older Posts link:

• Inside the HTML page find <data:olderPageTitle/> and replace it with the below code.

 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZuFnyz7cJ_tMksNNjw8ui_B0SNnSLHgdtn9hq7k9CeyteIewUemHfxqr-ENq7ikzLDePDIVQ99v_UHC8rg5qWGexJrG0XuPJo803rawyIGb_u-0DOffyGh2ZQ2EmmVdFZ_5A4lyuaGVAH/s1600/btsnts-Newer.png' style='border: 0 none;vertical-align: middle;'/>  

To Replace the Newer Posts link:

• Then again find <data:newerPageTitle/> and replace it with the below code.

 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG1AAKv8P3gPOhdgJfTK1CIRY41qMTEzV9jq8AknEIULwlqsIdATjACjowCWizKOVZRp8rTSq6J1jRo4vtSN9XxZuxOVXL7I0z_o-BAmJSR4WO1zN73D4d0xGemP1RLQmeT6bCI-oWQ-wT/s1600/btsnts-older.png' style='border: 0 none;vertical-align: middle;'/>  

To Replace the Home link:

• Now find <data:homeMsg/> and replace it with the below code.

 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6PGAT96JhKR_gyDy85u_mjVNqiNawa5Goe3er_4Dy6HQL5Jw8CyHMGTpj4noOZgytKgkVksWcduPp_6zcVzUrT3kwZNYJ0gOKahTBpS_kmO2a2IFZXHje9JueveSs6rF2qS0F79u-16la/s1600/btsnts-Home.png' style='border: 0 none;vertical-align: middle;'/>  

Finally after completing all the above steps correctly, click on Save Template button..

Customization

• As I said above you can use buttons of your own choice. To do so just Replace the image URL in the above codes with your image URL. In the above three codes the image URL is colored with Red.

That's it, Now view your blog and check the navigation buttons at the buttons of your blog. If everything is OK then the Navigation links will be replaced with Navigation button or images.

Stay with www.iTTimesbd.com for more IT related post

Simple Recent Comments Widget for Blogger!

If you are regular blogger then you know the importance of comment for a blog. Actually commenting is one of the most successful way to increase the engagement of visitors with a blog or site. Normally a visitor only be able to see the comments, when he visit a specific post. But if you can show the recent comments of your blog in the sidebar then it would be more participatory. And in this post I 'm gonna share a simple recent comment widget for blogger.

Recent Comments Get this Recent Comments Widget

Have look at widget above, it showing the 5 most recent comments of this side. As you can see it is showing the snippet of the comments along with the title of the post where the comment was made. Here the newest comment will be shown at the top. This widget is codded with JavaScript and styled with CSS. The design of the widget has nothing too much, so it could easily fit with your blog design. And you have nothing much to do with this widget, all you need just to add the code to your blog that I'm sharing. Let's see how to add...


Adding Recent Comments Widget to Blogger:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on the Layout option.

• Then here click on the Add a Gadget link where you wanna place the widget

• Then from the gadget list choose HTML/JavaScript.

• Now Paste following code inside the Content box.

 <table border="1" style="width: 100%;">  
  <tbody>  
 <tr>  
   <td><b><span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><u>Recent Comments</u></span></b><br />  
 <script src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script>  
 <script>  
   var a_rc = 5;  
   var m_rc = false;  
   var n_rc = true;  
   var o_rc = 100;  
 </script>  
 <script src="http://www.ittimesbd.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments"></script><br />  
 <div style="float: right; font-size: 10px;">  
 Get this <a href="http://www.ittimesbd.com/2014/01/how-to-add-recent-comment-widget-in-blog.html" rel="nofollow">Recent Comments Widget</a></div>  
 <style type="text/css">   
 .rcw-comments a {  
   text-transform: capitalize;  
 }  
 .rcw-comments {  
   border-bottom: 1px dotted;  
   padding-top: 7px!important;  
   padding-bottom: 7px!important;  
 }  
 </style></td>  
  </tr>  
 </tbody></table>  

Customization:

• In the above code Replace www.ittimesbd.com with your site's Homepage URL. 

• To change the number of comments that are being displayed replace "5" value from  var a_rc = 5 

• To add the date on which the comment has been made, change false text from  var m_rc = false to true. 

• To hide the post title, change true text from var n_rc = true to false. 

• To show more or less characters on the widget, change 100 value from  var o_rc = 100

• Finally click on the Save button.

That's it, now view your bog and you will see the widget showing the recent comment of your blog.

Stay with www.iTTimesbd.com for more IT related post

MultiColored Popular Post Widget for Blogger!!

In the previous post I had written about the importance of popular post widget and also shown how you can add the official popular posts widget to your blog. Most of you may already have added this widget. But  as know this widget is very simple not so attractive. So, if  you're not satisfied with design of the official popular posts widget and if you want to try something different then you're in the correct post. Because in this post I'm gonna show how you can add an awesome MultiColored Popular post widget to Blogger.

The MultiColored Popular Post Widget will be as like as you can see in the image below.

As you can see in the above image that it is really an awesome MultiColored Popular Post widget. It is so  attractive that it can easily attract the visitors and as a result you will able to get more page-views. But the most interesting thing is that you don't have to create or add any extra gadget to your blog to add this widget. All you need is just to add a simple CSS script to your blog. And as a result the popular post of your blog will be shown in different colorful display.

• Applies To: Blogger.com platform.

• Requirement: Make sure that the official popular post widget is already added to your blog. If you don't know how to add this widget then Read this Post

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.


Stylize the Popular Post Widget to Multicolor:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on Template option and click on Edit HTML button. You will land on your blog HTML page.

• Here in the HTML page find ]]></b:skin> and Paste the following code just Above/Before it.

 #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}  
 #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}  
 #PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}  
 #PopularPosts1 ul li:first-child:after{content:”1″}  
 #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}  
 #PopularPosts1 ul li:first-child + li:after{content:”2″}  
 #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}  
 #PopularPosts1 ul li:first-child + li + li:after{content:”3″}  
 #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}  
 #PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}  
 #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}  
 #PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}  
 #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}  
 #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:”6″}  
 #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:”8″}  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}  
 #PopularPosts1 ul li:first-child:after,  
 #PopularPosts1 ul li:first-child + li:after,  
 #PopularPosts1 ul li:first-child + li + li:after,  
 #PopularPosts1 ul li:first-child + li + li + li:after,  
 #PopularPosts1 ul li:first-child + li + li + li + li:after,  
 #PopularPosts1 ul li:first-child + li + li + li + li + li:after,  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,  
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}  
 #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}  
 #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}  
 #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}  
 #PopularPosts3 img{  
   -moz-border-radius: 130px;  
   -webkit-border-radius: 130px;  
   border-radius: 130px;  
   -webkit-transition: all 0.3s ease;  
   -moz-transition: all 0.3s ease;  
   transition: all 0.3s ease;  
 padding:4px;  
   border:1px solid #fff !important;  
   background: #F2F2F2;}#PopularPosts1 img:hover {  
   -moz-transform: scale(1.2) rotate(-560deg) ;  
   -webkit-transform: scale(1.2) rotate(-560deg) ;  
   -o-transform: scale(1.2) rotate(-560deg) ;  
   -ms-transform: scale(1.2) rotate(-560deg) ;  
   transform: scale(1.2) rotate(-560deg) ;  
 }  

• Finally click on Save Template button to complete the process.

That's it, Now view your blog and you will be able to see that the widget is showing the popular post in multicolor. If any problems with this trick don't hesitate to ask.

Stay with www.iTTimesbd.com for more IT related post

Official Popular Post Widget for Blogger!!

Popular posts is one of the most popular and used blog widgets. Actually I should say one of the most effective blog widget. Because this widget generate a good numbers of page views. While visiting your site visitor don't want to miss the popular posts of your site. So, it is very important that a site always should have a popular pots widgets on it. And in this post I 'm gonna show how your can add the official Popular Post widget to Blogger.


The popular post widget will be as shown in the image below.

Earlier I had shared several popular post widgets with different design and style. But where there is an official popular post widgets available for Blogger then why should your try the others. If your are blogger on blogger platform then you can easily add the popular post widget to your blog. All you need is just to add the widget from the gadgets list. Most of you may already know the procedure but there are some beginners who don't know how to add it. Mainly this post is dedicated to them. Let's see the procedure.

Add Popular Post Widget in Blog:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on the Layout option.

• Then here click on the Add a Gadget link where you wanna place the widget

• Now from the Gadget list find Popular Posts and click on it.

• Then in the Configure Popular Posts box enter a Suitable Title and configure the following points...

• Most Viewed: Here you will get three options. Select any one option as you want.

• Show: Normally on the widget only the post title will be show. If you want then you can show the Image Thumbnail or Snippet or both of them with the Post title. Choose these options as how you want to show the Popular post widget. Here the final option is for how many posts you want to show on the widget. You can show maximum 10 posts.

 

• Finally click on the Save button to complete the process.

That's it, Now view your blog and you will see the widget is showing the popular posts of your blog.

Stay with www.iTTimesbd.com for more IT related post