Background Move

Posted by Admin Posted on 00:04
Unique Info this time about one of the tricks to make a dynamic background image blog. This trick uses a simple JQuery devoted to create a moving background image (Scrolling Background). This script makes a blog background image moves vertically from the bottom to the top. For bloggers who want to try it please be listened tricks to make scrolling background below.


  • Login » blogger.
  • Draft »Edit HTML.
  • If you have not used the code JQuery JQuery you please put the following code just above the code </ head> .

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>

  • Copy-Paste the following code just above the code </ head> .

    <script type='text/javascript'>
    //<![CDATA[
    $(function(){
    // ***
    // Scrolling background
    // ***
    // height of background image in pixels
    var backgroundheight = 4000;

    // get the current minute/hour of the day
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();

    // work out how far through the day we are as a percentage - e.g. 6pm = 75%
    var hourpercent = hour / 24 * 100;
    var minutepercent = minute / 30 / 24 * 100;
    var percentofday = Math.round(hourpercent + minutepercent);

    // calculate which pixel row to start graphic from based on how far through the day we are
    var offset = backgroundheight / 100 * percentofday;

    // graphic starts at approx 6am, so adjust offset by 1/4
    var offset = offset - (backgroundheight / 1);

    function scrollbackground() {
    // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
    offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
    // apply the background position
    $('body').css("background-position", "50% " + offset + "px");
    // call self to continue animation
    setTimeout(function() {
    scrollbackground();
    }, 70
    );
    }
    // Start the animation
    scrollbackground();
    });

    //]]>
    </script>
  • Copy-Paste the following CSS code just above the code </ head> to set the background image. You can change the background image to which you want to change the address of hosting images on the CSS code below to the address you have chosen an image hosting.

    <style>
    body {
    background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMF2P6LuiX1Qaja3cvIyUUA3g0194NIf8WaFAjxUUbZh8IG3FSyEl6E5ZxpTI7F7X5cjIRyAseV2ihSwO9Qw0-VzYnJt9jZCNp7Tr1tBEIkPQL2yiOqigNBbFKvI0XqGdTQF3lDEsRSSID/s800/bg.gif) repeat center; background-attachment: fixed;
    }
    </style>

  • Description:
    - repeat / / Repetition of images x and y directions.
    • repeat-x / / Repeating images horizontally only.
    • repeat-y / / Repetition vertical images only.
    - http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif / / URL Link gambar.
    - Center / / location in the middle of the screen image.
    • Left / / What image is on the left image.
    • Right / / What image is on the right image.

Background Image Options


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMF2P6LuiX1Qaja3cvIyUUA3g0194NIf8WaFAjxUUbZh8IG3FSyEl6E5ZxpTI7F7X5cjIRyAseV2ihSwO9Qw0-VzYnJt9jZCNp7Tr1tBEIkPQL2yiOqigNBbFKvI0XqGdTQF3lDEsRSSID/s800/bg.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuULE6oueF9BANNNdHVeaM6B2wDn-wvlq-US5nW7wM9N0llb9pNkUkZwqpyjbwNzGi6SNUZA3CxegI9oNIrtlmamV44SwJzafqtQGcxeGPN0ruTXk5p4iMGoFCW-CSz-z6-Tw8tCSGWne0/s800/bg_star.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRO_cUM-OWUYCtqeqgmVrPj3kUnc97qZtb_W_y0Utx8yfvwSIv4ehIlnOBTW55R-PZhJJH6NgRhdEmZh-j0pUDQZpYMf0jNJ7gkqHdEuGGfTyC5gKHEanuCPjobGRDLRt0J1LuGmoHO4J8/s800/bg-clouds.jpg



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiiv-VI_FxkNX46AN48MVb9Lhnf8vNwsmc_yLoj1imw_QynsCauqmZTN0YBA62XTOAAGRCl4ViNXsKFU08GTrky7kxRqCWliaW5RqDKtmWxv8s1JPtx9KdeBvrKTr-b2M6Pfh8uJHUO5Z7/s800/skull-fire-monozcore.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4l0A2wC-ZleslVSuq1tdf3PMVvMrs6k8Lky4MwfUF9oXrTgMiYOrsA4q4KJk1rUpqKgkOlQ3KE1ttSpejA_xObHJlfcXCsazUr__vfPKf1ZjnYPqlY-yJMvt9Ob_MfRlGAZ_-BFwS-vJs/s800/dance_flow.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqPrusfEhxfeKiFf7qiXZJxrHupXpucV-AEi1wC3mFPOJeoGMpCF9Eq80H19umvpfMSZNUOhJIstifa6jBVXPvkN7MEr0mcKo_4h-HLTuD5DCAoFEP0rEGv3zjkIWNZvjcae3Y1uzCNtDg/s800/ThighHeels.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ0iyFS68VjPVkXOR0XfEp3nR1eON8sgggcUT541sXOoBOMQORk-fulPPo4rhkEZjtLht1FkZK-LcRiYAS6_645Q9RdAsKMtuEi78_lt_Jn9nzGveBd57j_N4mlNyYfcQsRNJUX5i31vSq/s800/animated%2520stars.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-IJQL6Rc6T0CKxqJ1NGZXbPIRgcYxR226SBDjKZVCGfo04hm67vAVz5ptf0rB6STfDL8uEQNtrJI2pWP0Y7jyTqYoHIdL8slj_UCJ-rhsrxMyvfMGPAHGv6xOl509SjQGozvhMzraCMZY/s800/animated%2520blue%2520stars.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4yGEv80jjJ8J5xLT6Kne1K2ALhLidLg472IZ0DV8HWkPBqZNQELrv2JEgF6heUlHJwfIsNIttQd-nLluiiSxbDMxFIZBaRrD3NaoDl6cGezYMY3sdlOcWY0xoOyoq6fkkvJ0bUskqHPSH/s800/devil_angel_lolita_bg.png
.:Luck:.

The Best Technic
Read more »

Cursor Meteor Script

Posted by Admin Posted on 23:37

Oke,,,,,topics we will discuss the effect of the cursor that is unique and certainly interesting. The advantages of a professional blogger lies in creativity in presenting the content and look of the blog is interesting, nahh ... This time I will only share one way to make your blog a stylish look. The trick is to install the script meteor circle effect, this script is difficult to know if ga dapetin believe try searching on google .... hehehe. Thanks to the support of my friend monozcore all .. My efforts finally managed to get this script. Please aspirated sob script n happy blogging ...

Installation:
  • Login to yours blog ...

  • Click on "Design" and then click "Edit HTML" checkbox then click on "Expand Widget Templates", as shown below.

    cursor meteor

  • Find the code </ head> in your template (press CTRL + F to display the search box in the browser and speed up the search) then copy the code below and paste on top of the code </ head> is.

    <script language="JavaScript" src="http://monozcore-project.googlecode.com/files/CursorMeteorScript.js" type="text/javascript">
    </script>

  • Click "Save" and see the results ...

The Best Technic
Read more »
Label: