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

  • POST LOADER TEMPLATE ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------------…
  • RECENT OR FEATURED POST SLIDER AFTER FOOTER ------------------------------------------------------------------------------------------------------------- COPY AND POST CODE READ MORE: http://fbgadgets.blogspot.co.uk/2…
  • WEBSITE TRANSLATOR AND THUMBNAIL Read More: http://www.worldlingo.com/en/products/instant_website_translator.html http://www.makeathumbnail.com/thumbnail.php http://www.sciweavers.org/free-online-web-to-im…
  • AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
  • WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
  • MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010 READ MORE: ----------------------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-ex…
  • How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
  • UnityAssetsExplorer Read More: https://yadi.sk/d/pQCvUUC02D3aY …
  • POST LOADER TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE --------------------------------------------…
  • DRAG AND DROP WITH JQUERY AND HTML TUTORIAL ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
  • GOOGLE IMAGE HOSTING BY PICSA -------------------------------------------------------------------------------------------------------- READ MORE: -----------------------------------------------…
  • RELATED POST WIDGET FRONT SCREEN TEMPLATE ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW  CODE ------------------------…
  • HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
  • ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
  • RELATED POST WIDGET LEFT TO RIGHT #related-posts h2{ background:#111111; border-top-color:#63C4F1; border-top-style:solid; border-top-width:3px; color:#FFFFFF; font-family:Oswald; font-size:16px; font-stretch:…
  • IMAGE CONVERTER SOFTWARE body { background: #F7F6F6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJLkVEJ3qEWo7QLxoIodbY4zPdTiYoP9fGbBTrurq74uG7Zcay6tGp74LmQ3o20PswnHIQysiDkM3ANkr7jC1…
  • RECAPTCHA KEY CONTCAT FORM FOR BLOGGER ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READMORE: http://kontactr.com/ https…
  • ADD POP UP REMOVER STEP 2: Remove FocusBase pop-up ads from Internet Explorer, Firefox and Google Chrome with AdwCleaner The AdwCleaner utility will scan your computer and web browser for …
  • BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES ------------------------------------------------------------------------------------------------------ CODE 1 ------------------------------------------------------------------…
  • CODE OR TEXT WRITING BOX -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN HTML --------------------------------…
  • HTML AND EMOTIONS ICON COMMENT BOX ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML  SECTION READ MORE: …
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
  • GENERIC POST TITLE UNDER AUTO READ POST IMAGE TEMPLATE ----------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------…
  • Related PostWidget WithFirst Big Thumbnail ----------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highl…
  • FANCY BOX JS FIDDLE - jsFiddle demo //![CDATA[ $(window).load(function(){ $(document).ready(function() { $(".fancybox").fancybox({ openEffect: 'none', closeEffe…
  • PAGINATION IN BLOG ---------------------------------------------------------------------------------------------------------- 1- FIND BODY CLOSE TAG AND REPLACE WITH BELOW CODE READ MORE: http:/…
  • PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE RED JAVA CODE AND JAVA FILE LINK PAG…
  • BLOG FULL POST IMAGE 600 BY 600 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htm…
  • Platinum Arts Sandbox Free 3D Game Maker ----------------------------------------------------------------------------------------------------- READ MORE: ------------------------------------------------------…
  • Random/Recent/Feature Posts Button In Blogger ------------------------------------------------------------------------------------------------------- 1-ADD HTML/JAVA WIDGET IN BLOG LAYOUT 2-COPY AND PASTE BLOW CODE IN THIS…
  • SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
  • CSS BORDER COLOR -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -------------------------------------------…
  • SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholde…
  • GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE BUTTON WITHOUT VARIABLE COD…
  • POPULAR POST WIDGET DIFFERENT STYLES ------------------------------------------------------------------------------------------------------ STYLE 1: ---------------------------------------------------------------…
  • IMAGE SCROLL BOX WITH MOUSE CURSOR ----------------------------------------------------------------------------------------------------- SAVE AS  BELOW CODE IN HTML PAGE READ MORE: http://www.freebits.co.u…
  • NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------…
  • Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
  • JAVA COLOR PICKER WITH jQuery UI Slider - Colorpicker jQuery UI Selectable - Serialize #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 1…
  • Popular Posts Widget for Blogger Tweak ---------------------------------------------------------------------------------------------------------- 1- ADD POPULAR POST WIDGET IN BLOG 2- ADD HTML/JAVA WIDGET IN BLOG A…
  • RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR ---------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------------…
  • RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-pos…
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