/* =Featured Posts | |
-------------------------------------------------------------- */ | |
#featured { | |
position:relative; | |
margin:0 0 10px 0; | |
background:#ebebeb url(http://www.opendrive.com/files/7245935_uQe7X/box-bg.png) repeat top left; | |
} | |
#featured .panel { | |
display: inline; | |
float: left; | |
border:10px solid #ebebeb; | |
width:220px; | |
height:250px; | |
position:relative; | |
z-index:40; | |
overflow:hidden; | |
} | |
#featured .panel:hover { | |
z-index:50; | |
border:10px solid #fafafa; | |
box-shadow: 0px 3px 3px rgba(0,0,0,0.3); | |
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.3); | |
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.3); | |
} | |
#featured .panel img { border:0; z-index:10; } | |
#featured .panel-meta { | |
width:200px; | |
height:230px; | |
padding:10px; | |
position:absolute; | |
z-index:20; | |
top:180px; | |
left:0; | |
background:url(http://www.opendrive.com/files/7245952_NxcH8/trans-bg.png) repeat top left; | |
} | |
#featured .panel-meta h3 { | |
color:#fff; | |
font-size: 18px; | |
font-weight:bold; | |
font-family: 'Arial', 'Trebuchet MS'; | |
line-height:28px; | |
margin:0; | |
padding:0 0 15px 0; | |
text-transform:uppercase; | |
text-shadow:#000 1px 1px 1px; | |
} | |
#featured .panel-meta h3 a { | |
color:#fff; | |
text-decoration:none; | |
} | |
#featured .panel-meta p { | |
color:#fff; | |
margin:0; | |
padding:0; | |
font-size:10px; | |
font-family: 'Verdana', 'Arial', 'Trebuchet MS'; | |
} |
BƯỚC 2 : CHÈN CODE SAU TRƯỚC ]]:SKIN
--></style> | |
<script src='http://www.opendrive.com/files/7245957_CWCP5/jquery.min.js' type='text/javascript'></script> | |
<script src='http://www.opendrive.com/files/7245953_z7gCS/common.js' type='text/javascript'></script> | |
<script src='http://www.opendrive.com/files/7245955_912zv/hoverIntent.js' type='text/javascript'></script> | |
<script src='http://www.opendrive.com/files/7245959_KsMYm/superfish.js' type='text/javascript'></script> | |
<script src='http://www.opendrive.com/files/7245960_lCASi/supersubs.js' type='text/javascript'></script> | |
<script src='http://www.opendrive.com/files/7245954_Fimnx/dropdowns.js' type='text/javascript'></script> | |
<script src='http://www.opendrive.com/files/7245956_3BadO/jquery.cycle.js' type='text/javascript'></script> | |
<script type='text/javascript'> | |
//<![CDATA[ | |
jQuery.noConflict(); | |
jQuery(document).ready(function(){ | |
jQuery(".commentlist li:last").css("border","0"); | |
jQuery("#featured .panel").hover(function(){jQuery(this).find(".panel-meta").stop().animate({top:0}, 150);}, function(){jQuery(this).find(".panel-meta").stop().animate({top:180}, 150);}); | |
var tabContainer = jQuery("#tab-boxes .section"); | |
var tabNav = jQuery("#tab-nav a"); | |
tabContainer.hide().filter(":first").show(); | |
jQuery("#tab-nav a").click(function(){ | |
tabContainer.hide().filter(this.hash).show(); | |
tabNav.removeClass("selected"); | |
jQuery(this).addClass("selected"); | |
return false; | |
}).filter(":first").click(); | |
}); | |
window.onload = equalHeight; | |
//]]> | |
</script> | |
<script type="text/javascript"> | |
if (window.jstiming) window.jstiming.load.tick('headEnd'); | |
</script></head> | |
<body class='home blog'> | |
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript"> | |
function setAttributeOnload(object, attribute, val) { | |
if(window.addEventListener) { | |
window.addEventListener("load", | |
function(){ object[attribute] = val; }, false); | |
} else { | |
window.attachEvent('onload', function(){ object[attribute] = val; }); | |
} | |
} | |
</script> | |
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=8816898752908010694&blogName=Demo+-+Newspress&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=LAYOUTS&searchRoot=http%3A%2F%2Fwptb-newspress.blogspot.com%2Fsearch&blogLocale=en&homepageUrl=http%3A%2F%2Fwptb-newspress.blogspot.com%2F" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe> | |
<div></div></div></div> |
BƯỚC 3 : CHÈN CODE SAU VÀO VỊ TRÍ BẠN MUỐN HIỂN THỊ
<!-- begin featured posts --> | |
<div class='clearfix' id='featured'> | |
<!-- begin featured #1 --> | |
<div class='panel'> | |
<img border='0' id='thumbnail-59' src='http://www.opendrive.com/files/7247603_46HR4/1.jpg'/> | |
<div class='panel-meta'> | |
<h3><a href='#' title='Continue reading A picture in a post'>A picture in a post</a></h3> | |
<p>Lorem ipsum dolor sit amet, cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse ligula neque </p> | |
</div> | |
</div> | |
<!-- end featured #1 --> | |
<!-- begin featured #2 --> | |
<div class='panel'> | |
<img border='0' id='thumbnail-45' src='http://www.opendrive.com/files/7247604_mQVu4/2.jpg'/> | |
<div class='panel-meta'> | |
<h3><a href='#' title='Continue reading Testing the elements'>Testing the elements</a></h3> | |
<p>Tincidunt varius sequi, integer magna ac, donec curabitur. Rhoncus sed. Lectus vitae augue, mauris tincidunt. Ut nec fermentum, dolor vestibulum. Nunc neque tincidunt, non dictumst</p> | |
</div> | |
</div> | |
<!-- end featured #2 --> | |
<!-- begin featured #3 --> | |
<div class='panel'> | |
<img border='0' id='thumbnail-43' src='http://www.opendrive.com/files/7247601_GvCQH/3.jpg'/> | |
<div class='panel-meta'> | |
<h3><a href='#' title='Continue reading Iphone camera shot'>Iphone camera shot</a></h3> | |
<p>One of the things that could easily make your content stand out is having a few classes around to accentuate that content. That’s where a solidly-named class system comes in &hel</p> | |
</div> | |
</div> | |
<!-- end featured #3 --> | |
<!-- begin featured #4 --> | |
<div class='panel'> | |
<img border='0' id='thumbnail-35' src='http://www.opendrive.com/files/7247602_NRr11/4.jpg'/> | |
<div class='panel-meta'> | |
<h3><a href='#' title='Continue reading Ut sagittis ultrices urna eget'>Ut sagittis ultrices urna eget</a></h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla</p> | |
</div> | |
</div> | |
<!-- end featured #4 --> | |
</div> | |
<!-- end featured posts --> |