My Blogger World

MBW Powerful Admin Panel

noreply@blogger.com (Anonymous) — Wed, 25 Feb 2015 09:35:00 +0000

What is Powerful Admin Panel

A Powerful Admin/Layout Panel is that where you can manage all things, widgets.

Demo of our Admin Panel

Pre Code Box

noreply@blogger.com (Anonymous) — Wed, 25 Feb 2015 05:24:00 +0000

Hello Friends today we will show you professional Pre Code Box.

What is CodeBox?

A Codebox is in which you can show your codes languages like html, css, js, php, xml, etc.

Download

Free Download

How to add it in Blogger

Go to Blogger > Edit Template
Search ctrl + f </b:skin>
Copy the below css and paste just above it.


<pre class="first"></pre>
<pre class="second"></pre>
<pre class="third"></pre>
<pre class="fourth"></pre>
<pre class="fifth"></pre>
<pre class="note"></pre>
<pre class="zebra"></pre>

First

pre.first {
    background: #484B52;
    border-left: 4px solid #94C007;
    font-size: .9em;
    word-wrap: break-word;
    overflow: hidden;
    color: #fff;
    font-family: monospace;
    white-space: pre;
    margin: 0 20px;
    padding: 10px 20px;
}

pre.first:after {
    content: "Copyright: My Blogger World";
    display: block;
    float: right;
    margin-top: 5px;
}

Second

   
pre.second {
    background: #384047;
    font-size: .9em;
    border: 2px solid #23241F;
    word-wrap: break-word;
    border-bottom: none;
    overflow: hidden;
    margin: 0 20px;
    color: #fff;
    font-family: monospace;
    white-space: pre;
    border-radius: 2px;
}

pre.second p {
    padding: 0px 20px;
    margin: -15px 0;
}

pre.second:after {
    content: "\00a9  My Blogger World";
    display: block;
    float: right;
    margin-top: 20px;
    background: #23241F;
    width: 99%;
    padding: 8px;
    font-size: 15px;
    font-family: sans-serif;
}

Third

   
pre.third {
    background: #23241F;
    font-size: .9em;
    word-wrap: break-word;
    overflow: hidden;
    margin: 0 20px;
    color: #fff;
    font-family: monospace;
    white-space: pre;
    border-radius: 2px;
    border-bottom: 3px #EB2647 solid;
}

pre.third p {
    padding: 0px 20px;
    margin: -15px 0;
}

pre.third:after {
    content: "My Blogger World";
    display: block;
    float: right;
    margin-top: 0px;
    background: #23241F;
    padding: 8px;
    font-size: larger;
    opacity: 0.5;
}

Fourth

   
pre.fourth {
    background: #23241F;
    font-size: .9em;
    word-wrap: break-word;
    overflow: hidden;
    margin: 0 20px;
    color: #fff;
    font-family: monospace;
    white-space: pre;
    border-radius: 2px;
}

pre.fourth p {
    padding: 0 0px 15px;
    margin: 0 5px;
    display: block;
    float: left;
}

pre.fourth:before {
    content: "My Blogger World";
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -ms-transform-origin: left top 0;
    -moz-transform-origin: left top 0;
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
    background: #94C007;
    color: #fff;
    margin-left: 36px;
    padding: 10px 15px;
    text-transform: uppercase;
    border: 1px solid #94C007;
    text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 2px -2px 0px rgba(0, 0, 0, 0.1);
    float: left;
    min-width: 50%;
    margin-right: -52%;
}

Fifth

pre.fifth {
    background: #23241F;
    font-size: .9em;
    word-wrap: break-word;
    overflow: hidden;
    margin: 0 20px;
    color: #fff;
    font-family: monospace;
    white-space: pre;
    padding: 20px 20px;
    border-radius: 2px;
    border-left: 4px #2691EB solid;
    ,;
}

pre.fifth:before {
    content: "";
    color: #75715e;
    display: block;
}

pre.fifth:after {
    content: "";
    color: #75715e;
    display: block;
}

Note

   
pre.note {
    position: relative;
    width: 480px;
    padding: 0em 1.5em;
    margin: 2em auto;
    color: #fff;
    background: #97C02F;
    overflow: hidden;
    font-family: monospace;
}

pre.note:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #658E15 #658E15;
    background: #658E15;
    display: block;
    width: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

pre.note p {
    margin: 0;
}

Zebra

pre.zebra {
    padding: 20px 20px 0px;
    display: block;
    width: 90%;
    color: #fff;
    margin: 0 auto;
    font: normal 12px Monaco,courier,monospace;
    background: #fff;
    background-image: -webkit-linear-gradient(#cbe9fa 50%, #fff 50%);
    background-image: -moz-linear-gradient(#cbe9fa 50%, #fff 50%);
    background-image: -ms-linear-gradient(#cbe9fa 50%, #fff 50%);
    background-image: -o-linear-gradient(#cbe9fa 50%, #fff 50%);
    background-image: linear-gradient(#23241F 50%, #292A26 50%);
    border: 1px solid rgba(0,0,0,0.1);
    background-position: 0 0;
    line-height: 20px;
    background-repeat: repeat;
    background-size: 40px 40px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

pre.zebra:after {
    content: "My Blogger World";
    float: right;
}

Add Facebook Invite Friends Button

noreply@blogger.com (Anonymous) — Tue, 24 Feb 2015 08:33:00 +0000

The Facebook 'Invite Friends' button is more useful. It enables users easily refer certain content to their friends, and also helps bloggers with increasing their audience. Today's how-to is all about creating an 'Invite Friends' button, and adding it to your (Blogger) blog.

What is the Invite Friends button?

You typically see this sort of button on Facebook Pages only. Page administrators can invite their friends to like their page. Other people who visit the page, and have liked it can also invite their friends. This helps with generating a new audience for your Facebook page, and hence your website or blog. You can put this button on your blog as well so that people can invite their friends from right there, instead of going to a Facebook page. When a person clicks on the invite friend button, a new pop-up window opens. This allows them to search and select multiple friends of theirs at once. As per Facebook's limit, 50 people can be selected at a time. Clicking on the Send Requests button will send out requests to people on behalf of the sender to like the particular Facebook page.

Demo

Green Button

Blue Button

Adding Invite Friends button to Blogger

This process involves generating a small Facebook app of your own. Go to the Facebook Developer Page, and create a new app. In order to be able to access this page, you need to be registered as a developer. If you're not already registered as a developer, simply click on the Register button as shown. After confirmation, you will be taken to the Facebook Developers Page.

Click on Apps > Create New

Enter a name and identifier for your app, and then choose a category
Copy your App ID. This will be used later

Now, Copy the Below Code. It is the code for invite button.


<style>
.fbbutton.green{
border-color: #3b6e22 #3b6e22 #2c5115;
color: #fff;
background-color: #69a74e;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));
background-image: -moz-linear-gradient(#75ae5c, #67a54b);
background-image: -o-linear-gradient(#75ae5c, #67a54b);
background-image: linear-gradient(#75ae5c, #67a54b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75ae5c', EndColorStr='#67a54b');
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
}
.fbbutton.blue {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7');
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.fbbutton{
font-size: 13px;
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.3em 0.6em 0.375em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3');
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
zoom: 1;
}
</style>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'Your App ID',
cookie:true,
status:true,
xfbml:true
});

function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Your Message diaolog'
});
}
</script>
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>
<div id="fb-root"></div>
<!-- Green Button -->
<button class="fbbutton green" href='#' onclick="FacebookInviteFriends();"> 
Facebook Invite Friends Link
</button>
<!-- Blue Button -->
<button class="fbbutton blue" href='#' onclick="FacebookInviteFriends();"> 
Facebook Invite Friends Link
</button>

Now, go to your app page, and then go to settings.

Click on Add a new platform and then click on Website. Enter the URL of your site, and then save your changes. This step ensures access to your app from your site URL.

Add Disqus Recent Comments Widget to Blogger

noreply@blogger.com (Anonymous) — Mon, 23 Feb 2015 22:36:00 +0000

Today, we will learn a simple and useful tutorial on how to add an attractive and fast-loading Disqus Recent Comments widget on a Blogger blog. Widgets like these let readers know about the conversations going on at your blog, and if you're fairly active, it adds up to a good impression. This widget in question is well-scripted and the JavaScript is hosted at Disqus so as to reduce the load time on your blog. So lets learn how to add it to blogger.

Adding Disqus Recent Comments Widget to Blogger.

You can add this widget code inside any text/html block inside your blog.

Go to Blogger >> Layout
Click on Add a Gadget
Choose the HTML/JavaScript widget
Now add it anywhere you like on your blog

Now copy and paste the following code inside the HTML/JS widget.


<div id="RecentComments" class="dsq-widget">
<script type="text/javascript" src="http://mybloggerworld.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>
</div>

The code above contains a URL. You need to change the text mybloggerworld with your own domain name (yourdomain.disqus.com).

Configuration.

After the ? in the URL, you can see a bunch of parameters. These are used to customize the functionality of the widget. Here is a brief description for each of them.
num_items - Number of comments to show in the widget
hide_mods - Hide moderators' comments (1 for hidden, 0 for disabled)
hide_avatars - Hide display images (1 for hidden, 0 for shown)
avatar_size - Avatar size in pixels (32 by default)
excerpt_length - Character-length of the excerpt (1000 by default)

HTML Color Picker and Color Wheel

noreply@blogger.com (Anonymous) — Mon, 16 Feb 2015 19:39:00 +0000

The two tools below will help you get the six digit color code i.e hexadecimal value. These tools will help you a lot in customizing your Blogger templates and for writing more appealing posts. Kindly Follow the instructions for each tool before using it.

HTML Hex Color Code Generator

First drag the bar on the "Hue" selector to the area of your desired colour palate.
Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.
The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #000000
That’s it!

Color Wheel For Choosing Matching Palate Colors

Simply paste the six digit colour code in the form below without the hash (#) sign and then hit Update
The matching colour codes will appear inside the four boxes at the right side.
You can then copy the hex values and start using them!

This tools credit goes to @2createawebsite

“All In One SEO Pack” Meta Tags for Blogger

noreply@blogger.com (Anonymous) — Mon, 16 Feb 2015 09:06:00 +0000

Search Engine Optimization (SEO) is the most important thing to learn for best blogging experience and also to apply on your blogs to be ranked. Without proper blog optimization, we can’t get impressive traffic from search engines that can help us to earn extra bucks that we are earning now and also ranking that we desire. From past few months, there is a huge increment in SEO around the pro or even newbie bloggers too. Everyone want to be fully optimized and want to compete that ranking in Google search too. In SEO, there are two category, On-Page optimization and Off-Page optimization.
So, let’s take a look on some best On-page SEO Tips for Blogspot Blogs that is meta tags and frequently asked by users that how this will help and what to add here.
The biggest disadvantage of Blogger compared with WordPress SEO capabilities is due to it’s less option to optimize your blog but in few months blogger is trying to be back with new updates too. Most of our Blogger official SEO options can be found under the Settings tab, under the Search Preferences section. On this tab, you should see the following settings:

Blog Description.
Custom Page Not Found.
Custom Redirects.
Custom Robots.txt.
Custom robots header tags.
Other options, such as Image Properties, Dynamic Description Tags and custom header tags, are located in the Post Editor.

How To Add In Blogspot?

Go To Your www.blogger.com
Open Your Desire “Blog“.
Go To “Template“.
Click “Edit HTML“.
Now Click Within Code Box.
Press ctrl + f To Search </head> Code.
Now Copy The Below Code And Paste It Before Code..
Click “Save Template” And Done.


<!-- "All In One SEO Pack" Plugin For Blogger By My Blogger World -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='en-us' name='language'/>
<meta content='USA' name='country'/>
<link href='https://plus.google.com/+moizsamadfarooq/about' rel='author'/>
<link href='https://plus.google.com/+moizsamadfarooq/posts' rel='publisher'/>
</b:if>
<!-- "All In One SEO Pack" Plugin For Blogger By My Blogger World -->

Customization:

Change Red Code With Your GooglePlus Profile ID.
Save And Done.

HTML Encoder/Decoder

noreply@blogger.com (Anonymous) — Tue, 06 Jan 2015 19:54:00 +0000

How to Use

Just add your encoded or decoded codes below

Decoded:

Encoded: (permalink)

only encode unsafe and non-ASCII characters

allow named character references in output (incompatible with older browsers)

This tool made by @mathias

How To Research On A Domain Before Purchase?

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 09:18:00 +0000

Are you doing your homework before buying new domains? When purchasing new domain names, chances are they might not exactly be 'new'. It could have been registered and abandoned by someone else before. Or worse, it could have been involved in malicious activities that could have resulted in search penalties. So how can one do prior research to check if a domain is safe before actually buying it?

Site search

First step: do a site search. Search Google for "site:yourdomain.com" (minus the quotes), and you should come across pages from that domain, provided that there's some content on it. If you can see results from that domain, including the latest content, then that domain is in great shape, and has no indexing problems.

However, be mindful of the fact that if a domain is parked, it won't usually return any result for a site search. So unless a domain name is parked, absence of results in site search can be pretty bad sign.

Name Search

Search the Google for the name of the domain itself. For example, "mybloggerworld" or "abcblog". This often helps you find out about the bad reputation (if any) of a domain. People could be talking about that domain name somewhere on the internet, or could be spamming with it. Check out what results get pulled out, and see if any of them indicates some cause for concern.

Internet Archive

If you go to archive.org, and put in a domain, it will show you what the previous versions (if any) of the site looked like. And if a site looks like it was spamming, then that is definitely reason to be more cautious, and maybe steer clear of that domain altogether. The previous owner might have burnt that domain to the ground, and you will have to do a lot of work to get it up and running again.

Buying an existing domain

If you're buying a domain from someone who currently owns it, you can ask them to let you see the Webmaster Tools console and/or the Analytics for that domain. Check for any messages from Google in GWT, and analyze Analytics trends. For example, the traffic might have risen up due to spam activity, or dropped significantly thereafter due to a penalty. You can inquire about these changing trends from the current owner.

Add SEO Meta Tags And Description To Blogger

noreply@blogger.com (Anonymous) — Sat, 03 Jan 2015 17:30:00 +0000

In this post I going to show how to add meta description and keywords to your blog. Meta tags is a important things for Search Engine Optimization. improving your search engine rank is key to success your blog. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Tips and Notes

Note: <meta> tags always goes inside the <head> element.

Note: Metadata is always passed as name/value pairs.

Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. if none of these are defined, the content attribute CANNOT be defined.

But you can take control !
You can add Meta Tags and Description to your blog. So lets see the tutorial below.

First you must copy the code below and add a meta description and meta keywords as follows:

<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='PUT BLOG DISCRIPTION HERE.' name='description'/>
<meta content='PUT, KEYWORDS, HERE, SEPERATED, BY, COMMA,' name='keywords'/>

For Example Check out my meta description and keywords.

<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='Find Blogger Widgets, Blogger Gadgets, Blogging tips, Social icons pack, cdr file, psd file, png, jpg, Plugins and Learn SEO to Optimize Your Blog.' name='description'/>
<meta content='bloggertricks, bloggerworld, makingmoney, blogging, wordpress, seo' name='keywords'/>

Now time add code to your blog.

Go to your blogger Dashboard > template > click on proceed button and find this code.

[quote]<head>[/quote]

Add the content code below <head> section and click save that’s it your done.

If you have a any question leave your comments below in comment section.

How to Add a Twitter Feeds Widget in Blogger?

noreply@blogger.com (Anonymous) — Fri, 02 Jan 2015 22:12:00 +0000

Twitter is among the most powerful and highly dominating social networking portal on earth. At MyBloggerWorld, we actively use our twitter profile for interaction, helping users to solve their Blogger related problems and does a lot discussion. Recently, we got a lot of requests from our users asking for a way that How they can add Twitter Feeds in Blogger. Luckily, Twitter itself offers a built-in widget which you can easily be added in your blogger site. In this article, we will show you How to Add Twitter Feeds Widget in Blogger?

Here will be the Live Demo

The first thing you need to do is to access the Twitter Widget page. If you are already signed in to your account, then it will show you the exact preview of the widget on your profile. There are plenty of options for customization you can adjust the size, shape, color and theme of the widget. By default, the widget automatically takes shape and adjusts its widget, so you are always in the safe hands. Once everything is done press ‘Create Widget” button and move to the next step.

To add the User timeline Feeds widget to Blogger code the widget code and go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the code inside the HTML Box. Once everything is done, press “Save” button to conclude.

Congratulations: Now you will see the widget on your site. If it does not catch any errors, then congrats the twitter feed widget is successfully added to your Blogger sidebar. However, you can also add this gadget in any part of your site, go to Post editor and give it a try.

This is not it because Twitter also offers 3 different types of Gadgets including timeline of your favorite tweets, Hashtag and search keyword. If you want to add them, then they are pretty much the same.

The perks of using Twitter recent tweets widget is not limited to just displaying the latest tweets. It also displays a follow button that allows your visitors to follow your account with just a single click. Additionally, it also allows your visitors to mention you in a tweet directly from your site.

We hope this small but usefully widget would help you in attaining some sorts of social exposure. If you have any question or query related to Twitter then, do not hesitate to leave a comment below we will try to guide you through your problems.

New Table Of Contents For Blogger

noreply@blogger.com (Anonymous) — Fri, 02 Jan 2015 21:13:00 +0000

Table Of Contents(TOC) is a very important feature which assembles your all blog posts under categories you earlier specified . It is very helpful in search engine optimisation . It helps visitors to navigate through the posts easily as it saves a lot of time for them.

You can view live demo here.

How To Create ?

We have to follow some simple steps :

Click on Pages.

Create a new page and select HTML.

Paste the code given below.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
} 
</style> 
<div id="toc"><script type="text/javascript" src="http://mybloggerworld.net/tools/MyTOC.js"></script> 
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> 
</script></div>

It's done.

[callout bg="#f3b8b8" color="#a65959" border="#f3b8b8"]You can also change colors by editing css.[/callout]

How to Create Custom Webkit Scrollbar in Blogger Blog

noreply@blogger.com (Anonymous) — Thu, 01 Jan 2015 22:40:00 +0000

Do you want to enhance the Scroll bar of your website? Scroll bar appears at the right side of the screen and, it allows users to scroll down the page whenever they drag there mouse up or down the page. To provide a user-friendly experience to your visitors, it is essential to have a Smooth Scroll bar. However, there is no doubt that Custom Scroll bar does the job quite handsomely, but it is not perfect. Few days ago, our reader informed us about the colorful Webkit Scrollbars that he has seen on different websites. Furthermore, he also requested us to develop a similar one. Therefore, in this article we will learn How to Create Customize Webkit Scrollbar in Blogger BlogSpot Blog?

What is a Scrollbar?

A Scrollbar is a GUI (graphical control element) which controls elements like text, pictures, videos and anything else available on the webpage. In other simple words, it’s a long thing bar located at the right side of your screen by which an element can be scrolled with the help of a mouse.

[quote]::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }[/quote]

Why to Use Customized Scrollbar?

There is no lethal reason why a person could say a no to Customized Scrollbar because it adds a new elegant life to his website. Consider that a person has a highly professional website but since, the Scrollbar is from old-school, so it is quite clear that, it will destroy the complete outlook of a website. To learn more about the difference between an ordinary or and a customized scrollbar consider the following screenshot.

How to Add Webkit Scrollbar in Blogger Platform?

To be honest, there is no complexity in this tutorial because all we need to do is to insert a CSS to our theme, and it would do the job quite effortlessly. To install Webkit Scrollbar in your blogger template consider the following instructions.

Go To Blogger.com >> Templates >>EDIT HTML >> Proceed.

Now in the theme Search for ]]></b:skin> and above it Paste the Following CSS Coding.

/* --- MyBloggerWorld CUSTOM WEBKIT SCROLLBAR IN BLOGGER BLOG --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #336699 10%, #336699 51%);
}
::-webkit-scrollbar-track {
}

Then Replace #336699 with the color that you want to see in the Scrollbar.

Article from MyBloggerLab

Automatically Append Reference & Copyright When Users Copy Your Content

noreply@blogger.com (Anonymous) — Wed, 31 Dec 2014 22:00:00 +0000

Are you concern about Copyright of your blog content? Well, here's a small trick that may help you. What I gonna show you is a simple jQuery plugin which automatically append reference and copyright text to any content the user is copy and pasting away from your Blog.

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Copy any text from this page and paste it into the textarea:

Installation Steps:

Go to Blogger Dashboard > Template > Edit HTML. Click anywhere inside the code area and press the ctrl+ f keys to open the Blogger search box. Type or paste inside the search box and hit Enter to find it.
Copy and Paste the following code right above </html>


<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script type='text/javascript' src='http://mybloggerworld.github.io/copyright-master/jquery.copyright.js'/>

<script type='text/javascript'>
$(document).ready(function() {
$(document).copyright({
text: "<br/>Reference: " + window.location.href,
minlength: 1
});
});
</script>

Save the Template & try copy text from your blog, then paste it to the notepad. See what you've got!!

This plugin is made by @absentik

Add to Blogger Button

noreply@blogger.com (Anonymous) — Wed, 31 Dec 2014 17:13:00 +0000

Hello friends today we will show you that how you can add add to blogger button at your blog.
Just you have to copy the below code and paste where ever you want to place it.


<form action="https://www.blogger.com/add-widget" target="blank" method="POST">
<input type="hidden" name="widget.title" value="Widget Title Here"/>
<input name="widget.content" type="hidden" value="Your HTML JavaScript code here" />
<input name="widget.template" type="hidden" value="&lt;data:content/&gt;" />
<input type="hidden" name="infoUrl" value="http://www.mybloggerworld.net/"/>
<input type="hidden" name="logoUrl" value="http://mybloggerworld.net/wp-content/uploads/2014/12/MBW-Logo-small.png"/>
<input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form>

Replace the values which you want to add in your add to blogger button.
You can also try Add to Blogger Generator

How to add percentage value to scrollbar in blogger?

noreply@blogger.com (Anonymous) — Wed, 31 Dec 2014 08:51:00 +0000

In today’s post , i will explain that how you can add/show percentage value to scrollbar in blogger blog. actually it is not important for your blog, but this is for those who want to give unique effect to scroll-bar in their blog. it may be helpful for your readers to check that how much they have scrolled down or up or how much content left to be read.

Check the preview below and follow the steps, if you want to add this right to your blog.

Preview :

How to add percentage value to scrollbar in blogger?

1. Go to blogger –> Tempalte –> Edit HTML

2. CTRL + F to find this : ]]></b:skin>

3. Copy and paste below code just above this : ]]></b:skin>

<style>
    #scroll
    {
        display: none;
        position: fixed;
        top: 0;
        right: 20px;
        z-index: 500;
        padding: 3px 8px;
        background-color: #2187e7;
        color: #fff;
        border-radius: 3px;
    }
    #scroll:after
    {
        content: ” ”;
        position: absolute;
        top: 50%;
        right: -8px;
        height: 0;
        width: 0;
        margin-top: -4px;
        border: 4px solid transparent;
        border-left-color: #2187e7;
    }
</style>

4. Next search for </head>

5. Copy and paste below code just after </head>

[quote]<div id='scroll'></div>[/quote]

Make sure you pasted the code after </head> and before <body> like this :

</head>
<div id='scroll'></div>
<body>

6. Now, again search for </body>

7. Copy and paste below code just above </body>

<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

8. Save template.

That’s it.

How to show percentage value along with the scrollbar in blogger

noreply@blogger.com (Anonymous) — Wed, 31 Dec 2014 08:50:00 +0000

How to add percentage value to scrollbar in blogger?

1. Go to blogger –> Tempalte –> Edit HTML

2. CTRL + F to find this : ]]></b:skin>

3. Copy and paste below code just above this : ]]></b:skin>

<style>
    #scroll
    {
        display: none;
        position: fixed;
        top: 0;
        right: 20px;
        z-index: 500;
        padding: 3px 8px;
        background-color: #2187e7;
        color: #fff;
        border-radius: 3px;
    }
    #scroll:after
    {
        content: ” ”;
        position: absolute;
        top: 50%;
        right: -8px;
        height: 0;
        width: 0;
        margin-top: -4px;
        border: 4px solid transparent;
        border-left-color: #2187e7;
    }
</style>

4. Next search for </head>

5. Copy and paste below code just after </head>

[quote]<div id='scroll'></div>[/quote]

Make sure you pasted the code after </head> and before <body> like this :

</head>
<div id='scroll'></div>
<body>

6. Now, again search for </body>

7. Copy and paste below code just above </body>

<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

8. Save template.

That’s it.

Add To Blogger Button Generator

noreply@blogger.com (Anonymous) — Wed, 31 Dec 2014 08:23:00 +0000

There are a lot of Famous Bloggers keep sharing their awesome Blogger tricks or widgets from time to time. Some advanced tricks involve of template modification, while beginner or intermediate tricks need only "add new gadget" in the Blogger layout console. However, even the "add new gadget" may difficult for new Bloggers to follow. Therefore, to help new Blogger for installation of new widget we will then create a "Add to Blogger" button for simplify the installation process. And this button generator, is used to aid those widget sharer to create that "Add to Blogger" button.

All you need to do is to fill up the "Widget Title", "Blog Url", "Logo Url", & your widget content in html/Javascript. Once the code is created, it's ready to be published in your Blogger post. Enjoy!

Use Dropbox To Host Your WordPress Website Images

noreply@blogger.com (Anonymous) — Wed, 31 Dec 2014 08:11:00 +0000

Dropbox is a great way to share content with the world easily. It offers hot-linking to images which is useful. Recently we talked about how hosting your media content on a faster third-party server can help you out in many ways. If you're a Dropbox user, you can use your Dropbox storage to host images from your small to medium-sized website. Today, we'll talk about using Dropbox as an external media storage for your WordPress site.

Some third-party platforms have the advantage of speed. Typical web servers might not be well suited to serve media content quickly, especially large files. So these third party platforms can take care of that.

But the biggest advantage of your own personal cloud storage is the peace of mind. You can never trust free third-party image storage websites. But Dropbox and other such cloud storages are another story. Secondly, exporting/migrating your blog is a huge hassle if there's a lot of media content as well. Third-party servers give you peace of mind during migration, because you only have to move the text content. It is faster, and much more convenient.

Hosting images on Dropbox

If you're running a WordPress blog, you can easily host your images on Dropbox.

Log into your WordPress dashboard and go to Plugins >> Add New

Search for the plugin named "Pressbox" and install it.

Go to Settings >> Pressbox

You will see a set of instructions to get a Dropbox API. Both the “Key” and “Secret” codes are needed to connect your blog to Dropbox. This step is needed to prevent unauthorized access to your Dropbox account. Follow the instructions to the letter and you’ll be just fine.

After acquiring the codes, press the “Connect your Blog to Dropbox” button and you can start using images in your Dropbox folder for your blog posts.

But why go through all that trouble if using images from the Dropbox public folder is as easy as copying and pasting the public URLs (as discussed in this article)? Well, first, Pressbox allows users to use images from any folder within your Dropbox account. Second, users don’t have to go back and forth between their blog and Dropbox account to fetch the image’s URL. Instead, you can easily add images using Pressbox’s code.

Pressbox also allows users to set their default path for a file list and favorite folders. You can use the “/Photos” folder as the default, but I’d suggest you go one folder deeper. Create another folder inside Photos and use it as the default.

If everything is set, you can easily put your blog images inside your chosen folder and add them using “[pressbox path=/Folder/imagename.extension]“. So if you want to add sunset.jpg inside the Pictures folder, you will write [pressbox path=/Pictures/sunset.jpg].

You can also browse and insert the pictures you want via the new “From Dropbox” menu in the “Add an Image” pop-up window.

The only thing you should consider if you choose to use Dropbox is the storage limit. With a 2GB storage limit for free accounts and an average 100KB image size, you can store up to 20,000 images. It’s a good idea to create a new Dropbox account specifically for this purpose.

noreply@blogger.com (Anonymous) — Fri, 19 Dec 2014 21:52:00 +0000

Creating an Hover Effect

noreply@blogger.com (Anonymous) — Fri, 19 Dec 2014 21:51:00 +0000

Creating an Hover Effect

Place the Following Code where you want to appear a hover image

<a href="URL ADDRESS"><img src="URL OF THE Non-Hover Image GOES HERE" onmouseover="this.src='URL OF Hover Image GOES HERE'" onmouseout="this.src='URL OF Non-Hover Image GOES HERE'" /></a>

Replace "URL OF THE Non-Hover Image GOES HERE"" with your non-hover img.

Replace "URL OF Hover Image GOES HERE''" with your hover img.

Replace "URL ADDRESS" with your Blogger Address

Now You are done :).

Best Ways to Earn Money

noreply@blogger.com (Anonymous) — Fri, 19 Dec 2014 21:23:00 +0000

Now a day's, where inflation is on the rise while salaries remain the same, every extra penny can be a blessing. As they say, "where there’s a will, there’s a way". Indeed, there is not one way, but many ways you can earn a few extra bucks. Many of these involve working online, meaning you can increase your income while working in the comfort of your living room. The ever rising cost of living commodities and luxuries, more and more people are finding themselves working over-time for some extra salary, looking for better jobs, working part-time to cover their expenses, and so on. Hence, people want to look for alternate or parallel sources of income.

Most of my friends would know how they can earn money online through their blogs via monetizing them. But not everyone has a blog, even though creating a blog is as easy as creating a Facebook profile. Maintaining a blog, however, is not as easy. Hence, for such people, there are various other ways through which they could earn an income.

Freelancing

Most of the people want to know about freelancing. It is basically working for someone who hires you and working for them get paid for it. Yet, this has proven to be the most popular and most paying alternative to a regular office job. In many ways, freelancing is better than regular jobs. First, you have you choose work in which you are interested. Secondly, there's a wide range of stuff you can do. Such as, You can write articles, translate papers, do programming assignments for somebody, designing, graphics, or take up large corporate projects as a team. The upside to this is that, you earn good bucks. The downside is, you have to abide by deadlines.

Freelancing is great. It's your own way of saying out to the world; hey! I am independent! I don't need a job! I have a life too! Although technically, you do have a job. But at this job, you can take a time and do whatever you want.If you want to look into this, you can try 5 Ways To Win A Job As A Freelancer For Beginner. Or take a look at the Top 10 Freelancing Tips.

Write Articles

Freelance Writing is one of the best way to make money online from home and you don’t even need a website to get started. That said, if you own a blog (or even a portfolio website) then it gives you instant credibility and a lot more exposure because you will be able to showcase your skills and your portfolio.

Basically you have got two options: either you become a freelance writer and make money when you get clients or you can make money by contributing content to other websites. First way is a little hard because it was difficult to convince a client. Contributing content to an article marketplace or to a relevant blog is somewhat easier than getting clients because you can sell your high quality content and get paid instantly.

Surfing and searching

Did you know that you can get paid to search on the internet? No kidding! Since the major search engines such as Google, Yahoo, Bing etc are monopolizing the industry, other smaller engines are left out. So to keep themselves going, they invite internet searchers to use their engines, and offer rewards in return. One such company is Swagbucks, that gives you the chance to earn up to $5 per search! It's a neat little trick and I know some people who have started doing this to earn money. Another is InteradMedia, that pays $0.001 per minute of active search. The money isn't very substantial, but what's the harm in getting a few extra bucks every now and then?

There's another alternative way! Some website pay you to surf them! SurfBounty is a good one. All you need to do is stay on that site for a few seconds to register a "surf". Sit back as the dollars add up! Sounds great huh?

Data Entry

Data Entry is another popular money earning technique used by many people. But this is a very boring way and time-intensive work. There are a lot of companies that want you to do their laborious tasks for them, without hiring a professional for the job. Usually, these tasks are simple. Entering one form of data into a form, organizing data, removing mistakes and errors, and so on.

Earn through Skype

There are many ways to earn with Skype. Firstly method is Skype Affiliates. Secondly which is uses by a teacher or professional qualified persons, they earn by teaching their students i suggest this is a good way for teacher by earning on skype. Here is only two ways, but there are many so click the link for more detail

Q&A Websites

Some Q&A websites will pay you to answer questions! Q&A websites are all about question that people ask. People ask all sorts of questions on such websites. So the websites hire people to answer those questions. So if you have a good general knowledge, why not give it a shot?

Play games to Earn

There are many sites which offers to play games and win prizes. I don’t think an average gamer is going to make a living from playing games on the web. But if you enjoy online games, it can be a great way to earn some extra cash.

Ebay

If you're looking to bring in some extra cash or maybe start a new career, selling on eBay could be the answer you're looking for. There's money to be made by becoming part of the eBay seller community. Buy products at a reasonable price, and then sell them again for a profit! This is how real estate works, except in that case, they are dealing with lands and houses and large property.

Online Survey

Looking for bucks in all the wrong places? Online surveys are a great way to pad your paycheck on your own time and with minimal effort. To find legitimate sites, go through the registration process, and become eligible to take surveys. There are many websites out there that are looking for people who would help them in their research and fill out surveys for them. Their aim is to get feedback and do market research on a product. There are website that are dedicated to finding out surveys available for you. such as globelmarket, surveyscout, superpay etc

Simple Sitemap or Table of Content

noreply@blogger.com (Anonymous) — Thu, 18 Dec 2014 10:07:00 +0000

Hello Friends, today i will show you that how to create simple sitemap or table of content for your blog.

How To Create Sitemap with List Style

Go to Blogger Dashboard

Create New Page or Post.

Click on HTML

Paste the following below code

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://www.mybloggerworld.net/2014/10/create-simple-sitemap.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSp4ENkwaqEmIgh2mSoROB86zc7dARBgXL8MUjoove4TYUnLAX81u6lDbujSwci_NZzKMpOzZAxpyla2fM1lf4DIl3Fzw8PzxXuVgqoN7npU1b4RF1e0munnEAOEEgKFeUb0bogO_ImPH4/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Click Publish.

Create Simple Sitemap or Table of Content

noreply@blogger.com (Anonymous) — Thu, 18 Dec 2014 09:52:00 +0000

Hello Friends, today i will show you that how to create simple sitemap or table of content for your blog.

How To Create Sitemap with List Style

Go to Blogger Dashboard

Create New Page or Post.

Click on HTML

Paste the following below code

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://www.mybloggerworld.net/2014/10/create-simple-sitemap.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('toc-result','blind');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSp4ENkwaqEmIgh2mSoROB86zc7dARBgXL8MUjoove4TYUnLAX81u6lDbujSwci_NZzKMpOzZAxpyla2fM1lf4DIl3Fzw8PzxXuVgqoN7npU1b4RF1e0munnEAOEEgKFeUb0bogO_ImPH4/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Click Publish.

Facebook Static Jquery Likebox With Hover

noreply@blogger.com (Anonymous) — Wed, 17 Dec 2014 22:32:00 +0000

[button link="http://demo-mybloggerworld.blogspot.com/2015/01/facebook-static-jquery-likebox-with.html" align="center"]Live Demo[/button]

Hello Friends toady we will show you that how you can add facebook static jquery hover likebox on your blogger or website.

Facebook Static Jquery Likebox with Hover

First of all go to Blogger Dashboard > Layout > Click on add widget. Then select HTML/Javascript. Now paste the following below code on it.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><style type="text/css">.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("http://mybloggerworld.net/wp-content/uploads/2014/12/md_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(md){
        md(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            md("#fbplikebox").css({left: -250, "top" : 100 })
            md("#fbplikebox").hover(function () {
                md(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                md(this).stop().animate({
                    left: -250
                }, $dur);
            });
            md("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div class="mdfbplikebox">
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div> 
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/mybloggerworlds&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowTransparency="true"></iframe><span>
By <a href="http://mybloggerworld.net">My Blogger World</a> / <a href="http://mybloggerworld.net/blogger/facebook-static-jquery-likebox-hover/">+Get This!</a>
</span>
</div>
</div>

Now replace https://www.facebook.com/mybloggerworlds with your facebook fan page url. After Changing these thing you are done.

Note: If you want to change the color of likebox replace this color code F5EBF5 with the color you want

What is an XML Sitemap? How to Create a Sitemap in WordPress?

noreply@blogger.com (Anonymous) — Tue, 16 Dec 2014 20:28:00 +0000

Back in early 2000s, government websites used to have a link on their main pages, titled “Sitemap”. This page usually contained a list of all the pages on that website. Even today some websites have such HTML sitemaps. However, sitemaps have evolved so much from the manually created HTML bulleted list. Today sitemaps are published in XML instead of HTML and their target audience is search engines and not people. If you are new to WordPress, then you are at the right place. In this article we will explain what is a sitemap, why you need a sitemap, how to create a sitemap in WordPress, and how to tell search engines about your sitemaps.

What is a WordPress XML Sitemap?

Sitemap is a list of pages on a website that is accessible to all users. An XML sitemap is a way for website owners to tell search engines about all the pages that exist on their website. WordPress XML sitemap also tells search engines which links on your website are more important than others and how frequently you update your website. While sitemaps do not boost your search rankings, it allows search engines to better crawl your website.

Why You Need an XML Sitemap

From a Search Engine Optimization (SEO) point of view sitemaps are extremely important. First we would like to clearly state that adding a sitemap does not affect search rankings. However, if there is some page on your site that is not indexed, then sitemap provide you a way to let search engines know about that page, so it can be indexed properly.

Sitemaps are very useful for new websites and blogs. As most new blogs usually don’t get many backlinks to their individual posts, it becomes harder for search engines to discover all of their posts and pages. Sitemaps allow those websites to help search engines crawl their sites more efficiently.

For popular websites, sitemaps allow your website to interact with search engines more effectively. Search engines can guess how often your site is updated, which parts of your website are more frequently updated than others, set crawl rate for your site, etc. This improves the overall visibility of your site to search engines.

How to create a Sitemap in WordPress?

There are several ways to create an XML sitemap in WordPress. At My Blogger World, we use Yoast’s WordPress SEO plugin to generate our sitemaps. We use this plugin because it allows us to optimize our blog posts along with offering other features such as sitemaps, social integration, and more. We have also noticed that it works more efficnelty than other standalone sitemap generators for WordPress. Lastly, it also offers custom sitemaps like the Video Sitemap.

To add a sitemap to your WordPress site, first thing you need to do is install and activate WordPress SEO by Yoast plugin. By default, WordPress SEO does not enable XML sitemap functionality, so you will have to turn it on. To do that go to SEO » XML Sitemaps and check the box to enable XML sitemap functionality.

When you check the box to enable XML sitemap functionality, WordPress SEO will show you a number of options that you can configure for your Sitemaps. If you are unsure about what to do with them, then ignore them and click on Save settings.

Now your sitemaps are generated and publicly accessible. WordPress SEO will show a XML Sitemap button which you can click to view your sitemap_index.xml sitemap.

How to Tell Search Engines About Sitemaps?

Search engines are quite smart in finding a sitemap. Whenever you publish new content a ping is sent to Google and Bing to inform them about changes in your sitemap. However, we recommend that you submit your sitemap to Google by using Google Webmaster tools. The benefit of this is that Google will now show you any errors, pages indexed, and other relevant stats that will be helpful to you as a webmaster.

Go to Google Webmaster Tools. If you are not already signed in to your Google account, then you will be asked to sign in. After signing in you will reach webmaster tools. There you will see “Add a site” button, click it and then add the URL of your website.

On the next screen you will be asked to verify the ownership of the website you are trying to add. There are several methods to do that. But since you are already using WordPress SEO plugin, then the easiest method for you is to copy the HTML Meta tag value and paste it in WordPress SEO plugin. To do that click on Alternate methods and then on HTML Tag. You will then see a line of HTML Meta tag code.

Copy and paste this line in a text editor like notepad. Now copy the value in the content=”” (Without copying the commas). Leave the webmaster tools site verification page open because we will come back to the page after adding the meta tag to verify the ownership of the website. Go to your WordPress admin area and then click on SEO tab. This will take you to WordPress SEO plugin’s dashboard. Scroll down, and you will see Webmaster Tools heading. Paste the meta tag value you copied next to Google Webmaster tools and Save Settings.

Go back to Google webmaster tools, site verification screen and press the verify button. You will see a notice like “Congratulations you have successfully verified your ownership of www.yoursite.com”. Click continue to see webmaster tools dashboard for your site.

On the next screen you will see Sitemaps column with no sitemaps in it. Clicking on it will take you to a Sitemaps page where you can add your sitemaps. Click on the red button labeled “Add/Test Sitemap” and provide the URL of your sitemap.

Yoasts WordPress SEO plugin publishes multiple sitemaps for your WordPress site. The main sitemap is sitemap_index.xml which contains link to your other sitemaps. You can either submit sitemap_index.xml alone or submit all other sitemaps one by one. We recommend submitting sitemap_index.xml alone, Google will then automatically discover other sitemaps and crawl them.

Once you have successfully added your sitemap, it will appear as pending. It will take Google sometime to crawl your website. After a while you would be able to see some stats about your sitemap. It will show you the number of links it found in your sitemap, how many of them got indexed, a ratio of images and web pages, etc.

Visit Google Webmaster tools often, at least once a month. As your site gets older you will start seeing more and more useful data about your website and how it is seen by the search engine. This information can help you learn how well your site is doing and what other things you can do to improve its performance in search engines.

We hope that it answered all the related questions like what is an XML sitemap, what are the benefits of a sitemap, how to create a sitemap in WordPress, and more. If you have any questions, or noticed that we missed something, then please leave a comment below.