As a blogger, who knows light coding, I get asked technical questions quite often from other bloggers. And I am always happy to help out a blogger friend in need.
I try my best if it is something simple to answer quickly and timely, too.
I thought I would showcase a question a week here now and try to help others with their simple technical questions. So, please feel to ask your own questions in the comments and will try to answer it in the form of a tutorial article as time permits.
Ask J9 Designs
To start this series off, I will include one that I recently fielded about changing a plugin’s image size to fit in a sidebar. The image was just too wide and spilling over out of the sidebar.
Many I know use the image widget that you just upload an image URL, but for this I had the plain text HTML code and needed to resize it in the actual text code.
Here is the code as an example (most sidebars will by the way allow up to 250px in width size):
“<div id=”goodreadsGiveawayWidget68520”><!– Show static html as a placeholder in case js is not enabled –>
<div style=”max-width: 350px; margin: 10px auto; padding: 10px 15px; border: 2px solid #EBE8D5; border-radius: 10px;”>
<style>
.goodreadsGiveawayWidget { color: #555; font-family: georgia, serif; font-weight: normal; text-align: left; font-size: 14px;
font-style: normal; background: white; }
.goodreadsGiveawayWidget img { padding: 0 !important; margin: 0 !important; }
.goodreadsGiveawayWidget a { padding: 0 !important; margin: 0; color: #660; text-decoration: none; }
.goodreadsGiveawayWidget a:visted { color: #660; text-decoration: none; }
.goodreadsGiveawayWidget a:hover { color: #660; text-decoration: underline !important; }
.goodreadsGiveawayWidget p { margin: 0 0 .5em !important; padding: 0; }
.goodreadsGiveawayWidgetEnterLink { display: block; width: 150px; margin: 10px auto 0 !important; padding: 0px 5px !important;
text-align: center; line-height: 1.8em; color: #222; font-size: 14px; font-weight: bold;
border: 1px solid #6A6454; border-radius: 5px; font-family:arial,verdana,helvetica,sans-serif;
background-image:url(https://www.goodreads.com/images/layout/gr_button4.gif); background-repeat: repeat-x; background-color:#BBB596;
outline: 0; white-space: nowrap;
}
.goodreadsGiveawayWidgetEnterLink:hover { background-image:url(https://www.goodreads.com/images/layout/gr_button4_hover.gif);
color: black; text-decoration: none; cursor: pointer;
}
</style>
<h2 style=”margin: 0 0 10px !important; padding: 0 !important; font-style: italic; font-size: 20px; line-height: 20px; font-weight: normal; text-align: center; color: #555;”>
<a href=”http://www.goodreads.com” target=”_new”>Goodreads</a> Book Giveaway
</h2>
<div style=”float: left;”>
<a href=”https://www.goodreads.com/book/show/18631851“><img alt=”The Mother of All Meltdowns by Crystal Ponti” src=”https://d202m5krfqbpi5.cloudfront.net/books/1381099499l/18631851.jpg” title=”The Mother of All Meltdowns by Crystal Ponti” width=”100″ /></a>
</div>
<div style=”margin: 0 0 0 110px !important; padding: 0 0 0 0 !important;”>
<h3 style=”margin: 0; padding: 0; font-size: 16px; line-height: 20px; font-weight: normal; font-style: normal;”>
<a href=”https://www.goodreads.com/book/show/18631851“>The Mother of All Meltdowns</a>
</h3>
<h4 style=”margin: 0 0 10px; padding: 0; font-style: normal; font-weight: normal;”>
by <a href=”https://www.goodreads.com/author/show/7327229.Crystal_Ponti” style=”text-decoration: none;”>Crystal Ponti</a>
</h4>
<div>
<p>
Giveaway ends November 10, 2013.
</p>
<p>
See the <a href=”https://www.goodreads.com/giveaway/show/68520” style=”text-decoration: none;”>giveaway details</a>
at Goodreads.
</p>
</div>
</div>
<div style=”clear: both;”></div>
<a href=”https://www.goodreads.com/giveaway/enter_choose_address/68520“>Enter to win</a>
</div>
</div><script src=”https://www.goodreads.com/giveaway/widget/68520” type=”text/javascript” charset=”utf-8″></script>”
Goodreads Book Giveaway
The Mother of All Meltdowns
by Crystal Ponti
Giveaway ends November 10, 2013.
See the giveaway details
at Goodreads.
350px Max-Width Image
250px Max-Width
By the way, please feel free to enter to win your very own free copy, the image widgets both work and you can click on either to enter. Good luck to all!!
And, please remember to leave me some comment love with your technical questions now!
I am trying to code photos on my blog so readers can 'click to enlarge', but I can't make sense of anything I have found yet. If you have something for dummies on how to code a photo for click to enlarge, I would really appreciate it. Thanks!
I am going to try to look into this further and see what I can come up with for you. I will either answer here or write a short tutorial on here. So, please do check back!
Good information! I know very little about coding but would like to know more so that I can fix small issues like this when they come up. I will be checking back in!
Happy to help ideal mom and if you have any specific questions, please do ask and definitely do check back!! 🙂
This is a good share, things spilling over make everything look so unpolished.
That being said, I get so terrified when I start messing around w/the code on my blog. I'm always afraid I'm going to royally mess something up and not be able to fix it.
My recent post Super Sunday Sync #58
Rosey, I had that fear before I got better with coding and trust me if you ever do change it up and need help, you know I am here to help!! 🙂
It's great that some of us get all the way into many different things in order to accomplish what we desire. Janine I like that you have started a series to help others in this subject as it's not always easy to find an answerer to what we are trying to do.
Have a great rest of the week.
My recent post "Breast Cancer Awareness" Wordless Wednesday Hop63
Totally my pleasure Jay and still hoping to be asked more questions to try to develop this series. So if you have nay or know of anyone who does, send them my way!! 🙂
Thank you for sharing via Mommy Monday!
Coding has become something I'm truly trying to learn, therefore I appreciate any help I may receive- thank you!
XO
Totally my pleasure Mrs. AOK and seriously thank you for hosting again. If you do have any coding/technical questions pass them my way for this series now!! 🙂
As always a wonderful tutorial and why I send all bloggers with questions I can't answer your direction.
Thank you for linking to the Raising Imperfection link party.
We feature our favorites on Friday so please come back to see if you were featured 🙂
¤´¨)
¸.•*´
(¸¤ Lanaya | xoxo http://raising-reagan.com
Awe, thank you for saying that and for sending Bloggers my way, Lanaya. Seriously so very much appreciate it!! 🙂