Showing posts with label Template. Show all posts
Showing posts with label Template. Show all posts
Cara Pasang atau Menambahkan jQuery di Template Blogspot

Cara Pasang atau Menambahkan jQuery di Template Blogspot

Posted by Published on 0 comments

Cara Pasang jQuery di Blogger, Cara Memasang jQuery di Blog. jQuery diperkenalkan pertama kali oleh John Resig pada tahun 2006. jQuery atau perpustakaan javascript adalah kumpulan berbagai fungsi javascript yang sudah diringkas dan disederhanakan penulisan fungsi-fungsinya agar lebih efisien dan ringkas sehingga pengembangan suatu website bisa dikerjakan secara efektif dan lebih cepat. Dengan menggunakan jQuery ini memudahkan orang dalam memanipulasi tampilan HTML, membuat animasi, dan mendukung kinerja ajax jadi jauh lebih mudah dan cepat. Apalagi sekarang jQuery didukung oleh banyak sekali browser-browser terkemuka. Tidak mengherankan jika sekarang jQuery menjadi salah satu library JavaScript yang sangat populer sekaligus paling banyak digunakan oleh banyak web developer di seluruh dunia.

Pada dasarnya, jQuery dapat berfungsi untuk menyederhanakan dalam penulisan sebuah script. Contohnya dalam menampilkan tulisan "Hello world". Bila menggunakan Javascript Native script tersebut akan ditulis seperti ini:

JavaScript Native

Document.getElementById("demo").innerHTML = "Hello world";

Sedangkan untuk menampilkan output berupa tulisan yang sama, bila memakai jQuery bisa disingkat menjadi seperti ini:

jQuery

$('#demo').html("Hello world");

Dari contoh di atas, dapat diketahui bahwa dengan menggunakan jQuery, untuk menghasilkan output yang sama bisa menggunakan baris kode yang jauh lebih sederhana.

Karena fungsinya yang bagus dan mudah dipelajari, Tidak heran bila Saat ini hampir sebagian besar website dan blog yang menggunakan jQuery agar pembuatan animasi, manipulasi DOM HTML dan berbagai efek unik lainnya bisa dilakukan dengan lebih mudah.

ada Banyak kelebihan yang bisa didapat jika menyisipkan jQuery di blog. Berikut beberapa keunggulan dari memasang jQuery:

Kelebihan jQuery

  1. Sangat memudahkan dalam mengakses elemen-elemen HTML tertentu.
  2. Kompatibel dengan semua browser terkemuka.
  3. Dokumentasinya sangat lengkap, jadi gampang dipelajari.
  4. Penulisan script jadi lebih pendek dan ringkas.
  5. Modifikasi dan manipulasi elemen HTML jadi lebih mudah dan cepat.
  6. Bisa juga digunakan untuk memanipulasi CSS.
  7. Mempersingkat kerja ajax.
  8. Lebih mudah dalam penerapan efek-efek animasi dan JavaScript.

Dewasa ini ada banyak tempat yang menyediakan library jQuery seperti Google, Cloudflare, Microsoft dan juga website resmi jQuery.

Google CDN (terpopuler)

<script src='https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js'></script>

Cloudflare CDN

<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery/3.3.1/jQuery.min.js'></script>

Microsoft CDN

<script src='https://ajax.aspnetcdn.com/ajax/jQuery/jQuery-3.3.1.min.js'></script>

jQuery Official CDN

<script src='https://code.jQuery.com/jQuery-3.3.1.min.js'></script>

Jika mau pasang jQuery, silakan pilih salah satu dari beberapa penyedia library jQuery tersebut.

Cara Pasang jQuery di Blogspot

Cara memasang jQuery di Blogspot ini sangat mudah. Berikut ini cara pasang jQuery di Blogspot:

  1. Login ke Blogger.com.
  2. Lalu click menu "Tema" => "Edit HTML".
  3. Salin salah satu code dari salah satu penyedia jQuery di atas, misalnya saja dari Google CDN, dan letakkan di atas tag </head> sehingga secara garis besar penempatannya akan seperti ini:
    4. <!DOCTYPE html>
<html>
<head>
...
<script src='https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js'></script>
</head>
<body>
...
</body>
</html>
  4. Setelah itu simpan tema.

Demikian informasi terbaru tentang Cara Cara Memasang jQuery di Blogspot, selamat mencoba!

View Article
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 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