Nymphont

Showing posts with label blogger. Show all posts

Lummoxie Template with Comment Replies

Lummoxie Template Update with Reply Comments

Retrofitting the Lummoxie Template with Blogger's threaded comment system has been a few months in coming, but no one is counting, right? [Gulp] I don't want to dwell on this... To make haste as our more punctillious brethren might do, and by that I mean to get to the point, seems a bit more appropriate.

And the point is of course, that the Lummoxie template has been updated and retrofitted with Blogger's comment reply functionality.
Lummoxie Template Retrofitted with Blogger's Threaded Comments

Lummoxie Template Retrofitted with Blogger's Threaded Comments

A second notable improvement is the restyled PageList/LinkList widget which now accommodates new line wrapping or longer link links.
Lummoxie Template PageList Line Wrapping

Lummoxie Template PageList Line Wrapping

The Updated Lummoxie Blogger Template

→ View Demo | ↓ Download Template

Template Basic Features

2 column liquid/fluid layout, all sections "widgetized" or "gadget-ready"
2 column footer, also gadget-ready/widgetized
Supports Blogger Dashboard editing tools, easily change fonts and colors in practically all areas of the template via the "Template Designer," within the "Advanced" subcategory.
Functional search included. Search box image included, it is stored in my photobucket.com account which allows generous direct linking bandwidth. However, users who have access to an image host are advised to upload it to their own server, as the bandwidth could potentially be exceeded in the future. (Image also included in the zip download for convenience.)
Title setup optimized and corrected for better SEO.
Wireframe setup for easy gadget/widget managing
Fancy fonts a la Google Font API
Customized and easy to use "read more" feature using Blogger's "Page Break" feature
"Calendar Style" post date. Set up instructions in this post.
Embedded comment form below post, with threaded comments enabled to boot :D

Equipped the horizontal navigation bar with new-line wrapping, allowing for multiple lines of links / more links / longer link lists. Usage instructions in this post.

Basic Set Up & Instructions

This template is fully functionional immediatly, ensuring optimal performance necessitates one specific setting in the dashboard (for the calendar style post date) which is explained in the premier Lummoxie Template post here, along with additional and advanced editing details.

* The link back to http://www.nymFont.com must not be removed * Do not impose charges or a fee for these templates * Do not add links and redistribute * Modifications allowed so long as the link back is not removed * Do not link directly to my files, but to my template posts to share

I hope existing users and new users alike are pleased with the updates to the Lummoxie Template. Though I can't personally assist various aspects of implementation & customization of the template, I welcome your feedback on the template.

Making yet another stride in my goal to modernize of all of my free Blogger template designs and retrofit them with threaded comments, the new "Nymphont Style," template is up-to-date and ready for your blogging pleasure. I do hope the updates are pleasing to those stylish bloggers' already sporting a version of the template, and to those who might like to as well.

Modernization of the code and a little streamlining to the aesthetic make for the more inconspicuous changes in the new template, while major renovations to speak of include the threaded comments, which have been enabled, new-line wrapping capabilities in the horizontal LinkList and PageList widgets, creating the design and giving style to Blogger's Jump-break ("read-more," or post-summary links), and also the ability to add Blogger's share buttons to the post-footer. Yay!

« Enabled Blogger's Threaded Comments

A sample comment and threaded-reply from the demonstration blog is shown in the above screen-capture.

Since their debut, share buttons have been the most requested template feature I have received by far, and Blogger's threaded comments have recently become the second most requested feature I have received. I am stoked to get both of these tasks accomplished for those that asked, whom, I would like to add, have been beyond patient! The new "Nymphont Style," template, and all of my planned template-updating would be impossible if it were not for your feedback, suggestions, and kindness. Thanks so much Blogger enthusiasts!

« Restructured & Redesigned Post-Footer

The pink text given the thin pink border shown in the image above depicts the default style for a Jump-Break (read more/post summary link) in the new template. Also visible in the above image, Blogger's post sharing buttons in the new "Nymphont Style" template's post-footer.

To accommodate the newly implemented Blogger share buttons and Jump-Break (Blogger's read more/post-summary link), the post-footer underwent a little restructuring. Akin to all other areas of the template, individual color options for the border and text color are provided for the Jump-Break link in the Template Designer's "Advanced," editor.

« Horizontal Nav/PageList New-Line Wrapping

The horizontal navigation bar utilizes either a LinkList or a PageList widget to function, and accommodates more items (the links) than the previous version. Items that are unable to fit within the first line will handsomely wrap onto and become a corresponding new-line, as the links do in the image example shown above. The new-line wrapping permits the LinkList widget or PageList widget used to accommodate lists containing only a few items or links, to those containing many.

Another improvement in the new "Nymphont Style," template has been made to the sidebar's "blog sharing icons," which are "hard-coded," into the template. Now even easier to modify, remove, or hide, these icons are located in the template code between starting caption:

and ending caption:

in the template code. Just below this in the template, you will also find the code for the search form.

« Blog Sharing Icons & Search Feature

Working immediately requiring no effort on the user to implement, the sidebar boasts social network icons for which to share your blog, along with a blog search utility.

To remove the sidebar's blog sharing icons, beginning with the "starting" caption, and ending after the "ending," caption, select the text, delete it (cut it), and save the template. In their absence, the search-box will then handsomely align to the center of the column. Additionally, the sidebar icons can be "hidden" by adding:
.share {display:none;}
to the template CSS, just above the following line:
]]></b:skin>

In the same manner the sidebar sharing icons can be removed or hidden, the search-box can also be removed by deleting it from the template code directly, or adding this line:
#searchbox {display:none;}
to the template CSS, above the following line:
]]></b:skin>

« Bold & Italic Settings for Fonts and Text

Font and text style definitions added to the "Advanced," editing options within the Template Designer allow for a much more pleasing visual to text.

Another seemingly less-conspicuous yet substantial improvement in new "Nymphont Style," template, has been the addition of Bold and Italic font definitions to the "Advanced," editor of the Template Designer. Seemingly would be the emphatic word in there, as these new definitions allow the user to set a specific font-face and style to italicized text and bold text. This means, any time the user selects texts within a post to appear bold or italic, it will be styled as per their definitions set within Template Designer's "Advanced," editor.

Simply styling bold and italicized text the right fashion can have an incredible impact on the blog's typography, substantially improving it's presense and readability.

The New "Nymphont Style"
Blogger Template

→ View Demo | ↓ Download Template

Template Basic Features

2 column fixed width layout, the second column allowing optional narrow-third column, all sections "widgetized" or "gadget-ready"
3 column footer, also "widgetized"
Horizontal navigation utilizing either the PageList widget or a LinkList widget
Template Designer, "Advanced," editing enabled encompassing the font and color selections for most if not all areas of the layout.
Working immediatly, the images are included and I will continue to maintian them, however, users are advised to download the images, upload them to their own server, and then replace the image links with their own as the bandwidth could potentially be exceeded in the future. Images can be downloaded from the Nymphont Style TinyPic folder. I have written a post and created a page with specific instructions on how to replace the images in your template on the demonstration blog.
Title setup optimized and corrected for better SEO.
Embedded comment form below post, with threaded comments enabled to boot :D
Functioning social network icons in the top right sidebar. Your blog's data is reflected once uploaded, so they do not require editing. These allow visitors to your blog to easily submit, share, and save your blog.
Functioning search form for searching the blog contents.
Wire-frame setup for easy wigetizing and adding, removing and changing gadgets
Equipped the horizontal navigation bar with new-line wrapping, allowing for multiple lines of links / more links / longer link lists
Blogger Jump Break / expandable post / post summary links styled and customized.

* The link back to http://www.nymFont.com must not be removed

* Do not impose charges or a fee for these templates

* Do not add links and redistribute

* Modifications allowed so long as the link back is not removed

* Do not link directly to my files, but to my template posts to share

Special thanks to my kind visitor MamaMona who commented with her interest in Nymphont Style hence helping it come to fruition. Thanks again to all of the sweet Blogger enthusiasts using my templates and sharing their thoughts on them. Stay tuned my friends, another updated template will be coming this way very soon. ♥

In light of the new threaded comment system and other recent improvements made to the Blogger platform, I have been busy familiarizing myself with the new template code. My existing free Blogger template creations will soon be updated and retrofitted with the new comment system. Several new templates will also make their debut here shortly.

I've been steady Blogger proggin' over the past few weeks. In addition to the template updates, I've been quite busy working on GlitterBurned and the GlitterBurned Blog. GlitterBurned is a showcase gallery of Blogger powered blogs. Gallery news, updates, and articles are shared on the GlitterBurned blog.

Fluid / responsive width content slider on the GlitterBurned Blog

Fluid / responsive width content slider on the GlitterBurned Blog.

One thing I am happy with, is the featured content slider I shimmied-up for the GlitterBurned Blog. I created a fluid width slider with on-hover text and clickable-links using CSS and MooTools. I believe it to be relatively cross-browser with the small exception that in IE there is no on-hover text, but linked contents are still clickable.

Pixel-Vixen - Design Portfolio of Lauren Thompson

Pixel-Vixen - designs by Lauren Thompson. Hosted on Blogger :)

Also... I have unveiled and added the actual blog aspect to my Blogger hosted portfolio site, Pixel-Vixen. I wanted to keep it simple and uncluttered, so I implemented a "toggle" content menu, that is, it expands and contracts with a click at the user's discretion. As always, Pixel-Vixen is a work-in-progress and changes in the blog layout and design are guaranteed to come. Still, this is the premise; simple without clutter. That is the idea, and that will remain.

The newly unveiled Pixel-Vixen blog.

In other news? I have been stuck on fonts as well. To be perfectly honest, I am not satisfied with the fonts I have created thus far. There are so many things that I did not anticipate or had not considered. But I have no regrets, I accomplished a goal and have been able to learn from the experience.

There might be a few new fonts to come in the near future as well. Till then, stay tuned and give your life a listen,
~Lauren

Step 1

Choose and download the background image associated with the Twitter status display you would like to implement, click the link reading, "Download Image," and upload it to your image host. (Picasa, photobucket, and so on).

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #77595c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}

a#twitter-link {
float : right;
padding : 0 25px 0 0;
float : right!important;
text-align : right!important;
padding : 0 25px;
}

#twitter_div a, #twitter_div a:visited {
color : #ea3c6f;
}

#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #77595c !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #624e5b;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #ff5f9d;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #624e5b !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #2f2f2f;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00c5dd;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #2f2f2f !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #000000;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00aeef;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #000000 !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #3c3c3c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00b196;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #3c3c3c !important ;
}

Step 2

Copy the CSS in the grey box below the style of your choice, and replace YOUR_IMAGE_URL with (drumroll) the URL to the your uploaded background image, and paste this CSS into your template above,
]]></b:skin>

Step 3

Next, replace the pink text, TWITTER_ID with your twitter ID in the Twitter timeline script shown below, and paste this at the bottom of your template, above the tag,
</body>

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>

<script src='http://twitter.com/statuses/user_timeline/TWITTER_ID.json?callback=twitterCallback2& amp;count=1' type='text/javascript'/>

*Note there is a space between the & symbol and the text that follows. You will need to delete this space upon pasting into your template or else it will not work.

Step 4

Before saving your changes, preview your template. If your template looks the same/normal, then click Save.

Step 5

Now for the fun part, the Twitter display itself! Where you would like your Twitter status display to appear, select "Add a New Gadget," and choose an "HTML/JavaScript" gadget from Layout. In the "Content" field of the new gadget, copy and paste the code shown below. Be sure to replace the pink text TWITTER_ID with of course, your actual Twitter ID. Again, with no @ symbol, just your user-name. Save your new gadget, and view your blog. Your twitter status update or updates should now appear on your blog where you have added the new gadget.

<div id='twitter_div'><ul id='twitter_update_list'></ul><a href='http://twitter.com/TWITTER_ID' id='twitter-link' title='follow me!'>follow me!</a></div>

If you use this tutorial or one of these Twitter status display badges on your blog, please comment below and let me know how it has worked for you. Feel free to ask if you need any assistance with this as well.

Before We Begin...

First things first, for this to work, you will need the following:

A Blogger Blog
A font file that permits Web Embedding. This is very important. Many fonts require the purchase of an additional license if they do permit web embedding. All of my fonts do for instance, for the most part at least. So be sure that you are allowed
A place to host javaScript files. Some that I have heard of are DropBox, Google Code, Fileden, and Ripway

Grab the Cufon Script

If all of those things have been aquired, head on over to the Cufón website, and click the "Download" button (circled in pink in the screen capture image shown below) to get a copy of the main Cufón javaScript you will need. Saving the file depends on your browser, but just be sure it saves with a ".js" extension.
Download Cufon

Completing the Generator Form

Directing our attention back to the Cufón website, begin the form by clicking on the browse button under the Heading that reads, "Select the font you'd like to use," to do just that. (Screen capture shown below)

Make sure the checkbox regarding permission to web embed is checked. (As shown in screen capture below)

Proceeding down the form are the options pertaining to the glyphs or characters to be included in your custom font. "Basic Latin" is checked, and you might also want to check the box just below that as well, "Latin-1 Supplement" which should cover some commonly used accent characters. (Depicted in screen capture below)
Select glyphs

A section labled, "Security" comes after this on the form. If using a custom domain, it is a good idea to enter your domain in the text box provided, this limits your custom fonts usage to that domain. Otherwise leave this textarea blank/empty. (Shown in screen capture below)
Domain Security

Options for the Performance and Size of the custom font will be next. I recommend using the default input for font scaling, which I believe is 360 units per em. I would however, change the "units allowed for path optimization" to "0" and uncheck the box beside it that reads "Allow path optimization," however this is optional and may not suit your needs.(Shown in screen capture below)
Performance and Size

I would also make sure the box next to "Include kerning tables (improves readability but slightly increases file size)" is also checked. It may increase file size, but... if the file is not too large already and the font is well kerned, it might be worth it. It's really a matter of preference or necessity really.
Accept terms

Complete the form by checking the box beside the text reading, "I acknowledge and accept these terms," (above screen capture) and click the "Let's Do This!" button (Shown in screen capture below) to generate your own custom font javaScript file.
Generate Font File

Depending on your browser, you will somehow be prompted to save this file. (Shown in screen capture below)
Save file

Adding the Code

Now that you have downloaded the Cufón javaScript as well as the script for your custom font, you will need to upload them to your javaScript host and get their public URL's.Insert those URL's where indicated in the code shown below:

<script type="text/javascript" src="YOUR_MAIN_CUFON_SCRIPT"></script>

<script type="text/javascript"  src="YOUR_CUSTOM_FONT_SCRIPT"></script>

<script type="text/javascript">  

    Cufon.replace('h3');

</script>

Highlighted in green in the code above is the h3 tag. It designates that all occurances of text within an h3 tag are to be replaced with Cufón. I chose to use h3 since in the majority of Blogger templates, h3 tags are used for post-titles. In that case, all post titles will display in the custom font. If you would like or feel capable, add or change this section as desired.

Back up your Blogger template by downloading the current template, then paste the code (edited to replace my dummy text with your actual javaScript URL's) into your Blogger HTML's <head> section, just after ]]></b:skin> (Get to your Blogger HTML via the Blogger Dashboard under the "Design" tab and subcategory "Edit HTML")

Save your new template & then take a look at your blog to see your new custom fonts in action! For more advanced styling options, visit GitHub Styling.

Nymphont

Lummoxie Template with Comment Replies

The Updated Lummoxie Blogger Template

Template Basic Features

Basic Set Up & Instructions

The New "Nymphont Style," Blogger Template

The New "Nymphont Style"
Blogger Template

Template Basic Features

Proggin' on Blogger!

5 Favorite Blogger Resources

Twitter Status Display Widget Blogger Tutorial

Step 1

Step 2

Step 3

Step 4

Step 5

New Blogger Powered Design Showcase!

Similar Posts

Custom Blogger Fonts With Cufon

Before We Begin...

Grab the Cufon Script

Completing the Generator Form

Adding the Code

Similar Posts

Pages

Labels

Friends & Favorites

nymphont

connect with me

linkie love

Nymphont

Lummoxie Template with Comment Replies

The Updated Lummoxie Blogger Template

Template Basic Features

Basic Set Up & Instructions

The New "Nymphont Style," Blogger Template

The New "Nymphont Style" Blogger Template

Template Basic Features

Proggin' on Blogger!

5 Favorite Blogger Resources

Twitter Status Display Widget Blogger Tutorial

Step 1

Step 2

Step 3

Step 4

Step 5

New Blogger Powered Design Showcase!

Similar Posts

Custom Blogger Fonts With Cufon

Before We Begin...

Grab the Cufon Script

Completing the Generator Form

Adding the Code

Similar Posts

Pages

Labels

Friends & Favorites

nymphont

connect with me

linkie love

The New "Nymphont Style"
Blogger Template