Integrating Responsive CSS Framework To Blogger

Responsive CSS Frameworks
I am ready to makeover my blog template by using a CSS framework. I have studied some popular CSS framework such as Foundation, Bootstrap, Pure.css, W3.css, and so on, it is included Materialize. And I admit that every CSS framework has its own characteristics and uniqueness.

For example, Foundation and Bootstrap can give us more components, more advance in responsive CSS framework, and allow to build mobile apps and websites faster.

Then, if you are a loyal user of Pure.css and W3.css, I must admit that I can dead by the cuteness of Pure.css. It is also clear, clean, simple, and flat. And, I realize that W3.css also has advantages in terms easy to understand by a beginner like me.

But, my heart feel into Materialize. I know, it is a new front-end framework which based on material design, but Materialize is attractive and eye-catchy. Probably, caused by the flashy pink color.

Aha! Just get ready to start makeover our Blogger Template with Materialize, one of the responsive CSS frameworks.
Responsive CSS Framework Materialize

The Installation of Materialize

Since we will create a template Blogspot, then we do not need to download the css file that has been provided by Materialize. For the first step, we can copy the source code below, and place it after the tag <head>, or before the tag </head> :



Furthermore, we also have to put the following code below after the tag <body>, or before the tag </body> for the second step:



The third step, make sure that the CSS of Materialize is installed well, by opening the CSS Materialize that you can find at cdnjs. Select all the codes, then put after <b:skin><![CDATA[    or before    ]]></b:skin>.

The Result

Alhamdulillah, although I only by put the code the above, the blog design seems better than before.
Blogger template result
How about yours?

Tidak ada komentar:

Posting Komentar

Posting Lebih Baru Posting Lama Beranda