Posts tagged by “Bootstrap”

Showing posts with label Bootstrap. Show all posts

Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan

Posted by Andi Setiawan Published on July 23, 2019 0 comments

Setelah membuat struktur dokumen HTML untuk tema Blogspot yang hendak dibuat, langkah selanjutnya adalah merencanakan susunan rancangan dasar yang ingin ditampilkan.

Rencananya desain tema Blogspot ini nantinya akan terdiri dari 4 baris, yaitu:

Header yang akan diisi dengan judul blog dan deskripsi blog
Content utama yang nantinya akan dibagi menjadi 2 kolom, yaitu kiri untuk postingan dan kanan untuk sidebar
Footer yang akan dibagi menjadi 3 kolom untuk 3 widget
Copyright yang akan berisi copyright blog

Setelah merencanakan susunan rancangan dasar tersebut, kemudian dibuatlah pembagian menurut struktur HTML masing-masing. Struktur HTML tersebut akan menjadi seperti ini:

<!--baris 1-->
<header>
<!--judul blog-->
</header>
<!--baris 2-->
<div class='row'>
<div class='col-md-7'>
<main>
<!--postingan-->
</main>
</div>
<div class='col-md-5'>
<aside>
<!--sidebar-->
</aside>
</div>
</div>
<!--baris 3-->
<div class='row'>
<div class='col-md-4'>
<!--widget 1-->
</div>
<div class='col-md-4'>
<!--widget 2-->
</div>
<div class='col-md-4'>
<!--widget 3-->
</div>
</div>
<!--baris 4-->
<footer>
<!--copyright-->
</footer>

Hapus tag  dan ganti dengan tag HTML di atas sehingga secara keseluruhan syntax tersebut akan menjadi seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:skin version='1.0.0'><![CDATA[

]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--baris 1-->
<header>
<!--judul blog-->
</header>
<!--baris 2-->
<div class='row'>
<div class='col-md-7'>
<main>
<!--postingan-->
</main>
</div>
<div class='col-md-5'>
<aside>
<!--sidebar-->
</aside>
</div>
</div>
<!--baris 3-->
<div class='row'>
<div class='col-md-4'>
<!--widget 1-->
</div>
<div class='col-md-4'>
<!--widget 2-->
</div>
<div class='col-md-4'>
<!--widget 3-->
</div>
</div>
<!--baris 4-->
<footer>
<!--copyright-->
</footer>

</body>
</html>

View Article

Cara Membuat Breadcrumb Bootstrap di Blogspot

Posted by Andi Setiawan Published on July 21, 2019 0 comments

Apa itu breadcrumbs? Banyak blogger pemula yang belum begitu mengenal tentang apa itu breadcrumbs dan seberapa penting meletakkan breadcrumbs ini ke dalam blog yang dikelola. Breadcrumbs adalah menu navigasi pada suatu blog atau website yang biasanya digunakan untuk membantu pengunjung mengetahui letak halaman yang sedang dibuka. Atau dengan kata lain, breadcrumbs ini digunakan untuk memberikan gambaran kepada pembaca mengenai posisi postingan yang sedang dibaca. Dengan menambahkan breadcrumbs ini ke dalam blog, maka breadcrumbs ini bisa melengkapi menu navigasi lainnya.

Manfaat Breadcrumbs

Memudahkan pengunjung berpindah ke halaman lainnya.
Memberi gambaran kepada pembaca mengenai posisi postingan yang sedang dibuka.

Fungsi atau Manfaat Breadcrumbs untuk SEO

Breadcrumbs bisa digunakan untuk membangun internal linking dengan halaman lainnya.
Mempermudah robot mesin pencari dalam merayapi seluruh halaman blog.

Cara Membuat Breadcrumbs Dengan Bootstrap di Blogspot

Untuk membuat Breadcrumb Bootstrap di Blogspot, caranya tidaklah sulit. Di bawah ini cara membuat breadcrumbs Bootstrap di Blogspot:

Buka blogger.com
Buka menu “Tema”, lalu klik “Edit HTML”
Karena breadcrumbs ini menggunakan plugin Bootstrap, maka tambahkan Bootstrap di template yang digunakan. Caranya salin code di bawah ini, dan letakkan tepat di atas tag </head>

Kemudian cari code seperti ini <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
Setelah ketemu, salin code di bawah ini, lalu letakkan tepat di bawah code <b:includable id='main' var='top'> yang ada di bawahnya.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
   <ol class='breadcrumb' name='Breadcrumb' role='navigation'>
     <li>
       <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
          <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
             Home
          </a>
       </span>
     </li>
     <b:if cond='data:blog.pageType == "error_page"'>
       <li>Page not found</li>
     <b:else/>
     <b:if cond='data:blog.pageType == "static_page"'>
       <li><b:if cond='data:blog.pageName == ""'>Untitled document<b:else/><data:blog.pageName/></b:if></li>
     <b:else/>
     <b:if cond='data:blog.pageType == "item"'>
       <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
            <b:loop values='data:post.labels' var='label'>
              <li>
                <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                  <a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' itemprop='url'>
                    <span itemprop='title'><data:label.name/></span>
                  </a>
                </span>
              </li>
            </b:loop>
               <li><b:if cond='data:blog.pageName == ""'>Untitled document<b:else/><data:blog.pageName/></b:if></li>
          <b:else/>
              <li><b:if cond='data:blog.pageName == ""'>Untitled<b:else/><data:blog.pageName/></b:if></li>
          </b:if>
       </b:loop>
     <b:else/>
     <b:if cond='data:blog.pageType == "archive"'>
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if> archived on <data:blog.pageName/></li>
     <b:else/>
     <b:if cond='data:blog.searchQuery'>
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if> match with keyword “<data:blog.searchQuery/>”</li>
     <b:else/>
     <b:if cond='data:blog.pageType == "index"'> 
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if><b:if cond='data:blog.pageName != ""'> categorized in “<data:blog.pageName/>”</b:if></li>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
   </ol>
</b:if>

Setelah itu simpan tema dan lihat hasilnya.

Inilah cara membuat breadcrumbs Bootstrap di Blogspot yang terbaru, jika Anda tertarik menambahkan breadcrumbs di template Blogspot Anda, silakan ikuti langkah-langkah di atas. Selamat mencoba!

View Article

Cara Membuat Template Blogspot yang Responsive dengan Bootstrap V3

Posted by Andi Setiawan Published on July 20, 2019 0 comments

Kesempatan kali ini http://mahirngoding.blogspot.com ingin berbagi tentang bagaimana cara membuat template Blogger/Blogspot yang responsif dengan menggunakan Bootstrap. Rencananya tema Blogspot yang dibuat ini akan menggunakan plugin CSS Bootstrap V3 untuk desain yang responsif dan juga memakai Font Awesome untuk mempercantik tampilan blog serta menggunakan Jquery untuk membuat tampilan blog agar lebih dinamis. Rancangan template blog tersebut secara garis besarnya akan seperti ini:

Dokumen HTML

Sebagai langkah awal, buka Notepad dan salin struktur dokumen HTML di bawah ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

<b:skin version='1.0.0'><![CDATA[

]]></b:skin>

<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--tag html-->

</body>
</html>

CSS Bootstrap V3

Kemudian salin syntax di bawah ini untuk memanggil fungsi CSS Bootstrap:

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

Letakkan code tersebut di atas code ini:

<b:skin version='1.0.0'><![CDATA[

Javascript Jquery

Kemudian tambahkan code untuk memanggil fungsi-fungsi Javascript Jquery, salin code di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

Lalu tempelkan code tersebut di atas code berikut ini:

<b:include data='blog' name='google-analytics'/>

Javascript Bootstrap

Jangan lupa tambahkan pula script Javascript bawaan dari Bootstrap. Salin code di bawah ini:

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>

Letakkan code tersebut di bawah code berikut ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

Fonts Awesome

Selanjutnya tambahkan Fonts Awesome. Salin code di bawah ini:

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Letakkan code ini tepat di bawah code:

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

Hasil

Jadi secara keseluruhan nantinya struktur dokumen tersebut akan seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:skin version='1.0.0'><![CDATA[

]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--tag html-->

</body>
</html>

Bersambung ke Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan

View Article

Cara Membuat

Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan

Cara Membuat Breadcrumb Bootstrap di Blogspot

Manfaat Breadcrumbs

Fungsi atau Manfaat Breadcrumbs untuk SEO

Cara Membuat Breadcrumbs Dengan Bootstrap di Blogspot

Cara Membuat Template Blogspot yang Responsive dengan Bootstrap V3

Dokumen HTML

CSS Bootstrap V3

Javascript Jquery

Javascript Bootstrap

Fonts Awesome

Hasil

Labels

Blog Archive

About Me