4 Basic HTML Codes for Beginner Bloggers

Source
As a Blogger, we all want to latest codes for our own Blog, but even so, we all want to have a unique blog. To be honest, all codes are the same, it's the images we create ourselves and place codes on them that make our blogs unique and interesting to the eye.

Every time we publish posts, no matter how hard we worked on our content, I bet it's 99.9% possible that even if your content is good, if your blog page is not eye-catching, the reader will click straight off your page and not bother.

Would you rather have a page where readers will read posts after post; nosy through pictures; relate and observe; and most importantly want to come back and visit your blog again? Of course you do! 

So as I am a kind, helpful and really appreciative blogger for all the help I get, here are 4 basic codes I use on my own blog that I want to share with you.


The first code is simple, the easiest code to edit yourself - Social Media Icons. Social Media Accounts are a big thing in today's society and I know for a fact you have more than one of these Social Media Accounts. So how about sharing your posts via Social Media THROUGH your blog? Exactly, who wouldn't want readers to share, or even just visit your other Social Media Accounts? I would!

Scroll down for all 4 codes and more insight to what you can do and how to do it.




Social Media Icon code 


You can place these codes either into your HTML Template, or in a HTML/Javascript Sidebar Gadget depending where about on your blog you want to place these codes.

Instead of copying social media icons that are already out there, you can use PicMonkey, Photoshop etc. to create your own Social Media Icons. Remember to upload your pictures either on your Google Plus Page or PhotoBucket Account so you can copy the URL of the image and place it into the "src=" area in the code. 

"Href=" means the Social Media Account itself. For example "https://www.facebook.com."

"Target=" means the Social Media Account you want to send your reader. For example "http://www.facebook.com/laurennicoleohara." 

"Src=" means the where you got your Image from so copy and paste the link you see in your browser bar. For example "https://photos.google.com/photo/........."

Just repeat the code and editing process for all the Social Media Accounts you want to have Icons for.

Keep the speech marks (the ones already in the code) as the code won't work without them. When places your URL in the specific places, make sure you use "http://www." otherwise the link won't work.




Related Posts Code


Place this code in your HTML Template.

There is no need to edit any of this code, just simply place it under your blog post footer html. <div class='post-footer'> The reason you don't need to edit any of this code is because the code is in "default" which means the it will automatically update itself whenever a label is related to the post you have published. 

If you don't know what "Label" is, it is something you create yourself that may link all your posts together if you want to create a certain page on your navigation bar to condense your posts. I won't get into that today as there is no code needed.

You can edit the "You Might Also Like" into "Recent Posts" or something you prefer to write yourself. Remember you can make this as unique as you wish.



Author Biography Code. Includes code for small Social Media Icons involved with the bio.



You place this code into your HTML Template.

Just change the "target=" Url to directly go to your Social Media Account and not just the Social Media Log In page. 

"Title=" is pretty self explanatory.

After </h5><p> you can add your own little bio paragraph. Anything you wish. For an example, just scroll down my blog page and you will my Author Biography and paragraph. 

"Href=" means the Social Media Account itself. For example "https://www.facebook.com."

"Target=" means the Social Media Account you want to send your reader. For example "http://www.facebook.com/laurennicoleohara." 

Keep the speech marks (the ones already in the code) as the code won't work without them. When places your URL in the specific places, make sure you use "http://www." otherwise the link won't work.



To enter codes into text boxes like I used in this post

Add </textarea> to the end of the code. It won't let me do it in the box as it confuses the HTML whilst I try and compose this post.

You place this code into your HTML whilst you compose your blog post. On Blogger, it is on the top left of your typing area next to "compose." 


To change the size of the box, just edit the height and width in the code itself.

I have added this just in case you want to do a post similar to this in the future, or you have codes yourself you want to share with fellow bloggers too. 



Sharing is caring. I hope you liked this post and it helped you!



Much love,

No comments:

Post a Comment

Every comment is much appreciated and I am grateful that you had taken the time to leave your thoughts. Comments with questions and NEED to replied to will be replied to within 24hrs. Thank you.

Related Posts Plugin for WordPress, Blogger...
✿ Facebook // 87
❀ Instagram // 450
✿ Twitter // 3493

Follow



2017 Copyright of ❀ Lauren O'Hara (c) ✿
All Rights Reserved!
Custom Branding & Design By
Krystal Marie Design Studio