Most of people facing problem with previous facebook pop up like box widget so I'm gonna post to "New Mini Facebook Pop Up Light Like Box Widget for Blogger ".It's very fast loading and light widget box. This widget Box easily customise and use into blogger blog.

This rules triggers when PageSpeed Insights detects that the size of one of your resources could be reduced through minification.

Improve traffic to your site by encouraging readers to leave comments on your blog. And what better way to motivate them to comment than to have their names displayed on your blog. Top Commentators widget will display the list of people who commented the most. Each name is linked to the commentator’s Blogger profile or web site.

Top Commentators Blogger Widget

Sobtware is a free css and javascript template for those who want to create there website for a software downloading purpose.

Click To Preview

Name : Sobtware Website Template
Version: 2.0.1
Creator: Bhaskar Saini Aludiya
Description: A Free responsive software website template.
Publisher : www.digitalhubinc.com/
Release date : November 2013

Download Now Demo

What is Auto Read More Script?

Mainly Auto Read More Script use for create blog post summary with thumbnail.Expandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”.

Why should you use this script?
It's optimize your blog performance.
Increase SEO [Search Engine Optimization].
Decrease page Load time.

How it's work and features?

It's automatically set first image of your blog post and create summary from your post (according to set no. of word in your auto read more script ).
Float your image left or right both.
Add default thumbnail image when posts don’t have any images.
Option to turn off auto readmore for some first posts.
Option to turn on/off auto readmore for homepage and label page.

How to install Auto Read More Script-

• First go to Blogger Dash Board>>Template>>Edit HTML
• After find the </head> tag and paste the below code before </head> tag.

<script type="text/javascript">var summaryConf = {    showImage: true,    imgFloat: 'left',    imgWidth: 120,    imgHeight: 90,    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Jxe1LkGZUiJRGoo9nfbNu-m51RC31YMmcYvIe-d4_BUFbNozQ1M5MmDxKQWBoQD1zDaqpckkv8JpDMsNPTOXTNKUzuXTi8tPcj8T50gbMUb4hCr1BgiVUWEMXcUF2rLMB9LyUnc92hOs/s1600/no+thumbnail+available+.png',    words: 65,    wordsNoImg: 80,    skip: 0,    showHome: true,    showLabel: true};</script><script type="text/javascript" src="https://googledrive.com/host/0Bx4EcEKX-gK0NzRVeXlNdEh6N2M"></script>

After that , find this below tag/line in your Blog Template code.

<data:post.body/>

Replace with:

<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == "index"'>    <script type='text/javascript'>summary("<data:post.id/>")</script><b:else/>    <b:if cond='data:blog.pageType == "archive"'>        <script type='text/javascript'>summary("<data:post.id/>")</script>    </b:if></b:if>

Save All and exit. See the blog - Read More Script Work Perfectly or Not.

How to customize these options-

The options are very easy to change. It’s declared in the first part of script above. These are their meanings:

showImage: do you want to show thumbnail? If yes, set it true, if no, set it false.

imgFloat: there are 3 values of this option: 'left' – float thumbnail to the left, 'right' – float thumbnail to the right and 'no' – no thumbnail float. Note the quotes around values.

imgWidth and imgHeight: thumbnail size.

defaultThumb: default thumbnail URL, used when posts don’t have any images.

words và wordsNoImg: number of words shown in summary when have thumnail and no thumbnail.

skip: skip some first posts, don’t apply auto readmore for them. If this option is set to 0, all posts are applied auto readmore.

showHome and showLabel: allow or not auto readmore for homepage and label page. true is allowed, false is not.

Adjust these options to fit your blog and enjoy!

Conventional read more vs. auto read more-

Conventional read more	Auto read more with thumbnail
Uses HTML	Javascript
Need to insert code in post.	Post is untouched.
Length of each snippet can be customized.	Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added.	Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post).	The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet.	Only loads the snippet.

We hope all of you enjoy this post and share it. Please drop your valuable comment.

    Code Editor very use full for Web Designers and Developers and Most of user looking for best online source code editor.So We are provide great collection of code editor. These are fresh , up-to-date and all web browser supported online applications.We are provide complete list of the best 15  Source Code Editor For Bloggers , Web Designers and Developers.In this code editor work on HTML , CSS , Java script , Jquery , php , xml and more programming language so must to know about these programming language basics. So Let's check out-

Codeanywhere

Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML).

CSSDesk

CSSDesk is a online HTML/CSS sandbox. Experiment with CSS, see the results live, and share your code with others.

jsdo.it

jsdo.it is a coding community for front-end engineers such as web designers, mark-up engineers, and JavaScript engineers. This is an online editor where you can try running your codes as you write. You can save your codes online as well as show them to the public as your work. Don’t worry even if you are not confident in your skill! Arrange shared codes and learn cutting-edge techniques.

BuildorPro

BuildorPro uses visual, code editing and debugging tools to provide an extremely agile method of creating and managing your site’s design & markup.

Squad

Squad is a web-based collaborative code editor. We make it simple to open, edit and share code in real time.

Codeita

Codeita is cloud-based software for prototyping and developing websites and web applications. It allows users to work together in a social environment, to create, edit and deploy web projects in a LAMP software bundle. Codeita makes it easy for developers to manage code, files and databases right from a browser-based dashboard.

Drawter

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

ShiftEdit

Free online IDE for web development with built-in FTP.

Maqetta

Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.

Jsfiddle

Mootools shell, easy test you snippets before implementing.

Cloud IDE

Codenvy IDE, A multi-tenant, hosted development environment that enables social coding – the collaborative development of applications, gadgets and mashups that can be deployed to a PaaS.

Dabblet

An interactive CSS playground and code sharing tool. Dabblet saves to Github gists and offers many conveniences for CSS editing.

Thimble, by Mozilla

Thimble makes it ridiculously simple to create your own web pages. Write and edit HTML and CSS right in your browser. Instantly preview your work. Then host and share your finished pages with a single click. Easy, huh?

Cloud9

Your code anywhere, anytime… Write, run, and debug your code with our powerful and flexible cloud IDE. Collaborate on your workspaces publicly, or keep them private. The choice is yours!

Codepen

CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.

Need to build a reduced test case to demonstrate and figure out a bug? CodePen is great for that. Want to show off your latest creation and get feedback from your peers? CodePen is great for that. Want to find example of a particular design pattern for you project? CodePen is great for that.

CodePen PRO takes things further with features like Collab Mode which allows you to pair program in real time and Professor Mode for allowing a group of students to follow you as you teach code and chat with each other.

At the end , These code editors very use full for Web Designer and Developers and also Beginner. In all Online code Editors easy to save your code privately and publicly. Your code edit anytime and every where and support these code all browser. 

We hope all of you enjoy this post and share it. Please drop your valuable comment and if you Know about any other best code editer then share this place.

                                                           The idea of Sticky position (Bar) for Navigation Menu to make element in your website and blog float and remain visible. To begin with elements will be stay in their position and then performing event of scrolling down the page, their position will be following the scroll. This script code has been broadly applied wildly containing on a some remarkable websites , such as Facebook , Hongikiat and Digitalhubinc.In this post , I'm telling about , how to use this script on your website.

Sticky Navigation Bar

Live Demo for blogger

In facebook website , use this element on sidebar position. If you scroll down the webpage then fixed and stick position element and remain visible. it's really cool and thrilling feature of website.

                 The development of online reaction and commenting system has  come a long way path, from the academies guestbooks to forums and and fillup feedback form, and from this time native platform-dependent commenting systems to 3rd party commenting systems that work cross-platform nevertheless(regardless) of what programming language or scripts use your website or blog is based on.

These 3rd party commenting systems do more than just allowing visitors and readers to drop comments , rate and social share . Most of them support inclusive comment handling backend, spam control, blacklist/ whitelist management, integration with social media, theme customization and much more.

                 Twitter is a highest traffic social networking and professional user website. In this time twitter best social networking website to increase your website traffic becuase twitter use in all over world in different countries and big cities.So twitter imporatnt important place in social media like facebook, google plus , linkden and pinterest.Most of website use these social media to advertise and Marketplace for improve website seo[Search Engine Optimization] and pagerank.

Twitter use in all over world and use different languages.If you increase social online presence and increase popularity in your local area in city and state region So today I'm giving a use full information about twitter follow button , how to  use different language and show number of people follow. Let's see how to use -

How to use add this twitter follow button -

The Follow Button is a small widget which allows users to easily follow a Twitter account from any webpage. The Follow Button uses the same implementation model as the Tweet Button, and its integration is just as simple.

This documentation page is for developers and users who wish to build their own Follow Buttons. If you are looking for a quick way to build a Follow Button for your website, you can visit our Follow Button Configuration Page.

Add the Follow Button to your Website -

Using Javascript-

1. <a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @twitterapi</a>

2. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Add this javascript code directly use in to add Html/Javascript widget in wordpress , Blogger 

and any type of web document pages.

Twitter Follow Button Look Like this : https://twitter.com/digitalhubinc

Configure your Follow Button : 

How to configure your follow button in given javascript code , It's very simple and easy method - 

          There are several properties which allow you to configure the Follow Button behavior and display. The way to modify default properties depends on your Follow Button implementation. Use link data-attributes for the Javascript version:

Config Code :

<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @twitterapi</a>

config file generator for twitter follow and tweet button . simply fill blank place or form then click on go to generate this code and after add java script code in this genwrated code :

 

                                                                              

code-generator

	Javascript (link data-attribute)
User to follow	(in the anchor URL)
Followers count display	data-show-count
Language	data-lang
Width	data-width
Alignment	data-align
Show Screen Name	data-show-screen-name
Size	data-size
Opt Out	data-dnt

• Followers count display -

data-show-count = true

data-show-count = false (default)

ture = for show the number of followers

false = Don't show

• Button Size -

data-size="large" and use default

• Language -

1.  'english'-en
2.  'hindi'-hi
3.  'french'-fr
4.  'korean'-ko
5.  'urdu'-ur
6.  'arabian'-ar
7.  'Portuguese'-pt
8.  'italian'-it
9.  'Spanish'-es
10.  'Turkish'-tr
11.  'Russian'-ru
12.  'German'-de
13.  'Japanese'-ja
14.  'danish'-da
15.  'finnish'-fi
16.  'hebrew'-he
17.  'hungarian'-hu
18.  'thai'-th

To use given 18 different languages short code in like this : 

data-lang:"en"

• Width and alignment -

data-align="right" or "left"

• Show Screen Name -

data-show-screen-name="false" or "ture"

Which browsers/platforms does the Follow Button support?

• Firefox 3, 4
• Chrome
• Safari 4, 5
• Opera 10
• Internet Explorer 6, 7, 8, 9
• Mobile Safari for iPhone/iPad
• Android
• Palm Pre
• Opera Mini

                 The most prevalent way bloggers use in keep their site content is by disabling right click on the whole blog content, but this action makes some trustworthy readers to feel dampen with limited functions accompanying to the right click such as open link in new window, bookmark this link , reload and back. But you can still defend your blog images by disabling right click on only images and not the whole blog, which still makes sense. This effect can be apply to a single image or the whole images on your blog, using a few line of code. both the two hacks will be mutual in this tutorial, and for a demo of this hack, simply click on the image below, and see what we are talking about. 

Recommended Reading : How To Disable Mouse Selection On Blogger And WordPress

How To Disable Right Click ON Single Image

                In other to disable right click on a single image, you will need to add a context menu event handler code into the image tag. The following code is the code you need to insert into your image tag.

oncontextmenu='alert("Image protected");return false;'

Now in your post editor, simply switch to HTML mode when your are about to disable an image. The image tag will look as follow :

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaai88qh_pzJ9iS8xbin8mtJ7ybdwF_g1hoJxXq1foQxqvLhodAaY4uiYuINSiruUADD8v0R2bJS4gRUfbO3GTRZZy9J59gWT_G9R2PcdRA3JrA28AR0XGVmRJ04Wpe_xXp_Lz-HTqD0/s1600/Disable+Right+Click+Context+Menu+On+Your+Blog+Images+&+Div+Section.png"  />

Adding the context menu snippet into to the image tag, the final result will look as follow:

<img oncontextmenu='alert("Image protected");return false;' border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaai88qh_pzJ9iS8xbin8mtJ7ybdwF_g1hoJxXq1foQxqvLhodAaY4uiYuINSiruUADD8v0R2bJS4gRUfbO3GTRZZy9J59gWT_G9R2PcdRA3JrA28AR0XGVmRJ04Wpe_xXp_Lz-HTqD0/s1600/Disable+Right+Click+Context+Menu+On+Your+Blog+Images+&+Div+Section.png"  />

      You can change Image protected to your preferred text as it is the alert text that will appear when a reader click on the protected image.

How To Disable Right Click ON <DIV> Section on your Post :

               Put your context menu code oncontextmenu='alert("Copyrighted Content");return false;' inside div section like that -

<div oncontextmenu='alert("Copyrighted Content");return false;'>                                   Blog Post content Here.....                                                                                                      </div>

How To Disable Right Click On All Images 

1. Go to Template > Edit HTML > Proceed
2. Use ctrl F to find </head> and paste the following below code before </head> section

<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by www.digitalhubinc.com
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Image context menu is disabled";
    document.oncontextmenu = nocontext;
//]]>
</script>

The code above will disable context menu on all your blog images and replace it with an alert box

  

Hope you like this post and this code work  for everybody. Please share post and comment your idea and suggestion below…

For Protecting our blog from copyright the easiest way is to disable mouse selection on your blog by which no one can copy text and images, we can make it possible by using small JavaScript code which will disable mouse selection on blog.

JavaScript Code For Disabling Mouse Selection

<script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false }
function reEnable(){
return true }
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else {
document.onmousedown=disableselect
document.onmouseup=reEnable }
</script>

For Blogger

• Go to blogger dashboard
• Click on Template tab.
• Now Add Gadget >> HTML/JavaScript
• Paste JavaScript code there which I provided above.
• After pasting code click on Save button and say bye to content thief.

For WordPress

• Go to Wordpress dashboard
• Now click on Appearance >> Widgets >> Add New Text Widget
• Paste JavaScript code there which I provided above.
• After pasting code click on Save button and say bye to content thief.

With this trick we can disable mouse selection in both blogger and WordPress, This trick is working on all major browser which support JavaScript.

Updates and Important Note 


1. Don’t use this script on a website where you are providing any type of codes .
2. Now peoples can make use of your blog’s feed to copy content . So keep your blog RSS feeds as small as you can . 
3. You can Also disable this script on specific posts or pages by adding Following Type of Piece of code in your blogger template :-

<b:if cond=’data:blog.url != “Specific Page or Post URL”‘>
Anti Copy Paste Script Code Here
</b:if>