Tutorials And Entertainment: BLOGGER HTML TRICKS

Showing posts with label BLOGGER HTML TRICKS. Show all posts

Monday, 11 March 2013

How To Protect Your Blog or Page Using Password

1ST METHOD

1. Login to your blogger Account >> Dashboard >> Edit Post >> Edit Pages

2. Now add the one of code given below to your page

<script language="JavaScript">
var password;
var pass1="PASSWORD-HERE";
password=prompt('Enter your password in order to view this page!',' ');
if (password==pass1) alert('Correct password, OK to enter!');
else {
  window.location="SITE-LINK";
}
</script>

Note: Replace PASSWORD-HERE with your password and SITE-LINK with your page

SITE-LINK : 2011/04/how-to-protect-your-blog-or-page-using.html

3.Now Save your "Page" and You are done,

cheers

THANKS TO
http://www.bloggertricksandtoolz.com/

2ND METHOD

Create a New Page on your Main Blog.
- If you are password protecting Blog B which is a family blog for example, then in your main blog, Blog A, you may wish to create a "page" thats entiled "Password Needed" and in that page you write a simple note explaining that "The blog you were trying to view is password protected. If you feel you are reaching this message in error, please contact me at <your email address>."
- Publish the page (no gadget to be added).
- View Page to get the URL.
Save/Note this URL as you need it in the following steps.

Put into action!

Next, login to Blogger, go to the Dashboard and click Design. If using the new Blogger interface, then go to your blog and click on Layout (from the left).

Next, click Add a Gadget and choose HTML/JavaScript.

Copy and paste in this code (also downloadable here) in the large text box (leaving the title blank):

Edit this code.

Change the occurances of the word TypePad with whatever password you want to use.
Replace the URL of http://www.BlogsByHeather.com with the URL from the page you previously created above in the prep work area.

In the HTML/JavaScript gadget, click Save to save the code.

That's it, you're done! Your site is now password protected and they will need the password to get in. PLEASE NOTE HOWEVER, this is not the most secure way of password protecting a page! It's just the only way that is available for Blogger.

To Password-Protect a Page Only (not the entire blog)

If you don't want to protect your entire blog but just a "page" that my have videos or private information for just your downline or family.

Create your page as you normally would.
Finishing composing the page until the only thing left is to "protect" it.
Switch to Edit HTML view.
Copy and paste in the code below to the top of your page.
Edit the password (in my example it is TypePad) and the site to be directed to if the password is incorrect (in my example it is my site).
Then you can Publish the page.

When you the go to view the page, you will be prompted for the password. If it is CORRECT the page content will be shown. If it is WRONG then they are directed to your main site or another page you may have created for an "Oops. try again".

Remember to replace the TypePad password I used in my example and replace my site address(http://www.blogsbyheather.com) with your own!

Click here to download the text file so you can copy and paste, edit the code for your page!

IMPORTANT NOTES:

When logging into your Blogger blog, do so from the main blogger site, http://www.Blogger.com. This will allow you to login and access your blogs in case you accidentally put the code in the wrong place or on the wrong blog.

If you get stuck, feel free to post a comment here as others can benefit from your questions and answers :D

Heather :D

THANKS TO --

Heather Wright-Porto
www.BlogsByHeather.com

Sunday, 10 March 2013

How To Protect Your Post With Password in Blogger

Whenever we think about security the first words arrives in our mind is “Password Protection”. We are in 21^st century the era of information technology, now days almost every thing has highest security i.e. online communities, files, documents and etc. Security plays vital role and have great significance when it comes to the personal matters and complex things. If the entire world is getting protected so why do we bloggers left behind.

An extremely powerful and useful script for blogger Blogspot blogs has been introduced by well known blog vincentcheung This script is capable of hiding what ever text you want in a form of encrypted code which can be uncovered if your users know the password to see the hidden text. Currently it is the most useful and secured method of protecting our post which I personally liked a lot. The hidden text is not easy to crack so it remains hidden from un-welcomed visitors. And according to the creator even he cannot decrypt (View) the hidden text except the person who knows the password. The whole systems works like a security lock which will only operate if we have the key to unlock so Today we will Password Protect our Bloggers Posts.

I know you would love to see the live demo that how the whole process works so before we spin our fingers over the tutorial first look at the instant preview.

Online DEMO Password Protected Post in Blogger

Adding JavaScript To Blogger Blogs:

These steps are simple so do as directed

Go To Blogger.com >> Your Blog
Now Select Template >> Edit HTML
Now Press Proceed >> And Search For

]]></b:skin>

And Now just below it paste the following code

<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

How To Password Protect Our Post in Blogger

Now it is up to us whatever we wish to show images, text, videos, or any thing to only preferred visitors. So to password protect a certain content of your post simply go to Blogger.com >> Create Post and once you are finished do as directed

Step #1. Now Switch to HTML mode and copy all the code that is present there as shown in the image below

Step #2. Now we will go to Encryption Page. On this page you will be able to see four boxes

One with yellow color is called Key Box.
One with green color is called Plain Text Box
One with red color is called Cipher Text Box.
And one with blue color is called HTML Code Box. But we are only interested in Key box, Plain Text Box and Html Box. so do as follows.

Enter your desirable password in Key box.

Now we will Paste the code into Plain Text Box which we copied from Blogger post editor.

And Now after Pasting the code Hit Encrypt button present below Plain Text Box

After Pressing Encrypt Button COPY the code from the HTML CODE box

The Html Code which you copied in the previous step is the same post that you created previously in Blogger but this time you will observe strange illogical characters so don’t worry it is the same post with same images, videos. Now you can use this HTML code in your any posts and instead of seeing the big sum of code your visitors will see a link >> Show Encrypted text.

Step #3. Now after copying the code get back where we were working previously,Blogger >> Create Post >> Now in the Blogger Post Editor under HTML TABpaste the HTML code which your copied earlier. You can write anything instead of this text >> Show Encrypted text But make sure you do all the changes under HTML TAB

So That's how we can password protect our post in Blogger. This is a new feature which we discovered I hope you will enjoy this newly introduced function. Till then Peace, Blessings, And Happy Protecting

2 WAYS TO MAKE A POST STICKY ON BLOGGER & BLOGSPOT

HOW TO CRAETE A SLIDESHOW FOR BLOGGER & BLOGSPOT

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.

This tutorial updated: 2013/02/02

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[


(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

NOTE : To change the speed of slideshow, change the value 4000.

4.Save your template.

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlO9lALY_tZMnTWYsAeuUaLFVXDfmdpxZ86jxsUKJnUmSaobNd2o0wRA68HWyCdIivj_gzieMp2anqQ1SkmBlxy2ho0NchECTPUOXtVDS6uCctmqAkQ8H_lPz0IfSMnVbyjUqzIYXCCa0/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="YOUR IMAGE LINK HERE" /><span>Halo 3 : Play Game Online</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="YOUR IMAGE LINK HERE" /><span>Avatar : Watch Movie Now !!!</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="YOUR IMAGE LINK HERE" /><span>Call Of Duty 4 : Get Here</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class='clear'></div>

NOTE : Replace YOUR-LINK-HERE and YOUR IMAGE LINK HERE with your content.

&

Now you have successfully installed this slide show to your site.

Thursday, 7 March 2013

How To Add Auto ‘Read More’ Feature with Thumbnails

This nice trick will automatically create post summaries with thumbnails. You don't need to add any extra code in every blogger post that you make.

Tutorial Updated : Jan 1, 2013

1.Go to "Template" --> "Edit HTML" of your blog.

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code just before </head> tag.

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }

 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

//]]>
</script>

Note : You can change below values as your choice.

summary_noimg : number of character to display when there is no image.
summary_img : number of character to display when there is an image.
img_thumb_height : hight of the post thumbnails.
img_thumb_width : width of the post thumbnails.

5.Now Scroll down to where you see this:

<data:post.body/>

6.Replace above code with below code.

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

7.Now save your template and you are done.

How To Disable Highlight Text on blogger blog

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

Now you are done.