Sponsors

Showing posts with label tag cloud. Show all posts
Showing posts with label tag cloud. Show all posts

Stylish JQuery Featured Post Widget for Blogger



Featured Post widget is important to add the most interesting content of your blog. By adding featured post widget, you can emphasize the most popular content and show it to your readers. You may have seen these kinds of widget in similar WordPress blogs.


Today, we'll learn how to add it into Blogpsot Blogs. Earlier, I created Platinum Blogger Template. From the most of the template users, I received the comments that Featured Post widget is not present there. So considering this, I am writing the separate tutorial which we will start now!

First of all view the Demo here.

Note: Platinum Blogger Template users don't have to follow the Step1, Step2, Step3, Step4 and Step5. So you can directly jump to Step 6.

Updated: All code has been updated. Please re follow the instructions those who have installed this widget.

Step 1. As general, Log on to your Blogger account and go to Design > Edit HTML.

Step 2. Find the following code in your Template:

]]>
Step 3. Just above  ]]> tag, add the following CSS codes:

#featured{ 
width:336px; 
padding-right:250px; 
position:relative; 
height:250px; 
background:#fff; 
border:5px solid #ccc; 
} 
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:336px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:336px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_s9U-ukRLKv91yxAAxdi7kaQVETuqSnzdzWtKxM2cGhog2VBuhoVa1BcXmUnY3sCZJH-CeosAG3msTh99s_85IDUaCT1JbV9YSZR9nkC5uQXlyzPPuh3lerGBUDpEQvAIkIMuhZLVuqs/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxcbjAt_N7L8e7f5aEkDhKHBSZj0Qj3SBmac3sgNnVqlLPjng07lMEPVbxSm2fEgTIbjWS1RAVeuVFpQLy1G_T2sEoQUkOt6ciyhubhvA7mNqJoR3gnGD2n6HbOlvqPXfmBgfxzjrkFM/s1600/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}

Step 4. Now, add the following JavaScript code above the  tag:


Step 5. Save the Template.

Step 6. Again, Head out to Design > Page Element > Add a Gadget > HTML JavaScript. Add the following code into the box:


These codes are little bit confusing. So, you have to edit these codes carefully. Here is the customizations:

Replace fragment-1, fragment-2, fragment-3 and fragment-4 with your post URL. There is two link in the code but you have to place same URL. For example: There is two fragment-1. So, replace these two fragment-1 with same post URL.

Red color code is for image URL. Do same as you have done for the Links above. There is two image URL. So replace Image URL with your own. For example, replace both Image URL of Link-1 with your own. Note: the both Image URL must be same.

The text with Pink color is the title of each post. So, replace all of the Pink color text with the title of your post.

The text with Green color is the summary of the post. Replace these text with short summary which must match with the titles.

Step 7. Now, Save the widget and finally you're done!

Make sure you have placed the featured post widget on the top of the "Blog Posts" as shown below:


I hope the customization is not so hard. If there is any confusing then you are free to ask question via Comment. Also, you can share you opinion and suggestion.

1:39 AM by admin · 0

,

Label Cloud Widget For Blogger / Blogspot




A tag cloud or label cloud for blogger is a visual depiction of all labels used on yourblog.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. This is a modded version of phydeaux’s Cloud. This is much better than the Blogger’s Default Label Cloud.
First of all Go to 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.image

After Adding the Label Widget Go to 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: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:"" !important}
]]>b:skin>
*************************************************************************************************************
Save your template and now you should get a working Label Cloud On your Blog.
You can Configure the Gadget from the Gadget Options
image

Additional Tweaks


These tweaks are optional. Proceed further only if you want to customize the cloud to a better level...

Changing Cloud Colours:

you can change those colours 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 convertor 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 =
 SOME TEXT IS MISSING IN THIS TAG CLOUD POST...............TO GET THE EXACT CODING...PLZ REFER THIS SITE............CLICK HERE

7:25 AM by admin · 0

MAKE TAG CLOUD FOR YOUR BLOG OR WEBSITE





A compilation of tools, sites and code snippets to create tag cloud:
Other links related to tag clouds:

6:37 AM by admin · 0

Subscribe to: Posts (Atom)
 
My World Logo Hi!!! You can put anything here, be sure not exceed the limit.