Facebook Like Box with Hover Effect for Blogger

Before explaining this tutorial i would like to say thanks to all our readers for your support and contributions since last 2 years, Thanks also to everyone who has helped this blog in other ways, with suggestions, technical support, information and many other things. Now come up to tutorial, In our previous post we will teach you about how to add Facebook like box into blogger blog and today now we are sharing another 2 Facebook Subscription widget for blogger or website.  Here I have added as the box with simple jQuery hover effect. Lets see below tutorial to add them into your blog or website.

Facebook Like Box with jQuery Hover Effect

Adding Static Facebook Pop Out Like Box Widget To Blogger layout...Now let's start adding it. Just follow below producer.


  1. Login to your Blogger Account.
  2. Click Layout > Add A Gadget.
  3. Select HTML/Javascript
  4. Then Paste The Following Code In content Box from one of code given below.

(Style I) Static Facebook Pop Out Like Box with Hover Effect

 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
img, a { border: 0; }
#on { visibility: visible; }
#off { visibility: hidden; }
#facebook_div { width: 196px;
height: 340px;
overflow: hidden; }
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px; }
#facebook_right img {
position: absolute;
top: -2px;
left: -35px; }
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px; }
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px; }
#facebook_left img {
position: absolute;
top: -2px;
right: -35px; }
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px; }
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () {
jQuery("#facebook_right")
.stop(true, false) .animate({ right: -200 }, 500); });
});
</script> <br /> <div id="on"> <a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="Indian Education Blog"><img src="http://img1.blogblog.com/img/blank.gif" alt="Indian Education Blog" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><div id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4cqzWm_munWaNSCaLbz20bebIaIDu9FscvTToLsHzeMJNCEHY6p42CkRXxtQvYP5Iuh1f-6McyTAr2h1gwpHYAaKB032e-Bc12T_aB0IzqdEiNeWcFgOa-OtcVDncNmmw-CPaKgrXO6p/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/ThingsGuide/281417998619583&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none;
height: 346px;
overflow: hidden;
width: 200px;">
</iframe>
</div>
</div></div>

Before adding these code please replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.

(Style II) Facebook Stylish Popup Widget with Lightbox Effect

 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bRlu0MrzbvTi08gOtkp0nphhgOEu2bsuEd9BOKsxO_9JoYvOqOglqVYBmMgq4PyrM1KTxtRfnpXl-u4DqRCK7gBAGlBZ0sfdXZNVf8hK-Dc1t3DGawZvS004Rg2by9z8WdtQLHhZQYF_/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style> <script type="text/javascript"> //<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
//]]> </script><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <script type="text/javascript"> jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
</center>
</div>
</div>

Before adding these code please replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.

Customization: These widget only shows up the first time the user visits your page. If you would like the Facebook box to popup everytime the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

If you are facing any error during adding above widgets into your blog or website then please leave your comment below, we will catch you back as soon as possible.

Stop Your Image Stealing Using Jquery

Consider, you are working hard in creating images for your webpage and someone just copy and paste on their webpage without any credit or appreciation, then how would you like to feel? In today's post, here is a important trick for every blogger or webmaster to stop your Image stealing. You just have to put a little piece of code in your template which will prevent users to copy Images from your web page.

Stop Your Image Stealing Using Jquery

How To Stop Your Image Stealing ?


  • Go to Your Blogger Dashboard > Template > Edit HTML.
  • Take a backup of your template.
  • Now find for <head> in your template
  • Add below code just above/before <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note - If your blog have already a jquery plugin then ignore this step.

  • Now again find </head>
  • And add below code just above/before </head>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSs99ysC5QivdXS4wMIdmGcPANfDKWGiDmPDLij4YG3mI4k-FerMG31yb6VjhTX1rLSTHFQ2MnRvMjzDvm8wXkwg3Ql2y7fIu8UEBfGgcnE4KUlVWVempW7qTSxAws6daIcHhI18fQqq6C/s1600/Stealing-Detected.png" alt="Things-Guide Stealing Detected" style="margin-left: -212px; opacity: 0; position: relative; top: 0;" />");
});
//]]>
</script>

I hope this small trick will surely help you to prevent your Images from republishing on other websites.

How to Embed PDF, DOC, XLS Files Into Blogger

Hello friends, Due to my exam i was unable to post a single post, So I'm really sorry for this. In today's post I will tell you how you can embed PDF, DOC, or XLS files into blogger blog. This post is also described How to show PDF, DOC or XLS files on blogger without using third party or services. Blogger is a free blogging platform by Google and there are some limits, you cannot upload pdf, doc, xls files directly. So before we used third party websites or hosting services to embed these files. But now you don't need to go to third party websites, you can embed  your PDF, DOC or XLS files using Google Drive, Google drive is a free cloud storage service by Google. So, without wasting a time let's come to the tutorial.



How to Embed PDF, DOC, XLS Files Into Blogger post

How to Show PDF, DOC, XLS files on Blogger 


  • At first, Go to the drive.google.com and login with your existing account or create a new one.
  • Now upload your PDF, DOC or XLS file, After upload completed click on the uploaded file link. It opens in new tab


  • In the new tab click on share and change the properties of sharing 'Private' to 'Public' or 'Anyone with the link'.


  • Now, go to File > Embed (this PDF file) in menu bar.


  • Now, Embed code will pops-up just copy that code and paste it on Edit HTML mode in blogger post editor.


I hope this tutorial will surely help you. If you have any questions or problem let me know.

» Awesome Facebook Like Box with Hover Effect for Blogger

iPhone 5 Technical Review

As on schedule, Apple launched iPhone 5 in india with featuring a faster processor, bigger display and many of other upgrades. Apple products always been a little pricier in indian market compared to top competitor, Pricing starts from 45,500 for 16GB model, 52,500 for 32GB model and 59,500 for 64GB model.


The new iPhone comes with bigger 4 inch display which is biggest of compared to earlier versions of iPhone, iPhone 5 has a dual core A6 processor which is one of the fastest compared to others.

Take a look of iPhone 5 technical specification


Network type:
2G Network - GSM 850 / 900 / 1800 / 1900 - GSM A1428 CDMA 800 / 1900 / 2100 - CDMA A1429
3G Network - HSDPA 850 / 900 / 1900 / 2100 - GSM A1428 CDMA2000 1xEV-DO - CDMA A1429
4G Network - LTE 700 MHz Class 17 / 1700 / 2100 - GSM A1428 or LTE 850 / 1800 / 2100 - GSM A1429 LTE 700 / 850 / 1800 / 1900 / 2100 - CDMA A1429

Size:
123.8 x 58.6 x 7.6 mm
Weight - 112 g

Battery:
Lithium-ion battery
Talk time: Up to 8 hours on 3G
Standby time: Up to 225 h
Video playback: Up to 10 h
Audio playback: Up to 40 h

Memory:
16GB, 32GB, 64GB

Display:
Retina display
4-inch (diagonal) widescreen Multi-Touch display
1136-by-640-pixel resolution at 326 ppi

Sound:
Audio formats supported: AAC (8 to 320 Kbps), Protected AAC (from iTunes Store), HE-AAC, MP3 (8 to 320 Kbps), MP3 VBR, Audible (formats 2, 3, 4, Audible Enhanced Audio, AAX, and AAX+), Apple Lossless, AIFF, and WAV

Camera:
8 MP, 3264x2448 pixels, autofocus, LED flash
Video - 1080p@30fps, LED video light, video stabilization
Front  - 1.2MP photos and HD video (720p) up to 30 fps

Connectivity:
Wi-Fi 802.11 a/b/g/n, dual-band, Wi-Fi hotspot
Bluetooth 4.0
USB v2.0

Apple iPhone 5

Posted by Unknown
Tag :

Is Your System ready for Windows 8 ?

Finally Windows released their most awaited operating system Windows 8 last week. I'm sure many of Windows users confused on a question to upgrade their previous version of Windows or not and how they can prepare their system for this newest edition of Window.

Is my system Windows 8 ready?

Is Your System Windows 8 ready ?


While upgrading the new operating system primary worry is about hardware that will be compatible with the new operating system or not ? and the answer is pretty simple, If your system has been running well on Windows 7 then it is compatible with Windows 8 too. that means Windows 8 required no major hardware change for those using.

Windows 8 run on the same hardware that works fine with Windows 7

Processor : 1 GHz or Faster
RAM : 1 Gigabyte (32-bit) or 2 Gigabyte (64-bit)
Hard disk space : 16 GB (32-bit) or 20 GB (64-bit)
Graphic Card : Microsoft DirectX9 graphic device with WDDM driver

Connected Devices and Programs


To solve certain issues, Windows provide Windows 8 Upgrade Assistant. before upgrading your oprating system download and run it. The program will automatically scan your hardware, installed programs and connected devices to make sure they will work with Windows 8 or not,
  • It will ask you which apps are compatible and which apps you need to review.
  • Windows 8 comes with lot of new features like secure boot, snap, fast start-up etc. upgrade assistant notify you if any of those items are not supported by your system.
  • In Windows 8 Microsoft Security Essentials is being replaced by Windows Defender, So you need to remove it before upgrading.
  • To play DVDs in Windows 8 you might need to install Windows Media Center or install a third party app. because Windows 8 does not include in-built feature to play DVDs.
After finished the above steps click on "Next", Now upgrade assistant asked what you would like to keep upgrade or not ?


Windows 8 comes with lot of major facilities. The look and feel is new something that we aren't accustomed to see on PC's, So enjoy this newest OS by Windows.
Posted by Unknown

Enable Autoplay for YouTube Embedded videos

As you all know that Youtube is world's most popular video sharing website, Over 3 billion videos watched every single day on Youtube, Every internet user knows what is Youtube due to it's popularity. when we want to produce a useful guide or trying to promote any product or services on our blog or website then YouTube is first name which comes in our mind.

Auto-play feature for YouTube embedded video

YouTube Auto-play


YouTube introduce autoplay feature for embedded videos, With this feature Youtube eliminated the need for third party plugin.


If you are trying to produce promotional or introductory video, you might be looking for a way to autoplay video as and when visitors land on your pages instead of asking them to click and start the video. If you think autoplay would be the right choice for you then have a look below procedure,

Turn Auto-play ON


1. First off, grab your embedded video code.
2. you would just add the parameter at the end of the Youtube URL. Start with the “?” symbol to indicate you are adding parameter.

For example one embedded code displayed below,

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/V3oJR5IAMxM” frameborder=”0″ allowfullscreen></iframe>

Now you need to do to enable autoplay is to add the parameter “?autoplay=1″ to the end of the video URL in the embed code

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/V3oJR5IAMxM?autoplay=1” frameborder=”0″ allowfullscreen></iframe>

Now Youtube video will start autoplay without waiting for user response.

Note - Don't apply autoplay on multiple videos on same pages.
Posted by Unknown

Recover Deleted Data Using Wise Data Recovery 3.18.170

Hi friends, Have you lost your private data by formatting or have you ever deleted useful files like image, music, videos or document by mistake then this guide is for you, to manage this issue there is two options.
  1. Restore system point.
  2. Recover your data by data recovery software.
Unfortunately first option is not enough because using this method you can only able to recover your system files, This article focuses second method - Recover your files by data recovery software

In this post I'm telling about wise data recovery, Wise data recovery 3.18.170 is a powerful data recovery tool can easily recover your deleted files. It is totaly free of charge, Recover documents such as word, excel, txt etc. reprocess photo/image such as jpg, png, gif etc. recover e-mail files specified as .eml etc.

See also :
Posted by Unknown

Recommended Posts

- © ThingsGuide - Neighbour JobsMag.In - Powered by Blogger -