Trick Blogger

Document Sample
Trick Blogger Powered By Docstoc
					Animated Label with jQuery




Did you know, jQuery Link Nudging? Now we will add jQuery Link Nudging in Label. What is
the effect? So, when you put your cursor on one of the label, the label will be move to the right.
The You can try in this page (Try on "Labels"). Looks nice right? Now, if you wanna
try Animated Label with jQuery, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'
type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>
4. Click

So easy right, to add Animated Label with jQuery?



Cool Search Box with New Google Style




Google has updated their appearance, including their search box. I think this Search Box is very
nice with some. So better for us to try create Cool Search Box with New Google Style. Below is
the difference of the search box.




                    New Google Search




                 Google Search for Blogger

OK, let's see the . Looks nice right? Now if you want to create cool search box with new google
style, just follow the steps below.

1. Log in to your blogger account
2. Go to Design -- Edit HTML
3. Copy the code below, and paste above ]]></b:skin>
/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value
in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(http://4.bp.blogspot.com/-
GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-
repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(http://4.bp.blogspot.com/-
GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-
repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
         => Adjust the width with your blog

4. Copy the code below, and paste above </head>
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>
5. Click

Adding New Google Search Box
1. Go to Design --> Page Elements --> Add Gadget
2. Choose "HTML/Java Script"
3. Add the code below
<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

4. Click Save

Change Image Just with Scroll




Hi, friends! Now, I will post about a trick. That's Change Image Just with Scroll. The effect is
when you put your cursor on the picture and scroll the mousewheel, the picture will be change.
Let's see the DEMO. Now if you want to try this trick, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add gadget
3. Choose "HTML/Java Script"
<img id="slideshow" src="PICTURE-1" />

<script type="text/javascript">
var myimages=[
"PICTURE-1",
"PICTURE-2",
"PICTURE-3",
"PICTURE-4",
"PICTURE-5"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)?
0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>
=> You can replace the images that will be change
=> The image of PICTURE-1 must be same with PICTURE-1
4. Click SAVE

OK, that's all friends... Hopefully usefull :D



Add Border at the Bottom of Widgets
Previously, I've posted about How to Add Icon Beside Labels. And now I will post about Add
Border at the Bottom of Widgets. Actually, the function of this trick just add a border at the
bottom of your widgets. So, your blog will look attractive. Shortly, if you want to Add Border at
the Bottom of Widgets, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Find code like this (in some templates maybe not same)
.sidebar ul li {
5. Copy the code below, and add under the code above
border-bottom:1px dotted #000000;
6. Then click SAVE TEMPLATE




Add Facebook Comment Style for Blogger
Previously, I've posted about Add Facebook Fan Page In Blog. Now, I will post about Add
Facebook Comment Style for Blogger. I think this trick also important, because maybe some of
our visitors don't have a blogger account. Or maybe, they can't navigate blogger comment style.
If you want to know how to add facebook comment style for blogger, just follow the steps
below. See the DEMO first!

=> Hide Blogger Comment Box
1. Log in to your blogger account
2. Go to Settings --> Comments
3. Find "Comments", and choose "Hide"
4. Click SAVE SETTINGS

=> Add Facebook Comment
1. Go to Design --> Edit HTML
2. Check in the "Expand Widge Templates" box
3. Copy the code below, and paste under <data:post.body/> (If you're using "Read More", there
are 2 <data:post.body/>, so choose the second)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://full-tricks.blogspot.com/2011/04/add-facebook-comment-style-
for-blogger.html' target='new'><img alt='' class='icon-action'
src='http://lh3.ggpht.com/_mWNaJ9OwpbA/TLw5FF7aXgI/AAAAAAAAA5c/dLAFFCPdWI8/
CommentsFB.png'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;149973631711831&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
4. Now you can click SAVE TEMPLATE




Add Google Page Navigation for Blogger




Previously, I've posted about How to Add Numbered Page Navigation in Blog. Now, I will post
the modification. This trick inspired from Google. So, the name of this page navaigation is
Google Page Navigation for Blogger. Now, if you want to add this page navigation, just follow
the steps below.
1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>
#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/
nav_logo7.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
 .mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
 #nav td{padding:0;text-align:center}
4. Then, copy the code below, and paste above </body>

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {


var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-
results='+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};


for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot;
style=&quot;background-position: 0pt 0pt; margin-left: auto; width:
44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+
upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot;
style=&quot;background-position: 0pt 0pt; margin-left: auto; width:
44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+
upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width:
18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span
class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width:
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot;
style=&quot;background-position: -44px 0pt; width:
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot;
style=&quot;background-position: -60px 0pt; width:
16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb
ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+
(p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a
href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot;
style=&quot;background-position: -76px 0pt; margin-right: 34px; width:
66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse:
collapse;text-align: center; direction: ltr;&quot;
align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td
class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot;
style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}



if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ?
thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ?
thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-
results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-
max='+timestamp+'&amp;max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){



if(thisNum==2){
upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-
position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div
style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot;
style=&quot;background-position: 0pt 0pt; margin-left: auto; width:
44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+
upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}




if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width:
18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span
class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width:
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot;
style=&quot;background-position: -44px 0pt; width:
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-
position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb
ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+
(p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a
href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot;
style=&quot;background-position: -76px 0pt; margin-right: 34px; width:
66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}




if(thisNum&gt;1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse:
collapse;text-align: center; direction: ltr;&quot;
align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td
class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot;
style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}

if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 =
thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updat
ed-max&quot;));
}else{
var lblname1 =
thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&am
p;max&quot;));
}
}

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp;
thisUrl.indexOf(&quot;.html&quot;)==-1){
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-
script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-
/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-
results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>
5. Just click SAVE TEMPLATE

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:25
posted:8/1/2011
language:English
pages:18