Thursday, 1 August 2013
Blog Post Tumbnails With Image Zoom Effect


-------------------------------------------------------------------------------------------------
FIND HEAD TAG AND REPLACE THIS CODE
</head>
------------------------------------------------------------------------------------------------<link href='http://1-ps.googleusercontent.com/h/www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/A.style.css.pagespeed.cf.AQ7uWnsf26.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://1-ps.googleusercontent.com/h/www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/A.zoomooz.css.pagespeed.cf.PjDsbaaHg6.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/sylvester.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/purecssmatrix.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/jquery.animtrans.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/jquery.zoomooz.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".zoom").click(function(evt) {
evt.stopPropagation();
$(this).zoomTo();
});
$(window).click(function(evt) {
evt.stopPropagation();
$("body").zoomTo();
});
$("body").zoomTo();
});
</script>
</head>
FIND THIS B TAG LINE AND REPLACE 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='zoom' id='gallery'>
<ul>
<li class='zoom'>
<a expr:href='data:post.url'/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
</li>
</ul>
</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>
-------------------------------------------------------------------------------------------------------
TUTORIAL FINSH
-------------------------------------------------------------------------------------------------------FURTHER INFORMATION:
POST 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 THUMBNAIL JAVA CODE
-----------------------------------------------------------------------------------------
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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>
Related movie you might like to see :

WHACK A RAT CSS GAME

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BUTTON PADDING CHANGE HEIGHT WIDTH

INPUT BUTTON VALUE SWAP

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

WEB IMAGE DOWNLOADER

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...

DYNAMIC VIEWS BLOGGER TEMPLATE

FLASH PLAYER SWF FILE DOWNLOAD ARCH...
?
+
X
Recommended for you
Loading..
Related Post for Blog Post Tumbnails With Image Zoom Effect
Platinum Arts Sandbox Free 3D Game Maker ----------------------------------------------------------------------------------------------------- READ MORE: ------------------------------------------------------…
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-pos…
NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------…
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 POST WIDGET DIFFERENT STYLES ------------------------------------------------------------------------------------------------------ STYLE 1: ---------------------------------------------------------------…
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…
SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholde…
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010 READ MORE: ----------------------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-ex…
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES ------------------------------------------------------------------------------------------------------ CODE 1 ------------------------------------------------------------------…
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR ---------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------------…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
POST LOADER TEMPLATE ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------------…
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
GENERIC POST TITLE UNDER AUTO READ POST IMAGE TEMPLATE ----------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------…
GOOGLE IMAGE HOSTING BY PICSA -------------------------------------------------------------------------------------------------------- READ MORE: -----------------------------------------------…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
CODE OR TEXT WRITING BOX -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN HTML --------------------------------…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highl…
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' di…
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…
GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.…
Related PostWidget WithFirst Big Thumbnail ----------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
PAGINATION IN BLOG ---------------------------------------------------------------------------------------------------------- 1- FIND BODY CLOSE TAG AND REPLACE WITH BELOW CODE READ MORE: http:/…
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 …
How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
Popular Posts Widget for Blogger Tweak ---------------------------------------------------------------------------------------------------------- 1- ADD POPULAR POST WIDGET IN BLOG 2- ADD HTML/JAVA WIDGET IN BLOG A…
HTML AND EMOTIONS ICON COMMENT BOX ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION READ MORE: …
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE BUTTON WITHOUT VARIABLE COD…
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:…
CSS BORDER COLOR -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -------------------------------------------…
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
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…
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE RED JAVA CODE AND JAVA FILE LINK PAG…
RELATED POST WIDGET FRONT SCREEN TEMPLATE ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ------------------------…
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…
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
Labels:
B
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.