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!
- U need to go to layout;
- U add gadget on anywhere u want to, then choose HTML/Javascript;
- Or u can implement to your customize template html;
- 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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&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 == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" 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 ;)
