How to Make a Facebook Like Box Floating On Blogspot

MyBacklink86 - Want to get a number like (love) your blog's facebook page for more? There are many ways, one of which put widgets like box provided by facebook plugin with a model drift (float). Do not worry this widget will disturb your blog loyal readers, because although there hovering close button to remove the widget box like that.

Facebook like box widget if installed in blogs, facebook pages to promote. If you like our blog, readers will not hesitate to click like (love). Occasionally to certain pirode we can install the widget facebook like box to float this on the blog so like (love) amount, as well as with a visit to our blog facebook page.

How to Make a Floating Widget Facebook Like Box Blog
1. Log into blog account
2. Select Layout and then Add a Gadget
3. Choose HTML / JavaScript
4. Enter the following HTML code:

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:35%;
margin:0px 0px 0px -182px;
width:625px;
height:auto;
padding:5px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
YOUR CODE HERE
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>

5. Replace YOUR CODE HERE with the your code Facebook page.

6. Save when done.

Just like managing a blog, managing facebook pages should also be creative. Remember, content is king, do not just put on the facebook page to post your blog feed. Provide interesting information in accordance with the theme of your blog content.

LEARN MORE

How To Create Random Post with Thumbnail

My Backlink - It is not too difficult . There are so many bloggers that put a variety of widgets on the blog . However, these widgets less effect or benefit that was in progress blog .

Quality blogs are also seen on the display widgets installed . One of the widgets that are widely used by many bloggers is a random post widget , be it an ordinary random post or any random post that comes with a thumbnail or image .

Random Post

Random post or often called the article " Random " is a widget that displays posts / articles of our blog articles at random either newly created or that have a very long article , so that your older articles can be re- read by visitors to the blog .

Of course this is very advantageous , because the random post pageviews on each article of this blog can be increased from the previous siblings . And the effect that can be fairly large in improving the quality of your blog .


How To Install Random Post Along with Thumbnails

Similarly, the line can be fitted Post pictures , random post I will share this time also I have modified the image so that it will enhance your appearance . Not only that , in my random post this time also there is a summary postinganya which can make the visitors interested to read it .

For you who are interested in this random post widget installed , please follow the simple steps below :

1 . Login with your blog account
2 . Go to the menu LAYOUT
3 . Click add a gadget - > select HTML / Javascript
4 . Put the script below :

<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #686868;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary=120; //The number of posts displayed characters
var numofpost=5; //The number of posts shown
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"
if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);>
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"
type="text/javascript">
</script>

float: left !important; width:60px;height:60px; : Set the width and height of the image / thumbnail on random post later.
var lengthsummary= : Number of Post you want to display.
var numofpost= : The number of characters / letters in the summary that you want displayed.

5. Click save.

How? Easy is not making random posts along with a thumbnail.

LEARN MORE

Image Optimization Tips Articles in Blog For SEO

It is very rarely done by many bloggers , not to mention my own . Although I suggest to you all to do this optimization , I was actually still very rare and lazy for this SEO Optimization Techniques .

But there are still a lot of optimization - optimization we have to do on our blog , such as optimization of the comment articles and the most important is to do optimization on your blog as a whole . By optimizing the images on your blog , hopefully can increase your blog traffic .

Here are some very important tips to optimize your images before uploading into the blog post . These tips will increase your blog's SEO .


1 . Use Keywords In Name Image
Do you ever download an image to your input into the article ? if yes then you need a little change in the name of the image that you have downloaded earlier . Why ? because the picture has a strange name or very long and not clearly less favored by the crawler .

So from now start to change the name of the image you want to upload to the keyword / keywords that are often searched , but must comply with the content of posts as well . For example , if I download pictures from my internet is always changing her name with keywords like Tutorial - Blog.jpg .

2 . Hyphen in the Name Image or Image
Remember when naming your images with your keywords , do not use a blank space or an underscore ( _ ) in between them . Always use hyphens to separate the keywords as I have done in the first instance . Because when using the empty space you will automatically be converted to ' % 20 ' that has no meaning . In the results of web crawlers find it difficult to understand the image . Hyphen is always a better option to optimize the image .

Example : ( image_seo.png ) instead of ( image seo.png )


3 . Use the Best Format
There are a lot of format or file type for images such as JPG , PNG, GIF and so forth . However, you should always use the best format for the web . One is the JPG format , image format JPG format is most preferred because it has less memory size compared to other formats .


4 . Compress Image Size
By doing compress the images to be uploaded , then you have to reduce the size of the image heavy . You can also compress the size of the weight of your image in Photoshop , to compress your pictures in photoshop go to file menu and click save for web . This will reduce the size of the image and still maintain image quality .

Yahoomush and Compresspng is a free online tool that gives you the freedom to compress the image you want to upload . Yahoomush or Compresspng can help improve your blog loading speed and reduce the bounce rate of your blog .

5 . Width and Length Picture
If you upload the image to the post must not upload it, but note also the position and also the size of the width or length of the image . If you already give exact dimensions of the image , it will be easier for web crawlers to explore your content . You can specify the length of the image manually or automatically.


6 . Same Url For The Same Picture
Never upload the same image on your blog . Because usually the same image will have a different image url . So make it a habit if you will give the same picture on a different article , select the option From a URL on the Insert Image menu . Then masukanlah url of your image first so that web crawlers are not confused in tracing your content .

So basically if you are going to upload a picture make sure each image has the same image the same url as well . It can also help you in for a bit of speed up load time ( loading ) of your page so visitors do not run away when going to open your blog page .


7 . Title Tags and Alt Tags
The title tags and Alt tags serve as a conduit of information to your images . Web crawlers can not read images . They can only read image names , titles and Alt Choose the best keywords to provide title and alt tags for your images . To use this tag see example below

<img src="Image URL" title="Keyword" alt="Keyword"/>

As well as determining the width and length of the image , giving the title tags and alt tags could you do automatically or manually simple and rarely is usually done by many bloggers .

To automatically you just need to do a left-click on the image and then select the Properties option , and then enter the title tags and alt tags in the field provided . But do not give too much too keywords in these tags , simply enter a keyword that describes the topic of your post .

So also to determine the size of the image automatically at length , here you just need to choose the size of the image you want to use . namely , Original Size to size of the original image , small to small size , medium to medium-size , large to large , and X - Large to super large size .

For his Manually maybe I will not discuss now because there is no longer or rarely bloggers who provide alt tags and title tags as well as determining the length of the width of the image manually . Because bloggers today can not wait to publish quality articles that they have written , so there is no more time to do the title and alt tags manually .

Hopefully this article useful to you .

LEARN MORE

How to disable Ctrl U, Ctrl A, Ctrl C, and Disable Right Click on Blog

Live Demo Here
This is a highly accurate way to keep the blog posts of people who like Copy-Paste and then post the article back on their blogs.

How to use in your blog:
1. Login to Dashboard blog
2. Go to Template ►► Edit HTML
3. Find <body> code (press Ctrl + F to facilitate the search)
4. Replace <body> code with the code below:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'> 

5. Save Template

► oncontextmenu = 'return false;' (To turn off the right click function)
► onkeydown = 'return false;' (To turn off the CTRL + A and CTRL + U)
► onmousedown = "return false;" (To turn off the function block in the article)
► 'Return false;' (To enable each function in Java script, if you want to disable one replace it with a 'return true;')

LEARN MORE

How to create an ad floated left and right blogs

MyBacklink86 - How to Make Floating Ads in addition to Left and Right on the blog, This is very suitable for the 2 columns tempalate sidebarnya no size 120x600 and 160x600, as an example please see the image above or view the homepage of this blog. For those of you who want to make an Ad Hovering samipng Left and Right on the blog, here are the steps:


1. Log in to your Blogger Dashboard
2. Click Design ►► Edit HTML
3. Find this code ]]></b:skin>
4. Put the following code before the code ]]></b:skin>

#adslayoutleft {
position:fixed; 
top:0%; 
margin-left:-150px; 
float:right;
background-color:#;
z-index:10;
}
#adslayoutleft .idblogmaker {
float:left;
clear:both;
} 
#adslayoutleftright {
float:right;
position:fixed;
top:0%;
margin-left:974px;
z-index:10;
background-color:#;
}
#adslayoutleftright.idblogmakercom {
float:left;
clear:both;
}

Yellow (margin-left and margin-right) paper is to limit the distance Ads Tempalte your blog.

5. Then click Page Elements ►► Add Gadget ► HTML / javasript

Enter the code below to add Gadgets ►► HTML / javasript

<div id='adslayoutleft'><div class='idblogmaker'>
Code Your Ad Here
</div></div>

<div id='adslayoutleftright'><div class='idblogmakercom'>
Code Your Ad Here
</div></div>

6.Save Template

LEARN MORE