Tuesday, January 11, 2011

Zoom Post Images on mouse hover

Demo page: http://www.odessa.rr.nu/

Add to css:

.post img{
-webkit-transform:scale(1.0); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(1.0); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(1.0); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
/*opacity: 0.5;*/
margin: 0 10px 5px 0;
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Monday, January 10, 2011

Change Font and Size of page content


Widget content:

Change the font!
<script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>

<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family: verdana; font-size: 8pt;" name="select3" size="1">
<option value="Times New Roman" />Times New Roman
<option value="Arial" />Arial
<option selected value="Book Antiqua" />Book Antiqua
<option value="Bookman Old Style" />Bookman Old Style
<option value="Century Gothic" />Century Gothic
<option value="Comic Sans Ms" />Comic Sans Ms
<option value="Tahoma" />Tahoma
<option selected value="Trebuchet Ms" />Trebuchet Ms
<option value="Verdana" />Verdana
</select>
<select onchange="go1()" style="font-family: verdana; font-size: 8pt;" name="select2" size="1">
<option value="8px" />8
<option value="9px" />9
<option value="10px" />10

<option value="11px" />11
<option selected value="12px" />12
<option value="14px" />14
<option value="16px" />16
<option value="18px" />18
</select></form>

Monday, November 29, 2010

Show random Next Blog Link without Navbar

to create a link browsing forward to another blog on blogspot without Navbbar use this code:

http://www.blogger.com/next-blog?navBar=true&blogID=YOUR BLOG ID

replace YOUR BLOG ID

Sample:

Next Blog

Sunday, November 28, 2010

Page Ears to RSS Link

add to CSS:

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROmu_oRlKDO4DpMOKKYE5brkVO5AgFuIY9Thms59-2Y0Hs2uV6qJvkrTKxG-So4fxD4Z08K700z4lcFPO89_bO_PJk3YiwSDXoY-8sI0p7inxTyIkv487LEjAE4ISKnvvdB_kloBvJ_0/) no-repeat right top;
}



Add below JQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

this part:

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>


add below <body> tag:

<div id='pageflip'>
<a href='http://YOUR RSS FEED URL'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmn1SMFHZ2Ir9_i_XMlczpxiohkSb2CMvVDVTHnwpPUQb5VtZgY6MaNdCGWRy_cK_uWMMO9XcF6AlwHmo1oNdg-A648zrwUha59gPY0fMTxAjyVVelGcesgz84fTN8vigA69E8A3GD2M/'/></a>
<div class='msg_block'/>
</div>


Replace Your RSS FEED URL with your Feed.

JQuery Scroll to top of Page Blogger Link

HTML Code:
(Widget text/javascript or add to an existent):

<a name="top"></a><a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#top" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1xO6T63kfCOEGazclHkhRA68HopiohKvocoBhmzvlCXR2gunIv7S7Sya1epDlmKgn55eGm8q3XJtr2T5Uv9UKSlhLA-01gt_mQXm00NfZXi8ZgMVY8jxAWx1ySu5DdXZO7vcxqvx2Rbw/" /></a>

---------

Edit Template - expand widgets

add below jquery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

this part:

<script type='text/javascript'>
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});</script>




For example the whole block in html edit with lightbox for blogger together:

<link href='http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});</script>
<script src='http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js' type='text/javascript'/>


Demo on this side click on the right corner bottom


Back to top

Saturday, November 27, 2010

Create write new post link from frontpage on Blogger

Code:

<a href="http://draft.blogger.com/post-create.g?blogID=YOUR BLOG ID" class="b-link">New Post</a>

Replace YOUR BLOG ID!

Sample:

New Post (YOU MUST BE BLOG ADMIN. FOR ACCESS IT FORWARDS YOU TO LOGIN PANEL!)

Share this blog Button without Toolbar



Code (frontpage share only):

<a onclick="window.open(&quot;http://www.blogger.com/share-post-menu.g?blogID=BLOG ID&quot;, &quot;sharepopup&quot;, &quot;width=250, height=320, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no&quot;); return false;" style="cursor: pointer;" class="b-link" id="b-share-this">Share</a>


Replace BLOG ID WITH YOUR BLOG NR.


Sample:

Share this

Post Title Page &postID=
English France German Spain Italy Dutch Russia Brasil Japan Korea Arabic China