Thursday, February 27, 2014

  •    Random DIV Loaded
  • Place on <body> or Layout Page  (blogger support )

    <div class="item" >... your content here...</div>
    <div class="item" >... your content here...</div>
    <div class="item" >... your content here...</div>
    <div class="item" >... your content here...</div>

    <script type="text/javascript">
    var random = Math.floor(Math.random() * $('.item').length);
    $('.item').hide().eq(random).show();
    </script>


    Demo : Refresh this page will change the color of the div as an example on the right

    Wednesday, February 19, 2014

  •    How to Make DIV Appear & fade out at Certain Times in Accordance with The Time Specified
  • Copy code below and paste after <head>

    <script type="text/javascript">
    function showIt() {
    document.getElementById("hid").style.display = "block";
    }
    setTimeout("showIt()",12000);
    $(document).ready( function() {
            $('#hid').delay(1000).fadeOut();
          });

    </script>

    Place anywhere on  <body> or place on Layout Page ( add a gadget - html/javascript )

    <div id="hid" style="width:200px;height:200px;opacity:0.1;background-color:orange;text-align:center;display:none;">
    this is Loading & Fade Out DIV with timer
    </div>

    Note; always use the latest jquery
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
    </script>


    DEMO : wait a minute and it will show up div with orange background

    Thursday, January 30, 2014

  •    Sticky Sidebar Page Per Widget

  •  Place the following code above </body>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>
     <script type='text/javascript'> $(function() { 
    var offset = $(&quot;#HTML7&quot;).offset(); 
    var topPadding = 35;
    $(window).scroll(function() { 
           if ($(window).scrollTop() &gt; offset.top) { 
             $(&quot;#HTML7&quot;).stop().animate({ 
                       marginTop: $(window).scrollTop() - offset.top + topPadding }); }
     else { $(&quot;#HTML7&quot;).stop().animate({ marginTop: 0 }); }; }); }); 
     </script>




    The BLUE color is replaced with a widget on your blog that will be made stiky ( ID WIDGET )
    if there had been no need jqueryscript then given again
    DEMO : try to scroll the page and look to the right

    Friday, January 24, 2014

  •    Animated Background
  • Place it in your html code Please see below for the script  
    example of use :

    <html>
    <head>
    <title></title>
    [... the contents of the scripts  SAWI1.min.js .....]

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

    [... the contents of the scripts  SAWI2.js .....]

    </head>

    <body>

    [... the contents of the scripts  SAWI3.min.js .....]

    <canvas id="theapt" style="background-color: black; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: -1;"></canvas>

    </body>
    </html>

    Note : canvas is a field or area of ​​the animation will run




    Download Scripts :
    - SAWI1.min.js
     - SAWI2.js
    - SAWI3.min.js


     DEMO

    Tuesday, December 3, 2013

  •    Related Posts With Thumbnail
  • 1. Go Dashboard - Template - Edit Html
    2. Paste this code Above </head>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;padding-left:5px;}
    #related-posts h2{
    font-size: 1.2em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black; }
    #related-posts a:hover{
    color:black;
    }#related-posts a:hover {
    background-color:#d4eaf2;}
    </style>

    <script type='text/javascript'/>
    //Script by Aneesh of www.bloggerplugins.org
    //Released on August 19th August 2009
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    var thumburl = new Array();
    function related_results_labels_thumbs(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    try
    {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}


    catch (error){
    s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
    thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRjtD2NxJ35aGXUUB1ZrfXCoWKK0hEVVHOJyKa2uREhUrwAsayoMMz0RWCbx3BBTX5-1BfcHjtrTy_oIUxVmpaflvmYqryGq2OBfTxM_mA4o4am3j4pwCO0pglzVf1Pkf6FyBxnegHjJY/s400/noimage.png';




    }

    if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;


    }
    }
    }
    }
    function removeRelatedDuplicates_thumbs() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    var tmp3 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains_thumbs(tmp, relatedUrls[i]))
    {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp3.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    tmp3[tmp3.length - 1] = thumburl[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    thumburl=tmp3;


    }

    function contains_thumbs(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels_thumbs() {
    for(var i = 0; i < relatedUrls.length; i++)
    {
    if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
    {
    relatedUrls.splice(i,1);
    relatedTitles.splice(i,1);
    thumburl.splice(i,1);

    }
    }


    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;

    if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
    document.write('<div style="clear: both;"/>');
    while (i < relatedTitles.length && i < 20 && i<maxresults) {


    document.write('<a style="text-decoration:none;padding:5px;float:left;');
    if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
    else document.write('"');
    document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');


    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</div>');

    }

    </script>
    </b:if>



    3. Paste this code on <body> , place where you like or
        Paste the code below
        <div class='post-footer-line post-footer-line-3'>


     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.omseoli.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=6;
    var relatedpoststitle=&quot;Related Post With Thumbnail&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if> 



     DEMO : see below