Ok, I know many users already know how to format their diaries and add images etc., but for every one else this is a guide to making your diary look like the pros. First thing to remember is that nothing here is really all that complicated, don't think you can't figure out how to add a picture or link, trust me, you can do it. Second there are auto formatting tricks referenced in the FAQ that are currently not working on DK4 but (I believe) will be in the future. I will update the diary at that time but have excluded them for now. Last, there are other ways to format your diaries, these tips are just those I thought were easy and essential.
Still need help? Have some suggestions? Please leave feel free to leave a comment.
Thanks and enjoy!
Bolding Text
- One way to bold text is to select it:
- Then click the 'Bold' button below:
- Daily Kos encloses the text with the <strong> tags:
- And now the text is bold when you publish:
Another way is to manually enclose the text with the tags <b> and </b> or <strong> and </strong>:
LaFeminista is one of the <b>boldest</b> writers ever, but nyceve is one of the <strong>strongest</strong>.
Would look like:
LaFeminista is one of the boldest writers ever, but nyceve is one of the strongest.
Italicizing Text
- One way to italicize text is to select it:
- Then click the "Italic" button below:
- Daily Kos has encloses the text with the <em> tags:
- And now the text is italicized when you publish:
Another way is to manually enclose the text with the tags <i> and </i> or <em> and </em>:
I would just like to <em>emphasize</em> bobswern’s <i>exceptional</i> writing.
Would look like:
I would just like to emphasize bobswern’s exceptional writing.
Underlining Text
To underline text, manually enclose it with the tags <u> and </u>:
I like <u>both</u> Meteor Blades <u>and</u> Armando.
Would look like:
I like both Meteor Blades and Armando.
Striking Out Text
To strikeout text, manually enclose it with the tags <s> and </s>:
What? I’ve <s>never</s> made a grammatical or spelling eror in mine life!
Would look like:
What? I’ve never made a grammatical or spelling eror in mine life!
Subscript Text
To make subscript text, manually enclose it with the tags <sub> and </sub>:
This <sub>text</sub> is subpar to TomP's.
Would look like:
This text is subpar to TomP's.
Superscript Text
To superscript text, manually enclose it with the tags <sup> and </sup>:
This text isn’t as super as <sup>Frankenoid</sup>
Would look like:
This text isn’t as super as Frankenoid
Smaller Text
To make text smaller, manually enclose it with the tags <small> and </small>:
<small>Mark Sumner inspires me.</small>
Would look like:
Mark Sumner inspires me.
Headers
There are two distinct header styles that can be used by manually enclosing the text with the tags <h1> and </h1> or <h2> and <h2>:
<h1>Bob Johnson’s Dairies</h1>
Would look like:
Bob Johnson’s Dairies
And:
<h2>Bob Johnson's Diaries</h2>
Would look like:
Bob Johnson's Diaries
Blockquotes
- One way to place text in blockquotes is to select it:
- Then click the 'Blockquote' button below:
- Daily Kos encloses the text with the <blockquote> tags:
- And now the text is placed in blockquotes when you publish:
Another way is to manually enclose the text with the tags <blockquote> and </blockquote>:
Glenn Greenwald writes:
<blockquote>
On Friday, State Department spokesman P.J. Crowley denounced the conditions of Bradley Manning's detention as "ridiculous, counterproductive and stupid," forcing President Obama to address those comments in a Press Conference and defend the treatment of Manning. Today, CNN reports, Crowley has "abruptly resigned" under "pressure from White House officials because of controversial comments he made last week about the Bradley Manning case."
</blockquote>
Would look like:
Glenn Greenwald writes:
On Friday, State Department spokesmanP.J. Crowley denounced the conditions of Bradley Manning's detention as "ridiculous, counterproductive and stupid," forcing President Obama to address those comments in a Press Conference and defend the treatment of Manning. Today, CNN reports, Crowley has "abruptly resigned" under "pressure from White House officials because of controversial comments he made last week about the Bradley Manning case."
Lists
There are two types of list, ordered (i.e. numbered) and unordered.
Ordered lists must begin and end with the <ol> and </ol> tags, with each item you want listed enclosed with the tags <li> and </li>:
Today’s Plan
<ol>
<li>Wake up</li>
<li>Turn on computer</li>
<li>Write world changing Daily Kos diary</li>
<li>Refresh diary every 10 seconds to see who’s recommended it</li>
<li>Passive-aggressively express disgust with those who haven’t</li>
<li>Take blood pressure medication</li>
<li>Repeat until ER visit</li>
</ol>
Would look like:
Today’s Plan
- Wake up
- Turn on computer
- Write world changing Daily Kos diary
- Refresh diary every 10 seconds to see who’s recommended it
- Passive-aggressively express disgust with those who haven’t
- Take blood pressure medication
- Repeat until ER visit
Unordered lists must being and end with the
<ul> and
</ul> tags, with each item you want listed enclosed with the tags
<li> and
</li>:
3 of My Favorite Brooklynbadboy Diaries
<ul>
<li>Manning chain of command a "comedy of errors"</li>
<li>Austerity for whom?</li>
<li>In praise of my postman and curses on Bloomberg</li>
</ul>
Would look like:
3 of My Favorite Brooklynbadboy Diaries
Linking
There are two ways to link to an another website, one is to highlight the text you wish to turn into a hyperlink and click the ‘Link’ button below:
- One way to link to a website is to select the text you want to turn into a link:
- Then click the 'Link' button below:
- Now paste or type the web address:
- Daily Kos encloses the text with the <a> tags:
- And now you have a link when the diary publishes:
Another way is to manually enclose the text with the <a> and </a> tags with the ‘href’ attribute set to the web address:
<a href="http://www.dailykos.com/... >Remember when openthread gained sentience?</a>
Would look like:
Remember when openthread gained sentience?
Adding Images
First you must upload the image to an approved hosting service:
http://www.photobucket.com
http://www.imageshack.us
http://flickr.com
http://smugmug.com
http://webshots.com
http://picturetrail.com
http://mac.com
http://allyoucanupload.com
Each image will have a direct link address, copy it.
Now add the <img> tag with the ‘src’ attribute set to the direct link address of the image:
<img src="http://i1036.photobucket.com/albums/a441/egray2010/baby-pandas-7.jpg">
Would look like:
If an image is too large, you can constrain the width by adding the ‘width’ attribute set to the number of pixels wide you want the image:
<img src="http://i1036.photobucket.com/albums/a441/egray2010/baby-pandas-7.jpg" width="300">
Would look like:
To align text either to the right or left of the image add the ‘align’ attribute set to the direction of the text you want:
<img src="http://i1036.photobucket.com/albums/a441/egray2010/giant-panda.jpg" width="300" align="left">How do I know Republicans hate this panda? Because it's not a billionaire.
Would look like:
How do I know Republicans hate this panda? Because it's not a billionaire.
Or:
<img src="http://i1036.photobucket.com/albums/a441/egray2010/giant-panda.jpg" width="300" align="right">Sarah Palin would enjoy shooting this panda from a plane.
Would look like:
Sarah Palin would enjoy shooting this panda from a plane.
Embedding Videos
There many outlets to get videos from, I’m going to concentrate on three in hopes it helps you figure out how to embed from other sources as the principles are generally the same. Now the embed from some sources isn't going to work, you'll have to just link to the video instead.
Youtube is extremely easy, just find your video, copy the embed code and paste it into your diary:
Copied code:
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/hK3hq3aPl8k" frameborder="0" allowfullscreen></iframe>
Would look like:
Comedy Central is also easy, hover the mouse over the video, click the ‘Embed’ link and paste it into your diary:
Copied code:
<div style="background-color:#000000;width:520px;"><div style="padding:4px;"><embed src="http://media.mtvnservices.com/mgid:cms:video:colbertnation.com:377119" width="512" height="288" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" base="." flashVars=""></embed></div></div>
Would look like:
For MSNBC, like Comedy Central, hover the mouse over the video, click ‘clip & share’ and then the ‘Embed’ button, now paste it into your diary:
Copied code:
<object width="420" height="245" id="msnbc4e1461" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/... name="movie" value="http://www.msnbc.msn.com/... /><param name="FlashVars" value="launch=41259523&width=420&height=245" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent" /><embed name="msnbc4e1461" src="http://www.msnbc.msn.com/id/32545640" width="420" height="245" FlashVars="launch=41259523&width=420&height=245" allowscriptaccess="always" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/... style="font-size:11px; font-family:Arial, Helvetica, sans-serif; color: #999; margin-top: 5px; background: transparent; text-align: center; width: 420px;">Visit msnbc.com for <a style="text-decoration:none !important; border-bottom: 1px dotted #999 !important; font-weight:normal !important; height: 13px; color:#5799DB !important;" href="http://www.msnbc.msn.com">breaking news</a>, <a href="http://www.msnbc.msn.com/... style="text-decoration:none !important; border-bottom: 1px dotted #999 !important; font-weight:normal !important; height: 13px; color:#5799DB !important;">world news</a>, and <a href="http://www.msnbc.msn.com/... style="text-decoration:none !important; border-bottom: 1px dotted #999 !important; font-weight:normal !important; height: 13px; color:#5799DB !important;">news about the economy</a></p>
Would look like:
Visit msnbc.com for breaking news, world news, and news about the economy
Now some copied code will contain images that aren’t from an approved image hosts, but you can delete everything but the <embed> tags and the video should embed just fine then.
Embedding Documents
SuperBowlIXX has a great diary on using Scribd (kind of like the Youtube of documents) where you can upload pdfs, spreadsheets, and other documents or find ones that are already posted and embed them in your diary. Read the diary for more help, but in summary:
Find the document you are looking for on Scribd. Click on the Share button when you've found it. Then, copy and paste the following code into your diary or comment:
<embed src="http://d1.scribdassets.com/ScribdViewer.swf?document_id=INSERT FLASHVARS NUMBER WITH ACCESS KEY HERE" quality="high" pluginspage="http://www.macromedia.com/... play="true" loop="true" scale="showall" wmode="opaque" devicefont="false" name="INSERT OBJECT NUMBER HERE" menu="true" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" align="middle" height="500" width="600"></embed>
In the original HTML code from Scribd, find the FlashVars number and its access key (which is the string of numbers and letters after "document_id", at the bottom of the HTML); and the Object number (usually a 15-digit number found in the middle of the HTML after "doc_"). Copy and paste these strings into their appropriate places in the HTML code above.
Tables
Tables are great way to organize infomration or arrange images. There's a great example of using tables in jotter's High Impact Diaries series, and it's easy to think of a table like spreadsheet with rows and columns. First every table must begin with a <table> tag and end with </table>. Second, there are table rows, which begin with <tr> and end with </tr>, and between rows are table cells, which begin with <td> and end with </td>. Third, tables and their cells can have several optional attributes such as borders, padding, text alignment, specific widths, and background colors. For an example I'm going to reproduce the top five high impact diaries from March 13th, 2011 except I've changed the text alignments of the author column so you can see the difference (left and middle are defaults, I also constricted the width slightly):
<table cellspacing="0" cellpadding="2" border="1" width="600">
<tr>
<td>nrec</td>
<td>ncom</td>
<td>viewers</td>
<td>impact</td>
<td>Diary</td>
<td>Author</td>
<td>EDT</td>
</tr>
<tr>
<td><b>525</b></td>
<td>257</td>
<td>1414</td>
<td>5.57</td>
<td><a href="http://dailykos.com/... >Another dead freedom fighter in Libya. This one was family.</a></td>
<td align="right"><a href="http://www.dailykos.com/... >Meteor Blades</a></td>
<td>15:25</td>
</tr>
<tr>
<td><b>472</b></td>
<td>168</td>
<td>2424</td>
<td>5.00</td>
<td><a href="http://dailykos.com/... >Wisconsin farmer on fire! Awesome video. UPDATEx2</a></td>
<td valign="top"><a href="http://www.dailykos.com/... >strobusguy</a></td>
<td>11:00</td>
</tr>
<tr>
<td><b>364</b></td>
<td>262</td>
<td>2096</td>
<td>3.97</td>
<td><a href="http://dailykos.com/... >Anonymous To Announce "Operation 'Empire State Rebellion.'" Demands Bernanke's Ouster.</a></td>
<td valign="bottom"><a href="http://www.dailykos.com/... >bobswern</a></td>
<td>06:57</td>
</tr>
<tr>
<td><b>288</b></td>
<td>94</td>
<td>2230</td>
<td>3.08</td>
<td><a href="http://dailykos.com/... >Does anyone else notice a pattern?</a></td>
<td align="center"><a href="http://www.dailykos.com/... >fiver</a></td>
<td>12:48</td>
</tr>
<tr>
<td><b>252</b></td>
<td>82</td>
<td>1304</td>
<td>2.66</td>
<td><a href="http://dailykos.com/... >An Insider Report from Ayn Rand's Fantasyland</a></td>
<td><a href="http://www.dailykos.com/... >Black Brant</a></td>
<td>16:56</td>
</tr>
</table>
Would look like:
Ok, that's everything you need to diary like a pro...except adding captions which is tedious, for help on that check out The Elements of Style: Tips, Tricks and Regrouping News by ePluribus Media