Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts
Sunday, May 20, 2012

How To Add Shareaholic Sassy Bookmarks To Blogger

0 comments
This is a new style social bookmark widget.
it will helps to share your post with social bookmarks.
Follow these steps.



1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

<!-- Start Shareaholic Sassy Bookmarks HTML Bloggertrix.com-->
<div class="shr_ss shr_publisher"></div>
<!-- End Shareaholic Sassy Bookmarks HTML
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif
.cloudfront.net/media/downloads/sassybookmark","link":"",
"service":"5,7,2,313,38,201,88,74","apikey":
"b87f5899d80a5edce8b5e55f58542ef0f","localize":
true,"shortener":"bitly","shortener_key":"",
"designer_toolTips":true,"tip_bg_color":"black",
"tip_text_color":"white","viewport":true,
"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script Bloggertrix.com -->

4. Now save your HTML/Javascript'.

You are done...
Continue reading →
Thursday, February 2, 2012

How To Make Blog Page Number Navigation

0 comments
How to make a blog page number navigation easily

Actually sometime hard to find working number navigation
 gadget for blogger.So this post will help you to add page
number navigation easily. it will helpful to your visitors to
keep watching your other post.so you can increase page-views.
Its just  blogger widget . try it.

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.
How To Make Blog Page Number Navigation
<style type='text/css'>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;

}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

</style>


<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
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 ='';

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

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

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

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

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

if(postNum <= 2){
html ='';
}

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

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

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

}

function showpageCount2(json) {

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

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

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

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

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

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

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

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

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

if(postNum <= 2){
html ='';
}

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

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

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

}

</script>
<script type='text/javascript'>

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

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

You can change 1 and 3 and color code as your like.get your color code here

4. Save HTML/Javascript. you are done.
Continue reading →
Tuesday, January 3, 2012

Cool Css Tab Menu For Blogger

0 comments
This Tutorial will explain how to add cool CSS menu bar for
 your blogger.I made demo for this tutorial. You can see it
by clicking below link.


Demo Here

1. Log in to your blogger account and Go to
    Design
>> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    </head>

4. Paste below code Before </head> tag

<style type='text/css'> 
#tabs28 { float:left; width:100%; background:#EFF4FA; font-size:93%; line-height:normal; border-bottom:1px solid #DD740B; }
#tabs28 ul { margin:0; padding:10px 10px 0 50px; list-style:none; }
#tabs28 li { display:inline; margin:0; padding:0; }
#tabs28 a { float:left; background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMwoVF4IQEcjk57CYSTiWDOti3qhj4YIY5ZMAzP60N0avVFWo_rmiYXGEUmDDz07aEyA-8mTwVtx153t7-JiWnJqtEhg2dHg3Xb4dB-NhWAblpr5OIHFLRt3QwQaOpZ6fxZ19pvo4ssMV/s1600/slide-left.gif&quot;) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }
#tabs28 a span { float:left; display:block; background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji59FpgqLmfc4j_hlrsyAj2fWJXuU9Dc9ZgNDkJbLFpknk1_uoqoqbi_B9oN8bCOQY1m1HAA5fZRc-slIsrNgjb3dbMrimkWXV1WvyQAQmsWd4_WSl1vkoykXGjRiN_Wy7d98lLgaQWEHH/s1600/side-right.gif&quot;) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
#tabs28 a span {float:none;} #tabsI a:hover span { color:#FFF; } #tabs28 a:hover { background-position:0% -42px; }
#tabs28 a:hover span { background-position:100% -42px; }</style>

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.
<div id="tabs28">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>

</div>

*Replace # With your URL
*Replace Link with your any menu name

7. Now save your template
 you are done.
Continue reading →
Friday, October 28, 2011

How To Add Jquery Multi Tab View Widget For Blogger

0 comments
1. Log in to your blogger  and Go to Design >> Edit HTML

2.  put check mark to “Expand Widget Templates

3. Find this tag by using Ctrl+F    </head>

4. Paste  below code Before  </head> tag







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.

<div id="tabs">
<ul><li>
<a href="#tabs-1">Tab-1</a></li><li>
<a href="#tabs-2">Tab-2</a></li><li>
<a href="#tabs-3">Tab-3</a></li></ul>
<div id="tabs-1">Script or Text Here</div>
<div id="tabs-2">Script or Text Here</div>
<div id="tabs-3">Script or Text Here</div>

You can replace Script or Text Here  with text or any script you want.

8.  After save HTML/Javascript 
you are done.
Continue reading →
Wednesday, August 24, 2011

Cool Thumbnail View With Related Post For blogger

0 comments
Earlier  i post about recent post with thumbnail.
but this post have some different.  hope you will like it




1. Log in to your blogger account and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste  below code After  ]]></b:skin> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
clear:both;float:left;
height:100%;
min-height:100%;
width:100%;
margin:0px;
padding-top:5px;
}

#related-posts h2{
background:transparent url() repeat-x left bottom;
font-family:verdana,Georgia,serif;
color:#000000;
font-size:18px;
line-height:28px;
text-decoration:none;
font-weight:normal;
text-align:left;
border:none;
padding: 10px 0px 5px 0px;
margin-top:15px;
margin-bottom:15px
}

#related-posts a{
background:#d5d5d5;
border:1px solid #000;
text-align:center;
margin-right:1px;
color:#000000;
text-decoration:none;
padding-left:2px
}

#related-posts a:hover{
background:#4f4f4f;
color:#eeeeee;
text-decoration:underline
}

</style>
<script type='text/javascript'>
var defaultnoimage=&quot;&quot;;
var maxresults=5;
var splittercolor=&quot;#000&quot;;
var relatedpoststitle=&quot;Related Posts: &quot;;
</script>
<script src='http://goomelar.googlecode.com/files/related_post-thumbnail.txt' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails End-->

5. Now Find this tag also by using Ctrl+F
                              <div class='post-footer-line post-footer-line-1'>
                                  If cant find above tag try to find below tag
                                <p class='post-footer-line post-footer-line-1'>

6. After found one of above code, paste below code after it

<!-- Related Posts  Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts End-->

7. You are done. Cheers
Continue reading →
Saturday, July 9, 2011

Cool Search Box with New Google Style

0 comments
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYGe4QGNQo4RtC_BcAIu9CzGgF4Bt41lr3c3csbvJuF2hdAwyJjYH-zOkDlcXsgk28ISD6w0HNKJ82zB3c-XASPESLsXNENf5br9O5kvyPs_WgYWvXgOr9yUAMomE6Omn5S23L8eiYF0mC/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYGe4QGNQo4RtC_BcAIu9CzGgF4Bt41lr3c3csbvJuF2hdAwyJjYH-zOkDlcXsgk28ISD6w0HNKJ82zB3c-XASPESLsXNENf5br9O5kvyPs_WgYWvXgOr9yUAMomE6Omn5S23L8eiYF0mC/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
Continue reading →
Sunday, July 3, 2011

Add Floating Spoiler Menu

0 comments
Hi, guys! Now, we will try to add floating spoiler menu. This spoiler menu is difference with others. We don't need to click the button to display the menu. Just put your cursor on this menu, and the menu wil be slide out. Want to see the DEMO? Now, if you wanna add floating spoiler menu into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below
<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">FBT-1</a></li>
<li><a href="#">FBT-2</a></li>
<li><a href="#">FBT-3</a></li>
<li><a href="#">FBT-4</a></li>
<li><a href="#">FBT-5</a></li>
</ul>
</div>
Customize:
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location

5. Click SAVE
Continue reading →
Saturday, July 2, 2011

How To Add Cool Subscribe Box For Blogger

0 comments
How To Add Cool Subscribe Box For Blogger



1. Log in to blogger account and Go to Design > Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

#subsfeed {  
background: #616161 url(#);
width:260px;
height:45px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:13px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZhPhZO7K0iQRAMPM5N5M7Wckyl-iNKgHXtcr6tI2uG11xTcr09nXR6gH9IULRc8jnl0T-9oISbeF_qcM0IsYZuWZG9nLgIp9BmeFeuZlUh5ArMLNJ80uAos4HXHiRalbFrGMXpWrc0YOK/s1600/arrow.png);
border:0px;
margin:13px 0 0 2px;
cursor:pointer;
float:left;
}

5. Now Go to Design >>page Element

6.Click Add gadget  and Select HTML/JavaScript 

7. Now paste paste below code

<div id='subsfeed'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Feedburner URL&apos;,
&apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=520&apos;);return true'
 target='popupwindow'><input class='subsfeed_field' name='q' onblur='if (this.value == "")
 {this.value = "Enter Your E-mail...";}'
 onfocus='if (this.value == "Enter Your E-mail...") {this.value = "";}' type='text' value='Enter Your E-mail...'/>
<input name='uri' type='hidden' value='Feedburner URL'/><input name='loc' type='hidden' value='en_us'/><input class='subsfeed_button' type='submit' value=''/></form></div> 

Replace Feedburner URL with your Feedburner URL

8.  Now save  HTML/JavaScript. 
you are done.
Continue reading →
Friday, June 17, 2011

Slide Out Panel with jQuery and Rounded Corner

0 comments
Hoahmm.... Hi, friends! Wait for a new trick? OK, now we will create Slide Out Panel with jQuery and Rounded Corner. The effect is when we click the panel, it will slide out, and show some links or somtehing. Maybe this trick remind us to How To Make Floating Widget. But, if the previous trick doesn't use jQuery. Wanna see the DEMO? Now, if you want to create Slide Out Panel with jQuery and Rounded Corner, 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>

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 250px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_bMU3xgwS6XdDxdGwEQiDTfZz8lcOfAe2KGHOwIXe1BU4EHVOaYXSycIfLnjuRMuDsRHfZDwyDfJAujkRCNYN3H_SkLZKbgMw010Uzmjx9msSAdsSN0tw17EPqhwvgn91fDJLqz3U8o/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_bMU3xgwS6XdDxdGwEQiDTfZz8lcOfAe2KGHOwIXe1BU4EHVOaYXSycIfLnjuRMuDsRHfZDwyDfJAujkRCNYN3H_SkLZKbgMw010Uzmjx9msSAdsSN0tw17EPqhwvgn91fDJLqz3U8o/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMr2bDq73p3beShNf3aQE8sU07jeRDCVZudr8gyoPjl1HkfUem_QxXU7n_28vGQl5iJMyFn2EiPvqIK2vq7ZlrHS2F_2Te_oObLawnYsiw_ysLfpwdCPOEabuugW4nEbvPIwOw8YzQNU4/s320/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

4. Then copy the code below, and paste above </head>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>
5. Then, click SAVE TEMPLATE
6. Now, go to Page Elements --> Add Gadget, choose "HTML/Java Script"
7. Then, add the code below

<div class="panel">

<h2>Choose the categories:</h2>
<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">

<h3>Full Blog Tricks-1</h3>

<ul>
<li><a href="#" title=" FBT1">FBT1</a></li>
<li><a href="#" title=" FBT2">FBT2</a></li>
<li><a href="#" title=" FBT3">FBT3</a></li>
<li><a href="#" title=" FBT4">FBT4</a></li>
<li><a href="#" title=" FBT5">FBT5</a></li>
</ul>
</div>

<div class="colright">

<h3>Full Blog Tricks-2</h3>

<ul>
<li><a href="#" title=" FBT1">FBT1</a></li>
<li><a href="#" title=" FBT2">FBT2</a></li>
<li><a href="#" title=" FBT3">FBT3</a></li>
<li><a href="#" title=" FBT4">FBT4</a></li>
<li><a href="#" title=" FBT5">FBT5</a></li>
</ul>
</div>
</div>

<div style="clear:both;"></div>
</div>
<a class="trigger" href="#">Find More!</a>

=> Customize first the links
8. Click SAVE
Continue reading →
Thursday, June 16, 2011

Glowing Navigation Menu with jQuery for Blogger

0 comments
Hi guys! Today, we will try to create Glowing Navigation Menu with jQuery for Blogger. Maybe this trick is almost similar with Hide Show Social Bookmarks with Hover. But, I think Glowing Navigation is better. Want to see the DEMO? OK, now if you want to try Glowing Navigation Menu with jQuery for Blogger, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Editt HTML
3. Copy the code below, and paste above ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

4. Then copy the code  below, and paste above </head>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
5. Click SAVE TEMPLATE
6. Now, go to Design --> Page Elements --> Add Gadget, choose "HTML/Java Script"
7. After that, add this code
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='Home'>Home</a></li>
<li id='kwick2'><a href='#' title='Contents'>Blog</a></li>
<li id='kwick3'><a href='#' title='About'>About</a></li>
<li id='kwick4'><a href='#' title='Futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='Contact us'>Contact</a></li>
<li id='kwick6'><a href='#' title='Recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
=> You have to customize the URL first
8. Click SAVE
Continue reading →
Tuesday, June 14, 2011

Cool Jquery Slide Show to Your blogger Part 2

0 comments
 This is nice slide show to your blogger,add it and make
your blog attractive.











Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

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

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:400px;
height:250px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:400px;
height:250px;
border:none;
}
#slideshow-caption {
width:500px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

If you want, you can change image width and height (highlighted with different color)

4. Now Go to Design >>page Element

5.Click Add gadget  and Select HTML/JavaScript 

6. Now paste paste below code

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYDYf2OOBnKBXZnFPTNgKM3eG7udUCJffa4hOy8DLM7zIC50lp53zLJ3wgTVUADiAK9JgbF0zVRwmtzVlQnbu1fqfJBiLRJQ1uB0sI1oIlKVktXxjX4O6dBNx6EVBoCG-7Vj8Xbg-DEd3/s1600/image+4.jpg" title="Image 1 title here" alt="Image 1 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawGZsc9HsohlGluvUOrZZdG5ildCNIAwQP02j3VigcLQ7Hlihhb5fHdxVnXuLoU5HRo-O5znF3K7NtBk3r0ukYPcA_322_PPVrdANAfafP5KIvcGXV5WdJJ2fb8Y4vv1bAlLxuv0XFAyJ/s1600/image+1.jpg" title="Image 2 title here" alt="Image 2 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBK-_zEYjWRBx238SRL9e_GSQlOC3LZKWNtFN-JX3UoW3KE01VifdMFwkaGMYnKkE25OxalGqqFZZxx41E-NiPjpu46EZyGkVxKLxjK_YAeqRRatfi8jmbmuy4DkN2QbNy3upUgj4xlHwe/s1600/image+3.jpg" title="Image 3 title here" alt="Image 3 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41zev4IrMtLV7mIWuA32qgGdH35EDdk6TWaZhbkY9U9ZCAgDmjgKyY1yF13KmlqHGTFgOF38t7NFDB7fvP0nW0iHXjNgRl6gAXWgYyY43SVxl7ZZJtx8FWphhmdn549_qEUYi8o1FP8yj/s1600/bla_image.png" title="Image 4 title here" alt="Image 4 Description here" /></a></li>
</ul>

Replace # your URL
Replace Red color words with  image title
Replace Red color words with  image description

7. Now save  HTML/JavaScript  
You are done.
Continue reading →
Thursday, June 9, 2011

Show Random Posts with Thumbnail Display

0 comments
Hi, Bloggers! Are you ready to learn a new tricks? OK, now I'm gonna share you about Show Random Posts with Thumbnail. Maybe, this trick almost similar with previous trick, How to Add Labels with Thumbnail. But, in these trick, you just need little code. Need a DEMO? You can see the demo at the bottom of my blog. Now, if you want to add Show Random Posts with Thumbnail Display into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Then, add the code below

<style text-type="CSS">
img.label_thumb {
float:left;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px }

img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }
</style>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

<script type='text/javascript'>var numposts = 4;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Hacks?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

=> The blue code is the number of the post that you want to show
=> The green code is the name of the blog label (The alphabet must be same)

4. Then, click SAVE TEMPLATE
Continue reading →
Saturday, June 4, 2011

White Navigation with Shadow and Rounded Corner

0 comments
Hi, bloggers! Now, I'm gonna post about White Navigation with Shadow and Rounded Corner. This navigation is difference with other navigation. Because this navigation is floating. This navigation also has some effect, they are Shadow and Rounded Corner. Want see the DEMO? Now, if you want to add White Navigation with Shadow and Rounded Corner, just follow the steps below.

1. Log in to yur blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </body>
<!-- zFPmenu START -->
<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>

Add ads, text message, etc.

</div>
<ul id='zfpm_ul'>
<!-- Your menus start -->
<li><a href=''>YOUR MENU-1</a></li>
<li class='dir'><a href=''>YOUR MENU 2 (containing submenu)</a>
   <ul>
      <li class='dir'><a href=''>YOUR SUBMENU 2.1 (containing sub-submenu)</a>
         <ul>
            <li><a href=''>YOUR SUB-SUBMENU 2.1.1</a></li>
            <li><a href=''>YOUR SUB-SUBMENU 2.1.2</a></li>
         </ul>
      </li>
      <li><a href=''>YOUR SUBMENU 2.2</a></li>
      <li><a href=''>YOUR SUBMENU 2.3</a></li>
   </ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = &#39;light&#39;
var zfpm_shareBox = &#39;no&#39;;
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js' type='text/javascript'/>
<!-- zFPmenu END -->
=> Customize first the code
4. Click SAVE TEMPLATE
Continue reading →

Google Plus One for Blogger

0 comments
Google has releases a new application! Yups, that's Google Plus One (+1). I've tried on my blog. You can see on this page. By clicking Google +1 button, it's similar you speak "This is cool" or "You have to see it". Maybe +1 that you gave can help your friends, people, or maybe your blogging mates on internet find the best stuff when they search. Now, how to add Google Plus One for Blogger? It's very simple, just follow the steps below.

Choose the model of Google Plus One button

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}</script>
<div><g:plusone size="standard" expr:href="data:post.url"/></div>


<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}</script>
<div><g:plusone size="tall" expr:href="data:post.url"/></div>

Add into your blog
1. Go to Design --> Page Elements --> Add Gadget
2. Choose "HTML/Java Script"
3. Add one of Google Plus button code for Blogger.
4. Click SAVE

Or, maybe you want to add on every blog posts? Follow the steps below.
1. Go to Design --> Edit HTML
2. Check in the "Expand Widget Templates" box
3. Add one of Google Plus button code for Blogger above <data:post.body/> (choose the second if you're using Read More")
4. Click SAVE TEMPLATES

So, easy right, to add Google Plus One for Blogger???

Continue reading →
Friday, May 27, 2011

Floating Social Bookmarks with Mouseover

0 comments
Now, I will post about Floating Social Bookmarks with Mouseover. You have seen many kinds of Social Bookmarks style. There is floating, under the post, or maybe on sidebar. So, we will add the floating Social Bookmarks. Just see the DEMO. Interested? Follow the step below, to add into your blog.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfLIJ3W-chDpNNZ_8zUdDlttVqQ-axXMHsv-6LoGjDXOfJWw6I-7PJTNboIUwvoEu4ePEOXcSHAcbDeZu_ApU3XMr9Ho-T07Ioph5OzEeVxlCTTuD01CZwAZx9Gq8NzwDeE3-Gbg6gzo7/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJcuFu55gq6lrm5REmPP2drh_TCMpFyR3iWExieh9bAdLP-iSBxBRS4IDotZi-6ORUlf34zduVaVmS3YmWlrBn291bgMTHkJ-hwdQOMKFv5-clDWaIKwieNxFv2oRhZXkD4NOGbTG0l5g/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zSZt86PgJw6bUntQ4c693uUE82zQeAef6d80XUOXAIQ-2J04J1Ilxde1xu9EqGyURqd-v5k1LbA2H_Y-4-RsTwtmxbo6Oytnuy6IRQ4UQy9nl72zscGxKOQ1lWnDigkLtDJW36X5E682/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54o4vz7HuEVeRUGiYv9RvfcqfzhyphenhyphenUjaZYiPTqoPt8R2KW2dAYVthGgrr7_uroYS-xUTLl-RWlKYu5YJ28LzYEA0fYcll4WirmN0_psqN1QwT_WcN9-45acAXaDoHiJx4k3jmtGcUHeRB9/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmsQCjyIz7opNHVl2Bli7DaJJGm83Ue3uBReRp-YusjbVC7RN56Jom3vze_hEnLzthZmxPiyuybLji_5igZE1nYGXv34ctLjn1Y3ESEC6EzyG1w4t0QsK2J2PEimEbeWdLT00Y8b_W8M1a/s400/yahoo_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a href="YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>


4. Then, add the code below
5. Click SAVE TEMPLATE
Continue reading →
Saturday, May 21, 2011

Hide Show Social Bookmarks with Hover

0 comments
Hi, friends! How are you? Now we gonna try to create Hide Show Social Bookmarks with Hover. This Social Bookmarks have very nice effect. When we put our cursor, the social bookmarks will be slide and show the hidden-text. This is the picture
Need a DEMO? Now, if you want to try hide show social bookmarks for your blog, 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"
4. Then add the code below, don't forget to customize the links

<div id="Layer3">
<ul id="menu">
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/delicious_48.png" alt="Delicious" width="60" height="60" title="Delicious" />
<span><br />
<b class="h2">Delicious</b><br />
Add to delicious
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/twitter_icons_48.png" alt="Twitter" width="60" height="60" title="Twitter" />
<span>
<br />
<b class="h2">Twitter</b><br />
Retweet the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/mixx_logo_48.png" alt="Mixx" width="60" height="60" title="Mixx" />
<span><br />
<b class="h2">Mixx</b><br />
&nbsp Mixx it
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/rss-icon.png" alt="RSS" width="60" height="60" title="RSS" />
<span><br />
<b class="h2">Dreamcss </b><br />
Subscribe Us
</span>
</a>
</li>
<li>
<a href="#nogo">
<img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/Google.png" alt="Google" width="60" height="60" title="Google" />
<span><br />
<b class="h2">Google</b><br />
Bookmark the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/facebook_48.png" alt="Facebook" width="60" height="60" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to Facebook
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/stumble-upon.png" alt="Stumble Upon" width="60" height="60" title="Stumble Upon" />
<span><br />
<b class="h2">Stumble Upon </b><br />
&nbsp Review or thumb-up
</span>
</a>
</li>
</ul>
</div>
<style text-type="CSS">
#menu {
margin:0;
padding:0;
width: 50em;
height: 4.5em;
overflow:hidden;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:transparent;
}
#menu li a:hover span {
width:10em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
</style>

5. Click SAVE TEMPLATE
Continue reading →
Friday, May 20, 2011

Add Blogger Sign In Form on Blog

0 comments
All Bloggers that use blogspot as the hosting, must be sign in first in blogspot to go to their account. They must go to Blogger. Then they enter the email and password, and finally they can access their account. But, have you think "I wanna add blogger sign in form on blog..."? But, how? You just follow the steps on these trick. Want to see the DEMO? OK, now if you want to add blogger sign in form on your blog, 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"
4. Then, add the code below

<div style="border:1px solid #C3D9FF;">
<form id="gaia_loginform" action="https://www.google.com/accounts/ServiceLoginAuth" method="post" onsubmit="return(gaia_onLoginSubmit());">
<div id="gaia_loginbox">
<table class="form-noindent" cellspacing="3" cellpadding="5" width="100%" border="0">
<tr>
<td valign="top" style="text-align:center" nowrap="nowrap" bgcolor="#e8eefa">
<input type="hidden" name="ltmpl" value="start" />
<div class="loginBox">
<table id="gaia_table" align="center" border="0" cellpadding="1" cellspacing="0">
<tr>
<td colspan="2" align="center">
<font size="-1">Sign in with your</font>
<table>
<tr>
<td valign="top">
<img src="https://www.google.com/accounts/google_transparent.gif" alt="Google" />
</td>
<td valign="middle">
<font size="+0"><b>Account</b></font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
<tr id="email-row">
<td nowrap="nowrap">
<div align="right">
<span class="gaia le lbl">Email:</span>
</div>
</td>
<td>
<input type="hidden" name="continue" id="continue" value="https://www.blogger.com/loginz?d=http%3A%2F%2Fwww.blogger.com%2Fhome&a=ADD_SERVICE_FLAG" />
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="dsh" id="dsh" value="-5001523091454835929" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="timeStmp" id="timeStmp" value=''/>
<input type="hidden" name="secTok" id="secTok" value=''/>
<input type="hidden" name="GALX" value="EmaSfmXjlk8" />
<input type="text" name="Email" id="Email" size="18" value="" class='gaia le val' />
</td>
</tr>
<tr>
<td></td>
<td align="left">
<div style="color: #666666; font-size: 75%;">ex: pat@example.com</div>
</td>
</tr>
<tr id="password-row" class="enabled">
<td align="right" nowrap="nowrap">
<span class="gaia le lbl">Password:</span>
</td>
<td>
<input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" />
</td>
</tr>
<tr>
<td> </td>
<td align="left">
</td>
</tr>
<tr id="rememberme-row" class="enabled">
<td align="right" valign="top">
<input type="checkbox" name="PersistentCookie" id="PersistentCookie" value="yes" checked='checked' />
<input type="hidden" name='rmshown' value="1" />
</td>
<td>
<label for="PersistentCookie" id="PersistentCookieLabel" class="gaia le rem">Stay signed in</label>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
<input type="submit" class="gaia le button" name="signIn" id="signIn" value="Sign in" />
</td>
</tr>
<tr id="ga-fprow">
<td colspan="2" height="33.0" class="gaia le fpwd" align="center" valign="bottom">
<a href="https://www.blogger.com/forgot.g" target=_top>Can't access your account?</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<input type="hidden" name="asts" id="asts" value="" />
</form>
<script>
var gaia_loginForm;
if (document.getElementById) {
gaia_loginForm = document.getElementById("gaia_loginform");
} else if (window.gaia_loginform) {
gaia_loginForm = window.gaia_loginform;
}
var gaia_emailHasKeypress = false;
if (gaia_loginForm && gaia_loginForm.Email) {
gaia_loginForm.Email.onkeypress = function() {
gaia_emailHasKeypress = true;
}
}
function gaia_setFocus() {
if (gaia_loginForm) {
if (gaia_loginForm.Email && !gaia_loginForm.Email.value) {
gaia_loginForm.Email.focus();
} else if (gaia_loginForm.Passwd && !gaia_emailHasKeypress) {
gaia_loginForm.Passwd.focus();
}
}
}
gaia_setFocus();
</script>
<form id="gaia_universallogin" action="https://www.google.com/accounts/ServiceLoginAuth" method="post" onsubmit="return(gaia_onLoginSubmit());">
<input type="hidden" name="continue" id="continue" value="https://www.blogger.com/loginz?d=http%3A%2F%2Fwww.blogger.com%2Fhome&a=ADD_SERVICE_FLAG" />
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="dsh" id="dsh" value="-5001523091454835929" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
</form>
</div>

5. Click SAVE TEMPLATE
Continue reading →
Thursday, May 19, 2011

How to add cool animated stars to your blog

0 comments
This will give great look to your blog. try to add this
option to your blogger.

star,blogger

1. Log in to blogger and Go to  Design >> Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

Falling Colored Stars

<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/ColoredStars.txt" />
</script>


Falling fire Stars
<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/fireStars.txt" />
</script>



Falling  Stars


<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/Stars.txt" />
</script>


Falling snow

<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/snow.txt" />
</script>


Falling Hearts

<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/LoveHeart-1-dance.txt" /> </script>


Falling Heart
<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/LoveHeart-1-lights.txt" /> </script>


 Falling butterfly
<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/butterfly-1-dance.txt" /> </script>


4. Now Click save you are done.
Continue reading →
Related Posts Plugin for WordPress, Blogger...