একটি তথ্য ও প্রযুক্তির ব্লগ।
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/> #pro-buttons {margin:20px auto; text-align:center;}
#pro-buttons br {display: none;}
.pro-down, .pro-demo {
position: relative;
display: inline-block;
height: 30px;
width: 100px;
line-height: 30px;
padding: 0;
border-radius: 5px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.pro-demo {border: 2px solid #fe6d4c;}
.pro-down:hover {background-color: #0099cc;}
.pro-demo:hover {background-color: #fe6d4c;}
.pro-down span.circle, .pro-demo span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 21px;
height: 20px;
width: 20px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.pro-demo span.circle2 {background-color: #fe6d4c;}
.pro-down:hover span.circle, .pro-demo:hover span.circle2 {
left: 100%;
margin-left: -25px;
background-color: #fdfdfd;
color: #0099cc;
}
.pro-demo:hover span.circle2 {color: #fe6d4c;}
.pro-down span.title, .pro-down span.title-hover,
.pro-demo span.title2, .pro-demo span.title-hover2 {
position: absolute;
left: 40px;
text-align: center;
margin: 0 auto;
font-size: 12px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.pro-demo span.title2, .pro-demo span.title-hover2 {color:#fe6d4c; left:35px;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {left:20px; opacity:0;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {color: #fff;}
.pro-down:hover span.title, .pro-demo:hover span.title2 {left:20px; opacity:0;}
.pro-down:hover span.title-hover, .pro-demo:hover span.title-hover2 {opacity:1; left:10px;} ✯ উপরের HTML কোডের # এর স্থলে Demo এবং Download লিংক দেবেন।<div id="pro-buttons">
<a class="pro-down" href="#" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="pro-demo" href="#" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
#beakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FFF;background:#FD1515}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0} <script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.visitortunes.com/', //replace with your Domain
numpostx = 10; //Posts want to display
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == "alternate")
{
posturl = entry[i].link[j].href;
break;
}
} posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#recentpostbreaking').html('<span>No result!</span>');
}
},
error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script> <div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
<style>
/*--- Tabbed Facebook Comments By VisitorTunes.com ----*/
.comments-page {background-color:#FFF; border:15px;border: 1px solid #d1d8f0;}
#blogger-comments-page {padding:0px 5px; display:none;}
.comments-tab {float:left; padding:5px; margin-right:3px; cursor:pointer; background-color:#b5e5fa;border-radius: 2px;}
.comments-tab-icon {height:14px; width:auto; margin-right:3px;}
.comments-tab:hover {background-color:#eeeeee;}
.inactive-select-tab {background-color:#d1d1d1;}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFH4crFKFt2R-9aARewiujjYZHwXqJSD44PkHC-l9g2NvDgwAOL_UF8Q4o1xHPRL3Jhn1uLmxzrOU8luD1WF43Bgd1_LoNkm0Pr3kl0JqW7abvzKPCPaRi5whhmWcdUwkKHIcoaVUDpaf/s1600/FB.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div></b:if><div class='clear'/></div>
<b:if cond='data:blog.pageType == "item"'>
<div class='comments-page' id='fb-comments-page'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='600'/>
</div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page'>