Thursday, 25 July 2013

BASIC POST CODE AND DIFFRENT SLIDE EFFECT

FB Gadgets


-------------------------------------------------------------------------------------------------
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 &quot;Lucida Grande&quot;, 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: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=80)&quot;;
}
.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 &quot;-&quot; in front of the top/left attribute
//Vertical Sliding
$(&#39;.boxgrid.slidedown&#39;).hover(function(){
$(&quot;.cover&quot;, this).stop().animate({top:&#39;-260px&#39;},{queue:false,duration:300});
}, function() {
$(&quot;.cover&quot;, this).stop().animate({top:&#39;0px&#39;},{queue:false,duration:300});
});
//Horizontal Sliding
$(&#39;.boxgrid.slideright&#39;).hover(function(){
$(&quot;.cover&quot;, this).stop().animate({left:&#39;325px&#39;},{queue:false,duration:300});
}, function() {
$(&quot;.cover&quot;, this).stop().animate({left:&#39;0px&#39;},{queue:false,duration:300});
});
//Diagnal Sliding
$(&#39;.boxgrid.thecombo&#39;).hover(function(){
$(&quot;.cover&quot;, this).stop().animate({top:&#39;260px&#39;, left:&#39;325px&#39;},{queue:false,duration:300});
}, function() {
$(&quot;.cover&quot;, this).stop().animate({top:&#39;0px&#39;, left:&#39;0px&#39;},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$(&#39;.boxgrid.peek&#39;).hover(function(){
$(&quot;.cover&quot;, this).stop().animate({top:&#39;90px&#39;},{queue:false,duration:160});
}, function() {
$(&quot;.cover&quot;, this).stop().animate({top:&#39;0px&#39;},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$(&#39;.boxgrid.captionfull&#39;).hover(function(){
$(&quot;.cover&quot;, this).stop().animate({top:&#39;160px&#39;},{queue:false,duration:160});
}, function() {
$(&quot;.cover&quot;, this).stop().animate({top:&#39;260px&#39;},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$(&#39;.boxgrid.caption&#39;).hover(function(){
$(&quot;.cover&quot;, this).stop().animate({top:&#39;160px&#39;},{queue:false,duration:160});
}, function() {
$(&quot;.cover&quot;, this).stop().animate({top:&#39;220px&#39;},{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 != &quot;item&quot;'>
<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='&quot;summary&quot; + data:post.id'><data:post.body/></div>
</div></div>
<!-- Animation Finish Here-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>/*<![CDATA[*/createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);/*]]>*/</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<div style='clear:both'/>
</div>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 != &quot;true&quot;'>,</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 CLASS
AND 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;
}

/* ------------- Post page---------------- */
.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
---------------------------------------------------------------------------------------------

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
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
-----------------------------------------------------------------------------------------








Related Post for BASIC POST CODE AND DIFFRENT SLIDE EFFECT

  • FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://s…
  • Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
  • FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FIL…
  • RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepe…
  • FIREBUG LITE USE OFFLINE ------------------------------------------------------------------------------------------------------------- 1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT 2) OR GET CSS…
  • FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
  • RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD  </head> TAG AND PASTE BELOW CODE WHEN W…
  • WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
  • HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
  • BRICK WALL MENU BAR CODE -------------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE http://fbgadgets.blogspo…
  • FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
  • TEXT COMPARE OR DUPLI TEXT FINDER ------------------------------------------------------------------------------------------------------------------ READ MORE: FIND RED TEXT IN GOOGLE:  text compare downl…
  • BLOG ZOOM EFFECT THUMBNAIL ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE: http://www.mastemplate.com/20…
  • MOUSE COORDINATES IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- mouse coordinates finder on website https://chrome.google.com/web…
  • DYNAMIC VIEWS BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------------- CODE: -----------------------------------------------------------…
  • JAVA FILE MAKE & SAVE IN NOTE PAD CLICK AND OPEN NOTE PAD IN WNDOW MENU BAR -------------------------------------------------------------------------------------------------------- COPY…
  • Direct Links to your Files on Google Drive DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINK…
  • ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ http…
  • GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbs…
Posted by on Thursday, 25 July 2013 at 06:17
Labels:

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets