Viralscripts
                                 Viral Scripts
Viralscripts
Viralscripts
Empowering Your Mind, One Script at a Time.
Categories

Blog Full Detail

Blog website responsive code ?

Here is a basic responsive code for a blog website:

HTML

andlt;xmpandgt;

andlt;!DOCTYPE htmlandgt;
andlt;html lang=andquot;enandquot;andgt;
andlt;headandgt;
  andlt;meta charset=andquot;UTF-8andquot;andgt;
  andlt;meta name=andquot;viewportandquot; content=andquot;width=device-width, initial-scale=1.0andquot;andgt;
  andlt;titleandgt;My Blogandlt;/titleandgt;
  andlt;link rel=andquot;stylesheetandquot; href=andquot;style.cssandquot;andgt;
andlt;/headandgt;
andlt;bodyandgt;
  andlt;headerandgt;
    andlt;h1andgt;My Blogandlt;/h1andgt;
    andlt;navandgt;
      andlt;a href=andquot;#andquot;andgt;Homeandlt;/aandgt;
      andlt;a href=andquot;#andquot;andgt;Aboutandlt;/aandgt;
      andlt;a href=andquot;#andquot;andgt;Contactandlt;/aandgt;
    andlt;/navandgt;
  andlt;/headerandgt;

  andlt;mainandgt;
    andlt;section class=andquot;blog-postsandquot;andgt;
      andlt;h2andgt;Latest Postsandlt;/h2andgt;
      andlt;article class=andquot;blog-postandquot;andgt;
        andlt;h3andgt;andlt;a href=andquot;#andquot;andgt;My First Blog Postandlt;/aandgt;andlt;/h3andgt;
        andlt;pandgt;This is my first blog post. Iand#39;m excited to share my thoughts and ideas with the world.andlt;/pandgt;
      andlt;/articleandgt;
      andlt;article class=andquot;blog-postandquot;andgt;
        andlt;h3andgt;andlt;a href=andquot;#andquot;andgt;My Second Blog Postandlt;/aandgt;andlt;/h3andgt;
        andlt;pandgt;This is my second blog post. Iand#39;m still learning, but Iand#39;m enjoying the process.andlt;/pandgt;
      andlt;/articleandgt;
    andlt;/sectionandgt;

    andlt;section class=andquot;sidebarandquot;andgt;
      andlt;h3andgt;Categoriesandlt;/h3andgt;
      andlt;ulandgt;
        andlt;liandgt;andlt;a href=andquot;#andquot;andgt;Technologyandlt;/aandgt;andlt;/liandgt;
        andlt;liandgt;andlt;a href=andquot;#andquot;andgt;Travelandlt;/aandgt;andlt;/liandgt;
        andlt;liandgt;andlt;a href=andquot;#andquot;andgt;Foodandlt;/aandgt;andlt;/liandgt;
      andlt;/ulandgt;

      andlt;h3andgt;Popular Postsandlt;/h3andgt;
      andlt;ulandgt;
        andlt;liandgt;andlt;a href=andquot;#andquot;andgt;My First Blog Postandlt;/aandgt;andlt;/liandgt;
        andlt;liandgt;andlt;a href=andquot;#andquot;andgt;My Second Blog Postandlt;/aandgt;andlt;/liandgt;
      andlt;/ulandgt;
    andlt;/sectionandgt;
  andlt;/mainandgt;

  andlt;footerandgt;
    andlt;pandgt;Copyright andamp;copy; 2023 My Blogandlt;/pandgt;
  andlt;/footerandgt;
andlt;/bodyandgt;
andlt;/htmlandgt;

andlt;/xmpandgt;

content_copy

And here is a basic CSS code for making the website responsive:

CSS

andlt;xmpandgt;

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;
}

nav {
  float: right;
}

main {
  margin-top: 50px;
  padding: 20px;
}

.blog-posts {
  float: left;
  width: 75%;
}

.sidebar {
  float: right;
  width: 25%;
}

@media (max-width: 768px) {
  .blog-posts,
  .sidebar {
    float: none;
    width: 100%;
  }
}

andlt;/xmpandgt;

content_copy

This is just a basic example, of course. You can customize the code to match your specific needs and design.

Here are some additional tips for making a responsive blog website:

  • Use a fluid grid layout. This means that your content will automatically resize to fit the screen size, regardless of the device.
  • Use media queries to target specific screen sizes and devices. This allows you to customize your layout and design for different devices.
  • Use flexible images. This means that your images will scale to fit the screen size, without breaking the layout of your website.
  • Test your website on different devices and screen sizes to make sure it looks good and functions properly.