Thursday, 25 July 2013
BASIC POST CODE AND DIFFRENT SLIDE EFFECT
-------------------------------------------------------------------------------------------------
FIND HEAD TAG AND REPLACE YOUR HEAD TAG WITH
BELOW CODE
----------------------------------------------------------------------------------------------------
<style type='text/css'>
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5;}
h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
h3 a{}
</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.1.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
</script>
</head>
--------------------------------------------------------------------------------------------------
FIND AND REPLACE THIS LINE WITH BELOW CODE
<b:includable id='post' var='post'></b:includable>
------------------------------------------------------------------------------------------------------<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType != "item"'>
<div class='post' id='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<!-- Animation start Here-->
<div class="boxgrid slideright">
<div class="cover boxcaption">
<a expr:href='data:post.url'/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
</div></div>
<!-- Animation Finish Here-->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>/*<![CDATA[*/createSummaryAndThumb("summary<data:post.id/>");/*]]>*/</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear:both'/>
</div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='single' id='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-body-2'>
<p><data:post.body/></p>
<div style='clear:both'/>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> on <data:post.dateHeader/> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span> <span class='post-icons'>
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
</div>
</div>
</b:if>
</b:includable>
-------------------------------------------------------------------------------------------------
FOR OTHERS EFFECT ONLY REPLACE THIS LINE
<div class="boxgrid slideright">
WITH BELOW LINES OR RUB THIS CLASSAND PUT OTHER CLASS NAME SUCH AS
<div class="boxgrid captionfull">
<div class="boxgrid caption">
<div class="boxgrid slideright">
<div class="boxgrid thecombo">
<div class="boxgrid slidedown">
<div class="boxgrid peek">
--------------------------------------------------------------------------------------------------
TUTORIAL FINISH SEE DEMO
http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm
---------------------------------------------------------------------------------------------------
YOU ALSO EDIT YOUR POST CODE
REPLACE B SKIN TAG WITH BELOW CODE
--------------------------------------------------------------------------------------------------
/*---------------- Posts ---------------------*/
h2.date-header {
margin:1.5em 0 .5em;
display:none;
}
.post {
background: #f1f1f1;
border-top:#fff 1px solid;
border-left:#fff 1px solid;
border-right:#fff 1px solid;
border-bottom:#7c7c7c 1px solid;
float:left;
height:230px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
width:280px;
-moz-box-shadow: 0px 2px 10px #989898;
-webkit-box-shadow:0px 2px 5px #989898;
}
.post:hover {
background: #E4E4E4;
}
.post h3 {
margin-top:5px;
margin-bottom: 10px;
margin-left:15px;
font-size: 1.2em;
text-align:left;
padding-bottom:10px;
overflow:hidden;
height:10px;
text-transform: uppercase;
}
.post h3 a {
color: #000000;
text-decoration: none;
}
.post img {
background-repeat:no-repeat;
background-position: bottom center;
height:180px;
margin-bottom:8000px;
margin-left:15px;
margin-top:0;
border: none;
padding-bottom:3px;
width:250px;
}
.post-body {
font-size: 0px;
overflow:hidden;
height:198px;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
line-height: 1.4em;
font-size: 0.9em;
margin:12px;
border-top:1px solid #bbb;
}
.post blockquote {
margin:1em 20px;
}
.bottom {
margin-top:10px;
}
.category {
clear: both;
font-weight: bold;
float: left;
font-size: 0.9em;
padding-top: 10px;
}
.coomments {
font-weight: bold;
float: right;
font-size: 0.9em;
padding-top: 10px;
}
.single {
background: #f1f1f1;
border: 1px solid #bbbbbb;
margin-bottom: 10px;
margin-right:10px;
margin-top:10px;
-moz-box-shadow: 0px 2px 10px #989898;
-webkit-box-shadow:0px 2px 5px #989898;
}
.single .post-body-2 {
padding:5px 12px 0 12px;
font-size:12px;
}
.single img {
max-width:600px;
}
.single h3 {
margin-top:10px;
margin-left:12px;
font-size: 1.2em;
text-transform: uppercase;
}
.single h3 a {
color: #000000;
text-decoration: none;
}
.single ul, .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
.single li {
line-height: 1.5em;
padding: 2px 0;
}
.single blockquote {
font-family:'Courier New', Courier;
color : #6e818c;
margin : 10px;
padding : 10px;
width : 90%;
background:#F3F3F3;
border-left:5px solid #900;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
font-size: 1.1em;
}
]]></b:skin>
------------------------------------------------------------------------------------------------
REPLACE YOUR HEAD TAG WITH BELOW CODE
---------------------------------------------------------------------------------------------
summary_noimg = 0;
summary_img = 0;
img_thumb_height = 185;
img_thumb_width = 280;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQhdEGJvYfDdoiVFp55FS4O9Y9Bi35pQFyFt0YABTjPjn7C7EzlMQVaPKVcI_rpDT6JEIpAkGjMptJqYkaouskSQDf3Elisp86hGtBEOEY4m4z9P6SWRyOCFflQ2JCEpf-4MryWHVZ67HJ/s1600/noImage.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
</head>
-----------------------------------------------------------------------------------
IMAGE USE IN THIS POST THUMBNAIL
-----------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment