Cara Membuat Tampilan Blogger Responsive dengan Bootstrap

Untuk membuat tampilan responsive pada Blogger dengan Bootsrap seperti judul postingan, pertama-tama yang di lakukan, copy di bawah ini, buka template edit HTML lalu pastekan di bawah head lalu save :
<meta charset='utf-8'/> <meta content='IE=edge' http-equiv='X-UA-Compatible'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta content='' name='description'/> <meta content='' name='author'/> <link href='../../favicon.ico' rel='icon'/> <title>setiarsosarjono blogspot</title> <!-- Bootstrap core CSS --> <link href='../../dist/css/bootstrap.min.css' rel='stylesheet'/> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href='../../assets/css/ie10-viewport-bug-workaround.css' rel='stylesheet'/> <!-- Custom styles for this template --> <link href='blog.css' rel='stylesheet'/> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src='../../assets/js/ie-emulation-modes-warning.js'/> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->

Langkah selanjutnya copy di bawah ini :

<style> /* * Globals */ body { font-family: Georgia, "Times New Roman", Times, serif; color: #555; text-align:justify; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #000; } /* * Override Bootstrap's default container. */ @media (min-width: 1200px) { .container { width: 970px; } } /* * Masthead for nav */ .blog-masthead { background-color: #bbbbcc; -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); } /* Nav links */ .blog-nav-item { position: relative; display: inline-block; padding: 10px; font-weight: 500; color: #eee; } .blog-nav-item:hover, .blog-nav-item:focus { color: #fff; text-decoration: none; } /* Active state gets a caret at the bottom */ .blog-nav .active { color: #fff; } .blog-nav .active:after { position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin-left: -5px; vertical-align: middle; content: " "; border-right: 5px solid transparent; border-bottom: 5px solid; border-left: 5px solid transparent; } /* * Blog name and description */ .blog-header { padding-top: 10px; padding-bottom: 10px; } .blog-title { margin-top: 30px; margin-bottom: 0; font-size: 60px; font-weight: normal; } .blog-description { font-size: 20px; color: #eee; } /* * Main column and sidebar layout */ .blog-main { font-size: 18px; line-height: 1.5; } /* Sidebar modules for boxing content */ .sidebar-module { padding: 15px; margin: 0 -15px 15px; } .sidebar-module-inset { padding: 15px; background-color: #eee; border-radius: 4px; } .sidebar-module-inset p:last-child, .sidebar-module-inset ul:last-child, .sidebar-module-inset ol:last-child { margin-bottom: 0; } /* Pagination */ .pager { margin-bottom: 60px; text-align: left; } .pager > li > a { width: 140px; padding: 10px 20px; text-align: center; border-radius: 30px; } /* * Blog posts */ .blog-post { margin-bottom: 60px; } .blog-post-title { margin-bottom: 5px; font-size: 40px; } .blog-post-meta { margin-bottom: 20px; color: #222; } /* * Footer */ .blog-footer { padding: 40px 0; color: #fff; text-align: center; background-color: #484848; border-top: 1px solid #555; } .blog-footer p:last-child { margin-bottom: 0; } </style> <style type='text/css'> @media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important} body .navbar {height: 0!important;} .footer-inner {padding: 30px 0px!important;} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>
Jika sudah, lalu buka template edit HTML, cari code /head dan letakkan di atasnya, kemudian di save.

Sampai di sini sudah bisa di coba dulu, sudah respinsive atau belum. Mobile customnya di matikan saja. Jika tampilannya sudah responsive, tinggal edit font dan background sesuai selera Anda.

Untuk menambah menu navigasi copy di bawah ini :
<div class="blog-masthead"> <div class="container"> <nav class="blog-nav"> <a class="blog-nav-item active" href="#">Home</a> <a class="blog-nav-item" href="#">New features</a> <a class="blog-nav-item" href="#">Press</a> <a class="blog-nav-item" href="#">New hires</a> <a class="blog-nav-item" href="#">About</a> </nav> </div> </div>
Buka template edit HTML, cari code /header lalu letakkan tepat di bawahnya.Linknya sesuaikan dengan link menu navigasi blog Anda.