Okada Design Blog » Blogger http://www.okadadesign.no/blog Welcome to Okada Design Web Development Blog Wed, 11 Jan 2012 23:21:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Adding Picasa Slideshow to your Blogger or webiste http://www.okadadesign.no/blog/blogger/adding-picasa-slideshow-to-your-blogger-or-webiste/ http://www.okadadesign.no/blog/blogger/adding-picasa-slideshow-to-your-blogger-or-webiste/#comments Mon, 13 Apr 2009 10:12:00 +0000 shinokada http://www.okadadesign.no/blog/?p=59

You can embed a Flash slideshow of any web album. It’ll be automatically updated when you make changes to your album. Follow these steps to embed a slideshow: 1. On the My Photos page, click your album. 2. Click Link to this album on the right-hand side. 3. Click Embed Slideshow. 4. [...] Related posts:

  1. Adding Picasa photos to your website
  2. Adding a Flickr Slideshow
  3. Adding Tweet Button to your Blogger and Website
]]>

You can embed a Flash slideshow of any web album. It’ll be automatically updated when you make changes to your album. Follow these steps to embed a slideshow:

1. On the My Photos page, click your album.
2. Click Link to this album on the right-hand side.
3. Click Embed Slideshow.
4. Choose your slideshow settings, such as image size, captions, and autoplay.
5. Once you’ve chosen your settings, copy the resulting HTML code (Ctrl-C).
6. Paste the HTML in the source code for your site (Ctrl-V).

Google Help

Related posts:

  1. Adding Picasa photos to your website
  2. Adding a Flickr Slideshow
  3. Adding Tweet Button to your Blogger and Website

]]> http://www.okadadesign.no/blog/blogger/adding-picasa-slideshow-to-your-blogger-or-webiste/feed/ 0 How to Add flash Animated label cloud Blogumus for Blogger http://www.okadadesign.no/blog/blogger/how-to-add-flash-animated-label-cloud-blogumus-for-blogger/ http://www.okadadesign.no/blog/blogger/how-to-add-flash-animated-label-cloud-blogumus-for-blogger/#comments Tue, 31 Mar 2009 12:09:00 +0000 shinokada http://www.okadadesign.no/blog/?p=52 I just got a RSS article called “Tag Clouds – Styling and Adding Sort Options an article” from CSS globe.

I found this article “How to Add flash Animated label cloud Blogumus for Blogger“

I just adjusted color, width and height.

Related posts: Animated menu using jquery and sprite Add your Twitter updates to your Blogger Adding a drop cap to Blogger

Related posts:
  1. Animated menu using jquery and sprite
  2. Add your Twitter updates to your Blogger
  3. Adding a drop cap to Blogger
]]>

I just got a RSS article called “Tag Clouds – Styling and Adding Sort Options an article” from CSS globe.

I found this article “How to Add flash Animated label cloud Blogumus for Blogger“

I just adjusted color, width and height.

Related posts:

  1. Animated menu using jquery and sprite
  2. Add your Twitter updates to your Blogger
  3. Adding a drop cap to Blogger

]]> http://www.okadadesign.no/blog/blogger/how-to-add-flash-animated-label-cloud-blogumus-for-blogger/feed/ 0 Adding a drop cap to Blogger http://www.okadadesign.no/blog/blogger/adding-a-drop-cap-to-blogger/ http://www.okadadesign.no/blog/blogger/adding-a-drop-cap-to-blogger/#comments Mon, 30 Mar 2009 15:51:00 +0000 shinokada http://www.okadadesign.no/blog/?p=51 Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.

I tried it with my Blogger here and I found a small adjustment to work in Blogger. What you have to do is create class dropcap and add CSS.

You can see a big N at the beginning of [...] Related posts:

  1. Adding search to Blogger or website
  2. Add your Twitter updates to your Blogger
  3. Adding Picasa Slideshow to your Blogger or webiste
]]>

Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.

I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.

You can see a big N at the beginning of this paragraph.

.dropcap
{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: “Times New Roman”, Times, serif;
font-size: 3em;
font-weight: bold;
margin: 0 10px 0 0;
padding: 10px;
text-transform: uppercase;
}

And you need to add span with class=”dropcap” to the first letter of your paragraph like this.

<span class=”dropcap”>B</span>BC News.

It becomes like this.
BBC News.

You can add more class like .blue after .dropcap

.blue
{
background: #3B7CEF;
}

And add this class to a span tag.

<span class=”dropcap blue”>C</span>NN News.

CNN News.

Related posts:

  1. Adding search to Blogger or website
  2. Add your Twitter updates to your Blogger
  3. Adding Picasa Slideshow to your Blogger or webiste

]]> http://www.okadadesign.no/blog/blogger/adding-a-drop-cap-to-blogger/feed/ 1 How to add Read More to your Blogger http://www.okadadesign.no/blog/blogger/how-to-add-read-more-to-your-blogger/ http://www.okadadesign.no/blog/blogger/how-to-add-read-more-to-your-blogger/#comments Mon, 30 Mar 2009 10:39:00 +0000 shinokada http://www.okadadesign.no/blog/?p=50 This is an official article from Blogger. And I’d like to show how I implemented to this blog.

1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes [...] Related posts:

  1. Adding Tweet Button to your Blogger and Website
  2. Adding Picasa Slideshow to your Blogger or webiste
  3. Add your Twitter updates to your Blogger
]]>

This is an official article from Blogger.
And I’d like to show how I implemented to this blog.

1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes wrong.

2. Paste the following code in your header. I add it just before </head> tag.

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

3. Adding “Read More” Links

Go to Layout and click EditHTML. Add a tick to Expand Widget Templates. Then add the following code to your template, after the <data:post.body/> tag:

<b:if cond=’data:blog.pageType != “item”‘><br />
<a expr:href=’data:post.url’>Read more!</a>
</b:if>

You can replace the “Read more!” text with Continue Reading or Read the rest of this entry ยป, etc.

4. Post Modifications

Go to Posting and create a new article. And wrap your article which you want to hide with the following code.


<span class="fullpost">

Your main article here

</span>

That's it folks. Thank you for reading.

Related posts:

  1. Adding Tweet Button to your Blogger and Website
  2. Adding Picasa Slideshow to your Blogger or webiste
  3. Add your Twitter updates to your Blogger

]]> http://www.okadadesign.no/blog/blogger/how-to-add-read-more-to-your-blogger/feed/ 1 Add your Twitter updates to your Blogger http://www.okadadesign.no/blog/blogger/add-your-twitter-updates-to-your-blogger/ http://www.okadadesign.no/blog/blogger/add-your-twitter-updates-to-your-blogger/#comments Sun, 29 Mar 2009 14:01:00 +0000 shinokada http://www.okadadesign.no/blog/?p=49 On the right side, you can see my Twitter updates.Here is how you can add your Twitter to your Blogger.

1. Login to your Blogger and go to Layout.2. Click “Add a Gadget” and select HTML/JavaScript. Add the following code.

<div id=”twitter_div”><h2 style=”display:none;” class=”sidebar-title”>Twitter Updates</h2><ul id=”twitter_update_list”></ul><a id=”twitter-link” style=”display:block;text-align:right;” href=”http://twitter.com/YOUR-Twitter-NAME”>follow me on Twitter</a></div>

[...] Related posts:
  1. How to add Read More to your Blogger
  2. Adding Tweet Button to your Blogger and Website
  3. Adding search to Blogger or website
]]>


On the right side, you can see my Twitter updates.
Here is how you can add your Twitter to your Blogger.

1. Login to your Blogger and go to Layout.
2. Click “Add a Gadget” and select HTML/JavaScript. Add the following code.

<div id=”twitter_div”>
<h2 style=”display:none;” class=”sidebar-title”>Twitter Updates</h2>
<ul id=”twitter_update_list”></ul>
<a id=”twitter-link” style=”display:block;text-align:right;” href=”http://twitter.com/YOUR-Twitter-NAME”>follow me on Twitter</a>
</div>

<script src=”http://twitter.com/javascripts/blogger.js” type=”text/javascript”></script>
<script src=”http://twitter.com/statuses/user_timeline/YOUR-Twitter-NAME.json?callback=twitterCallback2&count=10″ type=”text/javascript”></script>

3. In the above code, change YOUR-Twitter-NAME to your twitter name. If you want to change the number of updates, change count=10 to any number you wish.

4. Add the following CSS to your Blogger CSS and tweak it according to your taste.

/* Twitter */
#twitter_update_list li {
background-color: #EFF4FF;
text-indent: 0;
margin-bottom: 5px;
border: 1px solid #B5BDCF;
}
#twitter_update_list li span{
}

Related posts:

  1. How to add Read More to your Blogger
  2. Adding Tweet Button to your Blogger and Website
  3. Adding search to Blogger or website

]]> http://www.okadadesign.no/blog/blogger/add-your-twitter-updates-to-your-blogger/feed/ 0 How to add jQuery Plugin: Scroll to Top to Blogger http://www.okadadesign.no/blog/jquery/how-to-add-jquery-plugin-scroll-to-top-to-blogger/ http://www.okadadesign.no/blog/jquery/how-to-add-jquery-plugin-scroll-to-top-to-blogger/#comments Sun, 29 Mar 2009 13:40:00 +0000 shinokada http://www.okadadesign.no/blog/?p=48 After reading an article “jQuery Plugin: Scroll to Top” by Craig Wilson a couple of weeks ago, here is how to add it to your Blogger.

There is a similar code by David Walsh here. But I am using a code by Craig.

You can see the action here. You just need [...] Related posts:

  1. Adding Tweet Button to your Blogger and Website
  2. Add your Twitter updates to your Blogger
  3. Animated menu using jquery and sprite
]]>


After reading an article “jQuery Plugin: Scroll to Top” by Craig Wilson a couple of weeks ago, here is how to add it to your Blogger.

There is a similar code by David Walsh here. But I am using a code by Craig.

You can see the action here. You just need to scroll down a bit and you will see a ^Scrol to Top box on the right bottom. By clicking it you go to the top of the page.

1. Add the following HTML before your </body> tag.

<a href=”#” id=”toTop”>^ Scroll to Top</a>

2. Add the following CSS code in your Blogger CSS code.

/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

3. Add the following jQuery codes just before </body> tag.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
/*———————–
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive “Scroll to Top” link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
———————–*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(“href”);if($(window).scrollTop()!=”0″){$(this).fadeIn(“slow”)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==”0″){$(scrollDiv).fadeOut(“slow”)}else{$(scrollDiv).fadeIn(“slow”)}});$(this).click(function(){$(“html, body”).animate({scrollTop:0},”slow”)})}});

$(function() {
$(“#toTop”).scrollToTop();
});
</script>

Related posts:

  1. Adding Tweet Button to your Blogger and Website
  2. Add your Twitter updates to your Blogger
  3. Animated menu using jquery and sprite

]]> http://www.okadadesign.no/blog/jquery/how-to-add-jquery-plugin-scroll-to-top-to-blogger/feed/ 0 Blogger tips http://www.okadadesign.no/blog/blogger/blogger-tips/ http://www.okadadesign.no/blog/blogger/blogger-tips/#comments Sun, 22 Mar 2009 11:35:00 +0000 shinokada http://www.okadadesign.no/blog/?p=47 You can find many great tips for Blogger users in blogspottutorial.com On the right column there is Blogging tutorial For Beginner.

I used the following tips for this blog.How to add related post widgetAdd search engine to your blog

Another helpful tips for Blogger users is Amanda Fazani’s website Bloggerbuster.You can download a [...] Related posts:

  1. Adding search to Blogger or website
  2. How to Add flash Animated label cloud Blogumus for Blogger
  3. Add your Twitter updates to your Blogger
]]>


You can find many great tips for Blogger users in blogspottutorial.com
On the right column there is Blogging tutorial For Beginner.

I used the following tips for this blog.
How to add related post widget
Add search engine to your blog

Another helpful tips for Blogger users is Amanda Fazani’s website Bloggerbuster.
You can download a free PDF book to improve your Blogger design.

Related posts:

  1. Adding search to Blogger or website
  2. How to Add flash Animated label cloud Blogumus for Blogger
  3. Add your Twitter updates to your Blogger

]]> http://www.okadadesign.no/blog/blogger/blogger-tips/feed/ 0 Adding Tweet Button to your Blogger and Website http://www.okadadesign.no/blog/blogger/adding-tweet-button-to-your-blogger-and-website/ http://www.okadadesign.no/blog/blogger/adding-tweet-button-to-your-blogger-and-website/#comments Sat, 21 Mar 2009 17:06:00 +0000 shinokada http://www.okadadesign.no/blog/?p=45 After reading an article by Woork, I added Tweet this to my bloggers. The article was simple but I thought I could add a little bit more details here.

Open your blogger and go to Layout.Click Edit HTML then tick a box next to Expand Widget Templates.Then find a line <div class=”post-footer-line [...] Related posts:

  1. Adding search to Blogger or website
  2. Add sharethis widget to your Blogger, WP or website
  3. Add your Twitter updates to your Blogger
]]>


After reading an article by Woork, I added Tweet this to my bloggers. The article was simple but I thought I could add a little bit more details here.

Open your blogger and go to Layout.
Click Edit HTML then tick a box next to Expand Widget Templates.
Then find a line

<div class=”post-footer-line post-footer-line-1″>

Then after this line add the following line.

<div class=”tweetmeme”>
<script type=”text/javascript”>
tweetmeme_url = '<data:post.url/>';
</script>
<script src=”http://tweetmeme.com/i/scripts/button.js” type=”text/javascript”> </script>
</div>

Then add CSS just before the line.

]]></b:skin>

I add the following css to mine.

tweetmeme {
width: 70px;
height: 75px;
float: left;
}

For your normal website, you can use the following code where you want to add Tweetmeme.

<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>

You can find an Official documentation.

Related posts:

  1. Adding search to Blogger or website
  2. Add sharethis widget to your Blogger, WP or website
  3. Add your Twitter updates to your Blogger

]]> http://www.okadadesign.no/blog/blogger/adding-tweet-button-to-your-blogger-and-website/feed/ 0 Add sharethis widget to your Blogger, WP or website http://www.okadadesign.no/blog/blogger/add-sharethis-widget-to-your-blogger-wp-or-website/ http://www.okadadesign.no/blog/blogger/add-sharethis-widget-to-your-blogger-wp-or-website/#comments Sat, 21 Mar 2009 12:52:00 +0000 shinokada http://www.okadadesign.no/blog/?p=44 I just added sharethis to this blog and other my websites.You go to sharethis.com and create your account by clicking For Publishers.After logged in, go to Get the Button to create a new button. You can choose your platform and modify the button appearance. You can create codes by selecting ‘Share This Button [...] Related posts:
  1. Adding Tweet Button to your Blogger and Website
  2. Adding search to Blogger or website
  3. Add Disqus comment system to your blogger
]]>


I just added sharethis to this blog and other my websites.
You go to sharethis.com and create your account by clicking For Publishers.
After logged in, go to Get the Button to create a new button. You can choose your platform and modify the button appearance. You can create codes by selecting ‘Share This Button for other websites’ under ‘Pick your platform drop-down’.

Related posts:

  1. Adding Tweet Button to your Blogger and Website
  2. Adding search to Blogger or website
  3. Add Disqus comment system to your blogger

]]> http://www.okadadesign.no/blog/blogger/add-sharethis-widget-to-your-blogger-wp-or-website/feed/ 0 Adding search to Blogger or website http://www.okadadesign.no/blog/blogger/adding-search-to-blogger-or-website/ http://www.okadadesign.no/blog/blogger/adding-search-to-blogger-or-website/#comments Mon, 16 Mar 2009 14:47:00 +0000 shinokada http://www.okadadesign.no/blog/?p=39 I was working on my other Blogger website today. If you are using Blogger you can add it by using “Add a Gadget”.But I didn’t want to use a Gadget, because I wanted to add a search function in a horizontal navigation.

If you want to add it to your website with using [...] Related posts:

  1. Adding Tweet Button to your Blogger and Website
  2. Add your Twitter updates to your Blogger
  3. Blogger tips
]]>


I was working on my other Blogger website today.
If you are using Blogger you can add it by using “Add a Gadget”.
But I didn’t want to use a Gadget, because I wanted to add a search function in a horizontal navigation.

If you want to add it to your website with using HTML, you can find the details in Google custom search.

So I added search function with the following code to my Blogger site.

 <form expr:action='data:blog.homePageUrl + "/search"' id='search_form' method='get'>            <input id='searchinput' name='q' size='22' tabindex='2' type='text' value=''/>  <input id='searchbutton' name='submit' tabindex='5' type='submit' value='Search'/> </form>

Related posts:

  1. Adding Tweet Button to your Blogger and Website
  2. Add your Twitter updates to your Blogger
  3. Blogger tips

]]> http://www.okadadesign.no/blog/blogger/adding-search-to-blogger-or-website/feed/ 0