JoinQ2A ~ Join with us and find your answer: Blogspot

JoinQ2A » Blogspot

8/24/2010

Create a "Recent Post" for each Label at Homepage

After the procedure reference sites have found a way of Fandung similar. Same procedure described above, will also create the categories page, each column corresponds to a label. Latest articles of the label that will display a thumbnail image attached, other posts will be displayed by list, which included articles describing effects. But with Fandung, sorted and code rewritten to show more beautiful, more professional.
1. Login blog
2. In the layout
3. In the HMTL code editing
4. Paste the CSS code below into the front lines of code ]]></ b: skin>

.mota{ position: relative; z-index: 0; text-decoration:none; }

.mota:hover{ background-color: transparent; z-index: 50; }

.mota span{ position: absolute; background-color: #ffffff; padding: 5px; left: -1000px; border: 1px solid #000; visibility: hidden; color: black; text-decoration: none; }

.mota span img{ border-width: 0; padding: 2px; }

.mota:hover span{ padding:5px; visibility: visible; top: 20px; left:50px; width:250px; background:#ccc; text-align: justify; }

5. Save the template.
6. Create widget HTML / Javascript, and paste the code below:

Wish you success.

Also, to avoid cases like last time encounter with the Samba host, i send to you 2 link file .js used in this procedure, in case 110mb.com fail, you can upload it to a free host with which to use.

File 1 - http://fandung.110mb.com/label-tin247/a-label.js download (here)
File 2 - http://fandung.110mb.com/label-tin247/b-label.js download (here)

»» read more

Trick is to create hidden buttons add-on widgets

By inserting a small java script code in the widget code in Edit HTML, you can create a link button located in the header of each widget that allows hide / show widget that when clicked on it. Snippet from the blog reference Fandung With this procedure, you can hide content as illustration:

The steps procedure: 1. In the layout (layout) 2. In editing HTML code (edit the HTML code) 3. Choose "expanded utility model" (expand widgets template) 4. Find the code of the widget you want to insert this gadget, as in illustration, application procedure for utility Label, so we will find its code, and below is its code:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <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> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

And add code to as below:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'> <b:includable id='main'> <script type='text/javascript'> //<![CDATA[ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">'); //]]> </script>[▼/▲] <script type='text/javascript'> //<![CDATA[ document.write('</a>'); //]]> </script> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script type='text/javascript'> //<![CDATA[ document.write('<div id="' + rnd + '" style="display:none;">'); //]]> </script> <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> </li> </b:loop> </ul> <script type='text/javascript'> //<![CDATA[ document.write('</div>'); //]]> </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Note: The code can change the way you like blue, specifically + [▼ / ▲]: change the character ▼ / ▲ according to your preference. + Float: left; margin-right: 5px;: this is the code locate the display of the button [▼ / ▲] on the title of the widget. If you want it shown on the right is the correct float: right; margin-right: 5px; 6. Save the template. If you want to add default text widget displays the edit line:

//<![CDATA[ document.write('<div id="' + rnd + '" style="display:none;">'); //]]>

to:

//<![CDATA[ document.write('<div id="' + rnd + '" style="display:block;">'); //]]>

»» read more

8/23/2010

Catalog page - Page Navigation

Tricks to create a list of pages add Page Navigation for Blogger Mohamed Rias is one of the tricks on the list page - Page Navigation most common. Because this is a useful procedure, so you can find them anywhere, most famous Blogger Blogspot are using this procedure, such as:

* Bloggerbuster
* Bloggertricks
* Deluxetemplates
* Blogger Pluggin

But if you notice the comments in the tutorial, then you'll make a lot of questions because comments are not showing the list page. The main cause of this error is due to:

1. Domain name in the beginning of the script is only used for the blogger (. Blogspot.com) and has been explained in detail in the article: Amanda give explanation about this.

2. There will be some no name id Blogger template 'blog-pager.

- VnBlognet [dot] com: To solve these problems, abu-Farhan had changed the script and detailed instructions complete implementation of (the correction of errors) as follows:

1/ Access to Blogger:

- Access to Blogger Dashboard (Dashboard)>> Layout (Layout)>> Edit HTML (Edit HTML).

2/ Insert code in form CSS Template:

- Find (Ctrl-F) the tag ]]>

- Change ]]> with the following code:

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

]]></b:skin>

3/ Insert code shown:

The next step you find the code (no need to click the Expand Widget Templates) or similar commands in the templates as below:

<b:section class=’main’ id=’main’ showaddelement=’yes’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

Add the following code:

on the bottom tag </ b: section>.

Tip: If you can not find code to search, you can search (ctrl + f) for key: id = 'main' to find.

Or if really hard you can paste them before the </ body>

In the code above, you can edit the following lines:

pageCount var = 10;

var displayPageNum = 6;

Of which:

PageCount showing the number of posts displayed on a page. Change the intention to set the number of articles on a number of your pages.

displayPageNum: show page number will display for you to choose in the list list.

4/ Edit page displays with errors Label:

However, if you see the label selection is displayed incorrectly, with abu-Farhan also change the display in the Label.

To make you do the following:

Step 1: Add Label Gadget (Layout -> Page Elements -> Add Gadget -> Select Labels)

Step 2: Blogger>> Layout>> Edit HTML. Do not forget to backup template (Download full Template) Step 3: Search the code below:

and replace them with the code:

and click "save template" that you've done excellent list of tips page.
You can click to view Demo;

»» read more

How To Add Flash Animated Label Tags Cloud Widget For Blogger ( blogspot )

Hi all, blogger blogging platform by default give you the ability to add Labels for your post, so you can add and display your blog Labels at your sidebar.
but because we all want our blogs look great for our visitors, we need to give this labels good style,
So now, we’ll learn how to add amazing tag/labels cloud widget to our sidebar instate of the normal one that presented by blogger.
We’ll do it in few steps.
1. Log into your blogger account.
2. Go to dashboard >> layout >> Edit HTML
3. Find the next code

<b:section class='sidebar' id='sidebar' preferred='yes'>

You can find it by clicking ctrl+f in your browser.
And past the next code just after the above code.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Click save template and now check your Blog. And enjoy.
Hints.
- You can change it’s location at your side bar by going to dashboard >> layout
and move it up or down.
- you can change the widget width and height by editing this part in the code.

width="250" height="200"

»» read more

Pages

8/24/2010

Create a "Recent Post" for each Label at Homepage

Trick is to create hidden buttons add-on widgets

8/23/2010

Catalog page - Page Navigation

How To Add Flash Animated Label Tags Cloud Widget For Blogger ( blogspot )