The Journalist" is a uncomplicated blogger template built on the bootstrap framework. It features a fully responsive ii column layout that adjusts perfectly to all covert sizes.
This quick loading subject is gratis together with comes pre-installed amongst a uncomplicated text-based related posts together with social sharing widget. It is ideal for journalists, writers together with bloggers alike.

DemoDownload

Profile Box

To add together details close yourself inwards the Profile box on the sidebar, honor the next code inwards the template together with supersede the data inwards blueish amongst relevant details close yourself.

<div class='profile-box'>  <!-- Insert Link of your Profile Pic --> <img class='img-responsive pimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqUPi9uas6T886eGG81Poyu61xcjB6fzLPisI8tsHRNsipEv1msFsKp2lMDnbKqkWMju7CbDsoGkLBoEnwE3xHXja1VUy8DvEvgiLk9RuetZLlE_SeCi1ttvrhnFMbv5NYzlTLDW9s9aI/s320/default-avatar.png'/>  <!-- Add Name Here --> <h4>Wajahat Razzaq</h4>  <!-- A job About Yourself --> <span>Writer, journalist together with a budding academic. I write for the Huffington post.</span>  </div> 

Social Links

Link the social icons inwards the sidebar to your social profiles yesteryear modifying the next code inwards your template. Simply alter the code inwards blueish amongst relevant links to your social accounts.

<div class="contact-box">  <a href="mailto:wajahat-xyz123@gmail.com?Subject=Hey!" target="_top"> <i class="fa fa-envelope-o" rel="tooltip" title="Top 2015 The Journalist: Influenza A virus subtype H5N1 Simple Responsive Template for Blogger  Free Download Now"color: #3d85c6;">wajahat-xyz123@gmail.com"></i> </a>  <a href="https://twitter.com/wajahat-xyz" target="_blank"> <i class="fa fa-twitter"></i> </a>  <a href="https://facebook.com/wajahat-xyz" target="_blank"> <i class="fa fa-facebook"></i> </a>  <a href="https://plus.google.com/wajahat-xyz" target="_blank"> <i class="fa fa-google-plus"></i> </a>  <a href="https://youtube.com/wajahat-xyz" target="_blank"> <i class="fa fa-youtube-play" rel="tooltip" title="Top 2015 The Journalist: Influenza A virus subtype H5N1 Simple Responsive Template for Blogger  Free Download Now"></i> </a>  </div> 

Rich Pins: Show Post Title, Prices, Ratings together with More On Pinterest

Responsive themes together with templates allow users to attain websites together with blogs that await bully on whatever mobile device. These themes are designed to resize together with adjust properly to all measure mobile device hide sizes (PCs, Tablets together with Mobile Phones). Given the high need of responsive design, to a greater extent than together with to a greater extent than developers are dedicated on developing such templates.

Here are a publish of splendid novel templates that yous tin give the sack download for costless inwards 2014 if you're only starting on a weblog or moving your existing site to a responsive design:

Portfolio Blog

NotePlus Template is a beautiful, costless together with fast loading blogger template attain using Bootstrap. It features a 2 column layout alongside the sidebar on the right.



Details

Portfolio Blog

Portfolio Blog: As the cite suggests, this is a portfolio manner template alongside an elegant together with attain clean blueprint powered past times the Isotope jQuery plugin. It features a total width layout alongside no sidebars together with supports iv widget sections inwards the footer.


Demo / Download

Blog Safari

Influenza A virus subtype H5N1 attain clean magazine manner subject alongside a fluid width/responsive layout designed to adjust good on all hide sizes. It comes alongside pre-installed Blogger Comments together with Google+ Comments arrangement which yous tin give the sack purpose alternately. An writer bio box is displayed at the cease of every postal service - Influenza A virus subtype H5N1 characteristic preferred for multi-authored blogs.



Demo / Download

Gadget Mag

Gadget Mag is magazine manner blogger template alongside a Responsive blueprint that adjusts good on all mutual hide sizes. It features a iii column layout alongside powered alongside jQuery together with CSS3. It comes alongside enough of pre-installed widgets including thumbnail based featured together with pop posts.



Demo / Download

Perk Misty

Perk Misty is about other splendid responsive blogger subject ideal for News/Magazine sites, portfolio together with fifty-fifty your personal blog. It features a iii column layout together with comes alongside a pre-installed, customizable recent postal service widget. Apart from that, the template is totally Adsense ready.



Demo / Download

Docorus

Docorus is pretty-much adapted from the Hueman subject available for wordpress. It features a iii column, total width, responsive magazine-style design. Docurus pre-includes related, pop postal service widgets, writer bio box together with and picture slider on the homepage. No thing which niche you're covering, this is a bully template yous tin give the sack have.



Demo / Download

Foodie

Foodie, equally the cite suggests is intended for purpose on blogs roofing nutrient recipies, cooking tips ets. This is yet about other subject alongside a magazine manner design. Like all other templates here, it adjusts to all major hide sizes (desktop, pads together with mobile phones) together with is SEO friendly.



Demo / Download

Enpine

Enpine is a large width template alongside no sidebar on the dwelling household page, the postal service pages characteristic a correct sidebar alongside a pre-installed pop postal service plugin. The template comes alongside a viscous header for slowly navigation. An writer box linked to your Google+ trouble concern human relationship is displayed at the cease of every postal service pages.



Demo / Download

Plazify

Plazify is a fully responsive, quick loading magazine-style subject alongside 2 sidebars on the correct together with includes a slider on the homepage. It is available equally both, costless together with paid. However, the costless version does non allow for whatever customization.



Demo / Download

Sleekify

Sleekify, about other cool magazine subject alongside a sleek look. It features a 2 column layout alongside a correct sidebar. Influenza A virus subtype H5N1 $19.99 paid version of subject allows for customization, footer credit removal together with support.



Demo / Download

BlackPress

Blackpress past times Templateify is a 100% responsive portfolio-style template for your blogspot blogs. It is retina prepare together with offers is a super attain clean await alongside a 2 column (Right-sidebar) layout. The template is costless for use, withal if yous ask to customize it, at that spot is a $19.99 licensed version only for that.



Demo / Download

Portify

If yous are looking for a clean, minimalistic blogger template alongside a responsive layout, Portify is 1 amazing template yous tin give the sack consider. It features a left sidebar together with a widget surface area on the top. Like all other tempelateify themes covered here, a $19.99 version of this subject allows for customization.



Demo / Download

Wedding Magazine

Wedding Magazine past times 'Templateism' features a real attain clean magazine manner blueprint alongside large picture banner on the homepage. Its a 2 column subject alongside iv a column footer. The subject is 100% responsive together with adjusts good on all hide sizes. Pre-includes related together with pop postal service widgets.



Demo / Download

Gagism

If yous intend to run a gag, meme or whatever picture site on blogspot, Gagism past times Tempelateism is the best subject you'll find. It features related items below every post, rating system, social buttons together with lots of other goodies. Plus at that spot is a Re-blog Button that allows your visitors to percentage your gags on their blogs spell giving a backlink to your site. This volition brand your gag larn viral across dissimilar blogs.



Demo / Download

Droid Pluss

Simple, elegant together with 100% responsive. Droid Pluss is the perfect alternative for a technology weblog or tidings site. The subject includes a colored sidebar on the right, related postal service plugin, social sharing buttons together with more.



Demo / Download

Belastic

Belastic is about other nicely designed template for desktop together with all mobile devices. It offers unlimited color schemes, thumbnail based postal service summaries, drib downwards navigation menu, social sharing widget together with more.



Demo / Download

Arvo

Arvo is a 2 column subject alongside a grayish background. Its a fast loading, SEO optimized blogger subject alongside pair of handy pre-installed widgets together with offers slowly customization.

.

Good Labal Post New Free Responsive Blogger Templates 2014 [Download Now]

Kotak Pencarian Simple Responsive Keren untuk Blogger - Stylish Search Boxes Bootstrap Style
 

Widget kotak pencarian yakni fitur Blogger untuk memudahkan pengunjung mencari isu yang dibutuhkan.

 

Semua website ternama memakai widget ini untuk memudahkan user mencari data.

Blogger sudah menyediakan widget ini. Tinggal pasang di sidebar.

Namun, tampilan atau desainnya sederhana. Berikut ini beberapa aba-aba kotak pencarian yang simple tapi keren, ala template blog Bootstrap.

 

Kelebihan kotak pencarian ini, selain simple dan keren, juga responsive (mobile friendly).

 

Cara Memasang Kotak Pencarian (Search Box) 

1. Layout/Tata Letak > klik Add a Gadget

2. Judul kosongkan

3. Masukkan (Copas) salah satu aba-aba kotak pencarian di bawah ini.

Blogger Search Box Widget Style 1:

 

<style> #search-box-danger {margin:0 auto;height: 36px;position:relative;width:100%;float:none;} #bo-search-box{padding:0;background:#fff;height: 35px;position:relative;line-height:1.5em;font-weight:normal;margin:0;border-radius:5px;border:1px solid #ddd;} .bo-sb-buttonwrap {border-top-right-radius: 5px;border: none;cursor: pointer;position: absolute;height: 35px;right: 0;border-bottom-right-radius: 5px;width: 14%;display: block;top: 0;background: #d9534f;} .bo-sb-buttonwrap:hover {background-color: #c9302c;} .bo-sb-submit {height: 35px;right: 50%;background: transparent;position: absolute;width: 35px;cursor: pointer;margin-right: -17.5px;margin-top: -17.5px;top: 50%;border: none;} .bo-sb-submit:after {position: absolute;border: 2px solid white;left: 10px;height: 8px;content: '';top: 9px;width: 8px;border-radius: 50%;box-sizing: content-box;} .bo-sb-submit:before {width: 2px;position: absolute;transform: rotate(-35deg);left: 21px;content: '';top: 19px;height: 8px;background: white;} #bo-sb-input {outline: none;border-top-left-radius: 5px;padding: 0 15px;transition: all 0.5s;width: 84%;border: none;position: absolute;height: 35px;background-color: #fff;color: #333;border-bottom-left-radius: 5px;} #bo-sb-input:focus {outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id="search-box-danger"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div>

Blogger Search Box Widget Style 2:

<style> #search-box-info {position:relative;margin:0 auto;width:100%;height: 36px;float:none;} #bo-search-box{height: 35px;border:1px solid #ddd;line-height:1.5em;margin:0;font-weight:normal;padding:0;border-radius:5px;position:relative;background:#fff;} .bo-sb-buttonwrap {border-bottom-right-radius: 5px;width: 14%;background-color: #5bc0de;position: absolute;border: none;border-top-right-radius: 5px;right: 0;cursor: pointer;display: block;height: 35px;top: 0;} .bo-sb-buttonwrap:hover {background-color: #31b0d5;} .bo-sb-submit {background: transparent;top: 50%;cursor: pointer;right: 50%;height: 35px;position: absolute;margin-top: -17.5px;width: 35px;border: none;margin-right: -17.5px;} .bo-sb-submit:after {border-radius: 50%;top: 9px;position: absolute;height: 8px;content: '';width: 8px;border: 2px solid white;left: 10px;box-sizing: content-box;} .bo-sb-submit:before {transform: rotate(-35deg);position: absolute;content: '';width: 2px;left: 21px;height: 8px;background: white;top: 19px;} #bo-sb-input {width: 84%;border: none;border-bottom-left-radius: 5px;position: absolute;padding: 0 15px;height: 35px;color: #333;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;} #bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);border-color: #66afe9;} </style> <div id="search-box-info"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div>

Blogger Search Box Widget Style 3:

 

<style> #search-box-primary {float:none;position:relative;height: 36px;width:100%;margin:0 auto;} #bo-search-box{margin:0;padding:0;position:relative;background:#fff;height: 35px;border:1px solid #ddd;line-height:1.5em;border-radius:5px;font-weight:normal;} .bo-sb-buttonwrap {cursor: pointer;height: 35px;position: absolute;border-bottom-right-radius: 5px;right: 0;border: none;width: 14%;background-color: #337ab7;top: 0;border-top-right-radius: 5px;display: block;} .bo-sb-buttonwrap:hover {background-color: #286090;} .bo-sb-submit {cursor: pointer;margin-top: -17.5px;position: absolute;top: 50%;background: transparent;right: 50%;width: 35px;height: 35px;border: none;margin-right: -17.5px;} .bo-sb-submit:after {width: 8px;left: 10px;content: '';top: 9px;height: 8px;border-radius: 50%;position: absolute;box-sizing: content-box;border: 2px solid white;} .bo-sb-submit:before {transform: rotate(-35deg);height: 8px;background: white;position: absolute;width: 2px;top: 19px;content: '';left: 21px;} #bo-sb-input {border: none;width: 84%;color: #333;padding: 0 15px; height: 35px;position: absolute;border-bottom-left-radius: 5px;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;} #bo-sb-input:focus {border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;} </style> <div id="search-box-primary"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div>

Blogger Search Box Widget Style 4:

 

<style> #search-box-success {height: 36px;float:none;position:relative;width:100%;margin:0 auto;} #bo-search-box{background:#fff;line-height:1.5em;height: 35px;border-radius:5px;border:1px solid #ddd;margin:0;padding:0;font-weight:normal;position:relative;} .bo-sb-buttonwrap {background-color: #5cb85c;display: block;border: none;border-top-right-radius: 5px;height: 35px;height: 35px;position: absolute;right: 0;border-bottom-right-radius: 5px;width: 14%;top: 0;cursor: pointer;} .bo-sb-buttonwrap:hover {background-color: #449d44;} .bo-sb-submit {position: absolute;margin-right: -17.5px;right: 50%;margin-top: -17.5px;cursor: pointer;top: 50%;height: 35px;width: 35px;background: transparent;border: none;} .bo-sb-submit:after {top: 9px;border-radius: 50%;content: '';height: 8px;width: 8px;border: 2px solid white;left: 10px;position: absolute;box-sizing: content-box;} .bo-sb-submit:before {width: 2px;top: 19px;height: 8px;position: absolute;background: white;left: 21px;content: '';transform: rotate(-35deg);} #bo-sb-input {padding: 0 15px;background-color: #fff;border-bottom-left-radius: 5px;height: 35px;transition: all 0.5s;color: #333;outline: none;width: 84%;border: none;position: absolute;border-top-left-radius: 5px;} #bo-sb-input:focus {box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id="search-box-success"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div>

Blogger Search Box Widget Style 5:

 

<style> #search-box-default {width:100%;position:relative;margin:0 auto;float:none;height: 36px;} #bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;} .bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color: #fff;border: none;width: 14%;display: block;top: 0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;} .bo-sb-buttonwrap:hover {background-color: #e6e6e6;} .bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;} .bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: '';position: absolute;border: 2px solid black;box-sizing: content-box;top: 9px;} .bo-sb-submit:before {content: '';background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;} #bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;} #bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id="search-box-default"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div>

Yang terakhir ini dipasang di blog ini. Simple, clean, elegant. Itu beliau lima aba-aba kotak pencaria simple keren untuk dipasang di sidebar blog. Wasalam.

Sumber

Cara Membuat Template Blog Sendiri di Blogger.

Sebelumnya aku sudah share cara menciptakan template blog dengan Bootstrap. Kali ini cara menciptakan template blog biasa.

Membuat Template Blog sendiri akan menimbulkan template Anda bebas link credit di footer.

Selain itu, desainnya dapat diubahsuaikan dengan selera Anda sendiri, namun tetap mengacu pada Pengalaman Pengguna (User Experience/UX) yang suka blog ringan (fast loading), ramah seluler (mobile-friendly, responsive), dan bersih.

Kode template blogger terdiri dari tiga jenis kode:

1. CSS
2. HTML
3. Javascript

Struktur dasar template blog menyerupai gambar di bawah ini, terdiri dari:

1. Body
2. Header
3. Content/Main
4. Sidebar
5. Footer

Body ialah area template. Lebar standar 980 Pixel. Nama arahan CSS-nya di template  body juga, misalnya: body {background:#fff;font:normal 14px Arial, Sans-serif;color:#333}

Demikian pula nama arahan header, content, sidebar, dan footer diawali dengan nama arahan yang sama, namun biasanya ditambah wrapper, menjadi header-wrapper, content-wrapper atau main-wrapper, sidebar-wrapper, dan footer-wrapper.

Di arahan HTML, nanti nya arahan CSS itu dipanggil dengan arahan <body>, <div id='header-wrapper'>, dan seterusnya.

Banyak blogger yang sudah menyebarkan gratis arahan template dasar blog. Salah satunya Kode Template Dasar Valid HTML5 dari blogger Dua Rupa.

Kode Template Dasar Valid HTML5 yang dibagikan itu sebagai berikut.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> &lt;head&gt; <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/> <link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if> <b:if cond='data:blog.metaDescription != &quot;&quot;'> <meta expr:content='data:blog.metaDescription' name='description'/> <b:else/> <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/> </b:if> </b:if>  <!-- SEO Title Tag --> <b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> - <data:blog.title/></title></b:if> <b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if> <b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if> <b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if> <b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>  &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[ ]]></b:skin>  <style type='text/css'> /* RESET */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;} blockquote:before, blockquote:after,q:before, q:after {content: &#8221;;content: none;} blockquote, q {quotes: none;} :focus {outline: 0;} .clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;} body {background-color: #fff;background-position: center center;}  a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;} a:hover {color: #4d4544;} a {color: #3094db;}  #wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;} #header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;} .header {text-align:center} #content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;} #sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;} #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}  .clearfix:after {visibility: hidden; display: block; font-size: 0; content: &quot; &quot;; clear: both; height: 0;}  #blog-pager-newer-link {float: left;} #blog-pager-older-link {float: right;} #blog-pager {text-align: center;margin: 20px 0px 0px 1px;}  .status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative} .status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative} .status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1} .status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4} .status-msg-hidden{visibility:hidden;padding:.3em 0} .status-msg-wrap a{padding-left:.4em;text-decoration:underline} </style>  &lt;!--<head/>--&gt; <body> <div id='wrapper'> <header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget> </b:section> </header> <div class='clearfix'/> <aside id='content-wrapper'> <b:section class='main' id='main'>   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget> </b:section> </aside> <aside id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside> <div class='clearfix'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'></b:section> </footer> </div> &lt;!--</body>--&gt; </HTML> 

Cara Membuat Template Blog Sendiri di Blogger

Kita dapat gunkana arahan template dasar di atas untuk menciptakan template blog sendiri. Ikuti langkah berikut ini:

1. Buat Blog Baru.
2. Pilih Template Simple atau mana saja.
3. Setelah blog jadi, klik Theme > Edit HTML

4. Hapus SEMUA arahan yang ada (Ctrl+A > tekan Delete)
5. Copas arahan template dasar blog di atas.
6. Save Template.

Ini hasil atau tampilan blog awal dengan arahan template di atas:

 Agar sidebarnya tidak kosong:
1. Klik Layout
2.  Tambahkan widget Popular Posts dan Label

- Klik Add a Gadget di kolom Sidebar > pilih Popular Posts
- Klik Add a Gadget di kolom Sidebar > pilih Labels

sehingga tampilannya menyerupai ini:

Sampai di sini dulu Cara Membuat Template Blog Sendiri di Blogger. Berikutnya kita akan edit kembali dengan:

• Mengubah jenis huruf
• Mengatur ukuran lebar template
• Menambahkan Auto Read More
• Memasang Related Posts
• Menambahkan Breadcrumbs
• Membuatnya makin simple, bersih, dan kian responsive.

Cara Membuat Template Blog Sendiri dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap. Responsive 100% dan Fast Loading. Template blogger starter-simple sederhana pisan. Tinggal dipoles di CSS.

Apa Itu Bootstrap?

Sebelum ke teknis cara menciptakan template blogger sendiri dengan bootstrap, kita kenali dulu apa itu bootstrap.

Bootstrap yaitu produk Twitter untuk membangun situs web atau blog berbasis HTML dan CSS.

• Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates.
• Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. (Get Bootstrap)

Menurut Wikipedia, Twitter Bootstrap yaitu sebuah alat bantu untuk menciptakan sebuah tampilan halaman website yang sanggup mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.

Sesuai namanya, website yang dibentuk dengan alat bantu ini mempunyai tampilan halaman yang sama / menyerupai dengan tampilan halaman Twitter atau desainer juga sanggup mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang sanggup menciptakan layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun memakai JavaScript.  
Template blog yang memakai Bootstrap dijamin Mobile Friendly alias Responsive alasannya orientasi kodenya memang "mobile first".

Cara Membuat Template Blog Sendiri dengan Bootstrap

Berikut ini cara Membuat Template Blog Sendiri dengan Bootstrap yang layak Anda coba. Jika kesannya bagus, sanggup Anda jual tuh templatenya!

Tahapan Membuat Template Blog Sendiri dengan Bootstrap
'
1. Buat Blog Baru di Blogger
2. Klik Template > Edit HTML
3. Hapus SEMUA arahan yang ada, lalu...
4. Copas arahan berikut ini!

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta expr:content='data:blog.metaDescription' name='description'/>

<b:skin><![CDATA[
/*
Name: Nama Template
Author: Nama Desainer
URL: Url Blog Desainer
*/

]]></b:skin> <!-- End Style -->

</head>

<body>
<!-- Header -->

<div class='bs-example'>
<!-- Blog Navigation Start -->
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>
<img alt='Brand' src='Logo kau / atau sanggup diganti dengan goresan pena disini'/>
</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</li>
<li><a href='/?m=1'>Mobile View</a></li>
</ul>
<form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + &quot;search&quot;' role='search'>
<div class='form-group'>
<input class='form-control' name='q' placeholder='Search' type='text'/>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- Blog Navigation End -->

<div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start -->

<div class='blog-header'> <!-- Blog Header Start -->
<div class='container'>
<b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>
</div>

<div class='row'>
<div class='col-md-8 blog-main'> <!-- Blog Main Wrapper Start -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<aside class='col-xs-4 blog-sidebar'> <!-- Blog Sidebar Wrapper Start -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
</b:section>
</aside> <!-- Blog Sidebar Wrapper End -->
</div> <!-- Blog Row End -->

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'/>

</div> <!-- Blog Content Wrapper End -->

<footer class='blog-footer'> <!-- Blog Footer Start -->
<p>Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.</p>
<p>
<a href='#'>Back to top</a>
</p>
</footer> <!-- Blog Footer End -->

</body> <!-- End Body -->

</HTML>

5. Pasang Bootstrap

5.1 Pasang di atas arahan </head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>

5.2 Pasang arahan berikut ini di atas arahan </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type='text/javascript'/>

6.  Copas arahan berikut ini di atas kode </head>

<style type='text/css'>

/*Navigation*/
.navbar {
    border-radius:0;
}
/*Nav Brand*/
.navbar-brand img {
    width: 32px;
    height: 32px;
}
.navbar-brand {
    padding: 10px 20px;
}
/*Blog Wrapper*/
.blog-header {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: -20px;
}
.blog-main {
    font-size: 18px;
    line-height: 1.5;
}
.blog-sidebar {
    margin:0;
}
/*Headings*/
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: #333;
}
/*Posts*/
.post .post-title {
    margin-bottom:0;
}
.post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    font-size:15px;
}
/*Post Image*/
.post table.tr-caption-container td {
    border:none;
    padding:8px;
}
.post table.tr-caption-container, .post table.tr-caption-container img, .post img {
    max-width:100%;
    height:auto;
}
.post td.tr-caption {
    color: #333;
    font-size: 80%;
    padding: 8px 8px 8px !important;
    background-color: #eee;
    font-style: italic;
}
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
table.tr-caption-container {
    padding:4px;
    margin-bottom:.5em
}
td.tr-caption {
    font-size:80%
}
.post table caption {
    border:none;
    font-style:italic;
}
.post table caption {
    border:1px solid #d8dde1;
    padding:.2em .5em;
    text-align:left;
    vertical-align:top;
}
/*Post Footer*/
.post-footer {
    margin:.75em 0;
    letter-spacing:.1em;
    line-height:1.4em;
    font-size: 12px;
}
/*Post Meta*/
.blog-post-meta {
    margin: 10px 0 5px;
    color: #999;
    font-size: 15px;
}
.blog-post-meta a {
    color: #999;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-post-meta a:hover {
    border-bottom: 1px solid #23527c;
}
.timestamp-link {
    cursor:help;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.timestamp-link:hover {
    border-bottom: 1px solid #23527c;
}
/*Breadcrumbs and Date Header Font-size*/
.breadcrumb, .date-header {
    font-size: 13px;
}
/*SideBar*/
.sidebar .widget ul, .sidebar .widget ol {
    margin-top:0
}
.sidebar h2, .sidebar h3, .footer h2 {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    position: relative;
    padding: 8px 15px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
/*Popular Posts*/
.popular-posts ul, .popular-posts li {
    margin:0;
    padding:0;
    list-style:none
}
.popular-posts li {
    margin-bottom:.6em
}
.PopularPosts .item-snippet {
    font-size:12px;
    color:#333;
    max-height:45px;
    overflow:hidden;
}
.PopularPosts .item-thumbnail {
    transition: all 0.15s ease-in-out 0s;
    margin:0 8px 0 0;
    display:inline;
    opacity:10;
}
.PopularPosts .item-thumbnail a img {
    height:69px;
    width:69px;
    display:block;
    margin:0;
    padding:2px;
    border:1px solid #e8e8e8 !important;
}
.PopularPosts .item-thumbnail a img:hover {
    background:#00AFAF;
    border:1px solid #00AFAF !important;
}
.PopularPosts .widget-content ul li {
    padding:3px 0px !important;
    border-bottom:1px solid #e2e2e2;
}
/*Footer*/
.blog-footer {
    padding: 40px 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
}
.blog-footer a {
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-footer a:hover {
    border-bottom: 1px solid #23527c;
}
/*Comments*/
#comments h4 {
    margin:1em 0;
    font-weight:bold;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
}
#comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
}
#comments-block .comment-author {
    margin:.5em 0;
}
#comments-block .comment-body {
    margin:.25em 0 0;
}
#comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
}
#comments-block .comment-body p {
    margin:0 0 .75em;
}
.deleted-comment {
    font-style:italic;
    color:gray;
}
.feed-links {
    display:none;
}
/*Responsive*/

/*Override Bootstrap's default container.*/
@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}
@media screen and (max-width: 960px) {
    .blog-main, .blog-sidebar {
        float: none;
        display: block;
        width: auto;
    }
}
</style>

7. Save Template! 

Beres! Anda tinggal lengkapi dengan widget lainnya, seperti: Memasang arahan Auto Read More semoga tampilan goresan pena halaman depan berupa ringkasan, tidak full artikel, dan Menghapus Teks Subscribe to Atom.

Demikian Membuat Template Blog Sendiri dengan Bootstrap. Saya sudah terapkan. Hasilnya: Bootstap fo Blogger. Mau? Nanti kalo sudah beres 100% dibagikan gratis.

Cek ada dulu yang sudah ada: Koleksi Template Boootsrap Gratis. Wasalam. (blogromeltea.blogspot.com).*

Sumber:
http://www.w3schools.com/bootstrap/default.asp
http://templetedownload.blogspot.com//search?q=cara-membuat-auto-read-more-ringkasan
https://startbootstrap.com/bootstrap-resources/3

Simple SEO Theme: Template Blog Sederhana, Bersih, Ringan, SEO Friendly.

SETIAP kali membantu orang menciptakan blog, saat ditanya mau pake template apa atau yang mana, atau yang bagaimana, rata-rata menentukan template blog simple.

"Yang simple aja, bersih!" gitu katanya. Tepat sekali pilihannya alasannya yaitu template simple sangat cocok untuk blog pribadi, buat "curat-coret" menuangkan pengalaman, pemikiran, gagasan, ide, pengalaman, atau bahkan banyak sekali ilmu yang "berat", contohnya wacana susila tasawuf atau tafsir Al-Quran.

Berikut ini aku share Simple SEO Theme: Template Blog Sederhana, Bersih, Ringan, SEO Friendly, Responsive (Mobile Friendly). Gratis!

Simple SEO Theme 

Simple & Clean Blogger Template. Build with Bootstrap

DEMO | DOWNLOAD

Fitur Template

• SEO Optimized
• Simple & Clean
• Responsive - Mobile Friendly
• Fast Loading - Ringan, Kenceng
• Related Post dengan Thumbnail Gambar
• Social Share Button
• Responsive & Static Menu
• Auto Read More/Jump Break Otomatis dengan Image Thumbnail di halaman depan
• Navigasi Halaman Nomor/Angka
• Heading Tag SEO: H1, H2, H3
• Blog Pager "Next Prev" Judul Posting
• Breadcrumb
• Meta Tags SEO Friendly
• and more

Template ini aku bagikan gratis. Anda dihentikan menghilangkan credit link di footer! Jika mau tanpa credit link, kontak saja. Wasalam. (http://blogromeltea.blogspot.com).*

Cek Juga: 5 Template SEO Simple untuk Blog Pribadi

Template Blogger Simple Responsive dengan Bootstrap.

BOOTSTRAP yaitu produk Twitter untuk membangun situs web atau blog berbasis HTML dan CSS dengan mudah, cepat, dan menghasilkan template blog yang responsive (mobile friendly) dan higienis (clean).

Template blog modern umumnya dibangun dengan bootstrap sehingga tampil minimalis, bersih, dan fast loading yang tentu saja juga ramah mesin pencari (SEO Friendly).

Twitter bootstrap is a collection of tools that will eases creation of websites using in built functionality. Twitter bootstrap is an open source web development kit to give consistent and good user experience. It has HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components. It also has some JavaScript extensions which surely improves user experience.

Salah satu ciri template blog dengan bootstrap yaitu bab header atau navigasi menunya yang simple, modern, elegan, minimalis, floating, responsive-dropdown.

Berikut ini beberapa template blogger yang dibangun dengan Bootstrap. Tinggal download dan intall, kemudian modifikasi sesuai dengan selera.

LifeHack Premium Responsive Blogger Template

 

Lifehack is a customized blogger template and built using twitter bootstrap 3. Its a fully responsive magazine blogger template best suited for magazines and news sites. It can also used for business blogs by removing magazine widgets used in home page.

DEMO | DOWNLOAD

 

Picsalad BS Blogger Template

 Picsalad is viralnova clone responsive blogger template with plenty of features. It is coming with an option to showcase a full content width image thumbnail. 

DEMO | DOWNLOAD

Standard Blogger Theme

DEMO | DOWNLOAD

Evid BT

 

DEMO | DOWNLOAD

BootStrap 3 Blogger Template

 

 

DEMO | DOWNLOAD

Flat Design Bootstrap Blogger Template 

Flat Design Twitter Bootstrap Blogger Template

 

DEMO | DOWNLOAD

Twitter Bootstrap Blogger Template

Basic Twitter Bootstrap Blogger Template  

 

DEMO | DOWNLOAD

Bootstrap Blogger Template

 

DEMO | DOWNLOAD

Bootstrap 3 Blogger Template

DEMO | DOWNLOAD

 

Template Blogger Simple Responsive dengan Bootstrap yang terakhir, di bab download, akan membawa Anda ke halaman "pusat kode" yang akan melieurkan newbie. Wasalam. (http://blogromeltea.blogspot.com).*