Fallowing icon

Tuesday, July 2, 2013

Add css font style to Article Blogger


    
       When we are blogging, we want to present our article (post) nice way. In this case, CSS font styles are acting very important role in blogging. Using the CSS you can add beautiful font to your post.

      In proves lesson I explain, how to add CSS font style to your blog template. In this lesson I explain how to use (access) that CSS style code for your article. 


To the explain I use below CSS code. 

.Three-Dee{ 
font-family: Verdana, sans-serif; line-height: 1em; 
color: #aaadb3; 
font-size: 32px; 
text-shadow:0px 0px 0 rgb(157,160,166),1px 0px 0 rgb(144,147,153),2px 0px 0 rgb(131,134,140),3px 0px 0 rgb(117,120,126),4px 0px 0 rgb(104,107,113),5px 0px 0 rgb(91,94,100), 6px 0px 0 rgb(78,81,87),7px 0px 6px rgba(0,0,0,0.95),7px 0px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);}



1) Add the above CSS style code to your blog template. (How to add CSS style code my blog template).

2) Now you can access the above CSS style in your article.

     Click new post button in your blogging dashboard to create new post. 


3) Type your post.
     To the example i create a post like this :- 




4)  Select in the article witch you want to add style font. Then Copy it.


Eg:- When i want to add style font for Topic in above article  (History of Computing) i select this line and copy it. 

* You can add CSS font style for single word, only one character, paragraph or full of article witch you want.

5) Click HTML button in your article tool bar.



6) Click CTRL+F buttons in your key board to find this word in your article HTML code. Now open find word
      section.


      Past above copied word in find filed and click enter to run it. 

     * In the article html code, It's difficult to find specific word. In this case i used above find method. 

7) After past word and click enter to find, you can see highlighted word in your code if you entered word is
    can be found.


7) Now use between class="your CSS class name" to your selected word opening tag <span xxxx class="your css class name".

    Ex:- I added class="Three dee". Because my above CSS example class name is Three dee.

    * If your words in between two or more <span>...</span> tags Insert class="your css class name"    code
       between all this tags.  
 
8) Finally click Compose button and check the modification is successfully.


      * You can reuse one CSS code same article or different articles.
     * Add different CSS style codes in your template, Then you can use different styles in your
        article(s).




     

No comments:

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Post a Comment