MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Wednesday, January 10, 2018

How to Insert Custom CSS Codes into Blogger Blog Theme?

 MyBlogHelp     January 10, 2018     blogspot, css     2 comments   

Insert Custom CSS Codes into Blogger Template
CUSTOM CSS CODE IN BLOGGER TEMPLATE
  
         
      CSS and CSS3 are Cascading Style Sheets. CSS Code is used to change the look and style of the website and blog. Each and every people want some uniqueness on their Blog either to change the layout or add few elements.
      
      Here five options are available to add CSS code to blogger Themes or blogger template. It depends on you which option you like most. It also depends on the requirement. Either it is for entire blog or a particular post and element like footer gadget etc.

Blogger Theme Designer


        It is a very easy and simple method for a newbie blogger who just started blogging. While adding CSS code to blogger theme here you will not face error problem. It is provided by the Blogger Theme Designer where you can add CSS code in Add CSS Rich Text field which is located under Advance option. The main advantage of this text editor is that there is a live preview.

How to add meta tags code in blogger blog?

How to Insert Custom CSS Codes into Blogger Theme?

 

Go to Blogger.com/Home --> Click on Particular Blog 

1. Click on Theme 
2. Click on Customize


CSS Codes into Blogger Template

1. Advance Tab --> Select Add CSS 
2. Add/Paste your CSS Code in Add custom CSS
3. Apply to Blog

CSS Codes into Blogger Template


Note: If you are using third-party Blogger Template/Theme there may be only Add CSS sub-menu on the right side.

Edit HTML of Blog Theme


        This is a little bit difficult for a newbie blogger. You should have some basic coding knowledge about HTML and CSS. If you don't have an idea about coding HTML and CSS and you want to edit, first of all, Backup/Restore your blog template then only you try to change or edit code. If you are getting error press Ctrl+Z to make it unchanged.

Go to Blogger.com 

1. Click on Theme 
2. Click on Edit HTML

CSS Codes into Blogger Template

Click Mouse anywhere in given code --> Press Ctrl+F --> Type ]]> in Search box --> Add/Paste your CSS Code before ]]>


CSS Codes into Blogger Template


Note: CSS starts with a tag name and code must be inserted between {Brackets}.

Example:





       After editing code sees the preview then only save the template. If your CSS code is between <style> CSS code </style>. You can add anywhere but it is better to Add before </head>

Go to Blogger.com -->Click on Theme --> Edit HTML --> Click Mouse anywhere in code section 

1. Press Ctrl+F 
2.Type </head> in search box -->Press Enter key 
3. Before </head>
4. Paste Code
5. Click on Save Theme

CSS Codes into Blogger Template

Gadget


       This is a riskless and user-friendly method for the newbie blogger who just started blogging. If you have CSS code in bulk, it will be the best approach.

Go to Blogger.com --> Blog Dashboard 

1. Click on Layout 
2. Click on Add Gadget.

CSS Codes into Blogger Template

1. Select HTML/JavaScript

CSS Codes into Blogger Template
 
1. Add/Paste CSS Code.
2. Click on Save 
3. Click on Save arrangement 


CSS Codes into Blogger Template

<styletype="text/css">
  /*Your CSS Code will be placed here*/
</style> 

External CSS files


     For beginners and newbie blogger it is very difficult to change CSS Code through Edit HTML in Blog Theme. There is a simple method, if you have an External CSS Code file and you want to link to your Blog Theme then you can link this as below.

<linktype="text/css" rel="stylesheet" href="your-external-style-code-file.css">

Follow this step:

Go to Blogger.com --> Blog Dashboard --> Click on Theme --> Click on Edit HTML --> Click Mouse anywhere in given code --> Press Ctrl+F --> Type </head> in search box --> Add/Paste your CSS code file link above </head>


Note: Link of External CSS code file should be placed between <head> and </head>.

Example:




CSS Codes into Blogger Template

CSS for single post


      This method is applied to a single webpage or single blog post here you can use "Inline Style" technique. It is better for one-time formatting for a particular text in your webpage or blog post. The syntax of Inline Style is as below.

<spanstyle="CSS Code">Your Text</span>

Where you can change and place the code in your blog post. Follow this step:

Go to Blogger.com --> Blog Dashboard --> Select a particular Post --> Click on Edit option of post --> Select HTML in post editor --> Add/Change Inline CSS Code.


CSS Codes into Blogger Template


Example:



       Hopefully, this post is very useful for you, if it is so, please help other bloggers and your friends to share this very important "coding and setting" related post on social media and also don't forget to comment on the comment box.


  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

2 comments:

  1. UnknownApril 21, 2018 at 12:57 PM

    Blogging has become a huge market for for you to understand the things in a proper way that what to identifying and how it will work our fro the best results.

    https://digitalsteps.in/search-engine-optimization-services

    ReplyDelete
    Replies
      Reply
  2. MkhanJune 17, 2020 at 5:17 PM

    Different blog sheet or template has different vewiwes, For Example you said if you want sees code you need to put remove or css code or put meneue or shoulde . Start with nw linebetween we should body if there an othere some code may it related to code template or may it not Do we need to delet or remain them an put our code with new line betwen brackets .. and Aspecially ho I found.
    Last I made menue Bar on spred onle builder like and gentate css code and ul code I could applied only 1 them and that is Ethenal blogger sheet but reast dont have any spefic head I COULDINT FIND BASICALLY . NOR {BODY SODE AREA i could . It was too hard to dowled responsive sheet how could I fould and ples navigation where need to put exact risposiv manue bar.. Bz some social button are made or created but how we can also anto . Thx
    Help plz

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ►  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ►  January (16)
  • ▼  2018 (54)
    • ►  December (27)
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ▼  January (10)
      • Top 10 Plagiarism Checker Website Which Provides F...
      • How to Convert Pen Drive into Virtual RAM?
      • How to setup Virtual RAM from Hard Disk Drive?
      • How to set up Google Alerts?
      • How To Check Copied Content For Your Blog Post?
      • How To Remove Copied Content From Google Search En...
      • How to Insert Custom CSS Codes into Blogger Blog T...
      • How to Add Meta Tags Code in Blogger Blog?
      • How to disable copy and paste from the blog posts?
      • How to Add Robots.txt File in Your Blog? Full Step...
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com