How To Disable Right click on Blogger Blog

How To Disable Right click on Blogger Blog

Hello Friends ! My Name is Mehwish Hayat and today i wanna telling you "How To Disable Right Click on Blogger Blog", If you Want to Disable Mouse Right Click Button on Blogger Blog?. So this is a tutorial about how to add mouse right click Disable script to your blog ( protect your work to be get copied by some copycats ). Everyone wants his/her work to be protected by thief so I thought of sharing this......!

You guys have may notices that some sites don’t allow their users to copy their content from that web page. They dont allow their users to use Mouse Right Click Button, this is what they have done they just Disable Right Click in Blogger Blog so that copycats cant copy their content. This not only disables the right click but helps you to protect your work, your content from some sort of thiefs or copy-cats.

So today in this article I decided to share my views on Disable Mouse Right Click Button on Blogger Blog, we are sharing the latest and updated javascript that will protect your work from copycats..

How To Disable Mouse Right click on Blogger Blog

• Step #1 

Go to Blogger dashboard –> Layout –> Add a gadget.

• Step #2

Choose Html/JavaScript gadget and paste the following peace of code just inside it.

Right click disabling JavaScript code

/*www.sayyadgraphic1.blogspot.com*/<script language=JavaScript><!–//Disable right mouse click Scriptvar message=”Function Disabled!”;///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}}function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}document.oncontextmenu=new Function(“alert(message);return false”)// –></script>

• Step #3

Save the gadget.

• Step #4

Save the layout.

Enjoy ......................! and Share with Your Sweet Friendz ........!

How to Add a Facebook Page Popup box Plugin in Blogger

How to Add a Facebook Page Popup Footer box Plugin in Blogger

Recently, one of our user asked us about how to add a Facebook Page popup footer box in Blogger. Therefore, we decided to develop a plugin for Facebook Page that only appears when you scroll to the end of a web page. It is a smart way of increasing your Facebook likes and building a strong fan base. Today in this article, we will show you how to add Facebook Page popup footer box plugin in blogger.

What is Facebook Page Popup Footer Box?

It provides a good way to get user friendly attention for your Facebook Fan page. It does not interrupts the user friendly experience and does not distract the user while browsing. 

When a user reaches the very end of a webpage, the scrolling Facebook Page popup box appears on the bottom right of the screen. Users have the freedom to either keep the scrolling popup footer box or they can close it using the cross (X) icon.
Before we get on to the tutorial, you can check the demo of this widget here.

How to Add Facebook Page Popup Footer Box in Blogger :

The very first thing you need to do is to go to Blogger >> Template >> Edit HTML. In the template codes, search for the ending </body> tag. After finding </body>, just above it paste the following piece of code:

<link href="http://mybloggerlab.com/StyleSheet/MBL_FBPOP.css" rel="stylesheet" /><script src="http://mybloggerlab.com/Scripts/MBL_FBPOP.js"></script><script type="text/javascript">$('body').popscroll({ channel:'https://www.facebook.com/sayyadgraphic', msg:'Become our FAN', bgcolor:'#89B399', textcolor:'#ffffff', triggerpoint:6000, network: 'facebook', fb_hide_cover : false, fb_show_posts : false,});</script>

Now, you need to customize the widget according to your needs. Just follow the below instructions and make changes to the above code:

1. Replace https://www.facebook.com/sayyadgraphic with your Facebook Page URL.
2. Replace #89B399 with any other color that you want to see as background of this widget.
3. Replace #ffffff with any other color that you want to see as the text color of this widget.If you have coding knowledge, then you can customize it even further but for a no-technical person the above customization are pretty much it.

Now after customizing the widget, save the template by pressing "Save Template" button located at the top of your screen.

We hope this tutorial have helped you in learning "how to add a Facebook page popup footer box plugin in blogger". Let us know what do you think about this new unique widget in the comments below. 

How to Add a Full Screen Search Overlay in Blogger

How to Add a Full Screen Search Overlay in Blogger

Why to add Full Screen Search Overlay?

The full screens search is becoming one of the significant parts of a website. With an increase in the number of mobile users, people are slowly inching towards full screen search as it dramatically improves the searching experience of mobile users. Since, mobiles are happen to be small in size, adding a full screen search would make it easier to type and search your website.


On the other hand, it makes searching simpler and interesting as it provides a pleasing interface to users.

For those who are still not sure about full screen search, they can go to this demo site, to see it in live action.

Installing Full Screen Search Overlay in Blogger:

The very first thing you need to do is to go to Blogger >> Template >> Edit HTML. Now in the blogger template editor, look for the ]]></b:skin> tag and just above it paste the following CSS Code.

/*===www.sayyadgraphic1.blogspot.com===*/.dialog-box button[type="submit"] { margin-top: 20px; padding: 0.8em 2em; background-color: #10b765; color: #fff; border: none; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.dialog-box input[type="text"] { padding: 0 20px; font-size: 13px; letter-spacing: 0.1em; color: #888; height: 50px; line-height: 1; background-color: #fff; border: 1px solid #ddd; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-sizing: border-box; width: 100%;}.dialog-box h2 { margin: 0; font-weight: 400; font-size: 24px; padding: 32px 0 25px; text-transform: uppercase;}.dialog-box { max-width: 520px; min-width: 290px; background: #fff; padding: 20px; text-align: center; position: relative; z-index: 5; margin: auto;}.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(55, 58, 71, 0.9); }.overlay .overlay-close { width: 30px; height: 29px; position: absolute; right: 0px; top: 0px; border: none; background: #10B765; float: left; color: #fff; outline: none; z-index: 100;}.overlay .dialog-inner{ text-align: center; position: relative; top: 50%; height: 60%; -webkit-transform: translateY(-50%); transform: translateY(-30%);}
.overlay-mbl { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; z-index:100;}.overlay-mbl.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;}.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover { background: #212121;}
#trigger-overlay { cursor: pointer; float: left;}#trigger-overlay { background: #10b765; color: #fff; padding: 10px;}#trigger-overlay a { color: #fff; text-decoration:none;}#trigger-overlay:hover { background: #111;}

If you are good with CSS, you can always customize the CSS codes as per your needs to suite your template design and color scheme.

Now we need to install jQuery files of Full screen search. In the template code, look for the</body> tag and just above it paste the following jQuery files.

<script src="http://mybloggerlab.com/Scripts/modernizr.custom.js"></script> <script src="http://mybloggerlab.com/Scripts/fullscreen_search.js"></script>

Now after adding the CSS and jQuery files, we need to add the full screen search HTML code that will appear upon clicking the search button. Search for <body> and just below it paste the following code.

<div class="overlay overlay-mbl"><div class="dialog-inner"><div class="dialog-box"><h2>Enter your keyword</h2><form method="get" action='/search' class="search-popup-inner"><input type="text" name="q" onblur='if (this.value == &#39;&#39;) {this.value = &#39;Search the site&#39;;}' onfocus='if (this.value == &#39;Search the site&#39;) {this.value = &#39;&#39;;}' value='Search the site' /><button type="submit">Search</button></form><div><button type="button" class="overlay-close">X</button></div></div></div></div>

Adding Full Screen Search Overlay in Blogger:

After adding the both CSS and jQuery files, you are almost done with adding a full screen search in blogger. However, you need to display a search icon, link or button that upon clicking opens up the search box and covers the entire screen.It’s up to you where you would like to place the search icon, you can add it anywhere as per your template design. To add the search icon in the sidebar of your blogger site, go to Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following search button HTML code in the HTML text area

<div id="trigger-overlay" ><a><i class="fa fa-search"></i> SEARCH</div>

Once everything is done, save your widget. Now go to your site and enjoy the new way of searching your site.
We hope this tutorial may have helped you in learning how to add full screen search overlay in blogger. If you have any suggestions about this plugin, please write back to us through Facebook, Google+ or comment below.

Recent Comments Widget for Blogger

Awesome Recent Comments Widget for Blogger, Feed Comments

Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your blog visitors and followers. By default Blogger added commenting System to Blogger blogs. Recent Comments Widget will inspire your blog visitors to post a comment on your Blog. If you don't like to read full about this widget or Are you hurry to add this widget to you blog go to "How to add Recent Comments Widget to Blogger Blog".
There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System.
The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment.
The Recent Comment Widget shows the Commentators name with Profile link followed by the Post nameand followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes. This Widget was coded using JavaScript and you can also change the style of Widget according to your template.

• How To Add Recent Comments Widget?

• Sign In to Blogger Dashboard
• Select Layout -> Click on Add a Gadget
• Take HTML/Javascript from the list
• Give the Title and Copy the below code to it and Save

<script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_netoopsblog_min.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://sayyadgraphic1.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><a style="display:none" href=http://sayyadgraphic1.blogspot.com>Recent Comments Widget</a><style type=text/css>.rcw-comments a {text-transform: capitalize;}.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}</style>

• Change the RED highlighted with your blog nameIf you want different Styles for this Widget, Please visit again I will post soon.

Another Way To Add Recent Comments Widget

• Go to Layout -> Click on Add a Gadget
• Select Feed from the list and give the following URL

http://sayyadgraphic1.blogspot.com/feeds/comments/default

• Change the RED marked portion with your Blog URLA Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name etc.. Using this method you have only limited options.
• Click Save
  Congratulations you have done.
  I hope this article will help you and you enjoyed this article if so, Please Like and Share .

10 Beautifull Label Widget For Blogger Template

Add CSS Coustom Label Widget In Blogger Template

Label widget is very useful for easy navigation. We all knows Blogger default label widget is not eye-catching, for this reason I have created some unique cloud label widget with is very attractive and obviously your Blog visitors will love it. I have used pure CSS code so it won't hamper the loading time of your Blog. On the other hand, its stylish look can grab the attention of visitors. For adding this widget please follow the simple steps from below-

• Step 1  : Log in to your Blogger account and Go to your Blogger Dashboard
• Step 2 : Go to your Layout tab.
• Step 3 : Click on "Add a Widget" then select "Label" Widget (Select Cloud Style).

• Step 4 : Click on -> Template -> Edit HTML
• Step 5 : Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
• Step 6 : Copy any code from below and Paste the code above/before </b:skin> 

• Design 1

/* cloud label by www.sayyadgraphic1.blogspot.com*/.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {background:#333333;}.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;}.label-size {line-height:1.2}

• Design 2

/* cloud label by www.sayyadgraphic1.blogspot.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {border-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {border-radius:30px;background:#333333;}.label-count {white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;}.label-size {line-height:1.2}

• Design 3

/* cloud label by www.sayyadgraphic1.blogspot.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {border:5px dashed #000000;border-bottom-right-radius: 30px;border-top-left-radius: 30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {border:5px dashed #FA0830;background:#000000;}.label-count {white-space:nowrap;border-bottom-right-radius: 30px;border-top-left-radius: 30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2}

• Design 4

/* cloud label by www.sayyadgraphic1.blogspot.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border: 8px inset #0572F8;
background:#0572F8;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}

•  Design 5

/* cloud label by www.bloggerspice.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {background:#08A2FA;border-radius: 30px;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {background:#000000;}.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2}

 Step 7 : Finally hit the Save template button.

Customization To change the label color just change color code only from code block. You can avail the different color from  Color Picker. 
Check your Blog now to see the beautiful CSS label widget. I hope this new CSS custom Label will love everybody. And this will slightly help to bring some variation on your Blogger template. For more exciting staff keep in touch.

Facebook Groups List For Traffic Bringing to Blog

• Facebook Groups List For Traffic Bringing to Blog

hi this is Sayyad Miskeen . And today i want to share Some "Facebook Grooupe List For Traffic Bringing To Blog ".We know that Facebook has risen after 2004 and It has become the best ever source of traffic to the sites. This Facebook Groups List is one in which there are Millions of members in each groups It took long time to find these groups but finally I have done it.

• Facebook Public Groups List

These groups sometimes allow you to post directly and some times they approve it to be posted so do not disconnect from these groups and try at different times to post there. Nevertheless, you can comment in each post of group.

• Suchi Yari Jan Se Pyari
• Sheikh waqar ~ The Voice Of Hearts
• Computer And Hacking Trick
• Meri Kiran
• My heart smiles when u r with me 
• Sir ap larkio ko to kuch bolty nahi.
• Teri Galiyan
• Meri AshQi Tum Say Hai
• Aashiqui
• Aj phir tum pe pyar aya hai
• You are my favorite mistake
• Karachi Karachi Hai..(Once Again)
• Suno Tum Mar Jao Na
• Choice Between Groups and Pages

No doubt if you have a page on Facebook and you have about 200,000 likes on it then it's the best source as compared to groups but If you cannot get such number of likes then groups are the second best choice.

How to Download Facebook Videos Faster Without Software

The difference between group and page is the in groups everyone may be allowed to post in the groups and there are types of groups such as Secret, Closed and Public groups whereas there in no such option in pages. 

In groups you can add anyone you will but on pages you can not take likes until the user does not want him or herself. In groups certain discussions may be made whereas in pages no such kind of option is availed.