How to add a professionally designed featured contents box

 Click here to see the demo

You will need these file(s) for this tutorial:

jon-smoothgallery.zip

  You will need to upload these files to your server.

To add a professionally designed featured content box:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Add the following javascript and style sheet link below right after the opening head tag of your blog:

 

<link charset='utf-8' href='../jon1012-smoothgallery-205a5d5/css/layout.css' media='screen' rel='stylesheet' type='text/css'/> <link charset='utf-8' href='../jon1012-smoothgallery-205a5d5/css/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/> <span id="preserve68c91f5ba4a64c469a52dbde125b1f50" class="wlWriterPreserve"><script src='../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2.1-core-yc.js' type='text/javascript'/> <script src='../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2-more.js' type='text/javascript'/> <script src='../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.js' type='text/javascript'/>

 

 

 

 

3. Next, you will need to add the following section code below to where you want the featured content box to appear. You can do this by adding a new HTML/JavaScript widget or paste it within your HTML section of your layout.

 

<span id="preservef5af1b53d44447a484990ddb3d07ef84" class="wlWriterPreserve"><script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true }); } window.addEvent('domready',startGallery); </script></span> <div class="content"> <div id="myGallery"> <div class="imageElement"> <h3>The CCNA Syllabus - Your steps to becoming a Certified Cisco Network Associate</h3> <p>Cisco Certified Network Associate (CCNA®) validates the ability to install, configure, operate, and troubleshoot...</p> <a href="http://www.cisco.com/web/learning/le3/le2/le0/le9/learning_certification_type_home.html" title="open image" class="open"></a> <img src="http://ccnacentral.info/ccentral-featured/ccnasyllabus.png" class="full" /> <img src="http://ccnacentral.info/ccentral-featured/ccnasyllabusmini.png" class="thumbnail" /> </div> <div class="imageElement"> <h3>Cisco Webex</h3> <p>Join WebEx online meetings in seconds when you're away from the office—no account required...</p> <a href="http://www.webex.com/apple/" title="open image" class="open"></a> <img src="http://ccnacentral.info/ccentral-featured/ciscowebex.png" class="full" /> <img src="http://ccnacentral.info/ccentral-featured/ciscowebexmini.png" class="thumbnail" /> </div> <div class="imageElement"> <h3>The Cisco Learning Network</h3> <p>Join others in discussions, find useful documents for downloads, check out the Cisco Learning Network blog, interact with others in the community...</p> <a href="https://learningnetwork.cisco.com/index.jspa" title="open image" class="open"></a> <img src="http://ccnacentral.info/ccentral-featured/learningnetwork.png" class="full" /> <img src="http://ccnacentral.info/ccentral-featured/learningnetworkmini.png" class="thumbnail" /> </div> <div class="imageElement"> <h3>Linksys Wireless-G Broadband Router - WRT54G2</h3> <p>Your Price $44.99 - The Linksys Wireless-G Broadband Router is really three devices in one box. First, there's the Wireless Access Point, which lets you connect...</p> <a href="http://clickserve.cc-dt.com/link/click?lid=41000000030887739" title="open image" class="open"></a> <img src="http://ccnacentral.info/ccentral-featured/linksysrouter-abstronicgoog.png" class="full" /> <img src="http://ccnacentral.info/ccentral-featured/linksysrouter-abstronicgoogmini.png" class="thumbnail" /> </div> <div class="imageElement"> <h3>Cisco TelePresence 3010</h3> <p>Meet Face To Face Without Moving Place To Place. To deliver an immersive collaborative environment with an in person experience, the Cisco TelePresence System 3010...</p> <a href="http://www.cisco.com/en/US/products/ps10753/index.html" title="open image" class="open"></a> <img src="http://ccnacentral.info/ccentral-featured/telepresence.png" class="full" /> <img src="http://ccnacentral.info/ccentral-featured/telepresencemini.png" class="thumbnail" /> </div> </div> </div>

 

 

 

 

 

  The above featured content box is just an example from CCNA Central. You will have to edit the text and images.

4. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

This widget is brought to you by JonDesign.

Recent Posts with thumbnails widget for Blogger

     1. TechGeeze – latest gadgets and technology news

---

     2. Blogger Plugins – Blogger Gadgets

How to manually add a customizable Twitter stream widget to Blogger

From this tutorial, you will be able to add your Twitter updates to your website.

PREVIEW see it in action

You will need these file(s) for this tutorial:

	twitterexample.png
	twitterstream.zip

To add a customizable Twitter stream widget:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Click “Add a Gadget” and select “HTML/JavaScript” and copy/paste the following section code inside the textbox.

<div id="twitter_div"><ul id="twitter_update_list"></ul></div> <script type="text/javascript" src="<a href="view-source:http://twitter.com/javascripts/blogger.js">http://twitter.com/javascripts/blogger.js</a>"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<strong><font color="#ff0000">YOU-TWITTER-ID</font></strong>.json?callback=twitterCallback2&count=10"></script></div>

3. In the above code, you will need to add you Twitter ID and select save.

Add style with CSS:

4. Next, you will need to add the CSS section code the footer. To do this, copy and paste the following section code below right after: ]]></b:skin>

<style> #twitter_div { position: absolute; left: 136px; top: 154px; width: 345px; height: 370px; overflow: auto; } ul#twitter_update_list { list-style: decimal; font-size: 14px; } ul#twitter_update_list li { margin-bottom: 10px; padding: 10px; color: #444444;; font-weight:bold; } a { color: #06F; } body { background-image: url(.../twitterexample.png); background-repeat: no-repeat; } </style>

5. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

How to add related posts with thumbnails using LinkWithin

LinkWithin is a free service offered by a small team based in New York. With LinkWithin, users can display related posts linking to the related stories from your blog archive under each individual postings. Related posts is a good thing to have on your blog because it keeps your readers engaged with your content, thus, increasing page views on your blog. The LinkWithin related posts widget generates a minimally styled design to blend in with your site and best of all, its free, ad-free, and only takes a minute to get the widget up and running on your blog with no signup required.

Steps to follow:

1. Visit the LinkWithin website here.

2. Enter your email, blog link, and under platform option, select “Blogger”, and for the width, choose how many items you want to display for your related posts (3, 4, or 5 stories). Select the “My blog has a light text on a dark background” if that pertains to your template and then hit the “Get Widget!” button. Here’s a screen shot of mine:


3. After you clicked the “Get Widget!” button, LinkWithin takes you to the installation page. Select the “Install Widget” button to open Blogger up in a new window.


4. Next, select a blog, if you have more than one, then click “Add Widget”


5. Once your LinkWithin widget has been added to your blog, it will appear on the sidebar widget, but move it under your “Blog Posts”. Here’s a screenshot of mine:



6. Next, select save and your done. Your LinkWithin widget should now appear on your blog.

** Tutorial completed.

How to display a widget on a specified page in Blogger

From this tutorial, you will be able to control whether or not to have a widget displayed on a specific page of your Blogger blog. When designing your Blogger’s template, you may prefer to have certain elements to be displayed on certain pages of your blog. This can come handy for any blog and can be done with the use of the if conditional tags.


Before you begin, make sure you back up your current template in case it doesn’t turn out as expected.

In order for Blogger to detect a widget on your template, you must first create one and place it where you would want it to appear. Here’s a screen shot of mine:
Steps to follow:

1. Login to your Bloggers dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Locate the widget code you’ve just added. Here’s a screen shot of mine:

To display only on home page
Once you’ve located your widget section code, add the following section code in red to its location:

<b:widget id='HTML8' locked='false' title='Tips Categories:' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To display only on all post pages but not the home page
Once you’ve located your widget section code, add the following section code in red to its location:

<b:widget id='HTML8' locked='false' title='Tips Categories:' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To display only on archive page
Once you’ve located your widget section code, add the following section code in red to its location:

<b:widget id='HTML8' locked='false' title='Tips Categories:' type='HTML'>
<b:includable id='main'> <b:if cond='data:blog.pageType == "archive"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To display only on a specified link from your blog
Once you’ve located your widget section code, add the following section code in red to its location:

<b:widget id='HTML8' locked='false' title='Tips Categories:' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://www.blogspotvision.com/search/label/tips&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

note: replace the link in blue with the link you want it to show up on.

Utility Widgets for Blogger

Easy Comments – Simple comment system that allows anyone to comment on any page of your blog. Get your readers feedback quickly and easily with “like this comment?” options and includes comment threading and more.

 

---

Recent Comments – Recent comments allows you to display the most recent commented posts on your blog. This widget can be modified by CSS to fit the style of your blogs layout and is highly recommended to have on a blog because of it’s ability to keep your viewers interaction with one another.

---

Popular Posts – This widget allows you to display a list of the ten most commented posts on your blog. Another recommended widget to have on a blog to keep your readers updated with the contents that have the most quality in your blog and can also be modified to fit blog style.

Social Widgets Services

MyBlogLog – a Yahoo! service that allows you to discover and connect with who’s checking out your blog, share online activity, photos, blog posts, videos, tweets, and more on a single page, updated automatically.

 

---

Add This – Allow easy access for your readers to share your content, and that generates more traffic back to your site! Add This has over 50 social networks and bookmark destinations and can analyze reports on how people are sharing your content.

 

---

friendfeed – Share all friendfeed activities with your viewers. Widget html can be modified to fit your style of blog.

 

 

---

Google friend connect – Display Google friends on your website. Allows users to join a site, see the other members, play games, rate and review your site, promote events, recommend pages they like, leave footprints, and more.

 

---

Delicious Linkrolls – Share your Delicious bookmarks on your blog. Linkrolls are a way for you to have your latest Delicious bookmarks displayed as part of your website. Widget html can be modified to fit your style of blog.

 

---

Twitter – Allows you to display tweets from your twitter page directly on your blog. Twitter services allows you to display anywhere from your last tweet to your last twenty tweets and also features a display of your twitter link for people to follow you with one click.

 

---

SocialFeed – Want to display all activities from all of your social media website on your blog? This widget allows users to display latest updates, photos, videos, and tweets! You can also customize the SocialFeed to display content from your favorite users and modify the html to fit your style of blog.

How To Install Twitter Widget To Your Blogger

For those of you who doesn't have Twitter yet, you should check it out. Many blogs today have a twitter page as well to allow their readers to have another source of the daily updates on your blog. From this tutorial, you will be able to add your very own twitter widget to your blog. There are two ways in which you can install this widget, either automatically(for beginners) or manually(for experienced). You will also need to have a twitter page already, you can sign up here: http://www.twitter.com/

Automatically

Steps you will need to follow:

1. Sign into your twitter page

2. Click Settings

3. Click "You can also add twitter to your site here" link

4. Click Blogger > Continue

5. Click Add to Blogger button

6. Click Add Widget

Manually

1. To add this widget manually, we go back to step 6 in automatic and instead of clicking add widget, simply click edit content

2. Copy the section code and paste it in HTML/JavaScript option

How To Add Share This Widget To Your Posts

From this tutorial, you will be able to add social icons under your posts for readers to have easy access while trying to share information with others. Having a share this widget for your blog posts is almost crucial if you want to drive traffic to your website. This widget is definitely recommended to have on your blog because the more people that shares, the more traffic you will attain. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.

You will need these files for this tutorial:
1. Set of social icons no.2 by ~Tydlinka

Note: You will need to upload these files to your host and replace the links with yours.

Steps to follow:
1. Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Next, you will need to locate this section code: <div class='post-footer'>
4. Add ALL of the following section code right after it.

<p class='feedburnerFlareBlock'>Share this: <img src='http://www.yourlinkhere.com/16x16/rss.png'/><a href='flare2url'>RSS</a> <span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/twitter.png'/><a href='flare3url'>Twitter</a> <span>&#8226;</span> <img src='http://http://www.yourlinkhere.com/16x16/digg.png'/><a href='flare4url'>Digg This!</a> <span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/facebook.png'/><a href='flare5url'>Share on Facebook</a> <span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/delicious.png'/><a href='flare5url'>Add to del.icio.us</a></p>

Note: Replace the links in orange with the links you uploaded your images to, and replace the links in blue with your social accounts.

5. Preview, and if all looks fine, Save Template.

Extra information on post:

Note: If you want to add more social icons, simply add this section code right after any of the section code: </a>. Replace the link in orange with your desired social icon image link and replace the blue link with your desired social account.

<span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/delicious.png'/><a href='flare5url'>Add to del.icio.us</a>

Note: The section code in green represents the dot separating the social icons, if you do not want to have that, simply remove the entire section code in green.