Is codepen website supports to add external stylesheet css in blogger ? | Softorwebapp

Is codepen website supports to add external stylesheet css in blogger ?

4 comments
In this article we are going to check whether codepen website supports to add external stylesheet css in blogger or not.
use-codepen-for-adding-css-and-using-as-external stylesheet-to-blogger-template

  • For testing , i am using slick slider and going to add its css and js files in codepen website.
  • For a perfect and simple slick slider i choose the code from jsfiddle website.jsfiddle[dot]net/hibbard_eu/5ox31m2a.
The ouput of the slider is

slick-slider-output

  • Goto kenwheeler[dot]github[dot]io/slick/ website to download the file
  • slick-getitnow
  • It will autoscroll and shows the download link.Click the button and download the slick zip files
slick-downloadnow
  • Extract the zip file.
  • Open the slick folder.
  • You can see another slick folder.
  • Goto that folder and there you can see the css and js file.
slick-css-js-files
  • Similarly in kenwheeler[dot]github[dot]io/slick/ . We need to copy its css and js codes.After that it will be added in codepen.
css-and-js-codes-slick-slider-sample
  • Totally we need to add 3 css and 2 js files in codepen.
  • Now login to your codepen website.
  • Click Create. And choose New Pen.
create-new-pen-codepen
  • Paste one of css code copied from slick folder/jsfiddle website.
paste-and-save-copied-css-code-in-codepen
  • Now you will can see an link created in the url of the browser.Add .css at the end of the link.Copy the link and save it in notepad.
save-css-link-created-in-codepen

  • Similarly do it for other css and js files.Note that we need to add .js for the javascript link created in codepen.
  • Now goto Blogger.Choose Themes. Click Edit Html.
blogger-themes-and-edit-html-option
  • Just below head tag add the css link with the stylesheet syntax.One code was given below.
start tag link href='codepen[dot]io/kaviyarasu34/pen/rrYOOP.css' rel='stylesheet' type='text/css' end tag
  • After pasting all css codes , now we need to Paste the jquery script from cdnjs.Check the below image.
  • Note that Paste the jquery code just above </body> tag.
add-javascript-code-blogger
  • Now Save the theme.
  • Now copy the HTML code from Jsfiddle website .
copy-html-code
  • And return to blogger.Choose Layout.
blogger-layout
  • Click Add a gadget.
add-a-gadget-blogger
  • Choose html/javascript.
add-html-or-javascript-blogger
  • Paste the html code.And save it.
Now view blog.And yes codepen supports as external stylesheet for css/js for blogger templates.


Next Post Newer Post Previous Post Older Post Home

4 comments :

  1. Thanks for sharing this informative blog with us.If you are looking for Motion Graphic Calgary,then you can contact danteart for further details.

    ReplyDelete
  2. I find this article useful. Kindly share more such articles so that I can get better insight.
    Minneapolis web design company

    ReplyDelete
    Replies
    1. IEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. A IEEE Domain project Final Year Projects for CSE system development life cycle is essentially a phased project model that defines the organizational constraints of a large-scale systems project.

      IT Company Employess Productivity usually increases when a company implements corporate training courses on latest technologies.
      corporate training in chennai
      It Companies need of Corporate training programme arises due to improvement in technology, need for getting better performance or as part of professional development. corporate training companies in chennai Corporate Training refers to a system of professional development activities provided to educate employees.
      corporate training companies in india

      Delete
  3. These is informative content. Want to show you another useful article
    https://cgifurniture.com/custom-3d-modeling-5-benefits/

    ReplyDelete

Powered by Blogger.