Blog Romeltea

Blog Romeltea

Template Blog SEO Friendly Terbaru - Responsive & Fast Loading

Template Blog SEO Friendly Terbaru
Template Blog Gratis SEO Friendly, Responsive, Keren, Fast Loading, Terbaru. Free Download.

TEMPLATE atau theme (tema) blog blogger terus mengalami evolusi. Dinamis!

Kelebihan blog blogger/blogspot adalah kita bisa desain dan modif sendiri template atau tampilan blog.

Banyak blogger berbagi template gratis hasil desainnya atau hasil modifikasinya. Banyak pula yang "cloning" terhadap situs-situs populer, sehingga tampilan blog tampak profesional.

Trend template blog dalam dua tahun terakhir, selain seo friendly dan fast loading, adalah SIMPLE, sederhana, bersih, header-menu statis/sticky, dan Ghost Button.

Berikut ini sejumlah Template Blog SEO Friendly Terbaru yang di-share gratis download oleh desainernya.

Jurnalistik Template

Jurnalistik Template


Jurnalistik Theme

 JURNALISTIK THEME
 

New Johny Wuss V3

NEW JOHNY WUSS V3

iSimple Classic

iSimple Classic


Viral Pro Responsive Blogger Template

Viral Pro Responsive Blogger Template

DEMO | DOWNLOAD

Blogku - Newest Simple Blogger Template

Delivery Lite Blogger Template

Delivery Lite Blogger Template

DEMO. DOWNLOAD

Betapress AMP Blogger Template 

Betapress AMP Blogger Template is one of our most fastest template till date. The best feature of betapress is that the loading time of this theme is less than a second. It’s a completely SEO optimized theme with prefect structured data. Zero JavaScripts are used in creating this AMP template. This theme comes in a elegant look without compromising any important feature in the theme. 
 

Betapress AMP Blogger Template

 

Particular Blogger Templates

Particular Blogger Templates


Itulah Koleksi Template Blog SEO Friendly Terbaru untuk Blog Pribadi yang simple, responsive, fast loading, dan user friendly. (blogromeltea.blogspot.com).*

Cara Membuat Template Blog Sendiri dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap

Membuat Template Blog Sendiri dengan BootstrapCara 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 membuat template blogger sendiri dengan bootstrap, kita kenali dulu apa itu bootstrap.

Bootstrap adalah 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 adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.


Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat 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 menggunakan JavaScript.  
Template blog yang menggunakan Bootstrap dijamin Mobile Friendly alias Responsive karena 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 hasilnya bagus, bisa 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 kode yang ada, lalu...
4. Copas kode 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 kamu / atau bisa diganti dengan tulisan 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 kode </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 kode berikut ini di atas kode </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 kode 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 kode Auto Read More agar tampilan tulisan 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://www.bloggertipspro.com/2016/01/using-bootstrap-with-blogger-templates.html
https://startbootstrap.com/bootstrap-resources/3

Buku Baru: Blogpreneur - Bisnis Online untuk Pemula

INI buku terbaru saya. Judulnya Blogpreneur - Panduan Bisnis Online untuk Pemula. Isinya tentang Teknik Blogging dan Tips Bisnia Online alias Menghasilkan Uang dengan Blogging (Ngeblog), termasuk tentang Google AdSense.


Buku Baru: Blogpreneur - Bisnis Online untuk Pemula

Buku Baru: Blogpreneur - Bisnis Online untuk Pemula
Buku Baru: Blogpreneur - Bisnis Online untuk Pemula

Ini kata pengantar dari pnerbitnya:

Di era internet, celah-celah untuk mendapatkan penghasilan sebenarnya makin terbuka. Dengan jaringan internet yang sudah merambah ke segala pelosok, terbuka banyak peluang untuk meraih pendapatan, bahkan untuk menjadi kaya-raya.

Salah satunya adalah melalui blog. Ngeblog (blogging) bukan lagi sekadar untuk menyalurkan hobi, tapi kini sudah bisa dijadikan sumber uang. Melalui blog, seseorang bisa membuka wirausaha online atau menjadi blogpreneur: bisnis online melalui blog.

Dalam buku ini, Blogpreneur - Panduan Bisnis Online untuk Pemula, penulis (saya) berbagi pengalaman dan tips dalam menggali banyak peluang untuk mendapatkan uang melalui blog (make money blogging).

Selain ditujukan bagi peminat bisnis online via blog, buku ini juga didedikasikan bagi siapa saja yang membutuhkan panduan blogging.

Data Buku

Penulis: Asep Syamsul M. Romli
Ukuran: 14 x 20 cm
Tebal: 144 hlm
Ketras: Premium bookpaper 57gr
Terbit: 2017
ISBN: 978-602-350-119-9
Harga: Rp. 34.000


blogpreneur - bisnis online untuk pemula

Pesan sekarang juga melalui:

www.nuansa.co
atau
WA/SMS: 0818638038

Email: marketonlline@nuansa.co

Dari judulnya saja, Buku Baru: Blogpreneur - Bisnis Online untuk Pemula, jelas buku ini merupakan panduan blogging bagi pemuka, tips SEO-nya juga ada, dengan fokus tips monetize blog atau make money blogging agar menghasilkan uang.

Untuk harga dan cara pesan buku sudah jelas di atas itu ya, bisa via web, SMS, email, dan WA. Mangga, order sekarang juga! (http://blogromeltea.blogspot.com).*

Custom Domain Blogger: Cara Membuat Blog dengan Nama Domain Sendiri

Custom Domain Blogger: Cara Membuat Blog dengan Nama Domain Sendiri
Custom Domain Blogger: Cara Membuat Blog dengan Nama Domain Sendiri.

MEMBUAT atau tepatnya mengubah alamat blog dari yang semula --misanya-- romelteamedia.blogspot.com menjadi www.romelteamedia.com dikenal dengan nama Custom Domain.

Membuat blog dengan nama domain sendiri akan menambah "prestise" dan tampak sebagai blog profesional.

Yang dimaksud blog dengan nama domain sendiri adalah kita membuat blog di blogspot (blogger), misalnya www.romelteamedia.blogspot.com, lalu alamat URL-nya diubah menjadi www.romelteamedia.com. Keren 'kan?

Selain tampak profesional dan keren, membuat blog dengan nama domain sendiri ini juga akan membuat blog kita "abadi", tetap ada, selama blognya tidak kita delet atau diban sama blogspot.

Jadi, kalo kita lupa memperpanjang sewa domain, misalnya, maka hanya nama domain itu yang "hilang", tapi blog dengan alamat asli di blogspot  tetap ada. Mantap 'kan?

Kata para pakar SEO, nama blog dengan domain sendiri, menggunakan Top Level Domain seperti .com atau .net akan lebih SEO Friendly, disukai mesin pencari dan pengunjung.

Cara Custom Domain Blogger

Membuat blog dengan nama domain sendiri sangat mudah. Langkah mengubah alamat blog yang ada blogspot-nya menjadi dot com atau dot net sebagai berikut:
  1. Buat dulu blognya di BLOGGER. (Detail: Cara Membuat Blog di Blogger)
  2. Beli atau sewa nama domainnya, misalnya di penyedia domain hosting Qwords.
  3. Setelah membuat blog di blogspot dan membeli domain, buka saja Custom Domain Blogspot di Qwords.
  4. Beres dah!

Jadilah alamat blog kita, misalnya dari yang tadinya http://romelteamedia.blogspot.com menjadi www.romelteamedia.com. Cool, right?

Dengan Custom Domain seperti itu, kini semua orang bisa membuat situs berita sendiri lho! Caranya? Isi saja blognya dengan beritai aktual, sebagaimana situs berita, dan gunakan Template Blog Berita.

Wesbsite instansi, perusahaan, atau organisasi, termasuk sekolah, masjid, dan pesantren, bisa menggunakan blogger. Hosting di Google gratis, aman, nyaman, dan beli domainnya untuk melakukan Custom Domain seperti di atas.

Kalo blog toko online, wajib banget menggunaman nama domain sendiri, biar lebih profesional dan terpercaya (kredibel).


Demikianlah tips kita kali ini tentang cara membuat blog dengan nama domain sendiri. Romeltea undur diri, semoga bermanfaat. Wasalam. (http://blogromeltea.blogspot.com).*

Custom Domain Blogger

Koleksi Template Blog Berbasis AMP Gratis

AMPNews HTML Blogger Template
Koleksi Template Blog Berbasis AMP Gratis. Free AMP Base Blogger Templates.

SEBELUMNYA saya sudah share Template Bloggger Berbasia Bootstrap. Kali ini saya berbagai link download Template Blog berbasia Accelerated Mobile Pages (AMP).

Bootsrap dan AMP adalah alat bantu untuk membuat template blog atau desain website dengan fokus mobile-friendly (responsive) dan ringan (fast loading).

Template blogger berbasis Bootstrap dan --apalagi-- AMP belum populer, meski sudah banyak blogger yang menggunakannya. Mungkin, karena blogger sendiri belum menyediakan versi default-nya di Blogger sebagaiman templata bawaan blogger yang selama ini ada.

Koleksi Template Blog AMP

Koleksi template blog AMP juga belum banyak, baik versi gratis maupun premium. Berikut ini beberapa Template Blogger berbasia AMP Gratis:

AMP HTML Blogger Template



Kompi Ajaib AMP Blogger Template

Kompi Ajaib AMP Blogger Template



AMPNews HTML Blogger Template

AMP News Blogger Template

 
Siniladom Free AMP Blogspot Template

Siniladom Free AMP Blogspot Template


MDCamp Blogger Template 

MDCamp Blogger Template

DEMO | DOWNLOAD 

Betapress AMP Blogger Template

Betapress Blogger Template

DEMO | DOWNLOAD 
 
amp project

Itu dia sebagian koleksi Template Blogger berbasis AMP. Anda juga bisa belajar membuatnya di AMP Project. 

Btw, jangan mudah percaya bahwa sebuah template blog itu berbasis AMP. Jika ada tempate blog disebutkan Template AMP, termasuk yang di atas, cek dulu kevalidan AMP blog demonya di Validator AMP Google.

Wasalam. (http://blogromeltea.blogspot.com).*

Back To Top