HTML and CSS for blog post decoration | wordpress | blogger

If your website is powered by Blogspot, WordPress, etc. the main problem with this is everyone uses the almost same theme so all blogs look similar, apart from that your all post looks similar across your site. Use the below HTML code for post design. If you want to make your post look different than other posts then you can use the following codes to`make your post look awesome and unique. And if you want something different for your blog please describe here we will make especially for you. please comment if this code is not working for you, we will get back to you. Just copy the following codes and paste in the text section on WordPress or HTML edit for Blogger

Awesome Marquee

Style #1: Only Text

<marquee behavior="alternate">
<label style="font-size: 51px;font-weight: 600; color: #673AB7;">
Your Text goes here
</label>
</marquee>
live demo

Style #2 Only image

<marquee behavior="alternate">
<img src="http://pfrng.com/wp-content/uploads/2018/01/banner.jpg"/>
</marquee>
live demo

chips

Style #1: Simple link open in current tab

<a style="cursor: pointer; background: #ee1b60; color: #fdfdfd; padding: 10px; border-radius: 7px; text-decoration: none; font-size: 15px; font-weight: 400;" href="http://pfrng.com" target="_blank" rel="noopener">
<label style="cursor: pointer;">click here to go pfrng.com</label>
</a>
Live demo

Style #2: Simple link open in new tab

<a style="cursor: pointer; background: #ee1b60; color: #fdfdfd; padding: 10px; border-radius: 7px; text-decoration: none; font-size: 15px; font-weight: 400;" href="http://pfrng.com" target="_blank" rel="noopener">
<label style="cursor: pointer;">click here to go pfrng.com</label>
</a>
live demo

Style #3: Blinking link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
#pfrngBlinkLink {
text-decoration: none;
color: #fdfeff;
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
font-weight: bold;
font-size: 1.3em;
padding: 5px;
border-radius: 5px;
-webkit-animation: pfrngBlinkLinkFrames 1s linear infinite 0s normal backwards;
animation: pfrngBlinkLinkFrames 1s linear infinite 0s normal backwards;
}

@-webkit-keyframes pfrngBlinkLinkFrames {
0% {
background: #FFF;
}
50% {
background: #f44336;
}
100% {
background: #FFF;
}
}

@keyframes pfrngBlinkLinkFrames {
0% {
background: #FFF;
}
50% {
background: #f44336;
}
100% {
background: #FFF;
}
}
</style>

<a id="pfrngBlinkLink"
target="_blank"
href="http://pfrng.com"
>
pfrng.com
</a>
Remove  target="_blank" if you dont want to open the new link in new tab (line no 40) live demo
pfrng.com

New styles are coming soon. If you need something different describe in the comment section

Ads not showing on UC browser: check this post to show adds on UC browser

3 Replies to “HTML and CSS for blog post decoration | wordpress | blogger”

Leave a Reply

Your email address will not be published. Required fields are marked *