Featured Posts Thumbnail

Paste On Layout Page - Add A Gadget - Html/JavaScripts

<center>
    <div id="headerbox">Featured Videos</div>
    <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://sites.google.com/site/fordizoo/scripts/featurevideo.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    FeaturedPostSide({
    blogURL:"http://www.videopoh.blogspot.com",
    MaxPost:8,
    idcontaint:"#featuredpostside",
    ImageSize:200,
    interval:5000,
    autoplay:true,
    tagName:false
    });
    //]]>
    </script>
    <link href='http://fonts.googleapis.com/css?family=Oswald:100' rel='stylesheet' type='text/css'/>
    <style scoped="" type="text/css">
    /*
    Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
    */
    ul.abt-sidebar-slider * {
        -moz-box-sizing: border-box;
    }
    ul.abt-sidebar-slider {
        font: 5px Verdana,Geneva,sans-serif;
    }
    ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
        list-style: none outside none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    ul.abt-sidebar-slider {
        height: 450px;
        width: 100%;
    }
    ul.abt-sidebar-slider li {
        display: none;
        float: left;
        height: 24.5%;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 100%;
    }
    ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
        display: block;
    }
    ul.abt-sidebar-slider li:nth-child(2) {
        left: 0;
        top: 50%;
    }
    ul.abt-sidebar-slider img {
        border: 0 none;
        height: 100%;
        width: 100%;
    }
    ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
        transition: all 0.4s ease-in-out 0s;
    }
    ul.abt-sidebar-slider li:nth-child(4) {
        left: 0;
        top: 75%;
        width: 100%;
    }
    ul.abt-sidebar-slider li:nth-child(3) {
        left: 0;
        top: 25%;
    }
    ul.abt-sidebar-slider .overlayx {
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
    }
    ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
        border: 0px solid #2E8DCE;
        border-radius: 3px 3px 3px 3px;
    }
    ul.abt-sidebar-slider .overlayx:hover {
        opacity: 0.1;
    }
    ul.abt-sidebar-slider h4 {
        color: white;
        font-family: Oswald;
        font-size: 15px;
        font-weight: 70;
        line-height: 1.5em;
        margin: 0;
        padding: 0 10px;
        position: absolute;
        top: 25px;
        width: 100%;
        z-index: 2;
    }
    ul.abt-sidebar-slider .label_text {
        bottom: 10px;
        color: white;
        font-size: 90%;
        left: 10px;
        position: absolute;
        z-index: 2;
    }
    ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
        display: none;
    }
    .buttons {
        margin: 5px 0 0;
    }
    .buttons a {
        display: inline-block;
        height: 25px;
        position: relative;
        text-indent: -9999px;
        width: 15px;
    }
    .buttons a:before {
        border-color: transparent #535353 transparent transparent;
        border-style: solid;
        border-width: 8px 7px;
        content: "";
        height: 0;
        left: 50%;
        margin-left: -10px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        width: 0;
    }
    .buttons a.nextx:before {
        border-color: transparent transparent transparent #535353;
        margin-left: -3px;
    }
    .date {
        background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
        bottom: 93px;
        padding: 8px;
        position: relative;
        right: 6px;
    }
    #headerbox {
        background: #8FB93D;
        font-family: Oswald;
        padding: 4px;
    }
    </style>
    </center>

Random Video Embeded

Paste This Code on Page Layout - Add a Gadget - HTML/Javascript


<script type="text/javascript">
var videos = [
    '1271942',
    '6692106',
    '4602387'
];

var index=Math.floor(Math.random() * videos.length);
var html='<div class="span4"><h3 class="meet">Random video</h3><iframe width="100%" height="200" src="http://flashservice.xvideos.com/embedframe/' + videos[index] + '" frameborder="0" allowfullscreen></iframe></div>';
document.write(html);
</script>

Random Posts With Thumbnail ( simple grid )

Place this style after ]]></b:skin>
<style>
#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important;  padding: 0 !important;  }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

</style>


Place it on the window layout - Add a Gadget - Html/Javascipt

<div id="random-posts">
<ul>
<script type="text/javaScript">
var rdp_numposts=12;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"http://jokuci.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type="text/javaScript">
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbgyYUc8jydq6f5VR6c4uAuho2uQg9F6kjQBYR3tKPdHgtm2Z1ZWjB64O426Cml4je_pBMSUv1f7E8vGJ4wE60aWl9L1h965EMGP2O4l6rW4XRonjtcR-KEfLf3xM8nyGw3VAN484_ogC//"}}};document.write('
<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both">
</div>
</li>
')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"http://jokuci.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>
</div>

Save



DEMO : Look right on this page

FLOATING DIV in scroll following

1. Place on <HEAD>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript">

            $(document).ready(function(){

         //on window scroll fire it will call a function.

                $(window).scroll(function () {

         //after window scroll fire it will add define pixel added to that element.

                    set = $(document).scrollTop()+"px";

        //this is the jQuery animate function to fixed the div position after scrolling.

                    $('#floatDiv').animate({top:set},{duration:1000,queue:false});

                });

            });

         </script>

    <style type="text/css">

    #floatDiv {
        position:absolute;
        left:10%;
        margin-top:200px;
        margin-left:-200px;
        width:200px;
        height:200px;
        background-color: red;
    }
          
    </style>

2. Place on <BODY>

<div id="floatDiv">
... content here ....
        </div>


Note : The scripts can also put in your posts


Demo : Scrool Down Up and Look red box on left page

RED BOX...
RED BOX...
RED BOX...

Make Blank Page On Blogger

1. Dashboard
2. Template ➩ Edit HTML
3. Delete All Template Source, Paste with New Template Source below

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*
-----------------------------------------------
Blank Blogger Template
Name:        Blank Blogger Template
URL:         http://lwthacking.blogspot.com
----------------------------------------------- */
]]></b:skin>
</head>

  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div style='margin-top:700px; '>
<br/>
<center><b><font color='#ffffff'>&#169; All Rights Resrved by <a href='http://Lwthacking.blogspot.com' style="color: #ffffff">LWTHacker</a> 2013.</font></b></center>
</div>
  
</body>
</html>

4. Save Template


DEMO :