How To Create Custom Google Search Engine?

When it comes to indexing pages on The Web or just a website, no one or nothing can beat Google's mighty system of crawling and indexing pages on The Web. Most Blogger Templates have custom search boxes in them, which are quite incapable of delivering the most appropriate results. These search boxes are just limited to their ability of searching matching words of your blog. Fortunately, Google has also found the best solution to this problem. Google has created Google Custom Search Engines (CSE) that is awfully efficient in delivering the most relevant search results to the visitor. This increases the number of impressions and page views because your readers are kept busy in reading more and more. And the amazing thing is that you can add your AdSense Ads to your Google Custom Search Engine, which will increases your revenue for every click made on the search results. You can see a live demo of this search box on the sidebar of this blog. So let’s create and install a beautiful Google Search box for your blog.

Google Custom Search Engine Series

Part1: How To Create Custom Google Search Engine?

Note: Follow this part only to create the box, stop where it tells you how to add it to blogger. We will learn how to add it by connecting two pages in today's tutorial.

Part2: How To Connect Two Pages To Use the Google Search Box?

Part3: How To Make Money With Google Search Box?

How To Create a Custom Google Search Engine?

1. Go To Google CSE
2. Hit the Add button
3. Write in your full website URL
4. On the left, click on Look and Feel
5. From all the layouts select Full Width
6. Finally hit "Save & get Code" button and wait for the next part of our tutorial.

Add Google Custom Search Engine To Blog

1. Go To Blogger > Layout
2. Choose HTML/ JavaScript 
3. Paste your Search Engine Code in it.
4. Save and you are done!
5. View your blog to see it working just fine

Changing your default search box to Google Custom Search Engine Box is an important step that you must take as early as possible. You will see the difference in your analytics the next week. In the next post as shared below you will learn to integrate your AdSense Ads to your Custom Search engine and increase your Adsense earnings. Peace :)

Read More

Blogger 14:10  3 comments

Become a Google Student Ambassador for your College today!

If you're a college or university student and are eager to look new opportunities, then Google has got something that you would really like. I mean who wouldn't like to be a Google representative for their college? There's the swag of working under Google's name! For people who want to, Google has a program for them called Google Student Ambassador Program that will surely offer the students many new opportunities, allowing them to groom their skills.

What will you get?

Under Google Student Ambassador Program, the student will get the chance of enhancing his skills of communication, leadership and personal development. And not only that, the student will get a certificate from Google, and also an entry in his resume for being a Google Student Ambassador! This would really prove invaluable when he'll be looking for a job out there.

Google Student Ambassadors will get an opportunity to learn more about Google programs and products. They will be updated with everything currently on at Google.

What these Ambassadors will do for Google is to help better understand university cultures. They will be responsible for hosting fun events on their campus, and the students will serve as campus contacts for Google teams. This way, these student ambassadors will get an opportunity to know people at Google, get advice, and much more. Connections with Google like these can prove to be very invaluable.

Who can apply?

The applicants can be from any major. There is only one requirement i.e, you need to be social, and should be ready to take social responsibilities. Applicants should also be involved in their college communities. And that they should be passionate about technology, because otherwise, what's even the point?

How to apply?

To apply, you have to fill this registration form. But along this form, you need to have the following:

• Recommendation letters from 1-2 lecturers, professors, or former Google Ambassadors.
• Certified proof of enrollment in your university for the year 2013.
• A short video of at most 1-minute length about yourself. 
• Make all of this original and unique.

Grab this opportunity and hurry up before the registration expires! The length of this program will be just one academic year, but the things you will get and learn will stay with you forever. This is a one-in-a-lifetime opportunity for all of you, and I guess you wouldn't want to miss it! Good luck :)

Read More

Blogger 10:22  No comment

Releasing Notification Bar for Script disabled Users!

 

I managed to develop many creative widgets this month out of which I will be sharing just one for this month. The widget that I am going to share today is very different from all the other widgets. Almost all blogger blogs lack this amazing NoScript Notification bar widget that is shown when a user has JavaScript disabled in his browser. This way the user will be notified that it is safe to turn on JavaScript for your blog and that your blog appears better with JavaScript enabled.

Copyright

All these widget codes are the copyrighted property of My Blogging Tricks. Bloggers and developers are hereby advised not to sell or redistribute the widget codes without permission. You are also instructed that if you want to share this widget with your readers then kindly link back to this page. Any copyright infringement will result in your blog getting reported to Google DMCA.

What's Special in this Widget?

JavaScript is a client side scripting language so many people turn it off for security purposes. So this notification bar works best by grabbing the readers attention and helps you to focus the readers towards turning on JavaScript as it is safe to do it for your blog.

This widget is made from pure HTML and CSS so it is compatible with all the major browsers including, Chrome 1, 2, 3, 4, 5 and above, Firefox 1, 2, 3 and above, IE 4, 5, 6, and above, Opera 3, 4, 5, 6, 7, 8, and above and Safari 1, 2, 3, 4, 5 and above.

Each and every element of this notification bar is well structured and can be configured easily. This notification bar provides far better design flexibility and you can easily change its theme and look to any type of color you want. This notification bar doesn't affect site load time. You can change it in any way you want that may perfectly blend your layout.

And if any help is required, I will be always be available to help you on this page.

Installing the Notification Bar on Blogger

You may follow the extremely easy steps mentioned below to add the widget to your blogs.

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Search for ]]></b:skin>
5. Just above it, paste the styles below,

/* ---- NoScript Notification bar by www.MyBloggingTricks.com ----- */
#noscriptnotificationbarWrap{
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    margin-top: -41px;
    z-index: 999999;
    width: 100%;
    height: 41px;
}
#noscriptnotificationbar {
    width: 100%;
    height: 28px;
    margin: 0px;
    padding-top: 7px;
    text-align: center;
    background: none repeat scroll #00BBFF;
    position: relative;
    box-shadow:0px 1px 3px #666;
    z-index: 9998;
    text-decoration: none;
    color: #000;
    font-family: arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0.4px 0.4px 0.4px rgb(74, 73, 73);
}

#noscriptnotificationbar a{
    text-decoration: none;
    color: #FFFC00;
     font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0.4px 0.4px 0.4px rgb(74, 73, 73);
    outline: none;
}

#noscriptnotificationbar a:hover{
    text-decoration: underline;
}

Make Design Changes if you like:

• To change the background, simply edit #00BBFF
• To change text color, edit #000
• To change hyperlink color, edit #FFFC00
• And if you want to change anything else, just post me your query in the comment box below! :)

     8.  Finally to make the bar appear, search for <body> and add the following code below it,

    <noscript><div id='noscriptnotificationbarWrap' style='display: block; margin-top: 0px;'><div id='noscriptnotificationbar'>

    Write Your Notification Message Here

 </div></div>
<br/><br/></noscript>

     9.  Save your template and you're all done!

Need help?

I just hope that all you guys find this widget worth using. All these steps are extremely easy to try out. This widget will work fine if you follow all the steps carefully. And even if you ran into any kind of technical problem then just post your comment and I would love to help you guys. Peace and blessings buddies! :)

Read More

Blogger 11:45  No comment

Advanced Multi Tabbed Widget For Blogger – Fully Bloggerized!

A very beautiful, attracting widget that I came across was the Multi Tabbed Widget scripted by Barelyfitz and stylized by Lawny Designs. This widget was worth sharing with all of you but it had a problem. This widget was not completely widgetized and you were not add any official blogger widgets to it unless you have their codes with you. I had carefully modified Barelyfitz and Lawny's codes to make it easily work in blogger. If you need a demo, then you can already see this widget hanging on my sidebar.

Copyrights

This Multi Tabbed widget is scripted by Barelyfitz, stylized by Lawny Designs and modified and bloggerized by My Blogging Tricks. If you wish to share this tutorial with your visitors, then kindly link to these three pages. A violation of this copyright will result in a Google Adsense and DMCA complaint. Be careful!

Add Multi Tabbed Widget to Blogger

To add this widget to your Blogger Blogs, follow these steps,

1. Go to Blogger > Layout > Edit HTML
2. Search For </head>
3. And paste this code just above it,

<!-- Tabber Widget By www.mybloggingtricks.com -->
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}
tabberObj.prototype.init = function(e)
{
  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    t.headingText = t.div.title;
    if (this.removeTitle) { t.div.title = ''; }
    if (!t.headingText) {
      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }
    if (!t.headingText) {
      t.headingText = i + 1;
    }
    DOM_li = document.createElement("li");
    t.li = DOM_li;
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
      DOM_a.id = aId;
    }
    DOM_li.appendChild(DOM_a);
    DOM_ul.appendChild(DOM_li);
  }
  e.insertBefore(DOM_ul, e.firstChild);
  e.className = e.className.replace(this.REclassMain, this.classMainLive);
  this.tabShow(defaultTab);
  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }
  return this;
};
tabberObj.prototype.navClick = function(event)
{
  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;
  a = this;
  if (!a.tabber) { return false; }
  self = a.tabber;
  tabberIndex = a.tabberIndex;
  a.blur();
  if (typeof self.onClick == 'function') {
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }
  self.tabShow(tabberIndex);
  return false;
};
tabberObj.prototype.tabHideAll = function()
{
  var i;
  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  div = this.tabs[tabberIndex].div;
  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);
  return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  this.tabHideAll();
  div = this.tabs[tabberIndex].div;
  div.className = div.className.replace(this.REclassTabHide, '');
  this.navSetActive(tabberIndex);
  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }
  return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = this.classNavActive;
  return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = '';
  return this;
};
function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;
  if (!tabberArgs) { tabberArgs = {}; }
  tempObj = new tabberObj(tabberArgs);
  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;
  if (!tabberArgs) { tabberArgs = {}; }
  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
    tabberAutomaticOnLoad();
} else {
  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }
}
//]]>
</script>

     4. Now search for ]]></b:skin>  and just above it paste this code,

/*---------- Tabber Start by www.mybloggingtricks.com -------- */

.tabberlive{
    margin:0;
    padding:5px;
    clear:both;
    background:#f8f8f8;
    border:1px solid #DDD;
}
.tabbernav {
    margin:0;
    padding: 3px 0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
}
.tabbernav li {
    list-style:none;
    margin:0;
    display:inline;
}
.tabbernav li a {
    padding:6px 0.5em;
    margin-right:1px;
    border:1px solid #DDD;
    border-bottom:none;
    background:#0084ce;
    text-decoration:none;
    color:#ffffff;
}
.tabbernav li a:hover {
    color:#fff;
    background:#333;
    border:1px solid #DDD;
    text-decoration:none;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover {
    background:#333;
    color:#fff;
    border-bottom: 0px solid #ffffff;
}
.tabberlive .tabbertab {
    padding:5px;
    border:0px solid #DDD;
    border-top:0;
    background:#ffffff;
}
.tabberlive .tabbertab h2,
    .tabberlive .tabbertabhide {
    display:none;
}
.tabbertab .widget-content ul{
    list-style:none;
    margin:0 0 10px 0;
    padding:0;
}
.tabbertab .widget-content li {
    border-bottom:1px solid #ddd;
    padding:2px 0 5px 0;
}


/*------- Tabber End--------*/

     5. Now comes the final part. Search for <div id='sidebar-wrapper'> closing </div> and paste this code just above as shown in the image,

<div style='clear:both;'/>
<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

• If you want only three tabs, then deleted the highlighted code.

     6. Now finally save your template. Visit the Layout to add widgets to the tabs! It will look something like this,


The widgets are arranged number wise. Starting from Tab-1 and ending at Tab-4. To add a gadget/widget to any tab simply click the link Add a Gadget and start adding whatever you want.

     7. Finally view your template to see it hanging! :)

Reposition the Multi Tab Widget

In this part of the post, we will discuss how to change the position of this Multi Tabbed widget.

Changing Position:
 
To shift this tabber widget to the extreme top of the sidebar rather at the bottom section do this,

• Paste the code in Step#5 just above <div id='sidebar-wrapper'> 

• Save your template and go to Layout > Page Elements  to see if it has shifted to the top.

Need any Help?

Every template being coded differently makes it difficult for people to understand the last steps who aren't familiar with HTML. But don't worry if you aren't being able to add this code to your template because if you are then then just email me your template at slimshady1070@gmail.com and I will just add the widget for you. Plus I will also teach you to add an extra tab whenever you want and I will also stylize the Tabber widget according to your template.

But please note that this help is for MBT subscribers only! If you haven’t availed the opportunity of becoming a MBT reader then kindly subscribe here to avail unlimited resources.

I would love to know about your precious views on this widget. I hope this eye catching widget will help really a lot in giving a neat and clean touch to your blogs. Any question is welcomed. Peace and blessings buddies :>

Read More

Blogger 12:11  7 comments

Enable Threaded Commenting Option in Official Blogger Templates!

Almost an year ago, Blogger had announced a very amazing feature in its commenting system. Similar to WordPress, the tailing commenting feature was added to all official Blogger templates. From that day, Blogger also started supporting threaded (Nested) commenting system. This change was made so that readers could interact easily with more flexibility while posting comments or leaving replies. And by using this feature, normal comments and comment replies could be differentiated easily from each other. And this replaced the traditional method of using a Reply button to reply and using the @ symbol to point to a specific commentator.

Due to these all these features in this commenting system, I was emailed by many of my readers to post the tutorial guide to enable this commenting system allowing them to use it on their blogs. Right now I am sharing the tutorial to enable threaded commenting in official templates. Tomorrow I will post the tutorial to tweak your template and enable the same threaded commenting system on your custom templates.

Enable Threaded Commenting Option in Official Blogger Templates

All you need to do is enable two options,

Set your Blog Feed to Full

1. Go To Blogger > Other > Site Feed
2. Set 'Allow Blog Feed' To Full

    3.  Hit save

Embedded Comments

Mostly bloggers use embedded comments like me but for those who don't please do this:

1. Go To Blogger > Settings > Posts and comments
2. Under 'Comments' set comments location to "Embedded" 

    3. Hit Save

You're all done now! Simply enjoy this excellent feature.

How To Use Threaded Comments in Blogger Custom Templates?

I'm too tired to publish the  tutorial at this time. I will be publishing a detailed tutorial tomorrow which will include the easiest possible method. I have received the scripts and I will first need to debug them to ensure it works just fine with all running templates without any errors or SEO conflicts. Stay tune buddies. Peace and blessings pals! :)

Read More

Blogger 06:31  No comment

Surprise! MBT Developed Its First Facebook HTML IFrame WebPage

After hours of coding and hard work, Alhamdulillah I finally succeeded in developing MBT's first Fans Welcome Page on Facebook. Taking one step further and crafting a service page on Facebook was completely a new experience. This is actually a HTML IFrame WebPage on Facebook. This type of work is more often done at premium levels by developers but you all will be excited to know that we are publishing this guide for free. All my coming tutorials on this are very close to never shared before on any forum, blog or even Facebook Developers page.

It is all your support and motivation that has forced and helped me to take this step. I always need your valuable feedback and support. To make this blogging platform more tempting and worth visiting, we will work together. Today I am very excited to share this matchless "Facebook Welcome Page"  of MBT. So let's have a look of it:

Please Note: This page is compatible with Mozilla, Chrome, Safari and slightly with IE8+. Please view it in any browser except IE!

MBT Fans Welcome Page

Due to having a very hectic schedule, I am unable to share the tutorials at this moment. But I will surely write a number of posts and will give away free and unique beautiful code designs. I would be really happy to view your Welcome Pages different styles and colors. Peace and blessings buddies :)

Need your Feedback on this!

Your comments really mean a lot to me. I will be highly pleased about your precious feedback on this. If any of you guys got any creative ideas, then feel free to share but hurry up before we publish the tutorials. I would really love to hear from all of you.

Read More

Blogger 12:14  No comment