Block Quotes

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi Guys,
I am looking to get some block quotes on my front page just like the ones here: -

http://www.smashingmagazine.com/2008/...

I would appreciate some html guide?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 8 years ago

  • 1
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Not quite sure what you need, but if you're looking to do a blockquote, it just simply means using blockquote tags as...

<!--
<BLOCKQUOTE>
Your Text Here
</BLOCKQUOTE>
-->

You can also cite references of where the quote came from like the example you provided above indicated...

<!--
<blockquote cite="http://www.htmldog.com/reference/html...>

<p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div's.</p>
<p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>

</blockquote>
-->

The reference I don't think will be shown to your users but search engines will pick it up and it'll help with SEO and indexing.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I'm not an expert (yet) in html so there's always a possibility I could be wrong, I've used blockquotes many times before, but if someone else has input contradicting what I'm saying, feel free to go with them.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi there looking to get a block quote like the one below not sure if your code does this or not as I havent tried it yet but this is what im looking for: -

Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi there is anyone answering any questions tonight so far I have 2 unanswered questions tonight?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Craig,

We're here but Donald's reply looked to have you covered. If you're still looking for more information I found this to be a good blockquote resource.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
I have no idea why it says this question is answered when one person gives me his opinion but it didnt work as explained above. So this questio is not answered at all, the only person that should be able to mark this answered is the person who asked the question in the first instance!!

As explained above im looking for a code that would give me exactly what I placed above?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
I'm sorry to hear you weren't satisfied with our response. The moderation tools that allow us to mark questions as answered help us keep track of requests internally.

I do not possess a code snippet that will accomplish what you're looking for, and I suspect it may require a bit of CSS coding as well. I suggest you Google around for it a bit and in the meantime I'll direct both this thread and your other topic commenting on Duke's site to a colleague with more coding knowledge than me, perhaps she'll have something more to add.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Craig

I did a bit of research and came up with this: http://www.smileycat.com/miaow/archiv...

You will need to view the page source to grab the code. I hope this will help.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi thanks for your reply but I was trying to get it like I posted 11 hours ago its cool I will just leave it!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Sounds like that may be your best bet Craig...one last ditch thought though, where did you find the bit that you posted? If it was online, did you try viewing source on it? 3 of us have Googled around for you and not been able to find exactly what you're looking for, sorry we couldn't be of more help.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
there's the other option of using Word.

Word is very easy to use when it comes to block quotes and stuff, just adjust your margins on the ruler. So... create your quote in Word to look anyway you wish. Then save as web page, filtered and open in a browser and copy from there.

The other option is to find a block quote anywhere on the internet, maybe even where you got that example above and copy from that source, then delete the quote you copied and write the quote you want. A lot of times when you copy something from the internet, the same formatting applies in most circumstances. Once you have the blockquote you're happy with on your website, then you can just copy it from your website and post other places on your website.

Try these if you're still not getting the blockqoutes working. :)
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
html is generally transferred from one site to the next when copying and pasting.

When I copy a reference into my website, the html will often say...

<!--
<cite id 0="http://reference-0.com>Reference 0</cite>
-->

even though I didn't do this. It's the way the reference was inserted into the other person's website.

*NOTE: By the way, if referencing a source, using html such as the one above is HIGHLY recommended. It lets the search engines know you're citing sources, this is good bc you get points as the search engines are more comfortable indexing your site bc you're less likely to plagiarize.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Hey Craig...

Copy this into the html of your text widget...

<!--
<div class="Section1"> <p style="margin: 0in 0.35in 0.0001pt; text-align: justify; line-height: normal;"><b><span style="font-size: 16pt;">“</span></b><b><span style="font-size: 14pt; color: rgb(191, 191, 191);">This Will Be Your Quote, This Will Be Your Quote, This Will Be Your Quote, This Will Be Your Quote, This Will Be Your Quote, This Will Be Your Quote, This Will Be Your Quote, This Will Be Your Quote</span></b><b><span style="font-size: 16pt;">”</span></b></p> <p style="margin: 0in 0.35in 0.0001pt; text-align: right; line-height: normal;" align="right"><b><span style="font-size: 12pt;">—Who said it?</span></b></p> </div><p></p>
-->

Without the top and bottom arrows.

Hope this works for you.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
tell me if this code doesn't work, after creating the code, I tested the code in my html and it worked just fine.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
If the margins aren't to your liking, you can change them. That would be the "0.35 above, there's one for the left margin and one for the right margin. 0.35 is good for a blockquote. 0.5 would be equal to if you used the tab key to indent.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
If you want emphasis on the quotation marks (") I would recommend using an image and adjusting the text alignment to be centered with the images (large quotation marks).
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
You'll also notice, the person's name (whoever said the quote) is right aligned, this can be changed to left aligned if you'd prefer.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Donald,
Thanks for the feedback its looking a bit better but what about changing the font to Georgia like the rest of my text and If I want to add a picture for the commas how would I go about inserting that into the code?

Cheers

C

ps the website I found this on is http://www.davidville.com/
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Well... save the quotation marks into your file manager and click into the text widget and click the add image button and add them to your widget. Click on the image and change the text wrapping to...

Image - Text (for the one on the left) and
Text - image (for the one on the right)

and then you should be able to drag them to the right position.

I'm going to work with this, give me a minute.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
<!--
<div class="Section1"> <p style="margin: 0in 0.5in 0.0001pt; text-align: justify; line-height: normal;"><b><span style="font-size: 16pt; font-family: "Georgia","serif";"></span></b><img style="margin: 4px; padding: 0px; float: left; font-weight: bold;" src="http://personaltouchlandscaping.info/... style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">This Will Be Your Quote, This Will Be Your Q</span></b><b><span style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">uote, This Will Be Your Quote, This Will Be </span></b><b><span style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">Your Quote, This Wil</span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">l Be Your Quote, This Will Be Your Quote, This </span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">Will </span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">Be Your Quote, Th</span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">is Will </span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 14pt; font-family: "Georgia","serif"; color: rgb(191, 191, 191);">Be Your Quote</span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"><img style="margin: 4px; padding: 0px; float: right; font-weight: bold;" src="http://personaltouchlandscaping.info/... style="font-size: 16pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b><b><span style="font-size: 12pt; font-family: "Georgia","serif";"></span></b></p> <p style="margin: 0in 0.5in 0.0001pt; text-align: right; line-height: normal;" align="right"><b><span style="font-size: 12pt; font-family: "Georgia","serif";"><br></span></b></p><p style="margin: 0in 0.5in 0.0001pt; text-align: right; line-height: normal;" align="right"><b><span style="font-size: 12pt; font-family: "Georgia","serif";">—Who said it?</span></b></p> </div><p></p>
-->

Tell me if this works for you and if you like it.

To avoid using my resources (file manager) I'd recommend uploading some quotation marks to your file manager and use yours. I'd hate to accidentally delete 'em one day and they disappear on your site.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
To get this accurate, like I have it... open my images. I think they're located at...

http://personaltouchlandscaping.info/...

and

http://personaltouchlandscaping.info/...

Save the image to your computer and upload to file manager.

To place them in the EXACT spot, either replace the resources in html OR the easier option is to click on the image while in sitebuilder and click add image and add the quotation marks. It will replace the image with yours.