Showing posts with label Widgets. Show all posts

Snowfall Effect using CSS for Blogger Blogs

Metro Style Ticker For Blogger Posts


A ticker is basically shows the important news and entries but in our case we will be using this ticker to show the latest posts in a nice metro design attracting the visitors attention while they are watching a old post of your this will help them to find more recent and awesome posts.


  • DEMO


  • Code

    You can add it anywhere in your blog using the template editor or the Layout.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
    <style>
    #headlines {
    overflow:hidden;
    position:relative;
    line-height:25px;
    background:#34495e; /* Background Color Code By Bloggeraxe */
    height:45px;
    padding:0 0 0 135px;
    }
    #headlines h3 {
    color:#fff;
    font-family:Oswald, sans-serif;
    font-size:17px;
    font-weight:400;
    text-transform:uppercase;
    margin-left:-115px;
    margin-top:10px;
    position:absolute;
    }
    #headlines .right_arrow {
    padding:0 38px 0 110px;
    display:block;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDyWwaiuqcg0WXTwCNVpoh2C1RrtiYuP39MduBIbsWpk0HEAy1KR7JQ4aVVYpECqjqVvxl8RjbCpnFS5QgvHbY6Xk0JLKkxd26KHFkvRqsZgovWVpXVbdmbYWkdLOhyphenhyphen1SohAMU4yVGP8W/s41/arrow.png) no-repeat right center;
    height:46px;
    line-height:46px;
    position:absolute;
    left:0;
    top:0;
    }
    #ticker_post {
    position:relative;
    margin:0;
    margin-left:20px;
    height:50px;
    width:auto;
    }
    .marquee {
    width: 980px; /* Width of the area where entries are shown Code By Bloggeraxe */
    overflow: hidden;
    line-height: 45px;
    }
    .js-marquee a {
    font-family:Oswald, sans-serif;
    font-size:15px; /* Size of texts Code By Bloggeraxe */
    color: #FFF; /* Color of text Code By Bloggeraxe */
    padding-bottom: 20px;
    text-decoration: none;
    }
    .ticker_separator {
    color:#FFF; color: #FFF; /* Color of Posts Code By Bloggeraxe */
    margin:0 10px;
    }
    </style>
    <div id='headlines'>
    <h3>News</h3>
    <div class='right_arrow'></div>
    <script>
    var blog_url = "http://bloggeraxe.blogspot.com";
    var numero_post = 10; // Number Of Posts Code By Bloggeraxe
    </script>
    <script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
    <div style='clear:both;'></div>
    <script>
    $(window).load(function() {
    $('.marquee').marquee({
    direction: 'left', // Direction left or right Code By Bloggeraxe
    duration: 25000, // speed Code By Bloggeraxe
    pauseOnHover: true,
    duplicated: true
    });
    });
    </script>

    Rain With Audio For Blogger


    Those who like rain as much as a good cup of coffee. And since I like it too so today I will teach you to add rainfall using Javascipt to your blog. This code is made by GiFFY but I added soft rain sound to it so it is optional.

    Interactive Spider For Blog Decoration

    Hi guys and again we are back with something new which is this amazing interactive spider. It is so awesome and unique and a eye catcher. You can check it out your self down at demo.












    Google Translate Drop Down Widget For Blogger

    Yo Guys, How is it going. This is the first post after our long break hope you likeit; though this widget was not made by us but by Arlina Design. Anyway if you want a translator with flags. Click over here.  This is one of the most important widgets in the Blog as it helps your visitors browse your Blog in their own Language.









    Add It! 

    This widget will look good at the bottom of your page or a the sidebar.

    You can just add it from Layout>> HTML/JavaScript

    <style type="text/css">
    #translator-wrapper {
      display:block;
      width:90%;
      max-width:300px;
      border:none;
      background-color:#fff;
      color:#444;
      overflow:hidden;
      position:relative;
      height:40px;
      line-height:40px;
      border:1px solid #e0e0e0;
    }
    #translator-wrapper select {
      border:none;
      background:transparent;
      font-family:'Verdana',Arial,Sans-Serif;
      font-size:12px;
      width:100%;
      color:#444;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      -webkit-appearance:none;
      cursor:text;
      padding:5px 10px;
    }
    #translator-wrapper a,
    #translator-wrapper a:hover {
      display:block;
      background-color:#4791d2;
      border:none;
      color:#fff;
      margin:0 0;
      text-decoration:none;
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      cursor:pointer;
      width:14%;
      transition:all 0.3s ease;
    }
    #translator-wrapper a:before {
      content:"";
      display:block;
      width:0;
      height:0;
      border:6px solid transparent;
      border-left-color:white;
      position:absolute;
      top:50%;
      left:45%;
      margin-top:-5px;
    }
    #translator-wrapper a:hover {opacity:0.9;}
    #translator-wrapper a:active {opacity:0.9;}
    #translator-wrapper select:focus,
    #translator-wrapper a:focus,
    #translator-wrapper select:active,
    #translator-wrapper a:active {
      border:none;
      outline:none;
      cursor:pointer;
    }
    option {
      background:#444;
      color:#e0e0e0;
    }
    </style>
    <div id="translator-wrapper">
        <select id="translate-language">
            <option value="en" selected="selected">English</option>
            <option value="id">Indonesian</option>
            <option value="af">Afrikaans</option>
            <option value="sq">Albanian</option>
            <option value="ar">Arabic</option>
            <option value="hy">Armenian</option>
            <option value="az">Azerbaijani</option>
            <option value="eu">Basque</option>
            <option value="be">Belarusian</option>
            <option value="bn">Bengali</option>
            <option value="bg">Bulgarian</option>
            <option value="ca">Catalan</option>
            <option value="zh-CN">Chinese</option>
            <option value="hr">Croatian</option>
            <option value="cs">Czech</option>
            <option value="da">Danish</option>
            <option value="nl">Dutch</option>
            <option value="en">English</option>
            <option value="eo">Esperanto</option>
            <option value="et">Estonian</option>
            <option value="tl">Filipino</option>
            <option value="fi">Finnish</option>
            <option value="fr">French</option>
            <option value="gl">Galician</option>
            <option value="ka">Georgian</option>
            <option value="de">German</option>
            <option value="el">Greek</option>
            <option value="gu">Gujarati</option>
            <option value="ht">Haitian Creole</option>
            <option value="iw">Hebrew</option>
            <option value="hi">Hindi</option>
            <option value="hu">Hungarian</option>
            <option value="is">Icelandic</option>
            <option value="id">Indonesian</option>
            <option value="ga">Irish</option>
            <option value="it">Italian</option>
            <option value="ja">Japanese</option>
            <option value="kn">Kannada</option>
            <option value="ko">Korean</option>
            <option value="la">Latin</option>
            <option value="lv">Latvian</option>
            <option value="lt">Lithuanian</option>
            <option value="mk">Macedonian</option>
            <option value="ms">Malay</option>
            <option value="mt">Maltese</option>
            <option value="no">Norwegian</option>
            <option value="fa">Persian</option>
            <option value="pl">Polish</option>
            <option value="pt">Portuguese</option>
            <option value="ro">Romanian</option>
            <option value="ru">Russian</option>
            <option value="sr">Serbian</option>
            <option value="sk">Slovak</option>
            <option value="sl">Slovenian</option>
            <option value="es">Spanish</option>
            <option value="sw">Swahili</option>
            <option value="sv">Swedish</option>
            <option value="ta">Tamil</option>
            <option value="te">Telugu</option>
            <option value="th">Thai</option>
            <option value="tr">Turkish</option>
            <option value="uk">Ukrainian</option>
            <option value="ur">Urdu</option>
            <option value="vi">Vietnamese</option>
            <option value="cy">Welsh</option>
            <option value="yi">Yiddish</option>
        </select><a id="translate-me" href="#" title="Translate"></a>
    </div>
    <script type="text/javascript">
    (function() {
        var mylang = "id", // Your website language
            anchor = document.getElementById('translate-me');
        anchor.onclick = function() {
            window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
            return false;
        };
    })();
    </script>

    And DoNe. 

    Metro Style Search Box V2 For Blogger

    Hi guys this is the second post i post in one day and got the second version of search box you cant see properly what is the effect so there is a live demo below.

    Metro Style V4 Responsive Menu For Blogger


    Hi guys i got a new version for  a metro style menu this is the 4th version we release and in this version the menu is responsive.

    Metro Style Official Blogger Contact Form

    Hi guys today i have an awesome CSS which will convert the blogger official contact  form to metro style as you can see on      ⇜ the image left side.














    Metro Style Small Social Widget For Blogger

    Hi guys i didn`t posted for a long time i was busy designing templates but anyway i have a new widget for your blog lets continue to the tutorial.

    Metro Style Menu For Blogger

    Hi guys today i have an awesome metro style menu only with css and Html.

    Flat UI Style Subscribe Widget For Blogger

    Hi guys! We always used to share metro style widgets but this time we have a flat ui widget this means now we have a new label which will be for Flat UI widgets.

    Admin Panel Widget For Blogger (Only Visible To Admin)

    Hi guys as i said before that i would by designing widgets then templates for blogger so this time i have an Admin Panel widget for your blog only visible to admin of the blog.



    Metro Style Social Media Widget And Search Box with CSS Effects For Blogger


    Hi guys today i have an awesome widget for blogger with metro style social media widget and search widget fully metro styled.

    Scroll Bar With Percentages For Blogger

    Hi guys today i am going to post an widget for adding percentage for scrollbar which can help your visitors to know how long the page or post is .















    Metro Style Menu V2 For Blogger

    Previously i posted a Metro style menu, This time this metro menu has fading effects you can see the demo below.

    Google Plus + button And Facebook Like Box Widget For Blogger

    Hi guys, This time i have an new widget for your blog with Google plus button and Facebook like box together so lets add it to blogger.














    Metro Style Recent Comments V2 Widget For Blogger


    Hi guys,Again after releasing the first version of metro style recent comments today i release the second version it is not very metro styled but it is some so that is why it is the second version of the metro style recent comments.

    Metro Style Recent Posts With Thumbnails For Blogger

    Hi guys today is special post because it is our first post about recent posts widgets as our blog topic is Metro so this widget is in metro style i hope you like it.

    Nivo Images Slider For Blogger

    Welcome to my second post about image slider collection for Blogger. In this article, I will show you how to add Nivo slider to your blogspot with classic style.

    Metro Style About Us Widget For Blogger


    Do you write awesome articles, Yes you do but your visitors want to know who is writing these articles,So today i am going to post a post about how to add an Metro style about us widget to blogger so lets continue to the tutorial.