Content feed Comments Feed
Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Way to Change Blogger Template Without Deleting Sidebar Widget

Posted by oldx3 Friday, January 22, 2010


  1. Download new xml template
  2. Save to your desktop. Remember, SAVE no need to open. Some mistake is they open xml file in browser of course there will be an error warning, because browser not compatible to open xml file
  3. Create new blog. This is trial blog to edit new xml template
  4. Upload your new template to trial blog. How to ? Open Edit HTML, and then upload downloaded xml file
  5. Open your current blog layout
  6. Go to Edit HTML, copy all widget code between
          or
          (some layout does use other type of word)
  7. Open trial blog layout
  8. Go to Edit HTML, paste to trial blog, all copied widget code. Put it between too
  9.    Save
  10. Download and save full template of trial blog
  11. Upload to your current blog layout, and you get new layout without deleting widget
by bloggerboy

0 comments
Read More

Label Cloud Widget For Blogger / Blogspot

Posted by oldx3 Thursday, January 21, 2010


A tag cloud or label cloud for blogger is a visual depiction of all labels used on your blog.You can see a demo of the Label cloud for blogger(blogger label cloud) here on my site. This Tag Cloud Widget was originally developed by phydeaux3. I have just simplified and made it easier to install..

First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that page.Label Cloud Widget For Blogger Or Blogspot
Choose to sort the labels Alphabetically when prompted.

After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)

You will find some code similar to

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>


Now Replace that with

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2>

</b:if>
<div class='widget-content'>

<div id='labelCloud'/>
<p align='center'>

<script type='text/javascript'>
var cloudMin = 1;

var maxFontSize = 30;
var maxColor = [35,130,196];
var minFontSize = 13;

var minColor = [35,130,195];
var lcShowCount = false;

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}

return v
}
var c=[];
var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;

</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;


for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}


var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);


if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(&#39; &#39;);
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

</p>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>

</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<br/>Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Tutorials</a></small>

<br/>Blogger Label Cloud:<small><a href='http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html'>Label Cloud for Blogger</a></small>

</noscript>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Now find 
]]></b:skin>

and replace it with


#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:&quot;&quot; !important}
]]></b:skin>

Save your template and now you should get a working Label Cloud On your Blog.


Optional Parts Proceed further only if you want to customize the cloud to a better level...

Changing Cloud Colours:

you can change those colors editing the code a little bit..
you will have to expand your widget templates and modify these 2 lines of code

var maxColor =

and

var minColor =
you have to specify the RGB values there separated by commas..If you are sure of what should be the hex codes of the maximum and minimum colors,then you can use this to convert the hex value to RGB values..If you are not sure of what the hex code of the colors are then have a look at this.

Changing the Font Sizes:
You can change the font sizes by editing these 2 lines of code

var minFontSize =
and
var maxFontSize =

0 comments
Read More

Show Related Stories Under Each Post with Picture!

Posted by oldx3 Wednesday, January 20, 2010






1. Click to open Blogger in a new window, and follow the steps below in that window. Please login if necessary.

2. Select a blog if you have more than one, then click on Add Widget.



3. (Optional) For better performance, Drag and Drop the LinkWithin box under the "Blog Posts" box.


4. Click on Save.

0 comments
Read More

Webpage Content Toolbar Widget

Posted by oldx3

Let your readers easily share, email, print, and bookmark your web pages with these buttons. This widget works really well in your blog's sidebar, where your readers can easily see it. As you can see the demo above, the buttons are spread out, on your site they will be closer together.

Copy and Paste the code below into your site
<script type="text/javascript">stenium_url    = location.href;stenium_title  = document.title;stenium_style  = 'classic';stenium_widgets = 'print,email,bookmark,share';stenium_layout = '1';</script><script src="http://www.stenium.com/js/widget_loader.js" type="text/javascript"></script>
Customizing this Widget

  • If you would like to rearrange the order of the buttons search for this line of code below. Rearrange the the names according to your liking or remove any that do not suit your needs.
print,email,bookmark,share
  • You can also make these button display themselves horizontally instead of vertically. Search for the line of code below.
stenium_layout = '1';
  • Replace it with this line of code.
stenium_layout = '0';

0 comments
Read More

Live Website Chat Widget

Posted by oldx3

http://www.yaplet.com/images/buttons/w-3.png
A chat room is a great way to get your readers more involved in your blog. If you think about it, your visitors may end up spending the night chatting with other visitors. Now that's a great thought... The answer is Yaplet, which adds a chat room to every site on the internet!

For Example, here is the WidgetsForFree™ Chat Room . All you need to do is create a visible link or button to your site's chat room just like I have done above. Go to Yaplet.com to find your blog's chat room.

  • You can also create a pop-up version
  • If you go to yaplet's website, you will find some nice buttons which can be placed on your blog.
All the things this Widget can be used for:
  • Chat with friends
  • Make new friends
  • Build new communities
  • Collaborate on group work
  • Telepresent
  • Provide customer service
  • Offer real-time support
  • Educate over distance
  • Play games
  • Read/write reviews
  • and more...
Get this Widget

0 comments
Read More

Translate Blog Widget (using Flags)

Posted by oldx3

Let your readers easily translate your blog with this highly compact widget. This blog translator is powered by Google Translate. The languages available at the click of a flag are Chinese, German, French, Japanese, Korean, Russian, and Spanish.

It can easily be added to any blog platform or website! Just click "get this translation widget" below to get yourself started.



For Google Powered Bloggers:




The html code:
 


0 comments
Read More

Floating "Top of Page" Icon Widget

Posted by oldx3

Some blogs and webpages have obnoxiously long pages that go on forever... and that's where this widget comes in handy. As you can see, there is a small floating arrow at the bottom-right of this page. It always maintains the same position. Scroll down a little in your template, then if you click on it, it will take you to the very top of the page.

Why it's a good thing?

  • Saves your visitors from an unnecessary hassle of scrolling up.
  • The icon does not interfere with your content.
  • You can use your own image in order to blend in with your own blog.

For Google Bloggers:




The html code:
Customizing the Icon Image:
  • If you wish to change the arrow image to something else, then find this line below and replace it with another image url
http://img119.imageshack.us/img119/8589/arrowupcx2.gif

0 comments
Read More

Add Sudoku Puzzle Widget To Blogspot

Posted by oldx3


The Sudoku widget generates random puzzles with five different levels of difficulty and shows when you have entered an incorrect answer. It can also check to see if you got the puzzle right. And many players think that the best part of this widget is that you can make it solve it self.




<iframe scrolling="no" frameborder="0" width="200" src="http://free-sudokus.blogspot.com" height="230"></iframe><div style="margin:-8px 0;background:#fff;text-align:center;width:234px"><a style="font-size:75%;text-decoration:none;" href="http://widgetsforfree.blogspot.com/2008/01/sudoku-widget_500.html">Sudoku Widget</a></div>

0 comments
Read More

Social Bookmarking Widget

Posted by oldx3

Sociofluid as Blogger Widget

Sociofluid can be embedded in blogger sites. To install the blogger widget follow the instructions:
  1. Go to sociofluid page and preview the widget:


  2.  If you are not happy with it customize it, scroll down at the end of the page and press
    generate widget button:


  3. Preview the widget on top of the page and if you like it Click on 'Add to Blogger':


  4. You'll be directed to your blogger page "Import Page Element". Click Add Widget.
  5. Select the position in the layout. I prefer it on the big column under each post.
  6. Save it and check your blogger page.

0 comments
Read More

Blog Table of Contents Widget

Posted by oldx3

The job is done. We now have a complete interactive Table Of Contents. Click the button in my sidebar to display the TOC. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.

Here is how to install it to your Blog.

Step 1: Back Up your Template.

Step 2: Add a HTML Page Element
Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.
Change that line as follows:
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Save the template and switch to the Page Elements Tab.
Add a HTML page element above your Blog Posts element.
Leave the title blank. Add the following html:
<div id="toc"></div>


Save your template.

Step 3: Add a Sidebar HTML-element
Now add a HTML-element to the sidebar. Set the title to "TOC".
For the contents, enter:
<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://kpn.planet.nl/oosti468/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>


Replace YOURBLOG with the name of ...... exactly.
Oh yes, and save.

Step 4: Add custom styles to the skin of your template.
New id's and classes are:
#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3

For your convenience: Beautiful Beta uses the following styling:
<style type="text/css">
#toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:500px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
  width:250px;
}
.toc-header-col2 {
  width:75px;
}
.toc-header-col3 {
  width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
  font-size:80%;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:80%;
  text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
}
</style>


You can add this to the <b:skin>-part of the template, or insert it in the sidebar widget.

Enjoy!

0 comments
Read More

Add Digg Vote Button Counter Widget to Blogger

Posted by oldx3


This tutorial explains how to integrate a Digg Button into your blogger template, which will be displayed in each of your blogger posts. The button displays the amount of times each post has been dugg and lets users digg directly from your blog.

Here are the Steps:
  1. Make sure to Backup your Template!

  2. Open your blogger template, click Expand Widget Templates, and search for the code below:

  3. Add this code below directly above the searched code above:


  4. Now Preview and Save your Template!

0 comments
Read More

Random Posts Widget for Blogger / Blogspot

Posted by oldx3

This widget can definitely bring some excitement to your blogger powered blog. Letting your readers surf your blog to the fullest extent by creating a link to a random post in your blog's sidebar. Besides providing fun for your blog, hopefully your visitors will stay on your site for longer periods of time.





Installation and Customization:

  • Click button below to complete Installation:



  • Once you have installed the widget, you can change the link text. The default value is "View Random Post". To change this, view the code and search for "View Random Post", and change it to any desired text.

0 comments
Read More

Recent Posts Widget for Blogger with Thumbnails, Summaries, Comments, etc

Posted by oldx3

Display beautifully crafted links to Recent Posts on your blog with this widget. You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.


Features and Customization:

  1. The Recent Post Titles
  2. Display Post Thumbnails
  3. Choose which blog posts to display (choose URL).
  4. Display Post Summaries
  5. Length of Summaries
  6. Display Post Date
  7. Display Number of Comments on each post
  8. Display Read More Link
  9. Display separator between posts
  10. Number of Posts do Display
  11. Determine height
Install the Recent Post Widget on Your Blog:
This widget is very simple to install. Just simply click the button below to choose which blog you would like to implement it on.

add to blogger

Many thanks to Blogger Plugins!

0 comments
Read More

Free Facebook Toolbar for blog and joomla

Posted by oldx3 Monday, January 18, 2010



Wibiya is a tool, primarily for publishers and bloggers that places a thin bar across the foot of the respected site, similar to in many respects to Facebook Connect bar. Aside from its name, Wibiya stands out because it provides a wonderful mix of functionality, clean UI and ease of use that I have to see elsewhere – interestingly.
Wibiya mini-entegrate your forum or -blog to facebook.
I like it, not more regular and have some issues but these problems only for now. I think this project is very nice..  I’m not spammer, and this is not adversite.  I want to share this.
Boost your blog with rich and interactive features.
  1. No coding needed
  2. Add it in two minutes
  3. Totally free
Create a Facebook Community
  1. Create a blog community using Facebook Connect
  2. Real profiles of real people
  3. Track your community growth as readers invite their friends
  4. Communicate with your community and learn what they like
Increase Page Views
  1. Gain traffic from Facebook through your members news feed
  2. Engage readers and raise pageviews with applications such as post navigator and blog search
  3. Track your traffic growth through simple analytics tools
Communicate With Your Readers
  1. Share your tweets with your readers in real time
  2. Send short alerts to your readers with each entry to your blog
  3. Direct channel to your Facebook community members
Power Tools
  1. Discover a growing range of applications to enrich your readers experience
  2. Full tracking and management system for each application and effectiveness to your blog
  3. Add and remove applications in just one click
http://www.wibiya.com/

0 comments
Read More

JavaScript Widgets Library: Meteora

Posted by oldx3 Sunday, January 17, 2010

Meteora is set of cross-browser widgets and controls for quickly creating rich and customizable web applications without programming excessive JavaScript that is painful to debug in every browser.




Meteora is based on the great mootools framework (version 1.11) and scripts that already work with mootools can be used with Meteora too!

To see some nice demos of this JavaScript widget library, check:
Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://meteora.astrata.com.mx/
Demo: http://meteora.astrata.com.mx/pages/demo
Download: http://meteora.astrata.com.mx/files

0 comments
Read More

High Quality Controls & Widgets for Prototype.js

Posted by oldx3

Control Suite is a set of 6 high quality widgets and controls built with the Prototype JavaScript framework.

Each script is well tested, highly extensible and unobstrusive.


Suite has these widgets and controls:

  • Tab
  • Modal
  • TextArea
  • Select Multiple
  • Rating
  • Progress Bar

Different approach to star rating:


 
Suite is very well documented. You can easily reach the details of the APIs and this makes the product much more usable.

Requirements: Prototype JavaScript Library
Compatibility: All Major Browsers
Website: http://livepipe.net/projects/control_suite/

0 comments
Read More

All Google Widgets In One Place: Google Web Elements

Posted by oldx3

Google Web Elements is a fresh website where you can find all Google widgets in one place & easily add any of them to your websites.

The website simply offers a similar customization interface for each widget and generates the JavaScript code for embedding them.


It currently presents 8 widgets:

  • Calendar (for sharing your Google Calendar with your readers)
  • Conversation (a comment replacement where users can have a conversation)
  • Custom Search (custom Google search engine)
  • Maps (easier Google Maps integration)
  • News (latest Google News articles)
  • Presentations (for sharing Google Docs presentations)
  • Spreadsheets (for sharing Google Docs spreadsheets)
  • Youtube News (Youtube news videos from a selected list of publishers)
Website: http://www.google.com/webelements/

0 comments
Read More

Accessible Widgets: jQuery-Accessible-RIA

Posted by oldx3

jQuery-Accessible-RIA is a set of accessible, usable & easy to implement widgets that are strictly WAI WCAG 2.0 and WAI ARIA compliant.

The widgets provided are:

  • lightbox
  • live form validation
  • tabs
  • sortable tables


jQuery-Accessible-RIA is built using the jQuery UI & works out-of-the-box. Also, they can be highly customized.

For older screen readers, it includes a workaround & for anyone willing to dive into the code, it is fully-commented.

Requirements: jQuery 1.3.2+ & jQuery UI 1.7.1+
Compatibility: All Major Browsers
Website: http://wiki.github.com/fnagel/jQuery-Accessible-RIA
Download: http://github.com/fnagel/jQuery-Accessible-RIA/downl...

0 comments
Read More

feedburner

Enter your email address:

Delivered by FeedBurner

Custom Search