New Blogger Tips

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

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

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

Replace BLOG ID WITH YOUR BLOG NR.

Sample:

Post Title Page &postID=