Blogger Widgets,Tricks,Tutorials,Templates,Seo Tricks,TIps

Auto Blog Scroll Bar For Blogger

2013-05-09T01:31:00.000-07:00

Hi guys today i am going to post a new widget for blogger which is Auto scroll for your blog you see the demo in the post check the bottom right to see the demo.

How to add it blogger

Just add the following code above </body>.

<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(http://lh5.ggpht.com/-wREw7V6WEsg/UYQq0-d5cWI/AAAAAAAABsI/vnH-wGlJp6s/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>  
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Increase or decrease the value 50 to decrease or increase the speed of auto-scrolling page.

To Top Page Up Page Down To Bottom Auto Scroll Stop Scroll

Fixed Social Bookmark For Blogger

2013-05-03T06:03:00.002-07:00

DEMO

How To Add It To Blogger

Login to blogger
Go to your blog dashboard
Select Layout
Click on Add a Gadget
Select HTML/Javascript
And paste the following code there.

<style type='text/css'>
.soc-fixed a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.soc-fixed{height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px}
.soc-fixed a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(http://4.bp.blogspot.com/-ClgF7y4S6Qg/UVACskc3hsI/AAAAAAAAI8I/H7ip0-FdzRg/s1600/soc-icons.png) no-repeat;overflow:hidden}
.soc-fixed a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px}
.soc-fixed a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
.soc-fixed a:hover span{visibility:visible;position:absolute;top:0;left:25px}
.soc-fixed a.soc-facebook{background-position:3px -15px;top:20px;background-color:#526ca5}
.soc-fixed a.soc-twitter{background-position:3px -36px;top:40px;background-color:#75ddfe}
.soc-fixed a.soc-rss{background-position:3px -55px;top:60px;background-color:#f6a858}
.soc-fixed a.soc-mail{background-position:3px -75px;top:80px;background-color:#c1c1c2}
.soc-fixed a.soc-facebook:hover{background-color:#526ca5;background-position:5px -15px}
.soc-fixed a.soc-twitter:hover{background-color:#75ddfe;background-position:5px -36px}
.soc-fixed a.soc-mail:hover{background-color:#c1c1c2;background-position:5px -75px}
.soc-fixed a.soc-rss:hover{background-color:#f6a858;background-position:5px -55px}
.soc-fixed a.soc-facebook:active{background-color:#294a90}
.soc-fixed a.soc-twitter:active{background-color:#40b5fe}
.soc-fixed a.soc-mail:active{background-color:#909090}.soc-fixed a.soc-rss:active{background-color:#f37526}
</style>
<div class='soc-fixed'> <a class='soc-facebook' href='https://facebook.com/marklin44' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Facebook&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Facebook'><span>facebook page</span></a> <a class='soc-twitter' href='https://twitter.com/marklin44' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Twitter&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Twitter'><span>visit twitter</span></a> <a class='soc-rss' href='/feeds/posts/default' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;RSS&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-follow&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='RSS Feed'><span>rss feed</span></a> <a class='soc-mail' href='mailto:marklin44@gmail.com' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Email&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-email&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Email'><span>contact us</span></a> </div>

And then save your template

{M+Creaiton} Launced Officially CSS3 Text Maker Tool

2013-05-02T13:59:00.002-07:00

We are glad to tell you all that we are officially launching our new CSS3 Text Maker Tool, with the help of this tool you could create your own text by using new technology of CSS3 and also. You could easily change your own text by using the button also could change the font family, color, text style, space between the words and much more and after you done with your styling then you could get the codes of the text in html.

FEATURES:

Easy to Use
Customization is very easy
Basic and Web Fonts are Available
You Set your own background color
Set the Word Spacing
15 + styles available in Fonts
Align your text easily
Free to Use without any cost
Last but not the Least "You can Get the codes of that Text"

CSS3 Text Maker Tool

How to Build a free forum for Blogger with Nabble

2013-05-02T05:17:00.000-07:00

Hi guys,Today i will post a post which i did not post ever before so today i will teach how to build a free forum with Nabble.

1, Go to Nabble website: http://www.nabble.com/

2, Register an account by clicking on Start a free forum. Finish the form and activation via email. Now you have a forum with address ready to use.

3, When forum ready, login to your admin dashboard. Find the option -> Embedding option Copy the code given.

5, Now you can check the result and start announcing your new forum to user.

Protected By:

How To Add Emoticons In Blogger Posts

2013-05-02T00:30:00.001-07:00

Hi guys,We had always posted posts about how to add emoticons on blogger comments =)) ,But today i will post.How To Add Emoticons In Blogger Posts :P : ,you will need only 5 mins to add the codes to your template and start adding emoticons in your blog posts.and i want say one more thing that this blog is protected by DMCA and this post is NOT FOR SHARE.I think blogs like AllBloggerTricks will copy this post to there blog and change the date of posting and will say that they posted this post first.
And for DEMO you can see the above emoticons . :)

How To Add It To Blogger

First find the code ]]></b:skin>

And under it add the following code.

<style>

.emo.delayLoad { display:inline; text-align:left; margin:0; padding:1px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; background-color:transparent; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }

</style>

Now find this </head>
and above it add the following.(if you already have an jQuery in your blog,Skip this step)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

And now find this </body>
and above it add the following.

<script type='text/javascript'>
//<![CDATA[
// kode js untuk menampilkan emoticon
jQuery(document).ready(function () {emoticonx({
emoRange:".post-body, div.emoWrap",
})
});
//]]> 
</script>
<script src='https://mcreation.googlecode.com/files/postemoctions.js' type='text/javascript'/>

And thats all .

Protected By:

Emoticons In Posts by {M+CREATIONS} is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

How to Use Blogger and Google+ Comments System Together

2013-04-29T13:26:00.000-07:00

Hi guys,You know that the blogger team had recently added a new feature to blogger which is the Google+ Comments system but the problem is that only the one who have Google+ account can use it,But today MBL Editorial Team gave us a new way that we can use the both Google+ and Blogger commenting system by toggle way.all the credits goes to the MBL Editorial Team.

How To Add It To Blogger

Step 1:First we log into blogger dashboard,After logging in from the dashboard go to Template >> Edit HTML. Now enable the HTML Editor’s built-in search box and search for the following code.(Tip: Click anywhere on the HTML editor and Press CTRL+F to enable the search box).

<b:includable id='threaded_comments' var='post'>
.
.
.
.
</b:includable>

Step 2: After finding the code above, replace it entirely with the Following code..

      <b:includable id='threaded_comments' var='post'><br />  <div id='com-header'><br /><h6><br />Comment With:</h6><br /><h6><br />OR</h6><br /><image id='com-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/><h6><br />The Choice is Yours!</h6><br /><div id='copyrigtsmbl'><br /><a href='#' id='mblrights'>Get This Widget</a></div><br /><div id='copyrigtsmc'><br /><a href='http://goo.gl/JRCBW' id='mblrights'>Get This Widget</a></div><br /></div><br /><div id='comment-zone'><br />  <div class='comments' id='comments'><br />    <a name='comments'/><br />    <h4><br /><data:post.commentLabelFull/>:</h4><br /><div class='comments-content'><br />      <b:if cond='data:post.embedCommentForm'><br />        <b:include data='post' name='threaded_comment_js'/><br />      </b:if><br />      <div id='comment-holder'><br />         <data:post.commentHtml/><br />      </div><br /></div><br /><p class='comment-footer'><br /><b:if cond='data:post.allowNewComments'><br />        <b:include data='post' name='threaded-comment-form'/><br />      <b:else/><br />        <data:post.noNewCommentsText/><br />      </b:if><br />    </p><br /><b:if cond='data:showCmtPopup'><br />      <div id='comment-popup'><br />        <br />        </iframe><br />      </div><br /></b:if><br />    <div id='backlinks-container'><br />    <div expr:id='data:widget.instanceId + "_backlinks-container"'><br />       <b:if cond='data:post.showBacklinks'><br />         <b:include data='post' name='backlinks'/><br />       </b:if><br />    </div><br /></div><br /></div><br /><div id='gcontainer'><br /><div id='gcomments'/><br /></div><br /><script src='http://apis.google.com/js/plusone.js'/><br /><script src='https://mcreation.googlecode.com/files/mmbsbscom.js'/><br /><style><br />#gcontainer {<br />display:none;<br />  }<br />#com-norm,#com-gplus {<br />cursor:pointer;<br />padding:0 5px;<br />float:left<br />  } <br />#com-header { <br />border: 1px solid #d2d2d2;<br />padding: 10px;<br />float: left;<br />width: 580px;<br />margin-bottom: 20px;<br />background: #f5f5f5;<br />  }<br />#com-header h6{ <br />font-size: 20px;<br />text-transform: uppercase;<br />font-weight: bold;<br />float: left;<br />padding-top: 15px;<br />margin: 0px;<br />margin-right: 7px;<br />margin-left: 7px;<br />  }<br /><br />#copyrigtsmc {<br />float: right;<br />margin-top: 20px;<br />border-top: 1px solid #d2d2d2;<br />margin-right: -10px;<br />padding-right: 10px;<br />padding-top: 5px;<br />padding-left: 10px;<br />border-left: 1px solid #d2d2d2;<br />padding-bottom: 5px;<br />margin-bottom: -10px;<br />font-size:11px;<br />background: #fff;<br />  }<br />  <br />#copyrigtsmbl {<br />float: left;<br />margin-top: 20px;<br />border-top: 1px solid #fff;<br />margin-right: -10px;<br />padding-right: 10px;<br />padding-top: 5px;<br />padding-left: 10px;<br />border-left: 1px solid #fff;<br />padding-bottom: 5px;<br />margin-bottom: -10px;<br />font-size: 1px;<br />background: #fff;<br />  }<br />#copyrigtsmbl a {<br />text-decoration:none;<br />color: #fff!important; <br />  }<br /></style><br /></div><br /></b:includable><br />

Step 3: Now again with the help of search box look for the following code.

<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>

Step#4: After finding the code as prescribed above, replace it completely and properly with the Following code. (Remember: Try to close the tags properly, so the template does not catch any errors).

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Step#5: After applying the instructions as mentioned above press the “Save Template” button located at the top of your screen.

Download Tutorial4.7 KBDownload

Awesome 3 in 1 Blog`s Stat Widget For Blogger

2013-04-22T09:54:00.002-07:00

In this tutorial im gonna explain how to add blogger
stats widget in unique way. This widget helps to
display.Your blogger stats like Post count, comments
count and pageviews counts. CSS and javascripts
using for creating this widget. I hope bloggertrix
readers will like this widget.You can see a demo by
click this demo link.

DEMO

1. Log in to Blogger and go to Layout like below.
2. Click add gadget where you want to place this widget and select Blog's Stats
Now Save it.
3. Now select "Template" Like Below.
4. Find this tag by using Ctrl+F
5. Paste below code Before ]]></b:skin> tag

#Stats1 ul{margin:0;border:0;padding:0;height:32px;background:url(http://3.bp.blogspot.com/-zMdnwp4pw0Y/UXO9yOCE_4I/AAAAAAAAAfA/jUdtmnXy8Kw/s1600/btrix_image.png) no-repeat 0 -34px}
#Stats1 li{margin:10px 0;border:0;padding:0 0 0 40px;list-style-type:none}
#totalComments{height:32px;background:url(http://3.bp.blogspot.com/-zMdnwp4pw0Y/UXO9yOCE_4I/AAAAAAAAAfA/jUdtmnXy8Kw/s1600/btrix_image.png) no-repeat}
#totalCount{height:32px;background:url(http://3.bp.blogspot.com/-zMdnwp4pw0Y/UXO9yOCE_4I/AAAAAAAAAfA/jUdtmnXy8Kw/s1600/btrix_image.png) no-repeat 0 -68px}

4. Find this code and replace with below code.

<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'/>

<b:widget id='Stats1' locked='false' title='My Blog Stats' type='Stats'>
  <b:includable id='main'>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

8. Now Click Save Template.
You are done...

Do not use Google+ comment for your blog

2013-04-21T07:46:00.003-07:00

Blogger released an API that allow you easy add Google+ comment system for your blog at this weekend. But we recommend all of you that do not use this new feature. Why? Because:

This comment system just allow who has Google+ account to comment, not allow Anonymous or Open ID users, you will lost many comments from your unknown visitors
This comment system is not compatible with your blogger jSON, also not added new comments into your comment feeds. So all comment widgets will be broken and your reader can not follow your comment feeds also. It’s really bad.

Because we don’t like this new feature so we will have no tips to guide you how to enable this feature. Thank you.

Our Latest Blogger Templates

2013-04-20T09:40:00.001-07:00

Blogger Templates

White N Orange

White N Orange Blogger Template.
Read More

Facemark V2

Facemark V2 Blogger Template.
Read More

Facemark V1

Facemark V1 Blogger Template.
Read More

Whites

Whites Blogger Template.
Read More

Orange Area

Orange Area Blogger Template.
Read More

TX5 V4

TX5 V4 Blogger Template.
Read More

Enable Google Plus Comments in Blogger

2013-04-18T23:54:00.003-07:00

If you are a Blogger user, you can now add Google+ Comments to your blog. Google announced the new commenting system today, which brings an experience Google+ users should be familiar with. Google+ Comments offer deep integration with the social network, and some nifty features. Publishers that enable the new commenting system will see people’s activity from those directly on the site and those who are talking about the content right from Google+. Additionally, readers can leave comments specifically for those in their circle or in public depending on how comfortable they feel.

How to Enable...

Once you enable Google+ Comments, people can share the comments they make on your blog to their circles in Google+, helping you reach people that they know. And there's more: mentions of your posts on Google+ automatically show up right in your blog's comments, so you can see more of people’s public conversations about your content (and private conversations you’re part of).

Here's how to add Google+ Comments to your blog:

Sign in to Blogger
Click on the “Google+” tab in your blog’s Dashboard
Upgrade to Google+ if you haven’t already done so
Enable Google+ Comments. Comments already made on your posts will keep working in the new widget.

This comment system is very flexible with blogger, Now you can get rid of that old ugly commenting system. Happy Blogging :D

Switch between Mobile View and Desktop View using Dropdown Box in Blogger

2013-04-18T05:02:00.002-07:00

Blogger supports Mobile template that allows the visitor to view the blog posts in Mobile compatible blogger template. This can be done by activating Show mobile template on mobile devices.
In Blogger Dashboard > Template.
When user visits the site using Mobile devices like Android, iPhone. The template automatically changes to Mobile Template. In some cases if the Template doesn't changes or the visitor wants to switch to Desktop View or Mobile View, we can add a Drop down Box that will have the Options to Select which View is to be displayed. This can be done easily by adding the below code to the HTML Widget.

CODE

Download Code

Preview

Posts with Author`s Avatar beside the Title

2013-04-17T13:25:00.000-07:00

Hi guys i think long time ago,I did not post a post like this but today will,Today i will teach you how to add Author Avatar beside the post title
,Check the below demo and lets continue.

DEMO

Lets add it to blogger

Step 1: First find the code ]]></b:skin> and above it paste the following code.

.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

Step 2: Now find this code </head> and above it add the following.

<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

Step 3: Find <b:if cond='data:post.title'> and add the following above it:

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

In the step 3 you may find two codes like this<b:if cond='data:post.title'> so use the 1st one.

Minimal Social Media Widget For Blogger

2013-04-13T13:07:00.001-07:00

In this post im gonna explain how to add minimal style
social sharing buttons for your blog. This is just
widget. you can add it to your blog easily. I just using
Css with HTML. Check below demo link.

Demo

Add the HTML where you want it to appear and the CSS above ]]>

in the Edit HTML.
Code Is Here

Css3 Shadow Style Verticle Menu For Blogger

2013-04-12T04:01:00.000-07:00

In this tutorial im gonna explain how to add nice
vertical menu for your blogger. You can add this
vertical menu on side bar and link with your
special post or any categories.Im using Css3 and
HTML for this vertical menu. Its include nice
hover effect You can add it to your blogger by
using gadget.

Let`s Add It To Blogger

OkayWelcome TO {M+WIDGETS} Widget Installer.To Continue Adding This,Please Click On Next Button.

NextCancel

To continue to the code you must agree to the privacy policy and click I Agree.

BackI AgreeCancel

Tutorial Start Part 1

Login To Blogger
Go To Layout
Click on Add a Gadget
Select HTML/Javascript
Paste the following code there.

BackNextCancel

Tutorial End Part 2

Now you need to edit this code,Change the word with any other word you want and this # with the link you want.

BackNextCancel

Done

And Now your all done if you have any question comment them down.Enjoy

Powered by {M+WIDGETS}
Copyright © 2013

Finished

Responsive Navigation Menu For Blogger With JQUERY

2013-04-11T13:09:00.004-07:00

Menu is necessary in a blog which helps our visitors to find the category or the page which they want by using the menu but the most of the menus are not responsive which gives a hard time for your audience who connect with your blog by there smartphones,So the best way to help them is to add a responsive menu to your blog like the one we are going to tell you how to add it to blogger.

Demo

Add It To Blogger

HTML

THE HTML IS HERE

CSS

nav {

  font:normal normal 11px/30px Verdana,Geneva,sans-serif;

  background-color:#313131;

}

nav,

nav * {

  display:block;

}

nav #tombolmenu {

  display:none;

}

nav ul,

nav li {

  padding:0;

  margin:0;

  list-style:none;

}

nav ul {

  height:30px;

}

nav li {

  float:left;

  position:relative;

}

nav li a {

  display:block;

  padding:0 10px;

  color:white;

  text-decoration:none;

}

nav li:hover > a {

  background-color:#1D8FC5;

}

nav li ul {

  position:absolute;

  background-color:black;

  height:auto;

  width:160px;

  display:none;

}

nav li:hover ul.hidden {

  display:block;

}

nav li li {

  float:none;

}

@media only screen and (max-width:600px) {

  nav #tombolmenu {

    display:block;

    padding:0 15px;

    background-color:black;

    text-decoration:none;

  }

  nav #tombolmenu.active {

    background-color:#1D8FC5;

    color:white;

  }

  nav ul {

    height:auto;

    display:none;

  }

  nav li {

    float:none;

  }

  nav li ul {

    width:100%;

  }

}

Javascript/jQuery

(function () {

    $('nav ul').removeClass('hidden');

    $('nav li').hover(function () {

        $(this).parent('ul.menu').css('overflow', 'visible');

        $(this).children('ul').filter(':not(:animated)').slideDown();

    }, function () {     

        $(this).children('ul').slideUp();

    });

    $('#tombolmenu').toggle(function () {

        $(this).addClass('active');

        $('nav > ul').slideDown();

        return false;

    }, function () {

        $(this).removeClass('active');

        $('nav > ul').slideUp();

        return false;

    });

    function checkWidth() {

        if ($(window).width() > 600) {

            $('nav > ul').css('display', 'block');

        } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') === 'active') {

            $('nav > ul').css('display', 'block');

        } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') !== 'active') {

            $('nav > ul').css('display', 'none');

        }

    }

    $(window).resize(checkWidth);

})();

Sidebar Featured Posts Widget With CSS and Jquery

2013-04-10T15:24:00.003-07:00

Hi guys,today i have an awesome sidebar widget for you which is featured posts widget or popular posts widget.It is very is to add to blogger just click on the Let`s Add It To Blogger Button.

Let`s Add It To Blogger

Okay First You will agree to our privacy policy,and then you can continue

NextCancel

To continue to the code you muct agree to the privacy policy

BackI AgreeCancel

Tutorial Start Part 1

Login To Blogger
Go To Layout
Click on Add a Gadget
Select HTML/Javascript
Paste the following code there.

ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif} ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative} ul.rcentside{width:100%;height:500px} ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none} ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block} ul.rcentside img{border:0;width:100%;height:100%} ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0} ul.rcentside li:nth-child(2){left:0;top:50%} ul.rcentside li:nth-child(3){left:50.5%;top:50%} ul.rcentside li:nth-child(4){width:100%;left:0;top:75%} ul.rcentside  .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out} ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x} ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%} ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal} ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%} ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%} ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none} .buttons{margin:5px 0 0} .buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative} .buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%} .buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px} </style><div id="featuredpostside"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[ FeaturedPostSide({ blogURL:"http://marks-mbs.blogspot.com", MaxPost:8, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]></script>

BackNextCancel

Tutorial End Part 2

Now find the following and change it with your blog url.

blogURL:"http://marks-mbs.blogspot.com",

BackNextCancel

Done

And Now your all done if you have any question comment them down.Now See you next time.

by {M+WIDGETS}
Copyright © 2013

Finished

Add 125×125 Ads Widget to Blogger

2013-04-08T09:03:00.000-07:00

125 x 125 Ads widgets are the good ways to sell and make money from your Blog or you can show out your favourite service there with your referral link and you can make some money .125 x 125 banners are short in size and saves a lot of space on your site .So today I will share a widget with which you can easily create such advertisements.

HOW TO ADD 125X125 ADS WIDGET TO BLOGGER

Go to Your Blogger Dashboard.
From The Drop Down Menu Click on Layouts and Add a widget.
Choose Html/JavaScript and paste the below Coding in it.

Download Code

Just Customize the settings in the coding and paste it and Save your widget.

Add A Widget Below First Post In Blogger

2013-04-04T10:58:00.001-07:00

Hi guys,This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post.

First, you must understand that the usual gadgets provided by Blogger can be added only in the areas where the design section permits. Still, we can show any element, for example, an AdSense ad, an image, a flash file, a video etc.

So what we will do in this tutorial is to display an item under the first post, this means that it will not be visible below the other entries. This is great when you use any automatic summary, although it is not a requirement.

Well, this is easy to do and we will use the is First Post conditional tag for that element to show it under the first entry.

Adding An Element Below First Post

Step 1. First, go to your Blogger Template and click on the Edit HTML button:

Step 2. Check the "Expand Widget Templates" box:

Step 3. And find this line:

<b:include data='post' name='post'/>

Step 4. Just below it add this code:

<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin-top:0px; margin-bottom:10px;">
Here goes the code of the element you want to show
</div>
</b:if>

Note:

- The bolded text indicates to where you should paste the code of the element (eg. AdSense ad, a widget).

- In red are the top margins (margin-top) and the bottom margins (margin-bottom), this is in case you want the element to move towards or away from the entries, also you can add any style like a background color, border etc..

Step 5. Preview to make sure everything is okay, then Save your Template.

Customize Blogger's Lightbox

2013-04-04T10:42:00.001-07:00

Hi guys for those of you who have chosen to use the Blogger's Lightbox View to display the images, you have the option to change its style in a whole different way. We'll be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background as well. We can customize the Blogger Lightbox entirely on your taste.

DEMO

Take a look at the screenshots below:

Before:

After:

After adding our CSS code, the entire look of the modal window will be changed: the background color, the bar showing the thumbnails, the edge of images (border), the text that appears in it, transparency and the close button.

All we have to do is to overwrite the default styles and change them for ours.

How to Change the Blogger's Lightbox Background and Style?

Step 1. Go to Template, click on the Edit HTML button (also click on the Proceed button if needed)

Step 2. Search using CTRL + F the following code snippet:

]]></b:skin>

Step 3. Copy and paste the following code just above it:

/* Blogger Lightbox
----------------------------------------------- */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Note:

- The text in green explains to which part the code belongs (it doesn't need to be modified)

For example, the / * Background Color * / part can change the background color or even the LightBox background color to an image. If you want to do that, then change this line by replacing the red text with the url address of your image:

background-image: url(image-url-address) !important;

- The opacity is just below, if you add a lower value ( 0.8 ) the background will become more transparent.

- To change the icon for close button, you have to replace the text in red from /* Close Button */ with the url of your image. (you can host image at tinypic or upload it into a blogger draft and then Copy the Link Location)

- To change the text color of images, replace the #555555 value from /* Index Info (number of images) */

- The border of the images can be changed as much as we want: you can change the borders' roundedness, shadow, etc... but remember this is CSS3 so older versions of Internet Explorer will not see it.

Step 4. Click on Save Template and you're Done.

Gzero Buttons With CSS3

2013-03-25T08:39:00.008-07:00

Hi guys today i will give a tutorial on how to add these simple awesome GZero Buttons,Last time i posted about some buttons but i don`t remember right now.So lets continue....

Live DEMO

How to add it To Blogger?

Go to blogger
Select Template
Click Edit HTML
Find ]]></b:skin>
And above it paste the following CSS.

/*Gzero Buttons*/
.nw-btn {
border-image: none;
border-radius: 4px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
display: inline-block;
font-size: 13px;
font-family: Arial;
line-height: 20px;
margin: 0;
padding: 4px 12px;
text-align: center;
vertical-align: middle;
cursor:pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-style: solid;
border-width: 1px;
color: #FFF !important;
text-decoration: none !important;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
text-decoration: none !important;
}
.nw-btn:active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
background: #F5F5F5 ;
background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF)) ;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
color: #333 !important;
}
.nw-btn.white:hover {background: #E6E6E6 ;}
/*Azul*/
.nw-btn.blue {
background: #49AFCD;
background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}
/*Verde*/
.nw-btn.green {
background: #5BB75B;
background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}
/*Naranja*/
.nw-btn.orange {
background: #FAA732 ;
background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450)) ;
}
.nw-btn.orange:hover {background: #F89406 ;}
/*Rojo*/
.nw-btn.red {
background: #DA4F49 ;
background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B)) ;
}
.nw-btn.red:hover {background: #BD362F ;}
/*Finish Gzero Buttons*/

And now when you want to add any of the buttons place the html of the button you want.

<a class="nw-btn white" href="#">White Button</a>

<a class="nw-btn red" href="#">Red Button</a>

<a class="nw-btn blue" href="#">Blue Button</a>

<a class="nw-btn orange" href="#">Orange Button</a>

<a class="nw-btn Green" href="#">Green Button</a>

And DoNe.

HOW TO REMOVE BLOGGER DEFAULT SHARE BUTTONS

2013-03-23T05:35:00.000-07:00

Hello Friends The default share buttons from blogger are small in size looks cool but addthis and sharethis are giving away more functionility to you which are click tracking ,number of likes,share etc. Thats probable the reason why more and more peoples are removing the default share buttons from blogger and install those buttons in their blog.But sometime some newbies struck off on how to remove those default share buttons from their blog.So today i will guide you how you can remove those buttons from your blogger blog.There are basically two methods for you to remove these butttons from your blogger blogs .We will take the simplest one to remove these buttons from your blogger blog.

HOW TO REMOVE BLOGGER DEFAULT SHARE BUTTONS

Go to Your Blogger Dashboard.
From the Drop Down Menu Click on Layouts > Edit on the Blog Posts Section.
Now a pop up will pop up and then uncheck the box corresponding to 'Show Share Buttons'.
Now Click on the Save Button Below.
Now refresh your blogger blog the default share buttons will be removed now.

Hope this tutorial was easy enough for you to understand.Do tell us in the comments if any problem occurs.

Dynamic social Bar For Blogger

2013-03-21T13:39:00.000-07:00

Hi guys today we have a new social widget for blogger,I actually got it from Pakdhe Johny Blogger Template,There are many widgets available to make your blog social media friendly.This one is not just one of them but the best.It is similar to the new templates that blogger has introduced.

LIVE DEMO

How To Add It To Blogger

Go to Blogger
Select Layout > Add a Gadget >Html / Javascript
Paste this code below

<style>
.sosmed-kananblogger{ background:url('http://4.bp.blogspot.com/-pHaCPnRRhpw/UEyeymZDBAI/AAAAAAAAAPo/sQgRynAxmLc/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.sosmed-kananbloggerc{ background:url('http://4.bp.blogspot.com/-udMDlRqH1mA/UEyexorOOMI/AAAAAAAAAPg/xlYmVRZR5Gc/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.sosmed-isiblogger{margin:0px 0 0 43px}
.sosmed-kanantwitter{background:url('http://2.bp.blogspot.com/-cb-8UxmdvCY/UEye3s5ckoI/AAAAAAAAAQI/2UsOUiBl7OY/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.sosmed-kanantwitterc{background:url('http://4.bp.blogspot.com/-TtvqyHndUXc/UEye2FTtlVI/AAAAAAAAAQA/3de7K8XwcWE/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.sosmed-isitwitter{margin:0px 0 0 43px}
.sosmed-kananfacebook{background:url('http://2.bp.blogspot.com/-kX-wO_55wpo/UEye0R9pSdI/AAAAAAAAAP4/GYLd2emZvyc/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.sosmed-kananfacebookc{background:url('http://3.bp.blogspot.com/-xAafaK_rors/UEyezhSNU4I/AAAAAAAAAPw/ceimgukhoT8/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.sosmed-isifacebook{margin:0px 0 0 43px}
.sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.sosmed-isirss{margin:0px 0 0 43px}
</style>
<div class='sosmed-kananblogger' onmouseout='this.className='sosmed-kananblogger'' onmouseover='this.className='sosmed-kananbloggerc''><div class='sosmed-isiblogger'><a href='https://www.facebook.com/XXX' target='_blank'><img alt='Like us on Facebook' src='http://3.bp.blogspot.com/-N67uPytUphw/UEyoTwSDa9I/AAAAAAAAAQc/yQjj5R6pBuI/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='sosmed-kanantwitter' onmouseout='this.className='sosmed-kanantwitter'' onmouseover='this.className='sosmed-kanantwitterc''><div class='sosmed-isitwitter'><a href='https://twitter.com/XXX' target='_blank'><img alt='Follow us on Twitter' src='http://1.bp.blogspot.com/-82LWv3XyPKQ/UEypI664imI/AAAAAAAAAQk/CBSAuHp_lqA/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='sosmed-kananfacebook' onmouseout='this.className='sosmed-kananfacebook'' onmouseover='this.className='sosmed-kananfacebookc''><div class='sosmed-isifacebook'><a href='https://plus.google.com/your googleplus/posts' target='_blank'><img alt='Recommend us on Google Plus' src='http://3.bp.blogspot.com/-eOpgXkqE7cw/UEyqFjfr6dI/AAAAAAAAAQs/A2JlJ2fios0/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='sosmed-kananrss' onmouseout='this.className='sosmed-kananrss'' onmouseover='this.className='sosmed-kananrssc''><div class='sosmed-isirss'><a href='http://feeds.feedburner.com/XXX' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png' title='Subscribe me'/></a><br/>

</div></div>

Replace XXX with your links

Save the template.

And DoNe

Stylish Popular Post Widget with 3D Effect for Blogger

2013-03-18T11:19:00.004-07:00

Hi guys,DO you Want to add stylish popular post for blogger. So this post is for you. Today I share 3D effect popular post widget. To add 3D effect popular post widget follow below steps:-

Live DEMO

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget and Choose Popular Posts (If you already have this gadget skip this step)

4. After adding Popular Post Gadget Add a Gadget again Select HTML/Javascript widget.

5. Paste the following code and Save.

<style type="text/css">
.cube { width: 300px; height: 400px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://sr-site.googlecode.com/files/sr-site-image.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script src="https://sr-site.googlecode.com/files/popularpost.js" type="text/javascript"></script>

6. You are done. :)

Disable Copy Paste Except Specified Codes Using Css

2013-03-18T03:46:00.000-07:00

Most of the Genuine Bloggers faces the problem of plagiarism. Generally the New bloggers do not understand the value of quality content. You are spending a lot of time to write your blog posts but a content thieve visits to your blog and copies all your work. Some times those content thieves results can be first in Google Search then you , So its a head cache for you .You can use disable copy script in your blog.But If your blog deals with some tutorial codes or text to be copied,you cant use that script.So today, I am going to reveal a trick to disable copying except your specified codes to be copied using simple css tricks.Live Demo can be seen in this blog.

Advantages of this CSS:

No javascript .So, It does not affect your blogs load time.
It works on all major browsers.
You can use this css in all type of blog niche.

How to add this CSS to your blog ?

Login to Blogger > Dashboard
Click on Drop Down Menu and select Template
Backup your Template before making any changes to your blog
Now Click on Edit HTML > Proceed
Press Ctrl + F and search the code shown below.

]]></b:skin>

Paste below codes above it.

.post-body {-webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: justify;} blockquote {-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

Editing CSS

Replace blockquote with your html tag to which you use to display the codes.Example:I am using blockquote tag to highlight the codes (i.e)

<blockquote>

code goes here....

</blockquote>

So, I used blockquote tag in above css.If your using something <codeview> your text </codeview> ,You need to replace blockquote with codeview.Now your css codes will look like,

.post-body {-webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: justify;} codeview {-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

Now save the template .

Congratulation, now your blogger site is completely plagiarism protected.Remember this code is secure and it does not harm your SEO.Please share this post with your friends.If you have any doubts regarding this topic,Just comment below.I will answer as soon as time allows.

Blogger Widgets,Tricks,Tutorials,Templates,Seo Tricks,TIps

Auto Blog Scroll Bar For Blogger

How to add it blogger

Fixed Social Bookmark For Blogger

How To Add It To Blogger

{M+Creaiton} Launced Officially CSS3 Text Maker Tool

CSS3 Text Maker Tool

How to Build a free forum for Blogger with Nabble

Protected By:

How To Add Emoticons In Blogger Posts

How To Add It To Blogger

Protected By:

Popular Post Coinslider For Blogger

Display the Add a Gadget on the Blog Post

Adding Popular Post gadget and Script Slideshow CoinSlider

How to Use Blogger and Google+ Comments System Together

How To Add It To Blogger

Awesome 3 in 1 Blog`s Stat Widget For Blogger

Do not use Google+ comment for your blog

Our Latest Blogger Templates

White N Orange

Facemark V2

Facemark V1

Whites

Orange Area

TX5 V4

Enable Google Plus Comments in Blogger

How to Enable...

Switch between Mobile View and Desktop View using Dropdown Box in Blogger

CODE

Preview

Posts with Author`s Avatar beside the Title

Lets add it to blogger

Minimal Social Media Widget For Blogger

Css3 Shadow Style Verticle Menu For Blogger

Responsive Navigation Menu For Blogger With JQUERY

Add It To Blogger

HTML

CSS

Javascript/jQuery

Sidebar Featured Posts Widget With CSS and Jquery

Add 125×125 Ads Widget to Blogger

HOW TO ADD 125X125 ADS WIDGET TO BLOGGER

Download Code

Add A Widget Below First Post In Blogger

Adding An Element Below First Post

Customize Blogger's Lightbox

How to Change the Blogger's Lightbox Background and Style?

Note:

Gzero Buttons With CSS3

How to add it To Blogger?

HOW TO REMOVE BLOGGER DEFAULT SHARE BUTTONS

HOW TO REMOVE BLOGGER DEFAULT SHARE BUTTONS

Dynamic social Bar For Blogger

How To Add It To Blogger

Stylish Popular Post Widget with 3D Effect for Blogger

Disable Copy Paste Except Specified Codes Using Css

Advantages of this CSS:

How to add this CSS to your blog ?

Editing CSS