Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan

Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan

Posted by Published on 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:

  1. Header yang akan diisi dengan judul blog dan deskripsi blog
  2. Content utama yang nantinya akan dibagi menjadi 2 kolom, yaitu kiri untuk postingan dan kanan untuk sidebar
  3. Footer yang akan dibagi menjadi 3 kolom untuk 3 widget
  4. 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 <!--tag html--> 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 Tag Title yang SEO Friendly

Cara Membuat Tag Title yang SEO Friendly

Posted by Published on 0 comments

Cara Membuat Tag Title yang SEO Friendly, Cara Membuat Title yang SEO Friendly, Panduan Optimasi Title Agar SEO Friendly, Cara Membuat Title Blog yang SEO Friendly. Tag title pada halaman blog merupakan elemen yang pertama kali dilihat oleh search engine Google. Title merupakan salah satu elemen paling penting dari SEO on-page karena title merupakan faktor terpenting kedua dari SEO on-page setelah konten. Jika ingin meningkatkan peringkat blog di hasil penelusuran search engine, utamanya Google, maka tentunya harus mengetahui bagaimana cara membuat title blog yang SEO friendly agar lebih optimal. Oleh karena itu penting sekali untuk melakukan optimasi title agar halaman blog lebih mudah ditemukan lewat search engine, khususnya Google. Karena title selalu akan ditampilkan di hasil pencarian Google, supaya blog lebih maksimal di hasil pencarian, artinya penulisan dan format title wajib diperhatikan dalam optimasi SEO.

Karena secara default Blogspot tidak hadir dengan SEO yang telah dioptimalkan, struktur title tag bawaan dari Blogspot itu justru meletakkan judul blog di awal title baru kemudian judul artikel. Ini tentunya tidak sesuai dengan kaidah optimasi SEO yang diharapkan oleh search engine, khususnya Google, karena search engine akan membaca title dari kiri ke kanan, dan bukan sebaliknya. Agar sesuai dengan format SEO yang diinginkan, jadi perlu mengganti title tersebut secara manual agar lebih SEO friendly.

Secara default, syntax untuk <title /> adalah sebagai berikut:

    <title><data:blog.pageTitle/></title>

atau

<title><data:view.title.escaped/></title>

Susunan title bawaan dari Blogspot biasanya judul blog berada di awal dan judul postingan malah berada di belakangnya. Bahkan untuk template default Blogger yang terbaru hanya terdiri dari judul artikelnya saja. Supaya format title tersebut SEO friendly, maka harus diganti dengan susunan title tag yang SEO friendly, yaitu judul postingan berada di awal dan judul blog ada di belakangnya.

Untuk itu, tag title default tersebut sebaiknya diganti dengan susunan tag title yang SEO friendly. Cara mengganti tag title default dengan format tag title yang SEO friendly adalah sebagai berikut:

  1. Buka blogger.com
  2. Kemudian klik Tema => Edit HTML, cari tag title di bawah ini dan hapus.
    3.     <title><data:blog.pageTitle/></title>

    atau

    <title><data:view.title.escaped/></title>
  3. Ganti dengan syntax berikut ini:
    4.   <title>
<b:if cond='data:blog.pageName != ""'><data:blog.pageName/> | </b:if><data:blog.title/>
</title>
  4. Simpan Template dan lihat hasilnya.

Susunan tag title di atas adalah susunan sederhana dari tag title yang SEO friendly. Kalau mau yang lebih lengkapnya bisa gunakan susunan tag title di bawah ini:

<title>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:blog.title/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>Page Not Found! - <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "item"'><data:blog.pageName/> | <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:blog.pageName/>~ <data:blog.title/><b:else/>
<b:if cond='data:blog.pageName == ""'><data:blog.title/><b:else/>
<b:if cond='data:blog.searchQuery'>Search results for <data:blog.searchQuery/> : <data:blog.title/><b:else/>
<b:if cond='data:blog.searchLabel'><data:blog.pageName/> - <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "archive"'><data:blog.pageName/> | <data:blog.title/><b:else/><data:blog.title/></b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if></title>

Selamat mencoba.

View Article
Cara Membuat Scroll Top

Cara Membuat Scroll Top

Posted by Published on 0 comments
  1. Buka blogger.com.
  2. Setelah dashboard Blogger terbuka, pilih sub menu Tema dan klik Edit HTML.
  3. Karena tombol scroll ke atas ini akan menggunakan Fonts Awesome, pastikan tema Blogger yang digunakan sudah menggunakan Fonts Awsome. Jika belum, tambahkan code di bawah ini tepat di atas code <b:skin><![CDATA[
    4. <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
  4. Tombol scroll ke atas ini juga menggunakan JQuery, jadi pastikan tema yang digunakan sudah menggunakan JQuery. Jika belum menggunakan, tambahkan code di bawah ini tepat di bawah code ]]></b:skin>
    5. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
  5. Lalu copy style CSS di bawah ini tepat di atas syntax ]]></b:skin>
    6. #back-to-top { 
height: 55px; 
width: 55px; 
position:fixed;
bottom:30px;
right:30px;
display:none;
background-color:#4dc247;
color:#EEE;
z-index:9999;
cursor:pointer;
opacity:0;
-webkit-transform:translateZ(0);
transition:all .4s;
border-radius:50%;
padding:15px;
font-size:25px}

#back-to-top:hover{
background-color:#333;
color:DADADA;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;}
  6. Setelah itu copy tag HTML berikut ini di atas tag </body>.
    7. <a href='#top' id='back-to-top' title='Back to Top'>
<i class='fa fa-angle-up'/>
</a>

<script type='text/javascript'>
$(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#back-to-top') .fadeOut();
        } else {
            $('#back-to-top') .fadeIn();
        }
    });
    $('#back-to-top').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
        });
});
</script>
  7. Setelah itu klik tombol Simpan Tema dan lihat hasilnya.
View Article
Cara Membuat Pagination Blogspot

Cara Membuat Pagination Blogspot

Posted by Published on 0 comments
  1. Buka blogger.com.
  2. Pada Menu, pilih sub menu Tema lalu klik Edit HTML.
  3. Copy <b:include cond='data:view.isMultipleItems' name='pagenavi'/> berikut ini dan paste di bawah syntax <b:include name='nextprev'/>
  4. Kemudian copy code di bawah ini tepat di atas syntax </b:widget>
    5.         <b:includable id='pagenavi'>
<div class='pagenavi'>
<script type='text/javascript'>
 var pageNaviConf = {
 perPage: 6,
 numPages: 5,
 firstText: "Recent",
 lastText: "Last",
 nextText: "Next",
 prevText: "Previous"
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='';if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
</div>
</b:includable>
  5. Setelah itu klik Simpan Tema. Selesai, dan lihat hasilnya.
View Article
Cara Membuat Breadcrumb Bootstrap di Blogspot

Cara Membuat Breadcrumb Bootstrap di Blogspot

Posted by Published on 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

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

Fungsi atau Manfaat Breadcrumbs untuk SEO

  1. Breadcrumbs bisa digunakan untuk membangun internal linking dengan halaman lainnya.
  2. 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:

  1. Buka blogger.com
  2. Buka menu “Tema”, lalu klik “Edit HTML”
  3. 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>
    4. <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
  4. Kemudian cari code seperti ini <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
  5. Setelah ketemu, salin code di bawah ini, lalu letakkan tepat di bawah code <b:includable id='main' var='top'> yang ada di bawahnya.
    6. <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>
  6. 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 Slideshow dengan Jquery

Cara Membuat Slideshow dengan Jquery

Posted by Published on 0 comments

Cara Memasang Slideshow di Blog, Jquery Slideshow untuk Blogspot. Jquery slide show atau slider Jquery adalah slideshow yang dibangun dengan Javascript Jquery untuk menampilkan gambar atau teks. Jquery slideshow sendiri memberi kemudahan dalam memilih beberapa efek animasi transisi pada gambar yang ditampilkan. Umumnya digunakan pada website atau blog yang memberi penekanan pada tampilan foto. Slideshow semacam ini banyak dipakai oleh website portofolio dan fotografi serta toko online untuk menampilkan animasi galeri foto mereka. Jquery slide show juga banyak digunakan sebagai widget Blogger untuk menampilkan update post terbaru maupun popular posts secara otomatis. Dengan menggunakan Jquery slideshow ini akan memungkinkan kita untuk membuat slideshow dengan banyak efek transisi gambar yang sangat menarik.

Tutorial Jquery slide show ini cukup mudah diikuti dan dipahami. Untuk cara membuat slider Jquery ini bisa terpasang di Blogspot, berikut tutorial cara memasang Jquery slideshow di dalam blog:

  1. Buka blogger.com dan login.
  2. Lalu klik Tema => Edit HTML
  3. Pastikan template yang digunakan sudah menggunakan Jquery. Jika belum, agar script bisa berjalan lancar, tambahkan Jquery pada tema Blogspot yang digunakan. Jika sudah ada Jquery, abaikan baris ini.
  4. Salin script di bawah ini dan tempelkan tepat di atas tag </body>
    5. <script type='text/javascript'>//<![CDATA[
$(document).ready(function() { 
$(".slideshow .content-slider:gt(0)").hide();
setInterval(function() {
 $('.slideshow .content-slider:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
 .appendTo('.slideshow');
}, 3000);
});
//]]></script>
  5. Kemudian salin style CSS di bawah ini dan letakkan di atas code ]]></b:skin>
    6. .slideshow{
margin:20px auto;
width: 100%;
height: auto}
.content-slider{
display:none}
.content-slider img{
max-width:100%;
height:auto}
  6. Setelah itu simpan template.

Untuk memasang Jquery slide show di dalam postingan, caranya cukup mudah:

  1. Edit postingan yang ingin diberi slide show, dan pilih mode HTML.
  2. Salin tag HTML di bawah ini dan letakkan pada tempat yang diinginkan.
    3. <div class="slideshow">
<div class="content-slider">
<img src="{URL GAMBAR 1}"/>
<div class="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>
</div>
<div class="content-slider">
<img src="{URL GAMBAR 2}"/>
<div class="text-center">
Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. 
</div>
</div>
<div class="content-slider">
<img src="{URL GAMBAR 3}"/>
<div class="text-center">
Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. 
</div>
</div>
</div>
  3. Ganti tulisan {URL GAMBAR} dengan URL gambar dan ganti dummy text dengan tulisan sesuai keinginan.
  4. Setelah itu klik Update dan silakan lihat hasilnya.

Kalau berhasil memasang Jquery slide show di blog, maka hasilnya kira-kira akan seperti ini:

1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2
Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque.
3
Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue.

Cara memasang slide show ternyata sangat mudah bukan? Selamat mencoba.

View Article
Cara Membuat Preloader dengan JQuery

Cara Membuat Preloader dengan JQuery

Posted by Published on 0 comments

Apa itu preloader? Banyak dari Anda mungkin telah melihatnya. Dan bagi Anda yang belum mengerti dengan apa itu yang disebut dengan preloader, jika Anda berselancar di internet dan pernah melihat sebuah gambar yang ditampilkan sebelum halaman dimuat sepenuhnya, setelah halaman tersebut telah dimuat kemudian gambar tersebut perlahan-lahan menghilang, efek semacam inilah yang disebut dengan istilah preloader.

Lalu untuk apa manfaatnya? Penambahan preloader ini ditujukan untuk meningkatkan kinerja dan memberikan kontrol pemuatan yang lebih halus kepada pengguna sebelum halaman yang sebenarnya bisa ditampilkan. Untuk itu sangat disarankan agar semua orang untuk menambahkan efek preloading ini ke blog masing-masing karena akan membuat blog lebih indah dan terlihat lebih profesional. Oleh karena itulah tutorial kali ini akan menunjukkan kepada Anda bagaimana cara menambahkan preloader tersebut ke blog Anda.

Cara Membuat Preloader Blogspot dengan JQuery

Cara membuat preloader Blogspot dengan menggunakan JQuery adalah sebagai berikut:

  1. Buka blogger.com
  2. Pada menu, pilih sub menu Tema, lalu klik Edit HTML.
  3. Pastikan tema Blogspot yang digunakan sudah menggunakan JQuery. Jika belum, tambahkan code di bawah ini di atas tag </head>. Tetapi jika tema Blogger yang digunakan tersebut sudah memakai JQuery, langkah ini diabaikan saja.
    4. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
  4. Lalu tambahkan code di bawah ini di bawah tag <body>
    5. <div id="preloader">
<div class="preloader">
<img src="{URL GAMBAR}"/>
</div>
</div>

    Note: Ganti {URL GAMBAR} dengan URL gambar yang mau dijadikan preloader.

  5. Kemudian tambahkan code CSS di bawah ini tepat di atas tag ]]></b:skin>
    6. #preloader{
background-color:#FFF;
position:fixed;
text-align:center;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}

.preloader{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%}

.preloader img{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}
  6. Setelah itu, tambahkan script Javascript di bawah ini di atas tag </body>
    7. <script type="text/javascript">//<![CDATA[
(function($) {
$(window).load(function() {
$('#preloader').delay(300).fadeOut('slow');
});
})(window.jQuery);
//]]></script>
  7. Lalu klik Simpan Tema. Selesai.

Selamat mencoba.

View Article
Cara Membuat Template Blogspot yang Responsive dengan Bootstrap V3

Cara Membuat Template Blogspot yang Responsive dengan Bootstrap V3

Posted by Published on 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