Useful HTML Codes for Websites

Table of Contents
Introduction
1. Embed a Twitter Feed
2. Drop Shadow Fonts
3. Smiley Emoticons
4. Free Visitor Counter
Introduction
I know what are some of the problems that new bloggers face. One of them is not to use too many plugins because they will slow down the websites’ performance and as a result lead to low Google ranking. Google considers the site speed as one of their criteria as it will affect users’ experience when interacting with the websites.
There are many attractive free plugins in the market that I am tempted to use for my blog site. Due to the reason stated above, I try to find a solution by using HTML Codes instead of plugins.
In the midst of conducting the researches of what I want for my website, I have decided to compile a list of information including the direct links of it to share the advantages with other newbies like me. You can already see that I have been using some of them.
If you are a new blogger and wants to find easy and uncomplicated ways to enhance the aesthetic value of your websites for a better user experience, you can follow me on my special Facebook page – Online Marketing for New Birds.
The page was created because I want to find ‘somewhere’ to deposit all the useful links so I can always refer back over and over again. I am not an expert but good enough to help myself.
Do not be surprised if you are just seeling links and links so those can bring you to the real expert IT sites for advice or introduce you to new useful sites! 🙂
1. Twitter Feed
Would you like to embed one cool scrolling Twitter feed into the sidebar of your website like below? Twitter feed is especially helpful when you want your audience to have immediate updates on your new article, new launch of products and take advantage of the special promotion which you are marketing for.
It is fully customizable to the height of the size that you want. The colour theme of the background can either be dark or light, and the colours of the links inside the Twitter post can be selected too.
2. Drop Shadow Fonts
Drop shadow 1
<p style=”font-size: 18px; color: orange; text-shadow: 1px 1px 1px #666;”>Drop shadow 1</p>
Drop shadow 2
<p style=”font-size: 18px; color: orange; text-shadow: 1px 1px 1px #000;”>Drop shadow 2</p>
Drop shadow 3
<p style=”font-size: 18px; text-shadow: 4px 4px 4px #666;”>Drop shadow 3</p>
Drop shadow 4
<p style=”font-size: 18px; color: orange; text-shadow: 4px 4px 8px #666;”>Drop shadow 4</p>
Drop shadow 5
<p style=”font-size: 18px; color: #fff ; text-shadow: 1px 1px 8px #000;”>Drop shadow 5</p>
<p style=”font-size: 18px; color: orange; text-shadow: 1px 1px 1px #666;”>Drop shadow 1</p>
<p style=”font-size: 18px; color: orange; text-shadow: 1px 1px 1px #000;”>Drop shadow 2</p>
<p style=”font-size: 18px; text-shadow: 4px 4px 4px #666;”>Drop shadow 3</p>
<p style=”font-size: 18px; color: orange; text-shadow: 4px 4px 8px #666;”>Drop shadow 4</p>
<p style=”font-size: 18px; color: #fff; text-shadow: 1px 1px 8px #000;”>Drop shadow 5</p>
I have used the fonts above for one of my article series – Cutie Pie Korean Baby Yebin Videos. You would be able to see more effects from this page because I have made changes to the original font sizes and colours listed above to create a more fanciful theme dedicated to a little girl.
There are 5 types of Drop Shadow fonts to choose below. Copy and paste the HTML Code <p style = … </p> below your font choice onto your “Text” editor page (not your “Visual” page).
- Adjustment of Font Size
You can adjust the font size below “18px” to “other numberpx”
- Font and Shadow Colour HTML Code
You can adjust the text colour from your default toolbar above. Pretty straightforward.
a) 1 I use the HTML colour code to create my personalised shadow colour. Scroll down below and search for the subject title “About Hexadecimal & RGB Colors“
b) A colour code will be generated from the HTML Colour Code link when you click on the colour panel.
c) Just replace the above Drop Shadow code → #666;” with the #generated colour code;” that you have newly generated.
3. Smiley Emoticons
You can copy and paste these icons directly onto your website. Otherwise, use the HTML Code provided beside the icon.
If you need more information and troubleshooting, you can refer to the direct source link provided below.
4. Free Visitor Counter
Some visitor counter plugins can track visitors’ visits and you may want to install them to track.
https://www.freecounterstat.com/
Public or Private View
You can set the counter to private or public view. If you click on the counter, you can decide whether IF the visitors can see the analysis of where your visitors come from if it is set to ‘public’. For the ‘private’ setting, only the numbers are shown.
Step 1
No registration is needed – Choose from a list of designs that you like and click on it.
Step 2
Customisation – Decide whether you like the standard design or the floating numeric design and its floating position on your website.
You can input your numeric counting from any numbers you want, not necessarily 0 so it is great for beginners. I use my Google Analytics page view figure as the starting number.
Step 3
An HTML code will be generated and you can paste them onto your sidebar.
Visitors Analysis
After you have completed step 3 and viewed it on your website, click on the counter. You will see either only your own visit or people who are online If you choose to go PUBLIC.
If you go PRIVATE, you will still be able to read the visitors analysis if you use the weblink that is generated. See Demo Stat.
Advantage:
- You can change the counter design if you get bored of it.
- If you want to switch from private to public view once you have more visitors coming to your website and there is “more things” to show rather than a handful of visits.
- Data will remain unchanged and there is instruction on how to do a change.
Disadvantage:
- You cannot exclude your own visit.
Related Articles