Useful Codes [HTML, CSS, JavaScript] For Blogging To Reduce Plugin & Other Purposes

/ / Useful Codes [HTML, CSS, JavaScript] For Blogging To Reduce Plugin & Other Purposes

If you are a blogger and using WordPress as your blogging platform then this article will help you to reduce the number of plugins on your website by using some Useful Codes (HTML/CSS/JavaScript).

On WordPress, we are very much dependent on Plugins and due to the increase in the number of plugins the speed of the website slows down, and for higher ranking in Google SERP nowadays page speed plays an important role in ranking.

So if you want to reduce a load of plugins on your website and make your site lightweight then this article will help you to do so.

Note: Make sure to take a backup of your site before you make any changes to the theme file.

Useful HTML Codes

HTML Code For Telegram Channel Widget With Number Of Participants

See the Pen Telegram Subscriber Widget by Hex ToiD (@vikask2y2) on CodePen.

Replace the channel Username with your channel username.

HTML Code For Moving Text/Image

See the Pen Moving Text & Image by Hex ToiD (@vikask2y2) on CodePen.

Useful CSS Codes

Add a Background/Change Style To Bold Text In List

See the Pen Change Style Of Bold Text In List/Add Any Text After It by Hex ToiD (@vikask2y2) on CodePen.

CSS For Code Tag <code> TEXT </code>

See the Pen CSS For Code Tag <code> TEXT </code> by Hex ToiD (@vikask2y2) on CodePen.

CSS For Pre Tag <pre> TEXT </pre>

See the Pen CSS For Pre Tag <pre> TEXT </pre> by Hex ToiD (@vikask2y2) on CodePen.

Design List Items

See the Pen List Styling In a New Way by Hex ToiD (@vikask2y2) on CodePen.

Image CSS To Display Border & Image Hover CSS

See the Pen CSS To Display Border & Shadow On Hover Images by Hex ToiD (@vikask2y2) on CodePen.

Fix WordPress Table Size If It Exceeds

See the Pen Fix WordPress Table Size If It Exceeds by Hex ToiD (@vikask2y2) on CodePen.

CSS Code To Decorate Headings

See the Pen CSS Code To Decorate Headings by Hex ToiD (@vikask2y2) on CodePen.

CSS Code To Decorate Headings 2

See the Pen CSS Code To Decorate Headings 2 by Hex ToiD (@vikask2y2) on CodePen.

CSS Code To Decorate WordPress Buttons

.wp-block-button .wp-block-button__link {
    font-size: inherit;
    line-height: inherit;
    box-shadow: 0px 7px 10px 0 rgb(0 0 0 / 33%);
    border: 5px solid #fff;
    color: #fff;
    padding: 10px 10px;
    margin:5px;
}

CSS Code To Decorate Blockquote

blockquote {
    box-shadow: rgba(23,43,99,.2) 0 7px 28px!important; 
    border: 5px solid #0E8C05;
    padding: 20px;
    margin: 0 0 1.5em;
    position: relative;
    font-size: 18px;

}

CSS Code To Decorate Column

.wp-block-columns {
  box-shadow: 0px 7px 10px 0 rgb(0 0 0 / 33%);
  padding: 10px;
  border-radius: 7px;
  border: 3px solid #285529;
}
.wp-block-columns strong {
	background: #000;
	color: #fff;
	padding: 0px 10px 0px 10px;
	text-align: center;
	border-radius: 0px 15px; 
	display: inline-block;
}

CSS Code To Disable Right Click & Copy Paste In WordPress Website

See the Pen CSS Code To Disable Right Click & Copy Paste In Website by Hex ToiD (@vikask2y2) on CodePen.

CSS To Decorate Yoast SEO FAQ Schema

.wp-block-yoast-faq-block {
    background: #f3f4f5;
    border-radius: 5px;
    padding: 15px 15px;
}
.wp-block-yoast-faq-block .schema-faq-answer  {
    overflow: hidden;
    background: #f3f4f5;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px 15px 20px;
    box-shadow: 0px 0px 5px #d9d9d9, 0px 0px 40px #ffffff;
}
.wp-block-yoast-faq-block .schema-faq-answer:hover{
	box-shadow: 0 0 5px #00444c;
}

CSS To Decorate Rank Math FAQ Schema

#rank-math-faq {
    background: #f3f4f5;
    border-radius: 5px;
    padding: 15px 15px;
}
.rank-math-list-item {
    overflow: hidden;
    background: #f3f4f5;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px 15px 20px;
    box-shadow: 0px 0px 5px #d9d9d9, 0px 0px 40px #ffffff;
}
.rank-math-list-item:hover{
	box-shadow: 0 0 5px #00444c;
}

CSS To Decorate Rank Math How To Schema

#rank-math-howto{
	  background: #f3f4f5;
    border-radius: 5px;
    padding: 15px 15px;
}

CSS To Remove Website Field From In Generate Press

.comment-form #url {
    display: none;
}

CSS To Remove Padding From List In Generate Press

.entry-content ol li {
    margin: 0 0 0.5rem 0;
    position: relative;
}
.entry-content ul, ol {
    margin-left: 1em;
}

Replace Class/ID because it might be different depending upon your theme

Useful JavaScript Codes

JavaScript Code To Redirect Blogger Website To Another Website/URL

<script type="text/javascript">

var d='<data:blog.url/>';
d=d.replace(/.\/\/[^\/]/, '');
location.href = 'https://www.hextoid.com/';
</script>

JavaScript Code To Redirect Blogger URLs To Another Website URL

<script>
if(window.location.href == 'https://www.hextoid.blogspot.com/2020/12/blogger-post-link.html')

{
window.location="https://www.hextoid.com/wordpress-post-link/";
}
</script>

Replace The URLs With Your Site URLs. For More Visit https://www.hextoid.com/redirect-blogger-url/

How To Add Custom CSS In WordPress Website?

There are many different ways and tools to Add Custom CSS in WordPress but here I’m going to share 3 simple methods using which you will be able to add custom CSS to your WordPress website.

#Method 1

  • Log In To Your WordPress Dashboard
  • Navigate To Appearance > Customize > Additional CSS
  • Paste The CSS Code You Want > Click Publish When You Are Done

#Method 2

  • Log In To Your WordPress Dashboard
  • Navigate to Plugins > Add New > Search “Simple CSS” > Install & Activate It
  • Go To Appearance > Simple CSS > Enter Your Code > Save CSS

#Method 3

  • Log In To Your WordPress Dashboard
  • Navigate To Appearance > Theme Editor
  • There Will Be a style.css Name File
  • Here You Can Enter Your Custom CSS

Wrap Up

I’m assuming that these simple codes will help you to make your website attractive and lightweight by reducing the number of plugins on your website. If this article is useful then make sure to share it on Social Media.

Happy Blogging!

Similar Posts

Leave a Reply

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

4 Comments

  1. Hey Vikas, this post is very helpful for nontech people like me.
    One problem I faced after applying the above code for the heading is applying to the homepage as well (that means categories titles were considered as H2 and they were also changing its style). I have looked on google and found the solution by using body.single-post before the code or by using body:not(.home) before the code.

    One problem is still there my site is considering website title also H2 and changing its style as well, can we change it or should we not change it?