SPONSORED LINKS
Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

Twitter Status Display Widget Blogger Tutorial

Twitter Status Display with Blogger How-ToI receive many inquires on how I created my 'latest tweet' display on this blog. To pose an answer to those inquiries I have not only written a step by step tutorial on creating a custom Twitter status display widget to display your latest tweet in Blogger, but I have created several free Twitter status display images to go along with the step by step tutorial

In all there are seven Twitter status display image styles to choose from, and that's a good place to start: choosing a Twitter status display. Examples of each Twitter status display image and it's associated styling are shown below.


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).




» 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 ;
}



» 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 ;
}



» 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 ;
}


» 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 ;
}


» 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 ;
}



» 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 ;
}



» 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.

read more
View Comments Labels: , , ,

Custom Blogger Fonts With Cufon

Custom Blogger Fonts With CufónI have been asked many times how I use my own font LT Oksana, as a custom font throughout this blog as I do. The answer is simple, with Cufón of course! And I am going to share with fellow user's of the Blogger platform just how to use Cufón in your Blogger blog!

Before We Begin...

First things first, for this to work, you will need the following:
  1. A Blogger Blog
  2. 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
  3. 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)
Select the font you

Make sure the checkbox regarding permission to web embed is checked. (As shown in screen capture below)
Permission
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.


read more
View Comments Labels: , , , , ,

Handy Blogger Resources and Utilities

Handy Blogger Resources and Utilities A quick reference of links, solutions, and remedies to difficulties commonly encountered when modifying Blogger templates, and other recommended blogging utilities. All tips, tricks, and hacks that have been vital to me one time or another when customizing a Blogger template. Hopefully they will put your Blogger-template-design-woes to rest as well!

Add Fullsize or "Expandable Images"
  • Get the Script from Css Reflex - This is a script I was really happy to find. Naeem Noor from Css Reflex shares his script to add Fullsize to Blogger blogs. Fullsize allows images to enlarge and collapse simply with a click and is supported by all modern browsers

"Calendar" & Other Custom Date Formats
  • Blog Godown's Custom Date How To Instructions & Hack - You may have seen a blog that displays the post's date in a square box resembling a miniature calendar, or in other unusual styles (such as the winged coffin that I use display my own post dates in this present template.) To achieve this look you will need to add some CSS, a bit of JavaScript, and make some editing to your templates code.Some coding knowledge would be a plus, but it's still relatively simple. Guatam of Blog Godown was kind enough to find this hack for me and posted the how to instructions.

Make Sidebar & Main Column Equal Height 
  • The Technology Hub's Equal Height jQuery Script - Some template designs leave the left sidebar looking of-kilter with a sidebar that does not reach the height of the page as does the main column. Height discrepancies between the main column and sidebar can easily be eliminated with the addition of a simple and easy to implement jQuery and cut-short JavaScript code. Works perfectly in all modern browsers.

Image Transparency Effect
  • Cheth Studios Image Transparency Effect Tutorial - I use image transparency CSS styling in the post footer of my blog, making the icons subdued and opaque unless being "moused-upon," upon which their true colors are shown. Cheth from Cheth Studios provides the simple CSS and instructions to add image transparency to blogger, which you can customize to suit your tastes.
     

Three Column Footer
  • Blogger Buster's three column footer tutorial. - A three column footer allows a lot of content and information to be displayed without appearing "cluttered," not to mention it's a nice way to "wrap up," a blog design. Achieving this does require adding & removing parts of code in your blog's HTML, but little or no coding knowledge is required with the handy cut and paste instructions from Amanda at Blogger Buster.

Post Summary/Read More Hack
  • Get the Read More Hack & Script from BloggerStop.Net - The read more hack I use automatically creates a post summary with image thumbnail and adds the read more link to new and old posts with a small JavaScript file. (requires file host that supports .js files) Choose the length of summary and size of thumbnail image.

Blogging Utilities
  • Kontactr- Add a free contact form to your blog for your visitors to easily send a message to your email box without having to display your email address or requiring them to leave your blog.
  • DISQUS- A free alternative commenting system with some more dynamic features than the default blogger commenting system 
  •  favicon.cc - Really cool free online favicon maker and optional favicon host, allows image uploads and pixel by pixel editing. 
  • Ripway.com - Free file hosting, allows hosting of JavaScript files and direct linking 
  • Fileden.com - Free file hosting lot of bandwidth (no JavaScript files however) and direct linking 
  • Simple Code - Generates markup from normal HTML that will display "as is" i.e. when displaying codes
  • BrowserShots.org - See screen-shots of your site looks in various browsers, operating systems and and other settings
  • PRChecker.info - Generates the Google PageRank of your blog and an optional image to display

Handy Copy & Paste Codes

  • How to Add a "Back to Top" Link: To add a back to top link to yur blog, copy and paste this code in your template's HTML or into an HTML/JavaScript widget where you would like it to appear. You may change the bold text to whatever you want the link to say.

<a href="#" rel="nofollow" title="back to top!">back to top!</a>


  • How to Add Social Bookmarking Links to Posts: If you'd like social bookmarking links in each post for your users to share & save it with, the codes for a few popular services are below which you can copy and pate into your blogs HTML. To add these codes in your posts footer, go to the Layout tab from your Dashboard, and click Edit HTML. Then check "expand widget templates." Search for the following bit of code in your HTML and then paste the codes to the Social Bookmarking sites you'd like directly after it:

<div class='post-footer-line post-footer-line-1'> 

The bold text is how the link will read and may be replaced with alternate text or an image/icon of your choice if you'd prefer.
Delicious <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'>Add to Delicious</a>
Digg <a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'>Digg This Post</a>

Facebook <a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'>Share on Facebook</a>

Email <a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Email This Post'>Email This Post</a>

StumbleUpon <a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'>Stumble This Post</a>

Twitter (Twitthis.com) <a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This Post'>Tweet This Post</a>
Technorati <a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Technorati Favorites'>Add to Technorati Favorites</a>

Reddit <a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Reddit'>Add to Reddit</a>

Google Bookmark <a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Google Bookmarks'>Add to Google Bookmarks</a>

Yahoo!Bookmarks <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title=' Add to Yahoo! Bookmarks'>Add to Yahoo! Bookmarks</a>

Design Float<a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Float This Post'>Float This Post</a> 

I hope these resources do prove useful to you and your blogging needs.

read more
View Comments Labels: , , ,
Subscribe to: Posts (Atom)
ADVERTISEMENT
nymphont
fg
I'm Lauren, self-proclaimed "dweeb," and "the coolest person I know." Single mom, making fonts & designing stuff in my free time.

What began as doodling Fraktur during class, as an adult became focused creation of typographic art for print and for screen, including this digital type experiment I call "Nymphont."

I do freelance web and graphic design along with type design. The icons below link to social networks and bookmarking sites that I am involved with.

From the fabulous Las Vegas, Lauren "Nymphont"

connect with me
Blogger | del.icio.us | deviantART | digg | flickr | StumbleUpon | twitter
MyFreeCopyright.com Registered and ProtectedDesign, HTML, CSS and graphics by Lauren Thompson, 'Nymphont' © 2009 - 2016. Don't copy or steal my shit. Archive & Table of Contents | Contact | Privacy Policy. Powered by Blogger! Seen on Bloggers.com
^