4

AddThis Button for BlogEngine.NET

by Eyre Austero 20. April 2010 22:48

   To my fellow BlogEngine.NET users out there who woul like to add the AddThis social bookmarking button to their blogs, I've found a simple way to do it  which I will now be sharing with you.

Step 1: Open the AddThis website.

Step 2: Select 'Website' as your service.

Step 3: Choose the button style that you would like to appear in your blog.

Step 4: Decide whether you'd want analytics  for your button or not.

Step 5: Click 'Get Your Button' and copy the code.

Step 6: Open your favorite web development application (which is the Microsoft Visual Web Developer 2008 Express for my case).

Step 7: Open the PostView.ascx file of  the theme you are currently using.

Post View in VWD 2008

Step 8: Paste the code previously copied to the line just before <div class="footer">.

sample code

Step 9. Save the changes and upload the file to the remote server. (Well, this is if your website is hosted on a remote server.)

     Now, open your blog and see for yourself the AddThis button just above the footer.

     With a social bookmarking button, we not only make it easier for our visitors to bookmark and share our posts to popular channels such as Facebook, Digg, Twitter, StumbleUpon etc.  We, at the same time, also come into possession a good tool to market and promote our  blogs through our visitor's help.

     If you like this post, please bookmark and share this to others who might also find it useful using the AddThis button below.

Tags:

BlogEngine.NET | Resources for Bloggers

Share |
0

BlogEngine.NET 1.6 Now Available

by Eyre Austero 14. February 2010 01:54

       The latest version of BlogEngine.NET (i.e. version 1.6), an open source blog platform developed with ASP.NET 2.0, is now available for download at Codeplex. Its release was announced last February 1, 2010 at its main site.  Below are the new features of this release copied verbatim from the BE.NET website:

  • Centralized Comment Management
  • Automated Comment Spam Filtering with ability to plug-in custom Filtering modules
  • Multiple Widget Zones (details)
  • Referrers data and Blogroll items now stored in Database when using the DB blog provider.
  • Unsubscribe Link in Comment Notification Emails
  • Referrer Data can be Stored for more than 7 days.
  • Blogroll items can now be Ordered.
  • Newsletter Widget more Intelligent - Emails sent when a post is going from an Unpublished to Published state.
  • Twitter Widget - New options and improvements
  • Page Slugs now saved in Database.
  • New Logging system to Track events and errors.
  • Unhandled Exception Handling
  • Fixes to Comment Notification Emails not being sent out correctly in some cases.
  • Outgoing Email improvements
  • Many other improvements and fixes

     As for me, I've already upgraded from version 1.5.0.7 to the latest and everything is working fine so far. For those who are planning to upgrade, here's a good guide created by David Wynne:  http://www.david-wynne.com/blog/post/Upgrading-BlogEngineNET-from-15-to-16.aspx.

     Kudos to the BlogEngine.NET development team for your continuous effort in improving BE.NET!

Tags:

BlogEngine.NET | Resources for Bloggers

Share |
1

Basic HTML for Bloggers

by Eyre Austero 10. January 2010 18:04

     For the bloggers out there who have no or little background in HTML (Hypertext Markup Language) but  would like to have a temporary break from using their blogging software's WYSIWYG editors in writing posts to instead give the 'raw HTML' option a try, I've prepared a collection of some useful HTML tags and attributes to help one get started. Hopefully, this will stir the interest of some, enough to make them join me in further exploring the world of web development. 

HTML Overview 

     As you might have already known by now,  HTML stands for Hypertext Markup Language-the language for coding web pages. These HTML instructions (markup) are the ones that direct web browsers (such as Firefox) how  the contents of our web pages are to be displayed on the screen. To illustrate, let us consider the sample code shown below:

Code View Browser View

< p style="color:Blue;">Welcome to my site.</p>

Welcome to my site.

     Looking at the Code View vs. the Browser View, one can easily see what set of instructions the code directed the browser to display.  The <p>...</p> element tells the browser that the text enclosed within the tag should be displayed as a paragraph. It also uses the 'style' attribute to, in addition, tell the browser that the font should be in blue.

     From the above example, we can also say then that elements and attributes are the basic components of an HTML code. Elements describe every piece of text in our pages.  They are made up of tags (<tag>...</tag>) and the content within those tags. Attributes, on the other hand, allow variety in how an element describes content or works.

     There is still a third component called entities.  These are special characters that you  can display on your web page, an example of which  is the less than (<) sign .  For this to be displayed in the above example, the &lt; entity was used.

      Now armed with a basic understanding of HTML, let us now explore it a bit further through working on the  sample codes listed below the next time we write our posts.

Working with Paragraphs and Texts 

Element Name Attributes Sample Code Browser View
 <p>  paragraph

style (specifies an inline style to an element)

syntax: style="property: value; property: value;"

some examples (properties and values):

font-family: Verdana,sans-serif (etc.);
color: Green (or other colors); 
text-align: right (or left, center, justify);
font-size: x-large (or medium, small, etc.)

 

 

<p style="font-family: Fantasy; font-size: x-large; color: Green;text-align:center;">Welcome to my site.</p>

 

 

 

Welcome to my site.

 <br /> line break    

<p>This is the first sentence of this paragraph.<br />This is the next sentence of this paragraph.</p>

This is the first sentence of this paragraph.
This is the next sentence of this paragraph.

 <b>  bold   <b>bold</b> bold
 <i>  italic   <i>italic</i> italic
 <u>  underline   < u>underline</u> underline

Working with Tables

Element Name Attributes Sample Code Browser View
 <table>  table align (deprecated): determines the alignment of the table relative to the page.
possible values: center, left, right (e.g. align="center")

border:allows you to specify the size of the border for the table, specified as an absolute value (e.g. border="1")

cellspacing:determines the amound of space to put between cells (e.g. cellspacing="1").

cellpadding: determines the amount of space to put between the edge of a cell and its contents (e.g. cellpadding="1")

width: specifies the width of the table (e.g. width="50%" or width="300")

style: specifies an inline style to an element (e.g. style="background: silver; text-align: center;")
<table align="center" border="1">
<tr style="background-color: Silver; text-align: center; color: red;">
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Column 1 Column 2
   
 <tr>  table row
style: e.g. style="background: silver; text-align: center;"  refer to above code
 refer to above
 <td>  table data
align (deprecated)

width : specifies the maximum with of a cell

colspan: allows you to create a cell that is more than one column wide by specifying the number of columns it runs across (e.g. colspan="2")

rowspan: allows you to create a cell that is more than one row high by specifying the number of rows it runs across (e.g. rowspan="2")

style: e.g. style="background: silver; text-align: center;"
 refer to above code
 refer to above

Working with Links

Element Name Attributes Sample Code Browser View
 <a>  anchor href: defines the link "address"

target: defines where the linked document will be opened (e.g target="a_blank" directs the browser to open the document in a new window)

name: defines a named anchor inside a HTML document
Example:
<a name="top">HTML Overview</a>
<a href="#top">Back to HTML Overview</a>

Link Snytax:
<a href="url">Link text</a>
<a href="http://www.
w3schools.com"  target="a_blank"
>w3schools</a>
w3schools

Working with Images

Element Name Attributes Sample Code Browser View
 <img>  image src (source): specifies the location for the image that you want to dispaly on your page

alt (alt text) : provides a description of an image; useful when a browser is unable to load the images of your page or if a user is using a text-only browser

style: specifies an inline style to an element
Sample properties and values:

style="float:left (or none or right);"--the float property specifies whether a box (element) should float or not

style="width: 100px; height:100px;"--the width/height property specifies the size of the image

style="margin-right: 10px;"--the margin property sets the distance between the img box and adjacent elements

style="border: blue dashed 3px;"--the border property allows you to assign a border to an image

Syntax:

<img src="url" />
<p><img src=
"http://www.eyreaustero.com
/pics/eryeaustero.com.jpg"
alt="My Photo" style="width: 73px; height: 79px; float: left;" /></p> 

My PhotoThis is my photo.

Working with Lists

Element Name Attributes Sample Code Browser View
 <ol>  ordered list style: specifies and inline style to an element (e.g. style="list-style-type: upper-roman (or lower-roman, decimal, lower-alpha, upper-alpha, none, etc.,);")
<ol style="list-style-type:
upper-roman;
text-align: center;"
>

<li>good</li>
<li>better</li>
<li>best</li>
</ol>
  1. good
  2. better
  3. best
 <ul>  unordered list style--specifies an inline style to an element (e.g. style="list-style-type: circle (or square, disc, none, etc.);") <ul style="list-style-type: 
circle; text-align: center;">

<li>bad</li>
<li>worse</li>
<li>worst</li>
</ul>
  • good
  • better
  • best
 <li>  list item    refer to above codes  refer to above

Tags: ,

Resources for Bloggers | Web Development

Share |

Powered by BlogEngine.NET 1.6.0.0
Original Design by Laptop Geek, Adapted by onesoft