0 Tips: How to add facebook, twitter, and the other sliders plugin to your blog

By Unknown | At 6:13 pm | Label : delano blog , facebook , internet , komputer , plugin. blog , slider , tips , tips trik , twitter | 0 Comments

I wanna share a little tips about how to add slider plugin to our blog. Like on wordpress. But, this one method is manually coding. ;)

Ok then,
Here we go!

1. U need to go to layout;
2. U add gadget on anywhere u want to, then choose HTML/Javascript;
3. Or u can implement to your customize template html;
4. Then, make / copy these codes below:

  <style type="text/css">
    .enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 165px;
    /*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px;
    }
    #feedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;
    }
    img#fb {
    top:50px; position:absolute; border-left-width:5px; left:318px;
    }
    img#tw {
    top:115px; position:absolute; border-left-width:5px; left:318px;
    }
    img#fdb {
    top:175px; position:absolute; border-left-width:5px; left:318px;
    }
    img#pp {
    top:240px; position:absolute; border-left-width:5px; left:318px;
    }
    table.dell {
    overflow:auto; position:fixed; top:15%;
    }
    tr#dell {
    position:fixed;left:-320px;z-index:1000;height:100%;
    }
    td#fb-dell {
    border:solid 5px #5370AD;
    width:300px;height:300px;position:relative;border-radius:5px;background-color:white;
    }
    td#tw-dell {
    border:solid 5px #44CCF6; width:300px;height:300px;position:relative;border-radius:5px;background-color:white;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
   <table id="slideleft" class="dell">
    <tr class="slideleftItem" id="dell">
     <td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2Ya10JV_tQcwmPvq6BkPboBYK_1f0RyiTtLSFMZwJEDG4KgONOPsqrjXmHhtRbrb4A2spUyi1m6ezz2n2jzx3g4EIdM2BxrrLhDjT4BQL5RWE8EqGsI5wSku_ibtfOR8fuVoBd3g63YW/s1600/fb10_deleft_ri_2.png"
              id="fb"/>
     </td>
     <td class="contentBox" id="fb-dell">
      <div id="fb-root">
        <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://facebook.com/Delanoblog&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" style="width:300;"></iframe>
      </div>
     </td>
    </tr>
    <tr class="slideleftItem" id="dell">
     <td>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCDYsMkKGt4ouxoJbP_1Pj9MI_Ql_KV5eS_HbZjDRmMWEhmOJEN03V4KA1sMp3WR7QWYy1_YNGl3w5vTomAgD00wzsU5uuhEdrP6WiZCx3WZjpx7LUzGeUkoGeGg_Tqt7Sk0j8QwnHssz/s1600/tw_deleft_ri_2.png"
           id="tw"/>
     </td>
     <td class="contentBox" id="tw-dell">
      <div style="background: #F5FCFE;">
      <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
      <script type="text/javascript" >
      new TWTR.Widget({version: 2,  type: 'profile',  rpp: 4,  interval: 30000,  width: 'auto',  height: 300,  theme: {shell: {      background: '#44ccf6',      color: '#000000'    },    tweets: {      background: '#ffffff',color: '#000000',      links: '#44ccf6'    }  },features: {    scrollbar: false,    loop: false,    live: false,    behavior: 'all'  }}).render().setUser('delanoblog').start();
      </script>
      </div>
      </td>
      </tr>
      <tr class="slideleftItem"  id="dell">
      <td>
   <div id="feedburner_div">
   </div>
    <center>
    <h4 style="color:#FE9D5D;">You can also subscribe for updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DelanosBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="DelanosBlog" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center>
    <img id="fdb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmbU-0h8unj66zNM2OM4tjfsEE0jMwUxCW2hOubLIzZMrcN4UwJjxmD9fCSkaLhi3CWxe3DPzMn4vWjKWiT5iffA02Nputh7K-y3-EzTmjYNao2QJ3qZdK3GEBDPvCNzRJa5tTRZcHb_G/s1600/feedb_deleft_ri_2.png"/>
    </td>
      </tr>
      </table>
       <script type="text/javascript">
        jQuery(".slideleftItem").append('<div style="font-size:12px;font-family: arial;width:300px;text-align:left;"></div>');jQuery("#slideleft tr").hover(function(b){var a=jQuery(this);jQuery("#slideleft tr").not(a).hide();a.css({"z-index":"9999"});a.stop().animate({left:0})},function(b){var a=jQuery(this);a.css({"z-index":"1000"});a.stop().animate({left:-a.outerWidth()});jQuery("#slideleft tr").show()});
       </script>

• Change facebook url 'Delanosblog' with yours
• Change 'delanoblog' twitter username with yours 
• Then, save your template. And, look for result. It looks like on my side blog.  

*Note: If u want to add another element, u just need to know about iframe or form source code to activate them. And, for img, u just change the src.
iframe like on facebook plugin or form like feedburner, or if u know well-coding for the different div, too, just add. No doubt. Believe yourself! ;)

Here's below for example:
<tr class="slideleftItem"  id="dell">
 <td>
   <div id="feedburner_div">
   </div>

    HERE YOUR SOURCE CODE

 </td>
</tr>

OK. Thanks for visiting and viewing my blog! See ya ;)