Tuesday, January 1, 2013

Google Blogger Help : Definition


My Future Tools which I'm working : Title % of Completed
Google Navigation Bar Button :  Completed
Auto Scroll Page Buttons :   Completed
Slide Show with Any Google Gadgets :  Completed
Post Tabs :   90%
Post Title Holder : Completed
Post Slides Button : 50%
Page Lists Holder : 85%
Google Search Design : 90%
Others : ??%
The Definition of each titles will be here!
The following link is the web blog I worked and you can see the many features which I would like to share with you guys.
FACTSnet

-from C.O.

Google Blogger Help : Style

The Styling will be here!

As using style,
  1. Copy the cords
  2. Go to your blog "Design" and Click  "Template Designer"
  3. Choose "Advanced" and find "Add CSS" and Click it.
  4. Pest the cords into the text field and Click "APPLY TO BLOG"
  5. If you don't like the design, leave a message to me and I'll give you a suggestion.
If you have any questions, it's awesome, ask me. Thank you for your time.

-from C.O.

Google Blogger Help : Cords

The Cording will be here!

As using the cords,
  1. Open up your blog "Design" and Choose "Edit HTML"
  2. Find the "<head>" inside the text box and Pest following code under the place
    <script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
    <script src='http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js' type='text/javascript'/>
    <script src='http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js' type='text/javascript'/>
  3. Copy the cords which you can see my blog post "JQUERY"
  4. Open up your blog "Design" and Choose "Edit HTML"
  5. Find the "</body>" inside the text box and Pest the cords above the place
If you have any questions, it's awesome, ask me. Thank you for your time.

-from C.O.

Friday, August 5, 2011

Post Title Holder : Definition

Why don't you want to see the each post's title inside a page at once?
I strongly recommend to use this cord.

After cording, you will see the each post's title below the first post in page by default.
*If you want to change the position, please feel free to send your ideas.
Also, each title can be targeted the post itself.

If you have any difficulties using the cord please see these links,
 -from C.O.

Post Title Holder : Style

This totally depends on your blog.
Please contact me and place your blog link, I'll give you a suggestion.
Thank you.


-from C.O.

Post Title Holder : Cord

-from C.O.

Thursday, August 4, 2011

Slide Show with Any (Most) Google Gadgets : Definition

I would like to share my slide-show which shows above the top of Posts.
This slide-show can be stored any kinds of Google Gadgets you want to show.

After placing the cord : in order to show Google Gadgets inside the slide-show,
  1. You must type your Google Gadgets title as "Slide" *important
  2. As ordering the slides, just drag your Gadgets which you want to show first places above the first Gadget title as "Slide" and second "Slide", third "Slide", and so on
    In fact, you can have slides as many as you want
  3. You are way to go! Also, it is possible to replace the slide-show anywhere inside your blog!
If you want to change the slides effect, please ask me or comment me. There are several effects you can use.
All effects you can find from the link follows.

jQuery Cycle Plugin : Torsten Baldes, Matt Oakes, and Ben Sterling

Unfortunately,  there is a problem in some Google Gadgets, so it may not work every gadgets.
If you have any difficulties using the cord please see these links,

-from C.O.

Slide Show with Any Google Gadgets : Style

This totally depends on your blog.
Please contact me and place your blog link, I'll give you a suggestion.
Thank you.

-from C.O.

Slide Show with Any Google Gadgets : Cord

<script type="text/javascript">
$(document).ready(function (){
/* Slideshow with Any Google Gadgets Created by Chihiro Okamoto : www.c-okamoto.blogspot.com*/
$(".main-outer").prepend('

<div id="slideShow"/>
');
$('h2.title').each(function(index, element) {
var elems = $(this).text();
var arr = jQuery.makeArray(elems);
if(jQuery.inArray("Slide", arr)!=-1){
$(this).css('display','none').parent().css('display','none').appendTo('#slideShow');
}
});

/* Inspired by http://jquery.malsup.com/cycle/ */
$('#slideShow').cycle({
fx: 'scrollHorz',
pause:1,
timeout: 7000,
speedIn: 1000,
speedOut: 1000,
easeIn: 'easeInOutExpo',
easeOut: 'easeInOutExpo'
});

$('#slideShow').children('div').each(function(index, element) {
var marginTop = $('#slideShow').height()-$(this).height();
$(this).css({marginTop:parseInt(marginTop)/2});
});
});
</script>


-from C.O.

Sunday, July 31, 2011

Auto Scroll Page Buttons : Definition

I would like to share the scroll page button.
After you pest the style and cords you will see the buttons in top-right of you web browser.

To hold the button en-scrolls the page. To release the button stops scrolling.
To double click the button en-scrolls top page or end of page.

If you have any difficulties using the cord please see these links,
-from C.O.

Auto Scroll Page Buttons : Style

.goUp {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdgSpOU-pZznvwmiDA5l-o7qNngcV17LTHl44wJzFCgVbNB9ho15BbvOq1TMxY9HLZyKxVjZziRtzrGzMslOXj91aoLg4hfy-FfRDWZ_waA9QwzRvAFxxfKhXTNtbV6kglwrjv1o8bl4/s1600/scroll-icon-up.png") top left no-repeat;
position:fixed;
height:20px;
width:20px;
top:35px;
right:5px;
cursor: pointer;
}
.goUp:hover {
background: #06c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdgSpOU-pZznvwmiDA5l-o7qNngcV17LTHl44wJzFCgVbNB9ho15BbvOq1TMxY9HLZyKxVjZziRtzrGzMslOXj91aoLg4hfy-FfRDWZ_waA9QwzRvAFxxfKhXTNtbV6kglwrjv1o8bl4/s1600/scroll-icon-up.png") top left no-repeat;
}
.goDown {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWqUp_miaeoYrD-Rmy5er8N1ymeS_E7cFe5bIVMxLdmZz7_eQ49iG_UEGZAVQmbu4-IIpLZku0IFx9nNrw5akNlzWb0Ut75BjfNhTyEEphORZ2y3BetC2A0fuLR52Ru3mTQ1J6YY421I/s1600/scroll-icon-down.png") top left no-repeat;
position:fixed;
height:20px;
width:20px;
top:60px;
right:5px;
cursor: pointer;
}
.goDown:hover {
background: #06c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWqUp_miaeoYrD-Rmy5er8N1ymeS_E7cFe5bIVMxLdmZz7_eQ49iG_UEGZAVQmbu4-IIpLZku0IFx9nNrw5akNlzWb0Ut75BjfNhTyEEphORZ2y3BetC2A0fuLR52Ru3mTQ1J6YY421I/s1600/scroll-icon-down.png") top left no-repeat;
}


-from C.O.

Auto Scroll Page Buttons : Cord

<div class="goUp"></div>
<div class="goDown"></div>
<script type="text/javascript"> $(document).ready(function (){
/* Auto Scroll Page Created By Chihiro Okamoto : www.c-okamoto.blogspot.com*/
var $goUp = $('.goUp'), $goDown = $('.goDown'),
$html = $('html'),
$body = $('body'),
$footer = $('#footer');
/* Entire Body Scroll*/ $goUp.bind({
mousedown: function() {
$html.animate({scrollTop: '-=10000px'}, 9000);
},
mouseup: function() {
$html.stop();
},
mouseleave: function() {
$html.stop();
},
dblclick: function() {
$html.stop().scrollTo( {top:'0',left:'0'}, 1000);
}
});

$goUp.bind({
mousedown: function() {
$body.animate({scrollTop: '-=10000px'}, 9000);
},
mouseup: function() {
$body.stop();
},
mouseleave: function() {
$body.stop();
},
dblclick: function() {
$body.stop().scrollTo( {top:'0',left:'0'}, 1000);
}
});


$goDown.bind({
mousedown: function() {
$html.animate({scrollTop: '+=10000px'},9000);
},
mouseup: function() {
$html.stop();
},
mouseleave: function() {
$html.stop();
},
dblclick: function() {
$html.stop().scrollTo( { top: $footer.position().top,left:0}, 2000);
}
});

$goDown.bind({
mousedown: function() {
$body.animate({scrollTop: '+=10000px'},9000);
},
mouseup: function() {
$body.stop();
},
mouseleave: function() {
$body.stop();
},
dblclick: function() {
$body.stop().scrollTo( { top: $footer.position().top,left:0}, 2000);
}
});
});

/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
</script>



-from C.O.

Saturday, July 30, 2011

Google Navigation Bar Button : Definition

Is your google blog navigation bar (you can see it on top of your blog) bothering you?
I have corded the program and style, so please use it.

After you put the cords and style, you can see the Blog icon top right of the web browser.
It's the bottom that user can make Google navigation bar appear or disappear.

If you have any difficulties using the cord please see these links,
-from C.O.

Google Navigation Bar Button : Style

#opNavBar{
background:url("http://img1.blogblog.com/img/navbar/icons_orange.png") -26px center no-repeat;
position:fixed;
top:5px;
right:5px;
height:20px;
width:20px;
cursor:pointer;
}

#navbar-iframe{
display:none;
}



Google Navigation Bar Button : Cord

<div id="opNavBar"></div>
<script type="text/javascript">
$(document).ready(function (){
/*Google Blog Bar Created By Chihiro Okamoto : www.c-okamoto.blogspot.com*/
var $opNavBar=$('#opNavBar'),
$navBarIframe=$('#navbar-iframe');
$opNavBar.toggle(
function () {
$navBarIframe.fadeIn(1000);
return false;
},
function () {
$navBarIframe.fadeOut(1000);
return false;
});
});
</script>


-from C.O.