Working with the code behind my blog posts

  • 1
  • Question
  • Updated 7 years ago
  • Answered
If you go to my web site and press the Thoughts tab, this is the code behind the Mark Harrison entry:



<div style="text-align: left;">
<img style="width: 80px; height: 80px;" src="http://sd.mcran.com/assets/pictures/justaddwater.jpg"><br></div>
<br>Mark Harrison is a pianist from the United States who is not afraid to chance it with slick arrangements and a solid band to boot.<br>

<br><strong>Just Add Water </strong>and you are in for a fascinating excursion into the meaning of what is meant by ensemble playing.
What stands out on this track is the way sax player&nbsp; Rossi delivers a gutsy yet smooth solo while never forgetting his sense of rhythmic balance.
Billman's simple yet effective solo adds more flavor to the mix. Harrison is happy to oblige with some fine comping carrying the piece to a satisfying ending.<br>

<br>Gentle cymbals and a subtle guitar intro carry us through a steady and relatively mainstream number. <strong>Pacific Time</strong> showcases the fine talents of guitarist
Mark Chosak and Steve Billman. I always find it amazing how one instrument can change the dynamics of a piece and how the melody developes.
One only has to listen to classic Miles Davis to understand the magic that can happen when the music is just allowd to "happen".<br>

<br>It's one thing to listen to Harrison in a group setting but listening to the delicate intro to <strong>Conundrum </strong>we are able to hear a softer
more inviting side to his playing. Rossi is first up with a tasty solo that captures the mood perfectly.<br>

<br>Mark Harrison's recordings have never disappointed. <strong>Just Add Water</strong> is a welcome addition to a growing discography from
one of America's most talented and lyrical pianists.<br>

<br>For more info www.harrisonmusic.com



Is there a way to tweak the code so that my post looks cleaner? For example, maybe having the text wrap to the right of the picture? Also, I was wondering if it is possible to add to the code so that when people view my post they will see:

Artist (in bold)
Album (in bold)
Year (in bold)

The actual review

This way if I can do this, I can just use the same code over and over for every new jazz review and just change the actual review, album, year etc...

This would really make my workflow more efficient!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • super confident this can be done!!

Posted 7 years ago

  • 1
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Hi,

The <strong tags you see in the code is the bold. If you want to show the artist, album, and year in bold, simply add the (either bold or strong) tags before and after each respective word you would like to change. Have you tried to align the text in the code?
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
PS. And remember to add the closing tags ;)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks!

If you go back to the Mark Harrison Blog post on my site, you will see that I figured out how to have text along side an image. Only problem now is I want to have some space between the text and the image. Here is the code I am using. What do I need to modify?



<div style="text-align: left;">
<img style="width: 100px; height: 100px;" src="http://sd.mcran.com/assets/pictures/justaddwater.jpg" hspace="10" vspace="25" align="left">

<br>Mark Harrison is a pianist from the United States who is not afraid to chance it with slick arrangements and a solid band to boot.<br>

<br><strong>Just Add Water </strong>and you are in for a fascinating excursion into the meaning of what is meant by ensemble playing.
What stands out on this track is the way sax player Rossi delivers a gutsy yet smooth solo while never forgetting his sense of rhythmic balance.
Billman's simple yet effective solo adds more flavor to the mix. Harrison is happy to oblige with some fine comping carrying the piece to a satisfying ending.<br>

<br>Gentle cymbals and a subtle guitar intro carry us through a steady and relatively mainstream number. <strong>Pacific Time</strong> showcases the fine talents of guitarist
Mark Chosak and Steve Billman. I always find it amazing how one instrument can change the dynamics of a piece and how the melody developes.
One only has to listen to classic Miles Davis to understand the magic that can happen when the music is just allowd to "happen".<br>

<br>It's one thing to listen to Harrison in a group setting but listening to the delicate intro to <strong>Conundrum </strong>we are able to hear a softer
more inviting side to his playing. Rossi is first up with a tasty solo that captures the mood perfectly.<br>

<br>Mark Harrison's recordings have never disappointed. <strong>Just Add Water</strong> is a welcome addition to a growing discography from
one of America's most talented and lyrical pianists.<br>

<br><a href="http://www.harrisonmusic.com" target="_blank">For more info</a></br>

Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Randy, give this a try: <!--&nbsp--> (please remove the <!-- and -->. You can add this code multiple times to produce a space between the image and text.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
You mean a non breaking space? I tried that but unless I am doing something wrong that can get pretty tedious for every post I do I would have to add this code instead of the space coming from the image if you know what I mean. Funny thing is that when I go to edit the code it looks fine. I have a screen shot of what I mean. Can I post the screen shot here?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
This is an example of how it looks fine while editing the image and text distance. It looks fine.

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
And this is how it looks when I view it through my web site. Notice how there is no white space between the image and the text like there was in the image in my previous post? What is causing this?

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Maybe I should use a two column table instead? Any other ideas? I want to keep it as simple as possible.
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Hi,

One thing you can try, not sure if it will work BUT it did work for me in a similar problem. Instead of adding the <!-- --> as Brianna suggested, add the < blockquote tag before and < /blockquote tag after. If this doesn't work, let me know and i am sure we will get it sorted asap ;) Remember to close the tags
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
PS. and remove the spaces in the tags above (my example)
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
PSS. Also, please note that although the given code suggestion is not primarily used for the desired action here, it is something that could work as i have done so (used it) myself. Please post back here and let us know. We WILL have this sorted in no time :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Rynaldo!

I will see if I can figure that out.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I just looked at the blockquote tag on the w3schools web site and I like what this tag does!! I really hope this works! Crossing my fingers :).

I think that all I have to do is wrap my jazz review in this code and it should work.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks!

My wife had an idea that think would work. She suggested putting a white border just on the right side of the image. This way all I have to do is set the border thickness to whatever I want and this would take care of the space between the image and the text. Make sense?

I think I would need to use CSS code to do this. Any idea how the code would look like? I'm still working my way through understanding CSS.

Thanks!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
This is what I did with the Blockquote code:




<img style="width: 80px; height: 80px;" src="http://sd.mcran.com/assets/pictures/justaddwater.jpg">

<blockquote>Mark Harrison is a pianist from the United States who is not afraid to chance it with slick arrangements and a solid band to boot.<br>

<br><strong>Just Add Water </strong>and you are in for a fascinating excursion into the meaning of what is meant by ensemble playing.
What stands out on this track is the way sax player Rossi delivers a gutsy yet smooth solo while never forgetting his sense of rhythmic balance.
Billman's simple yet effective solo adds more flavor to the mix. Harrison is happy to oblige with some fine comping carrying the piece to a satisfying ending.<br>

<br>Gentle cymbals and a subtle guitar intro carry us through a steady and relatively mainstream number. <strong>Pacific Time</strong> showcases the fine talents of guitarist
Mark Chosak and Steve Billman. I always find it amazing how one instrument can change the dynamics of a piece and how the melody developes.
One only has to listen to classic Miles Davis to understand the magic that can happen when the music is just allowd to "happen".<br>

<br>It's one thing to listen to Harrison in a group setting but listening to the delicate intro to <strong>Conundrum </strong>we are able to hear a softer
more inviting side to his playing. Rossi is first up with a tasty solo that captures the mood perfectly.<br>

<br>Mark Harrison's recordings have never disappointed. <strong>Just Add Water</strong> is a welcome addition to a growing discography from
one of America's most talented and lyrical pianists.<br>

<br><a href="http://www.harrisonmusic.com" target="_blank">For more info</a></blockquote>



For some reason the text is now italicized and the text no longer appears next to the image but rather below it. You can see this on my web sitehttp://www.mcran.com/thoughts.php and looking at the Mark Harrison post.
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Hi,

Just checked it out ....

Noted that you added the tag to the entire post ... instead , try to add it (opening and closing) to the first section of the post (which aligns next to the image). if this does not work, letme know as i am online 24 hours today ;)
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Also, as for the white border around the image file - genius !!!!
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Randy
Can you not just add margins to your image style like this

margin:5px 5px 5px 5px;

Play around with the px values to suit your taste, they are as follows

top, right, bottom, left
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
My wife knows nothing about computers but she came up with a doozy suggesting a border on the right side of the image. I still want to try this but don't know how to code it into what I am working with.

I moved the blockquote code up as you suggested but still for some reason the text is now below the image and not to the right of the image. Also, the text is italicized. Not sure why this is happening.

http://www.mcran.com/thoughts.php
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Hi,

Okay, remove the blockquotes and open the image file as used in your post with the normal paint on your PC. Simply extend the right hand side of the image (drag) and re-upload. You wouldn't need to change any css or anything this way.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Randy
This is the code I would use to achieve the same result, you seem to be over complicating things

<!--
<img style="width: 80px; height: 80px; float: left; margin:0px 5px 0px 0px;" src="http://sd.mcran.com/assets/pictures/j... Harrison is a pianist from the United States who is not afraid to chance it with slick arrangements and a solid band to boot.<br> <br><strong>Just Add Water </strong>and you are in for a fascinating excursion into the meaning of what is meant by ensemble playing. What stands out on this track is the way sax player Rossi delivers a gutsy yet smooth solo while never forgetting his sense of rhythmic balance. Billman's simple yet effective solo adds more flavor to the mix. Harrison is happy to oblige with some fine comping carrying the piece to a satisfying ending.<br> <br>Gentle cymbals and a subtle guitar intro carry us through a steady and relatively mainstream number. <strong>Pacific Time</strong> showcases the fine talents of guitarist Mark Chosak and Steve Billman. I always find it amazing how one instrument can change the dynamics of a piece and how the melody developes. One only has to listen to classic Miles Davis to understand the magic that can happen when the music is just allowd to "happen".<br> <br>It's one thing to listen to Harrison in a group setting but listening to the delicate intro to <strong>Conundrum </strong>we are able to hear a softer more inviting side to his playing. Rossi is first up with a tasty solo that captures the mood perfectly.<br> <br>Mark Harrison's recordings have never disappointed. <strong>Just Add Water</strong> is a welcome addition to a growing discography from one of America's most talented and lyrical pianists.<br> <br><a href="http://www.harrisonmusic.com" target="_blank">For more info</a>
-->
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Bingo!!

Thanks David. I'm not surprise if I was over complicating things as I am still learning HTML. Thank God for people like you and Rynaldo who I extend my thanks to as well for helping me!

I really appreciate it. So not all I have to do is take the new code and just add the reviews to it and just change the links to the image as well as the hyperlink at the bottom of the code. Simple and I can deal with that.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
No problem Randy, we're all still learning.
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Super ! Good to hear that you have it working ! Finally ! :) Thanks a mil Randy
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
That's why I love using this forum so much!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I have another question. At the moment, I am writing my blog entries in Google docs and then copy/pasting them into a new Yola blog entry. No problem there, but one thing I love to achieve on my web site is consistency, and I was wondering if it is possible to add code to the code below that would specify a type and size of font so that all of my posts have the same font characteristics.

<img style="width: 80px; height: 80px; float: left; margin:0px 5px 0px 0px;" src="http://sd.mcran.com/assets/pictures/justaddwater.jpg">

Also, how can I set it up so that let's say i want to change the font size to 14, I only have to do it once instead of changing it on all of my blog entries one by one. I have a feeling there is some CSS involved here.

If you go to my Blog page you will notice that the font is larger than before and I think easier for visitors to read.

http://www.mcran.com/thoughts.php
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Try this Randy
<!--
<img style="width: 80px; height: 80px; float: left; margin:0px 5px 0px 0px;" src="http://sd.mcran.com/assets/pictures/j... style="font-family:courier; font-size:14pt;">Mark Harrison is a pianist from the United States who is not afraid to chance it with slick arrangements and a solid band to boot.<br> <br><strong>Just Add Water </strong>and you are in for a fascinating excursion into the meaning of what is meant by ensemble playing. What stands out on this track is the way sax player Rossi delivers a gutsy yet smooth solo while never forgetting his sense of rhythmic balance. Billman's simple yet effective solo adds more flavor to the mix. Harrison is happy to oblige with some fine comping carrying the piece to a satisfying ending.<br> <br>Gentle cymbals and a subtle guitar intro carry us through a steady and relatively mainstream number. <strong>Pacific Time</strong> showcases the fine talents of guitarist Mark Chosak and Steve Billman. I always find it amazing how one instrument can change the dynamics of a piece and how the melody developes. One only has to listen to classic Miles Davis to understand the magic that can happen when the music is just allowd to "happen".<br> <br>It's one thing to listen to Harrison in a group setting but listening to the delicate intro to <strong>Conundrum </strong>we are able to hear a softer more inviting side to his playing. Rossi is first up with a tasty solo that captures the mood perfectly.<br> <br>Mark Harrison's recordings have never disappointed. <strong>Just Add Water</strong> is a welcome addition to a growing discography from one of America's most talented and lyrical pianists.<br> <br><a href="http://www.harrisonmusic.com" target="_blank">For more info</a></p>
-->

Just change the font family and font size values to suit
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks David!

I think this way I will have more flexibility and consistency on my blog page.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I am having all kinds of problems and it has nothing to do with the code in your previous post. What is happening is that when I write my review in Google docs and then pate it into the Yola blog, there is all kinds of code added that is really screwing things up. I don't really like writing my blogs in the Yola blog editing window. It doesn't feel comfortable as opposed to writing my stuff in a Word processor or editor and then just pasting into my blog. Here is an example of what is happening. Compare this to the simple code that David pasted above. What should I do? Do I have to write my blogs using the Yola blog editor?

<img style="width: 80px; height: 80px; float: left; margin:0px 5px 0px 0px;" src="http://sd.mcran.com/assets/pictures/jameau.jpg">
<br><p dir="ltr" style="margin-left: -4.5pt;margin-right: -72pt; margin-top: 0pt; margin-bottom: 0pt;" id="internal-source-marker_0.9171487221871407"><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Marie
Jameau is a vocalist of Italian and English origins with a sultry yet
delicate voice that captures the moods of a song beautifully. This
release features a mix of classics from the Brazilian repertoire as well
as other musical gems.</span></p><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"></span><br><p dir="ltr" style="margin-left: -4.5pt;margin-right: -72pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Jameau’s talent for capturing the melody and inflecting her own unique delivery of this time honored classic </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Girl From Ipanema </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">is showcased throughout. Beautiful comping in the background from her talented group of musicians.</span></p><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"></span><br><p dir="ltr" style="margin-left: -4.5pt;margin-right: -72pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Another classic, </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Triste </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">is wistfully performed with a mid-tempo beat and some beautiful flute inflections from Bob Afifi.</span></p><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"></span><br><p dir="ltr" style="margin-left: -4.5pt;margin-right: -72pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">When I was much younger, one of my favorite songs was </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Mas Que Nada</span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">.
It seems that this particular song never gets tired, and with Jameau’s
infectious sense of fun throughout, this version ends up being one of
the highlights of this recording.</span></p><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"></span><br><p dir="ltr" style="margin-left: -4.5pt;margin-right: -72pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Listening to </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Gracias A La Vida, </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">we
hear Jameau singing duet with members of her group. We are also treated
once again to the fine flute playing of Bob Afifi. This piece screams
for repeted listening. The melody is beautiful and the musicianship
first rate.</span></p><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"></span><br><p dir="ltr" style="margin-left: -4.5pt;margin-right: -72pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">If you love the inviting sounds of Brazilian music, you can’t go wrong with </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Gema. </span><span style="font-size:9pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">There is so much to love from Jameau’s voice to the group of musicians chosen for this outing.</span></p><br><a href="http://www.mariajameau.com/" target="_blank">For more info</a>
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hello Randy
My opinion is that you're still making life difficult for your self for no reason, I have never used google docs so I'm not able to comment on that, my point is I can't understand why you don't use the editor in site builder or failing that write your review in notepad and simply add that text to my code, when you compose a letter you don't then transfer that text onto another piece of paper do you. My advise for what its worth is to keep things as simple as possible so any time you save can be spent doing other things.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks David!

I always try to keep things simple. I agree about Notepad. Actually I found an online text editor that I am going to try out. I move from Windows to Mac and Linux. I never stay in one OS at a time. I find it a great way to learn new things.I like the Blog editor in Yola except for the fact that I can't expand the window to make work area larger. I really appreciate the feedback in your last post. Something I have to work on.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
OK Randy, what ever you decide to use remember your chosen editor needs to strip the formatting out so as not to effect your code. Good Luck
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Yes David. That's what I thought was happening with Google Docs. How can I tell if the editor I am using strips out the formatting? Any tips?
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
I would guess you could use any plain text editor but Notepad is the only one I can guarantee as its the only one I use. When you find one just write some text and paste it in to your site then check out the html, if it looks as it should then use that.
If you don't know what is should look like write the same text with a processor, paste it in and compare the two.