Menu Close Menu

4 comments

google_custom_search_engine[1] Here I am going to show you how to add Google custom search engine in to your Blog. Blogger templates often have custom search boxes in it you might have noticed that that kind of custom search boxes are not capable to show the relevant results. The best solution is to use Google Custom Search Engines (CSE) that are extremely efficient in digging out the most important data from your blog and displays it to the visitor. This will increase the number of page views and impressions of your blog. And you can also add Google AdSense inside your search box so you can get more clicks and your revenue will also increase. Further you can easily integrate your Google AdSense Ads to your Google Custom Search box, which again increases your blog revenue for every click made on the search results. For adding this engine you don't have to add any CSS or JQUERY Code. You do this by adding specific HTML markup to your website/blog. You just have to Copy and Paste the code. You can create customized layouts that spice up look and feel of your website.

 

Create Custom Search Engine & add it to blogger.

1. Go to Google CSE.

2. and Login with your Google Account and click on Create Custom Search Engine, Fill the For Like Shown Below.

Fill The Form

Note:- if you want add more sites to search write your site name by pressing enter in (Sites to Search) Form & write your Custom Search Engine name and click on Create.

3. When you click Create you will see window like screen shoot below.

Click on edit

click on edit link.

4. When you click on edit you can see this type window. Write your Search Engine Description in (“Description Form”) & Keyword in (“Keyword Form”) & Click on save Chages.

Wirte Your Search Engine Description

5. Next Steps is Look & Feel. See Look & Feel Link on left site Toolbar open it by click on it. like Screen Shoot Below.

Look & feel

 

6. When you click on Look & Feel you Can See window like screen shoot below.

7. in Choose a layout, choose the Full-width & click on save & Get Code.

 

Choose Full Width

8. Copy the Follow code.

 

Get Code

9. now time to add Search engine in your blog sidebar.

10. Go to Blogger Dashboard>> Layout>> & Click on Add a Gadget, Scroll Down and find HTML/JAVASCRIPT and paste above code in content area and your done. click on view blog and feel your new Search Engine Look.

 

More Questions

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. in my next I will show you how to attach two pages in Google Custom Search Engine like our blog.  We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes feel free to post any query below in comment box I will reply you back as soon as time allow. Stay tuned for more posts.

Read Article →

1 comments

Animated Tab Menu For Blogger

A lot of people want Animated menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few Animated methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers. In this post I'm going to show you my secret method of achieving Animated tabs that does not use any CSS hacks and will work in all the common web browsers. Previously I shared a Beautiful CSS3 Drop Down Menu and I will share a Super Cool animated Tab Menu For Blogger. Steps are very simple and Easy.

 

Live Preview

 

Add Tab Menu To Blogger



1. Go To your blogger Dashboard >> Layout >> Add A Gadget.

2. Scroll Down and find HTML/JAVASCRIPT>> Click on (+) and paste the below code in to the Content Area and click on save for more see video above.

<style> 
.bt-menu{ 
border:5px solid #cd1000; 
padding:0; 
clear:both; 
}
.bt-menu{ 
margin:0px; 
padding: 0; 
float: left; 
font: bold 13px Arial; 
width: 100%; 
overflow: hidden; 
margin-bottom: 1em; 
border: 1px solid #333333; 
border-width: 1px 0; 
background: black url(http://4.bp.blogspot.com/-8JseZrmnajA/USNz2nWJMxI/AAAAAAAABPc/IdG_dPUX1L8/s1600/Bg.png) 

center center repeat-x; 
}
.bt-menu li{ 
display: inline; 
}
.bt-menu li a{ 
float: left; 
color: #333333; 
padding: 9px 11px; 
text-decoration: none; 
border-right: 1px solid black; 
}
.bt-menu li a:visited{ 
color: #333333; 
}
.bt-menu li a:hover, .bt-menu li a.selected{ 
color: #333333; 
background: #00A0E3; 
}
</style>
 
<ul  class="bt-menu"> 
<li><a href="#">Home</a></li> 
<li><a href="#" >About Us </a></li> 
<li><a href="#">Contact Us</a></li> 
<li><a href="#">Tools</a></li> 
</ul>

The widget is easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign (#) with Your Pages links.  Click save and Done.

if you have any Problem post your comments below in comment section. Check out our other Dropdown Menu. Thanks for reading our post .  happy blogging.

Read Article →

26 comments

 

CSS 3 Drop Down Menu

In this post I will share with you great beautiful and ready to use Css3 Dropdown. This Widget is Simple, Cool & The Main Part is that It Doesn’t Needs Any JQUERY or JavaScript. It uses no images at all and load fast. This Beautiful drop down menu is created by Catalin Rosu and uses no images or scripts at all! We will be sharing a modified version which work perfectly with Blogger. In this Post you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool CSS3 Features. Code implementation is very simple & easy. if you have any trouble feel free to post any query you may have I will loved reply back as soon as time allow.

 

Live Preview

 

How to add Css3 Drop Down Menu

 

For Further Help See Video Tutorial

 

1. Go to your Blogger Dashboard>>  Layout >> and click on add a gadget

2. Choose HTML/JAVASCRIPT Widget

3. and paste the following inside content are.

<style>
/*-- CSS3 Drop Down Menu By Blogger Tricks http://.bl0gger-tricks.blogspot.com-----*/

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 960px;
margin: 60px auto;
background: #DADFE1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #000000;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #333333;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #333333;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #DADFE1 url('images/pageglare.png') no-repeat scroll;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #333333;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333333;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #333333;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #DADFE1;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #DADFE1;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu"> 
<li><a href="#">Home</a></li> 
<li> 
<a href="#">Categories</a> 
<ul> 
<li><a href="#">CSS</a></li> 
<li><a href="#">HTML</a></li> 
<li><a href="#">Jquery</a></li> 
<li><a href="#">Blogger Tips</a></li> 
</ul> 
</li> 
<li><a href="#">Free Vector</a>
<ul>
<li><a href="#">Social Icon</a></li> 
<li><a href="#">Website Icon</a></li>
</ul>
</li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Tools</a>
<ul>
<li><a href="#">Parser Tool</a></li> 
<li><a href="#">Escape Tool</a></li>
</ul>
</li> 
</ul>

The widget is easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign # with Your Pages links.  Click save and Done.

if you have any problem post your comments below in comment section. Thanks for reading our post .  happy blogging.

Read Article →

4 comments

Google Drive

Google has added a new feature to Drive: You can now serve up web content from within your Google Drive folder, even ones that run JavaScript. All you need to do is upload your HTML files and assets (e.g., images) and make them public. The Google Developers site has more details on publishing a folder as a website, but essentially, besides having the folder and site assets public, you also need to link to the files in the folder using a "web View Link" code. If you don't have an index.html file in the folder, Drive will display a list of the folder's contents.

 

Now you can't host dynamic websites on Google Drive. Nothing that requires server-end computing. Technologies like PHP, ASP ETC require back-end processing, so they can't run. You can only host simple, static websites that are HTML, CSS, and JavaScript driven.

Now you could use this just like you'd use Google Pages or code.Google.com for a similar purpose. But Google Pages has been replaces with Google Sites, and no longer supports direct uploading, which is kind of a let-down, because we need to directly upload webpages in order to test them on Google Drive. Google Code, on the other hand, has bandwidth issues. Hence, Google Drive is the best option you have for hosting your static website.

 

The requirements to publish are:

  1. The folder containing site assets must be public. Assets added to public folders must also be public on the web.
  2. Link to the files contained in the folder using the web View Link folder ID plus the path to the file.

To host a website on your Drive, log into your Google Drive account from a web browser, and create a folder. What's important is the permission you set on that directory. This directory will host your web files, so it needs to be shared with the public, or else, no one will be able to see it.

Now that you've created a folder to host your files, it's time to put the files in. Upload all your web files in this folder. Now, you need to share it with the public.

To do this,

right click on the folder>> and then click on>> Share

image

 

Now, look under the "Who has access" section, and change the setting from Private to "Public on the web". Then, copy the link given on top. You'll need it for the next step.

The URL you just copied is the link to your shared file, and not to the hosting. There's a Some adjustment you need to make in the URL. The link you copied something like this: https://docs.google.com/folder/d/link-to-your-site.

You have to change it to https://googledrive.com/host/link-to-your-site.

For More instruction check out this page Google Instruction.

image

Now You are done!

I hope Steps are extremely Simple/easy if you have any trouble feel free to post any query below in comment box I will loved reply back as soon as time allow….. Thanks for reading our post… happy blogging….

Read Article →

0 comments
Download Free Website Button
Hi Every body How are you!? In this post I am going to share with you Beautiful buttons pack. In my previous post I share with you social icons you can also download social icons from download section and today I am sharing great buttons bundle which have 10 Type Buttons Feedback, Download, Upload, Subscribe, Search, Buy now, Read More, Previous, Next, and Home that took a lot of my time in designing it. Each button has a choice of 15 color options! Downloads are available in  png format. The dimensions are 187px by 40px. Preview and download the buttons below. If you want to increase button size so edit the cdr file and export buttons with your chosen size. In my next post I will show you how to export buttons from CorelDraw if you don’t know about Corel Draw See Video Tutorial. Please post any query you may have in the comment box below. Till then take good care of yourselves and your beloved ones.

Download Buttons Preview
Click on Image For Full Size View..


Note:- you can open .cdr only in Corel Draw Newest Version.You Can also download these icons from download section. Thanks for Reading Our Post. Happy Blogging ( Stay Mast Stay C00| My |ife My Ru|zThumbs up)
Read Article →

22 comments

Facebook Like Box

Facebook Page Is Also Good Way To Promote your  Blog And Increase Readers. This Facebook Box Will Help Your Visitor To Become A Regular Reader Just By Clicking Like Button. Most Of Readers Like To Fetch Updates From Facebook Page (This Is Better Than Email Newsletter). Follow These Steps To Add Facebook Like Box To Blogger Blog.  See how many users already Liked your page.
Like your Facebook page with just one click, without having to visit the page.Read your page’s recent posts (if you choose to display them).Here is a tutorial on adding a Facebook Like box (formerly a Fan box) to Blogger/blogspot. It’s a good way to promote your Facebook page. A Like box lets your readers. Follow the Simple Steps. in my previous I share with Facebook Activity Feed Widget Check out the our previous post.

 

Add it to blogger

 

1. Go to Facebook Developer Page

2. Get your Facebook page id URL by Visiting your Facebook fan page.Facebook Page id

3. and paste your fan page url in Facebook Page url box like screen shoot below.

Facebook Like Box Setting

4. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.
5. Click Get Code button when done. You’ll be given two codes, titled iframe and XFBML. You only need the iframe code.

The Iframe Code Should Look Like This . Don not Copy This Code

Iframe Code

6. Copy the code (the code provided by Facebook, not the sample code in no.5).
7. In Blogger Dashborad, go to Layout and click a Add-A-Gadget link. Select HTML/Javascript gadget and paste the code in the content box. Save and view your blog. For Further Help See Video Tutorial. Enjoy!

Adding this widget is surely easy but still if you encountered any troubles just post your query below in comment box and I would love to reply back as soon as time allow thanks for reading our post. happy blogging.

Read Article →

0 comments

Facebook Activity Feed

The Recommendations Box shows personalized recommendations to your users. Since the content is hosted by Facebook, the plugin can display personalized recommendations whether or not the user has logged into your site. To generate the recommendations, the plugin considers all the social interactions with URLs from your site. For a logged in Facebook user, the plugin will give preference to and highlight objects her friends have interacted with. You must specify a domain for which to show recommendations. The domain is matched exactly, so a plugin with site=facebook.com would not include activity from developers.facebook.com or www.facebook.com. You cannot currently aggregate across multiple domains. If you are using Facebook recommendations bar in your sites then you will be pleased to know that this plugin also displays recommendations along with recent likes based on social activity made on your pages. Indeed a must to-add-widget from us to all of you who have not yet utilized this widget.

 

Add Feed to your blog


Note:-  Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)

1. Go To Your Blogger Dashboard>> Template>> Proceed.

2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)

<body>
or
</body>

3. and paste the following  JavaScript after/below body tag.

<div id="fb-root"></div>
<script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. Save your template.

5. Go to Blogger Dashboard > layout

6. Click add a gadget and choose HTML/JavaScript widget

7. Inside your HTML/JavaScript widget paste the following HTML5 code.

<div class="fb-activity" data-site=http://www.bl0gger-tricks.blogspot.com data-width="300" data-height="500" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>

Note:-

1. Replace http://www.bl0gger-tricks.blogspot.com/ with your blog home page link.

2. You Can Change Widget Width according to your blog layouts only if alignment changes are required.

3. you can edit widget border with your choice by editing this code #ffffff. for color selection checkout our color code generator Tool. I have set the border to white.

Now save  your widget and view your blog new look. See Video Tutorial for Further Detail.

I think in this tutorial steps are very simple if you have any trouble feel free to post your comments below in comment box I would love to reply back as soon as time allow. Thanks for reading our post. Happy Blogging.

Read Article →

3 comments

Favicon

Favicon (Favorites Icon) is the small picture (usually 16 x 16 px in size) you see beside some site's name in your browser's address bar.Having your own favicon with a nice graphical reminder of your site beside is a good way to get visitors attention again. Now Blogger users can add a custom favicon for their blogs from the Design > Page Elements tab, by clicking on the Edit link on the "Favicon" element above the navbar element. Most of your might have observed that your custom favicon displays in both Firefox, chrome and other major browsers but you can not see favicon appearing in Internet explorer instead you see the same orange icon. Blogger also introduced a Favicon widget using which you can replace the default favicon with a logo image of your choice but unfortunately most of you are still confused on why you can not make the icon working in IE browser. Today  in this Tutorial I am Going To tell how to fix favicon problem in IE. So Follow The Simple Steps And You are Done…!

 

Add Favicon in Blogger.

Now  Simply add the These HTML Code Just Below The Opening <head> Tag.

<link rel="icon" href="LOGO Link in gif format" type="image/gif" />

You can choose from here some cool favicons for your site/blog: http://www.favicon.cc/ (just download the favicon you like - upload it on tinypic or on a blogger's post, then copy the link address/direct link)
and Replace Logo Link In gif Format Text  With Your Favicon Link.

Why IE Doesn't Appear the Favicon

IE wont accept the icon if it is stored on your Picasa album or in any other image hosting service or even if it is stored in any of your sub domains. It will also not accept the icon if its not stored in .ico format.

 

if  You Need Any Help By Doing This Feel Free To Leave a Comment Below in Comment Box I love it to helping you in any Trouble. Thanks for reading our Post…

Read Article →

2 comments

Track Your Downlads

Tracking downloads on your website is a fairly easy task, in this post I am going to show how to track every single downloads  you would like to know how many times each file has been downloaded. If you have download links on your site (or even links to other websites), you can track them in a similar fashion - all you need to do is make a change to the HTML of the link that you have on your page. today we would share every detail on how we actually track downloads on Blogger.

 

Live Preview

 

Follow The Simple Steps…

I using Dstats tracking Code for Tracks our Each Download. Make a change to the HTML of the that you have on your page. Replace  PASTE-FILE-LINK-HERE with the link of your file you want readers to download. And replace Image URL OF Download Button with the Image Link of your Download button.

<a href="http://dstats.net/download/PASTE-FILE-LINK-HERE"><img src="Image URL OF Download Button" border="0"/></a>
<p>Downloads:<a href='http://dstats.net/download/PASTE-FILE-LINK-HERE'></a> 
<script type='text/javascript' src='http://dstats.net/dstatsjs.php?file=PASTE-FILE-LINK-HERE'></script> 
<script type='text/javascript'>document.write(dsCounter);</script></p>
Donwloads Buttons Preview

You Can Also Download Our Download Buttons From our Download section or Download Our Buttons . If you have any trouble about doing this feel free to post your comments below in comment section. thanks for reading our post…

Read Article →

1 comments
Website Buttons Preview
Hi Every body How are you!? In this post I am going to share with You Beautiful buttons pack. In my previous post I share with you social icons you can also download social icons from download section. and today I am sharing great buttons bundle which have 10 Type Buttons Feedback, Download, Upload, Subscribe, Search, Buy now, Read More, Previous, Next, and Home that took a lot of my time in designing it. Each button has a choice of 15 color options! Downloads are available in  .png format. The dimensions are 160px by 50px. Preview and download the buttons below. If you want to increase button size so edit the cdr file and export buttons with your chosen size. In my next post I will show you how to export buttons from CorelDraw. Please post any query you may have in the comment box below. Till then take good care of yourselves and your beloved ones.

Buttons Preview
Click On Image For Large View…

Download Now

Note:- you can open .cdr only in Corel Draw Newest Version.You Can also download these icons from download section. Thanks for Reading Our Post. Happy Blogging ( Stay Mast Stay C00| My |ife My Ru|z Thumbs up)
Read Article →

8 comments
Egg Style SharingShare your blog in popular social networking/bookmarking sites is very important to get good traffic and I think this is the easiest way for increase our blog/website traffic. This is indeed the most beautiful Social Network Heart Style  Sharing widget featuring the bottom Social Network sites (Google Plus, Twitter and Facebook ). In this tutorial we'll create Heart Style Sharing button for your blog. With the 'Share this' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. ShareThis is a very popular service offering multiple Social Bookmarking Widgets for blogs and websites. i have a Blogger Tips show you how to add the new Share This Heart Style Buttons to various position on your blog. You can see the buttons in question to the end of this Article and that position will be one of the options for your blog. In this part I going to show you  Heart Style Sharing buttons Horizontally Align at the Bottom of your blog.
ShareThis Tool Tutorials
Part 4: How To Add Share This Heart Style Sharing.
Note:-  Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)
1. Go To Your Blogger Dashboard>> Template>> Proceed.
2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)
</head>
3. Paste The Following Code Above/Before </head>
<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", doNotHash: false, doNotCopy: false, hashAddressBar: false, onhover:false});</script>
<link rel="stylesheet" type="text/css" href="http://w.sharethis.com/gallery/shareegg/shareegg.css" media="screen" /></link>
4. Next Find the following piece of code.
</body>
5. and paste the following code before/above </body>.
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['googleplus','facebook','twitter','pinterest','linkedin','email','sharethis'], {title:'Happy Valentines Day!',url:'http://www.sharethis.com',theme:'shareheart'});</script>
6. and finally add the these lines where you want to show widget. if you want to show widget at the bottom of your blog then follow this step. Find This line
</body>
7. Copy and place anywhere Before the code from step 5.
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<div id='shareThisShareHeart' class='shareEgg'></div>
Need Help…
The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right. if you have any trouble about this tutorial feel free to post a comment below in comment section and I will solve the problem as soon as time allow. thanks for  reading our post…
Read Article →