How to add cool text box with your logo.

How to add cool text box with your logo.

How to add cool text box with your logo.

Hey guys we are looking for coll text box with different text or codes.I know many of us not have a great knowledge of HTML and that is why we are looking for in other websites.

This is not enough we are looking for to many good and beautiful contents and their background is also looking good i mean if you are looking in any other websites you ever saw a beautiful background text.But don't worry we are for your help.

Let do what i tell you.

To add like this first log in to your blogger dashboard if you have blogger account and if you have wordpress account not to worry because both the cases are same.

Log in to your dashboard > Create new post

you are able to see Compose or HTML in your left side of blogger new post dashboard.

Now paste this code in your html part of post.

<div class="Code1" style="-webkit-text-stroke-width: 0px; -webkit-transition: background-color 0.777s; background-color: #9fcfff; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjITfDRPLBO6yKXE5JVsyp_x_-4YNiKZpS8B9s3dO2oTFXzfjuGj1VpXYnFzI4mH6YtYXRt3ZBWWh3U9Oz2OEnCGMRNJqL7zVS1CwLV4fW2TMbRe_IQPcAUSF5QuwnHhfwh8v8IT4guJa/h18/NBT+Code1.PNG); background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: Courier; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4; margin: 15px; orphans: auto; overflow-x: auto; padding: 40px 15px 15px; text-align: justify; text-indent: 0px; text-transform: none; transition: background-color 0.777s; white-space: normal; widows: auto; word-spacing: 0px;"> <br /></div>

Customization:

• Replace this png file to your png file https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjITfDRPLBO6yKXE5JVsyp_x_-4YNiKZpS8B9s3dO2oTFXzfjuGj1VpXYnFzI4mH6YtYXRt3ZBWWh3U9Oz2OEnCGMRNJqL7zVS1CwLV4fW2TMbRe_IQPcAUSF5QuwnHhfwh8v8IT4guJa/h18/NBT+Code1.PNG This is the logo which attach at the top of the box.
• If you want to change the color of background  replace :#9fcfff

If you like this post please comment.

Read More

How to add MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR

 Multi-Tabbed widget in our sidebar.

 

LIVE PREVIEW:

Download

ADD MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR:

• 1. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript. 
• 2. Paste below code inside it.

<script type='text/javascript'>
//<![CDATA[
function mylabworld_oom(NBTID, id)
{
  var Mylabworld = document.getElementById(NBTID);
  var NBTs = NewBloggerTips.firstChild;
  while (MLW.className != "NBTs" ) MLWs = MLWs.nextSibling;
  var MLW = NLWs.firstChild;
  var i   = 0;
  do
  {
    if (MLW.tagName == "A")
    {
      i++;
      MLW.href      = "javascript:MyLabWorld_ubah('"+MLWID+"', "+i+");";
      MLW.className = (i == id) ? "Active" : "";
      MLW.blur();
    }
  }
  while (NBT = MLW.nextSibling);
  var Halamans = Mylabworld.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function MyLabWorld_ubah(NBTID, id) { MyLabWorld_oom(NBTID, id);
}
function MyLabWorld_inisial(NBTID) { MyLabWorld_oom(NBTID,  1);
document.write('');}
//]]>
</script>

<style>
div.MyLabWorld div.NBTs {
height: 24px;
overflow: hidden;
}
div.MyLabWorld div.NBTs a:hover, div.MyLabWorld div.NBTs a.Active {
background-color: #eee;
}
div.MyLabWorld div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.MyLabWorld div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.MyLabWorld div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.MyLabWorld div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>

<form action="MyLabWorld.html" method="get">
<div id="MyLabWorld" class="MyLabWorld">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2  Title</a> <a>Tab 3  Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' ' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.mylabworld.in/' target='_blank'>NBT</a></small>
</div>
</div></form>
<script type="text/javascript">MyLabWorld_inisial('NewBloggerTips');</script>

Customization:

• Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title.
• Replace Tab 1,2,3, Content goes here with your widget code.
• Change width: 300px; height: 300px; with your need.
• Wanna change Background Color of Multi-Tabbed widget : Replace #ffffff with you favorite color.

Now Save & See you blog you have added this widget successfully.

 Check out our latest website Helpersblog.

Final words:-
if you have any types of queries then please comment.

Rajjaiswal

About the Guest Author:
Rajjaiswal is the author and admin of this blog.He want to make his blog to top.

Read More

How to add Fly bird twitter dashing widget to your blog,.

How to add Fly bird twitter dashing widget to your blog,.

Hey guys you are interested to get widgets and you come in the right place but just before doing some easy steps.This is one of the beautiful widget for blogger blog.Our blog is also using this widget because its looks good and also the people attract for this widget and follow your blog very easily.Yet this is most searchable widget on google.As you know the popularity of Blog is becoming high and this is not enough there are to many widgets also which attracts customer or peoples who comes on your site and click on this widget.

If you have blogger.com account then use following steps:-

• sign in 
• Layout
•  Html /Java Script
• and paste the following below code on that

The codes are as follows:-----

<object type="application/x-shockwave-flash" data="http://www.mylabworld.in/2013/08/how-to-add-fly-bird-twitter-dashing.html" width="150" height="150"><param name="movie" value="http://www.mylabworld.in/2013/08/how-to-add-fly-bird-twitter-dashing.html" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=MYLABOFBLOGGER" /><a href="http://mylabworld.in/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://mylabworld.in/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://mylabworld.in/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><embed src="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=MYLABOFBLOGGER"></embed></object>

Just change the username with your username of Twitter.

Read More

How to embed Facebook posts in Blogger blog.

Social Media has taken the web by storm,and is now increasingly being integrated with various services.Social recommendations have now become a lot more important then they were a few years ago as compared to organic search,which goes on to show that the way the average internet surfs is changing.And it's no wonder that every social network wants you to share it's content all over the web.For that effect ,Facebook,following into the footsteps of Youtube and Twitter ,has launched embeddable posts ,which will enable blogs and websites to share status updates,pictures and videos that are on Facebook.
Sharing your Facebook posts on your blog page could help with the engagement on your site.But before you can embed a post,that particular posts needs to be public.Posts with restricted privacy settings won't be embeddable .So if you're trying to embed your own posts,make sure it is public first.
..................................................................................................................................................................
How to Embed Facebook Posts to your site.
...................................................................................................................................................................

Now, there are two methods to embed posts.The Embed option within Facebook posts,and the Facebook Configurator tool.Both these methods will generate a code that can be embedded on any platform or websites,and not just on Blogger.
The Embed OPTION
Facebook is introducing this option within Facebook posts.If you click on the little drop down arrow next to a post,you will see an "Embed Post" option sitting there,among other options.
                         

If it's a photo, you will see an Embed button underneath the photo where you normally find the Download and delete options.Once you click on that button,Facebook will give you an embed code which you can add any where.

Although this is the easiest way(apparently),Facebook is only slowly rolling it out to profiles and page.Right now, only about 5 Facebook pages have received this options,including Mashable ,CNN,The Huffington post etc.So for now, it doesn't have any real use.And that is what other blogs will tell you.But what they won't tell you about is the second method,with which you can embed any post!

Manually creating an embeddable post

In my opinion , this is the easier option.Nut it involves a bit more work.You first have to grab the URL of the Facebook post you want to embed.For photos, you can easily get the URL by clicking on them.But for other media, isn't as easy.At least it doesn't appear so at first.To get a post's URL,simply click on its timestamp.

        Please go to this URL: https://developers.facebook.com/docs/plugins/embedded-posts/

Paste URL i the field provided.Once your story loads in the tool, click the get code .

Read More

How to Add a HTML5 Music Player with Playlist in Blogger

How to Add a HTML5 Music Player with Playlist in Blogger

Installing HTML5 Music Player in Blogger:

The first thing you should do is to Login into your Blogger Dashboard through your Google account. After logging into your account, from the list of your blogs, select that blog on which you want to install HTML5 Music Player. Now go to Template >> Edit HTML and search for the ending </head> Tag. After finding the tag, just above it paste the following code.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>

<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>
Once the whole thing is done, it is the period to save your template. Just press the “Save Template” button situated on the top right corner of your monitor screen. Now move to the next step ahead.

Adding HTML 5 Music Player in Blogger:

The next thing is to add the HTML5 music player either in your sidebar or into specific page/posts on your site. This entirely depends on your needs, whether you want it into your sidebar, posts, pages or anywhere else. It would work perfectly well everywhere. Follow the following instructions properly.

Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript and just paste the following code into the HTML Text Box. Now you probably want to customize your Music player so before we save the gadget lets learn how you can customize it. For example, Changing, Music, Covers and etc.
<div class="mbl">
 <div class="mbl_player" id="mnplp">
  <div class="mbl_art_bg"></div>
  <img class="mbl_cover" src="" alt=""/>
  <span class="mnpl_title"></span>
  <span class="mnpl_author"></span>
 
  <div class="mnpl_volume_min"></div>
  <div class="mnpl_volume"></div>
  <div class="mbl_volume_max"></div>
 
  <div class="mnpl_toolbar">
   <div class="mnpl_tlb_prev"></div>
   <div class="mnpl_tlb_stop"></div>
   <div class="mnpl_tlb_next"></div>
   <div class="mnpl_current"></div>
   <div class="mnpl_long"></div>
   <div class="mnpl_all"></div>
  </div>
 
  <div class="mbl_playlist">
  </div>
 </div>
 </div>

<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
    ]
   });
  });
 </script>
Customization:
title: Represents the title of your music or song.
mfile: It represents the music file in .mp3 extension
author: The name of the person who composed the music.
cover: Cover thumb image that appears when the song is playing.
background: The image that appears in the background of the music player.
Congratulations: After customizing, press "Save" button located at the bottom of the window. Now, go and check your site. I am pretty sure your site would rock now. Let us know about your thoughts on this amazing gadget.

We expect that you have adored and learned how to add HTML5 Music Player with Playlist in Blogger. This gadget is tremendously robust and takes second to load, so it is understandable that it would not affect your site speed at all. Let us know what you think about it.

Read More

How to add a print button to your blog or websites.

Allowing your users to print your blog posts with just a single click is something that is pretty cool. On the other hand, almost all browsers provide the flexibility to print a web page by just going to “File” and “Print”. Different people have different choices and different people like to have a print feature on their blog posts for different reasons. You may just like to add a continent way. When users can print your posts with just one click then why they should be doing some complicated processes? In this article, we will show you how to add a quick print button to your Blogger blog.


The First thing you will be doing is to login into your Blogger Dashboard. Now After logging in, go to your blog >> Template >> Edit HTML >> Search for <div class='post-header-line-1'/>  and just above it paste the following code. Once everything is done, press “Save Template” button to conclude the process.

Now to give your button a beautiful touch, you need to customize it with a bit of CSS. You can create any kind of image using any popular photo editing or deigning tool Like Photoshop and can simply apply the modest CSS to make it work. Here is a small example of how you can stylize your print it button.

Read More

How to add related posts near your homepage or below every post.

 You are intersetd to put or add related post in your blog or websites .Just you have to do a simple steps before adding this widget in your website.

This look very beautiful and get more visitors to the posts.

This is one of the best related post widget for your blog or website.

To add this widgets follow this steps;

If you are blogger then,

Open blogger.com>sign in

Layout>HTML Java Script

and paste the following code to your website.

<script>

var linkwithin_site_id = 1833229;

</script>

<script src="http://www.linkwithin.com/widget.js"></script>

<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

Please don't paste these codes to your widgets.Apply online directly to linkwithin

Show Related Stories Under Each Post!

LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.

Don't Let Your Past Stories Go to Waste!

We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

Increase Pageviews, Keep Readers Engaged

The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

Elegant, Unobtrusive Design

Our widget is minimally styled and blends in with your site design.

Read More

Add FIVE cool and mashable type social sharing button to your blog.

If you have blogger account then 

blogger.com>sign in

Templates>Edit HTML

after pasting codes in <head>

Layout>HTML/JavaScript

and paste the below code to your blog or website.

Place these script tag in "HEAD" section of your HTML

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
Now put these script at the end of your pageThey contain the parameter preferences in JSON format.

<script type="text/javascript">stLight.options({publisher: "5e1b23c7-e19f-44c1-85d1-69aede828cce", doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>
<script>
var options={ "service": "facebook", "timer": { "countdown": 30, "interval": 10, "enable": false}, "frictionlessShare": true, "style": "7", "publisher": "5e1b23c7-e19f-44c1-85d1-69aede828cce"};
var st_service_widget = new sharethis.widgets.serviceWidget(options);
</script>

Read More

How to add floating social sharing button to your blogger blog or websites.

Hey guys we are using blogger platform to earn money and also to become famous through social media.Here in this topic we are going to learn hot to add floating sharing button of social media in your blogger blog or websites.We are using social sharing for famous our blogs or websites and also to create blog more views.
How to install and paste this in blogger:
Blogger sign in> choose your website
HTML/Java Script
and paste the following code in it.

<!–sidebar floating share buttons by mylabofblogger.blogspot.com code start–><br />
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style><br />
<div id='pageshare' title="s">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<br />
<div style="clear: both;font-size: 9px;text-align:center;">
<a href="http://mylabofblogger.blogspot.com/2013/07/how-to-add-floating-social-sharing.html" target="blank"><font color="red">Get This<font></font></font></a></div>
</div>
<!–sidebar floating share buttons by mylabofblogger.blogspot.in code end–></!–sidebar></!–sidebar>

Read More

How to Add a Print it Button to Your Blogger Blog

Allowing your users to print your blog posts with just a single click is something that is pretty cool. On the other hand, almost all browsers provide the flexibility to print a web page by just going to “File” and “Print”. Different people have different choices and different people like to have a print feature on their blog posts for different reasons. You may just like to add a continent way. When users can print your posts with just one click then why they should be doing some complicated processes? In this article, we will show you how to add a quick print button to your Blogger blog.

The First thing you will be doing is to login into your Blogger Dashboard. Now After logging in, go to your blog >> Template >> Edit HTML >> Search for <div class='post-header-line-1'/>  and just above it paste the following code. Once everything is done, press “Save Template” button to conclude the process. 

Now to give your button a beautiful touch, you need to customize it with a bit of CSS. You can create any kind of image using any popular photo editing or deigning tool Like Photoshop and can simply apply the modest CSS to make it work. Here is a small example of how you can stylize your print it button. 

Read More

Blogger Comment Editor have a New Look Similar to Google+

Today, Blogger Team has made some delightful changes in Blogger’s Default commenting system. The changes are not in terms of functionalities, but they have revamped its design. So far the changes are not that significant because we have only noticed minor changes in the buttons of Blogger’s Comment Editor. The main reason behind redesigning the comment editor could be its old fashion appearance because, after introducing Blogger new interface they make lots of updates to Blogger like Google Dynamics, Google+ Followers Gadget, but they never given any regards to their Comment editor. Though, in 2012 they introduced Threaded commenting system but that was not robust enough. Finally, Google is doing some experiments with the comment editor which we will discuss in today’s Article. 

As we have mentioned above, the changes are neither significant nor minor. They have just reshaped the “Publish”, “Preview” and “Comment as” buttons. The design is a bit inspired from Google+. The appearance of the buttons is extremely professional and suites color scheme of almost each and every blog.  Check out the following screenshot to see the difference between OLD and New Comment editor.

Still, we cannot rate it as the finest Comment editor because the Blogger Team is working on it. This is the reason, why it is catching errors when we try to visit our site with Firefox. However, with Google Chrome it is working fine. Blogger is yet to make any announcement about the redesigning on their comment editor.

The Design looks alike Google. Therefore, possibilities are high that, they might change the Blogger’s default commenting system with the blossoming Google. These are all our predictions because from its appearance it looks like our prediction might be true. Nonetheless, let us wait and see what is going through in the brains of Blogger Engineers. 

If anyone is thinking, how we knew that Blogger has redesigned its comment editor, then Scroll down the page and witness the awesomeness. We are just like every other webmaster, so Google do not provide us with special treatment. 

Read More