How to Disable Dragging in Blogger Website

 

Disabling Drag option can come handy when you want to protect your unique work from the robotic copiers and others whom you do not trust. So with this simple hack you can disable mouse dragging so person will not able to drag text and images on your website hence giving no chance for copying well he may get some alternate way to copy out the content but still this will protect your blog in a great way.

So now if you are in need of applying this on your blog, well tut is below and can be followed easily.

1. Go to Blogger.com and Sign in to your account, now choose your blog.

2. Navigate to Template > Edit HTML Section and hit Proceed.

3. Now press Ctrl + F to open the search feature and than search for <body tag.

4. Now you will see <body with a something more code after it so you have to paste the below code right after it which will make code look like in the image below.

ondragstart='return false' onselectstart='return false'

5. Now just click save template and click view Blog and check out if this small code is making wonders or not well it works perfect as I was using this same thing to protect my blog from scrappers but due to many request to disable it from my blog I did it now but it’s a great way to protect your blog so have fun :)

Add CSS3 Bricks/Box Style Labels To Blogger

In this tutorial we will see how to customize blogger labels with CSS3 and make them bricks or box style.We will apply this hack with using of pure CSS3 and will replace some existing code with new code in your template.These css3 bricks/box labels really attract readers.I am also using these bricks/box style label on this blog,you can see demo at right sidebar of this blog.Now lets see how to apply this hack.

How To Customize Blogger Labels With CSS3?

First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.

1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox
6. Find below code in your template

]]></b:skin>

Add below CSS code just above it,

/*CSS3 Bricks Style Labels By http://bloggertipsandtrickz.blogspot.com/ */

#textwidget {

    color: #666;

    font-size: 0.925em;

    font-style: italic;

    line-height: 1.6em

}

 

a.tag {

    color: #777;

    font: 9px verdana;

    text-transform: uppercase;

    transition: border-color .218s;

    background: #f4f4f4;

    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

    display: inline-block;

    text-shadow: 0 1px 0 #fff;

    -webkit-transition: border-color .218s;

    -moz-transition: border .218s;

    -o-transition: border-color .218s;

    transition: border-color .218s;

    background: #f3f3f3;

    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

    border: solid 1px #ccc;

    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    margin: 0 4px 4px 0;

    padding: 3px 5px;

    text-decoration: none

}

 

a.tag:hover {

    color: #333;

    border-color: #999;

    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 1px 2px rgba(0,0,0,0.15)

}

 

a.tag:active {

    color: #000;

    border-color: #444

}

 

.slides {

    font-size: 85%;

    line-height: 130%;

    overflow: hidden;

    padding: 0;

    margin: 30px 0 10px;

    border-bottom: 1px solid #000

}

/*CSS3 Bricks Style Labels By http://bloggertipsandtrickz.blogspot.com/ */

Now find below code,

<b:widget id='Label1' locked='false'

find it until 

</b:widget>

replace code from <b:widget id='Label1' locked='false'.........
to
</b:widget> with below code,

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>

    <b:includable id='main'>

        <b:if cond='data:title'>

            <h2>

                <data:title/>

            </h2>

        </b:if>

        <div class='textwidget'>

            <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

                <b:if cond='data:display == &quot;list&quot;'>

                    <ul>

                        <b:loop values='data:labels' var='label'>

                            <li>

                                <b:if cond='data:blog.url == data:label.url'>

                                    <span expr:dir='data:blog.languageDirection'>

                                        <data:label.name/>

                                    </span>

                                    <b:else/>

                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

                                </b:if>

                                <b:if cond='data:showFreqNumbers'>

                                    <span dir='ltr'>(

                                        <data:label.count/>)</span>

                                </b:if>

                            </li>

                        </b:loop>

                    </ul>

                    <b:else/>

                    <b:loop values='data:labels' var='label'>

                        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

                            <b:if cond='data:blog.url == data:label.url'>

                                <span expr:dir='data:blog.languageDirection'>

                                    <data:label.name/>

                                </span>

                                <b:else/>

                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

                            </b:if>

                            <b:if cond='data:showFreqNumbers'>

                                <span class='label-count' dir='ltr'>(

                                    <data:label.count/>)</span>

                            </b:if>

                        </span>

                    </b:loop>

                </b:if>

                <b:include name='quickedit' />

            </div>

        </div>

    </b:includable>

</b:widget>

Now take a preview and save your template.

Facebook Like Button In Blogger Comment

You can easily see this type of plugins in many of the WordPress Blog. We simply place an Facebook like button above every comment form as shown in above figure. Reader can easily like your content with only one click. So we can't ignore the importance of this plugin as it may boost the blog traffic considerably.  This plugin uses simple script and can be easily added to Blog.Previously I had write a article to Add share button below every post of the Blog. So lets start to add Facebook like button to comment form.

How to Add Facebook like Button:-

1. Login to Blogger Dashboard.
2. Go to Design / Edit HTML.
3. It is necessary to download full template before making any changes in it .
4. Click "Expand widget template".

5.   Find (CTRL + F) or search following piece of code in template.

<data:postCommentMsg/>

Note:-

If you find above code in more than one position then you will have to select the code wrapped in heading tag ( ex. <h>,<h1>... <h6> ). for example

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

6. Copy the following code and paste it just after the <data:postCommentMsg/>.

  <!-- http://bloggertipsandtrickz.blogspot.com/ -->                <iframe allowTransparency='true' 
expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;
 + data:post.url + 
&quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;'
 frameborder='0' scrolling='no' style='margin-top:20px;border:none; overflow:hidden; 
width:450px; height:60px;'/> 

7. Your new code will look like this.

<h4 id='comment-post-message'><data:postCommentMsg/> <!-- http://bloggertipsandtrickz.blogspot.com/--><iframe allowTransparency='true' 
expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;
 + data:post.url + 
&quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;'
 frameborder='0' scrolling='no' style='margin-top:20px;border:none; overflow:hidden; 
width:450px; height:60px;'/></h4>

8.Finally save the template and see the result.

Improve Blog Appearance With CSS Triangle

CSS( Cascading Style Sheet ) can be used in number of ways with blog. You can easily improve the appearance of blog using CSS. Here we will discuss to create small triangle using CSS and apply it further to the blog template. We will add this triangle below the title of sidebar widget which looks so cool.

How To Create Triangle Using CSS:-

The idea is all about a box which have zero width and height. So take a look to CSS code.

.arrow-up     /* It Creates upward Triangle */ 
        {  
        width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
   border-bottom: 5px solid black;
        } 
 .arrow-down   /* It Creates downward Triangle */ 
    {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
   border-top: 20px solid #f00; 
} 
 .arrow-right   /* It Creates right pointed Triangle */
{
  width: 0;
  height: 0; 
 border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
   border-left: 60px solid green;
 } 
 .arrow-left   /* It Creates left pointed Triangle */
 {  width: 0;
  height: 0; 
 border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
    border-right:10px solid blue; 
}

How To Use CSS Triangle In Blogger Template

Wow! have you seen the result ? You can add this small triangle below the background of sidebar's title as we does in above figure.
Note: You may find difficulty in adding triangle below the title of widget because it requires to find the appropriate code of widget below which the corresponding CSS code is to be added.

Add CSS Triangle Below The Subscribe Widget

1. Login to Blogger Dashboard.
2. Go to Design /  Edit HTML.
3. Click "Expand Widget Templates".
4. Download the Full template before making any changes in it
5. Copy the title of subscribe widget from the blog homepage. As in my case the title of subscribe widget is Subscribe via email.

6. Find that word in blogger template.

 

<b:widget id='HTML2' locked='false' title='Subscribe via email' type='HTML'>
<b:includable id='main'>

 <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>
        .
        .
        .

Paste the following code just below the <h2 class='title'><data:title/></h2>.

<div style='   width: 0;   height: 0;   border-left: 10px solid transparent;   border-right: 10px solid transparent;    border-top: 10px solid #0084CE;    position:relative;margin-left:auto;margin-right:auto;    bottom:10px;    '/> 

Note:How To Modify The Code

• margin-left:auto or margin-left:auto specifies the middle alignment of the triangle.To move the position replace auto values with pixel values. margin-left:60px  margin-right:auto it will take 60px from the left side.
• border-top: 10px solid #0084CE it will change the color of triangle.

In Similar way you can add triangle to Facebook Fan Page , Labels and Popular Post. The main thing is to remember that you have to find the Title of widget in template, which you will get from homepage of the Blog.

Google Flag Translator

I gave a widget form so that you can directly add it on your blog.This widget contains flags of more than 32 languages. With hover title effect, When you hover your mouse on any flag then it will shows a title of that language.It will convert all pages automatically and changes to size of the gadget box.First see the Demo.

Demo:

How To Add Google Flag Translator To Blogger ? 

 Now let's see how to add this awesome widget to blogger

Go Page elements>>>> Add Gadgets>>>>Copy and paste this Code

<style type="text/css">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="w2bgft"><!--Google Flag Translator by  --><form action="http://www.google.com/translate"><script language="JavaScript">document.write ("<input name=u value="+location.href+" type=hidden>")</script><noscript><a href="http://bloggertipsandtrickz.blogspot.com/">BTT</a></noscript><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/><input onclick="this.form.langpair.value=this.value" title="English" value="auto|en" type="image" height="20" src="http://www.google.com/images/flags/uk_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="auto|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Greek" value="auto|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Hindu" value="auto|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="German" value="auto|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Dutch" value="auto|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Russian" value="auto|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="auto|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Polish" value="auto|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Czech" value="auto|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Croatian" value="auto|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="French" value="auto|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Italian" value="auto|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Portuguese" value="auto|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Spanish" value="auto|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Arabic" value="auto|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Japanese" value="auto|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Korean" value="auto|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="auto|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Danish" value="auto|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Finnish" value="auto|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Norwegian" value="auto|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Swedish" value="auto|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Catalan" value="auto|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Filipino" value="auto|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Hebrew" value="auto|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Indonesian" value="auto|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Latvian" value="auto|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="auto|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Serbian" value="auto|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovak" value="auto|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovenian" value="auto|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="auto|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="auto|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/><span style="float:right;margin:3px 5px;font-size:10px;"><!—please do not remove credits --><a href="http://truebloggertricks.blogspot.in/2012/08/google-flag-translator.html">Get this from TBT</a></!—please></span></form><!--Google Flag Translator by  B--></div> 

Now save it and refresh your blog.....