Setup atau Instalasi Perangkat Lunak Komputer Terapan

1. Membaca Manual Instalasi Setup

Apa sih Membaca Manual Instalasi Setup itu?
Maksudnya ialah membaca tata cara / langkah-langkah dalam melakukan instalasi suatu aplikasi / software. Ini semacam buku panduan dalam menginstall aplikasi / software sehingga dapat berjalan dengan baik dan benar.

2. Koneksi Kendali ke Piranti

Maksudnya disini adalah bagaimana cara sebuah perangkat lunak / software dapat mengendalikan sebuah hardware / perangkat keras. Seperti pada contoh driver pada sebuah laptop. Tanpa sebuah driver perangkat – perangkat keras seperti WiFi Adapter, Soundcard, VGA Card, dll. Tidak akan bisa berjalan dengan baik tanpa adanya kendali dari sebuah perangkat lunak.

3. Pengaturan Fungsi Jaringan

Jaringan komputer (jaringan) adalah sebuah sistem yang terdiri atas komputer-komputer yang didesain untuk dapat berbagi sumber daya (printer, CPU), berkomunikasi (surel, pesan instan), dan dapat mengakses informasi(peramban web). Tujuan dari jaringan komputer adalah agar dapat mencapai tujuannya, setiap bagian dari jaringan komputer dapat meminta dan memberikan layanan (service). Pihak yang meminta/menerima layanan disebut client dan yang memberikan/mengirim layanan disebut server. Desain ini disebut dengan sistem client-server, dan digunakan pada hampir seluruh aplikasi jaringan komputer.

4. Pengaturan Peripheral Lain

Sebelum itu kita harus tau terlebih dahulu apa itu peripheral?

Peripheral komputer adalah komponen tambahan yang berfungsi untuk mendukung kerja komputer sehingga fungsi kerja komputer menjadi maksimal. Peripheral terbagi menjadi 2 macam berdasarkan fungsi peripheral komputer tersebut, yaitu:

• Peripheral utama, yaitu perangkat keras atau hardware yang harus ada jika kita megoperasikan komputer sehingga peripheral ini tidak dapat dipisahkan dengan komputer utama, contohnya: mouse, keyboard dan monitor.
• Peripheral Pendukung, yaitu perangkat keras atau hardware yang tidak harus ada pada saat pengoperasian komputer, sehingga peripheral ini merupakan perangkat tambahan untuk memaksimalkan kerja komputer, contohnya: printer, scaner, modem, dan lain-lain.

Setiap peripheral mempunyai peran dan fungsi masing-masing sehingga saling membantu sama lain. Dari macam peripheral diatas dapat digaris bawahi bahwa setiap peripheral saling mendukung kerja satu sama lain antara komponen peripheral utama maupun komponen peripheral pendukung. sebagai contoh untuk melakukan perintah print pada printer maka diperlukan keyboard atau mouse untuk memasukan intruksi agar komputer dapat melakukan perintah print.

5. Melakukan Backup

Setiap software yang terinstal didalam windows memiliki parameter nya masing-masing didalam registry. Apabila anda adalah seorang yang hobi menginstal bermacam-macam software didalam Komputer ada baiknya melakukan backup registry anda rutin setiap bulan untuk mencegah terjadinya crash atau error pada registry yang disebabkan oleh kegiatan install-unistall yang berlebihan atau karena disebabkan oleh kesalahan hapus daripada software-software cleaner.

Cara untuk melakukan backup pada registry adalah 

1. Klik Start Menu > Run. 
2. Ketikkan Regedit. 
3. Lalu tekan Enter
4. Lalu pilih File > Export. 
5. Setelahnya anda dapat menyimpan dimanakah file backup tersebut akan disimpan. 

Untuk melakukan restore registry dapat memilih File > Import.

Melakukan Back up pada PC (Windows 7, 8 dan Seterusnya)

1. Carilah alat penyimpanan yang tepat. 

Anda akan membutuhkan sebuah alat yang mampu menyimpan semua data yang Anda perlukan untuk dibuat backup-nya. Alat ini sebaiknya minimal dua kali dari ukuran hard drive yang akan Anda buat backup-nya. Hard drive eksternal merupakan pilihan terbaik, dan mudah dicari.

Bisa juga membuat partisi (untuk menyimpan data), jika Anda ingin memakai komputer saat ini sebagai sebuah cadangan. Tetapi Anda harus sadar bahwa pilihan ini kurang aman, karena sistem tetap rentan terhadap serangan virus komputer dan kerusakan hard drive.

2. Hubungkan alat dengan komputer Anda. 

Dengan memakai kabel USB atau koneksi cara lain, hubungkan alat penyimpan dengan komputer yang ingin Anda back up. Memasukkan alat seharusnya secara otomatis akan memunculkan kotak dialog yang menanyakan apa yang ingin Anda lakukan dengan alat itu. Seharusnya ada pilihan untuk memakai alat itu sebagai backup data dan membuka File History. Pilihlah pilihan ini.

Pada keadaan di mana dialog ini tidak terbuka secara otomatis, Anda bisa membuat backup secara manual dengan menelusuri Search dan mencari File History. Bagian ini juga bisa ditemukan melalui Control Panel.

3. Aturlah Advanced Settings. 

Setelah program terbuka, Anda mungkin ingin mengubah beberapa pengaturan pada bagian Advanced Settings, yang diakses dari sebelah kiri. Di sini Anda akan bisa mengubah seberapa sering komputer membuat cadangan, berapa lama file disimpan, dan berapa banyak ruang yang bisa digunakan.

4. Pilih drive backup. 

Setelah pengaturan selesai diatur, pastikan bahwa drive backup yang benar telah dipilih (drive eksternal seharusnya terpilih secara default).

5. Klik "Turn on". 

Setelah semua pengaturan sudah benar, klik "Turn on". Ini akan memulai proses back up. Ketahuilah bahwa backup pertama bisa membutuhkan waktu cukup lama dan Anda mungkin ingin memulai proses back up pada malam hari atau sebelum Anda pergi bekerja, sehingga Anda tidak perlu memakai komputer selama waktu tersebut. Dan begitulah: Anda selesai melakukannya!

Read More

Pengertian PBX Konsep dan Proses Kerja pada Server Softswitch

Pengertian PBX (Private Branch Exchange) 

PBX (private branch exchange) adalah sebuah sentral privat dengan fitur seperti sentral public yang di gunakan oleh suatu lembaga / perusahaan dalam melayani komunikasai internet perusahaan tersebut.

A. Gambar Tentang Diagram Voip Dan Bagian-Bagian Komunikasi Pbx (Private Branch Exchange)

B. Proses Kerja Pbx (Private Branch Exchange) Server Softswitch

Sebuah sistem IP PBX terdiri dari satu atau lebih telepon SIP, server IP PBX dan secara opsional VOIP Gateway untuk terhubung ke jalur PSTN yang ada. Fungsi PBX IP server mirip dengan cara kerja proxy server: klien SIP, baik berupa software (softphone) atau perangkat keras berbasis ponsel, mendaftar ke server IP PBX, dan ketika mereka ingin membuat panggilan mereka meminta IP PBX untuk melakukan panggilan. IP PBX memiliki daftar semua ponsel / pengguna dan alamat yang sesuai dengan SIP mereka dan dengan demikian dapat menghubungkan panggilan internal atau rute panggilan eksternal baik melalui gateway VOIP atau penyedia layanan VOIP.

C. Konsep Dan Proses Kerja Voip Dengan Komunikasi Pbx

Prinsip kerja VoIP adalah mengubah suara analog yang didapatkan dari speaker pada Komputer menjadi paket data digital, kemudian dari PC diteruskan melalui Hub/ Router/ ADSL Modem dikirimkan melalui jaringan internet dan akan diterima oleh tempat tujuan melalui media yang sama. Atau bisa juga melalui melalui media telepon diteruskan ke phone adapter yang disambungkan ke internet dan bisa diterima oleh telepon tujuan.

Untuk Pengiriman sebuah sinyal ke remote destination dapat dilakukan secara digital yaitu sebelum dikirim data yang berupa sinyal analog diubah ke bentuk data digital dengan ADC (Analog to Digital Converter), kemudian ditransmisikan, dan di penerima dipulihkan kembali menjadi data analog dengan DAC (Digital to Analog Converter). Begitu juga dengan VoIP, digitalisasi voice dalam bentuk packets data, dikirimkan dan di pulihkan kembali dalam bentuk voice di penerima. Format digital lebih mudah dikendaika, dalam hal ini dapat dikompresi, dan dapat diubah ke format yang lebih baik dan data digital lebih tahan terhadap noise daripada analog. 

Bentuk paling sederhana dalam sistem VoIP adalah dua buah komputer terhubung dengan internet. Syarat-syarat dasar untuk mengadakan koneksi VoIP adalah komputer yang terhubung ke internet, mempunyai sound card yang dihubungkan dengan speaker dan mikropon. Dengan dukungan software khusus, kedua pemakai komputer bisa saling terhubung dalam koneksi VoIP satu sama lain. Bentuk hubungan tersebut bisa dalam bentuk pertukaran file, suara, gambar. Penekanan utama dalam VoIP adalah hubungan keduanya dalam bentuk suara. 

Pada perkembangannya, sistem koneksi VoIP mengalami evolusi. Bentuk peralatan pun berkembang, tidak hanya berbentuk komputer yang saling berhubungan, tetapi peralatan lain seperti pesawat telepon biasa terhubung dengan jaringan VoIP. Jaringan data digital dengan gateway untuk VoIP memungkinkan berhubungan dengan PABX atau jaringan analog telepon biasa. Komunikasi antara komputer dengan pesawat (extension) di kantor adalah memungkinkan. Bentuk komunikasi bukan Cuma suara saja. Bisa berbentuk tulisan (chating) atau jika jaringannya cukup besar bisa dipakai untuk Video Conference. Dalam bentuk yang lebih lanjut komunikasi ini lebih dikenal dengan IP Telephony yang merupakan komunikasi bentuk multimedia sebagai kelanjutan bentuk komunkasi suara (VoIP). Keluwesan dari VoIP dalam bentuk jaringan, peralatan dan media komunikasinya membuat VoIP menjadi cepat popular di masyarakat umum. 

D. Konsep Dan Proses Kerja Voip Dengan Komunikasi Pbx 

Prinsip kerja VoIP adalah mengubah suara analog yang didapatkan dari speaker pada Komputer menjadi paket data digital, kemudian dari PC diteruskan melalui Hub/ Router/ ADSL Modem dikirimkan melalui jaringan internet dan akan diterima oleh tempat tujuan melalui media yang sama. Atau bisa juga melalui melalui media telepon diteruskan ke phone adapter yang disambungkan ke internet dan bisa diterima oleh telepon tujuan.

Untuk Pengiriman sebuah sinyal ke remote destination dapat dilakukan secara digital yaitu sebelum dikirim data yang berupa sinyal analog diubah ke bentuk data digital dengan ADC (Analog to Digital Converter), kemudian ditransmisikan, dan di penerima dipulihkan kembali menjadi data analog dengan DAC (Digital to Analog Converter). Begitu juga dengan VoIP, digitalisasi voice dalam bentuk packets data, dikirimkan dan di pulihkan kembali dalam bentuk voice di penerima. Format digital lebih mudah dikendaika, dalam hal ini dapat dikompresi, dan dapat diubah ke format yang lebih baik dan data digital lebih tahan terhadap noise daripada analog. 

Bentuk paling sederhana dalam sistem VoIP adalah dua buah komputer terhubung dengan internet. Syarat-syarat dasar untuk mengadakan koneksi VoIP adalah komputer yang terhubung ke internet, mempunyai sound card yang dihubungkan dengan speaker dan mikropon. Dengan dukungan software khusus, kedua pemakai komputer bisa saling terhubung dalam koneksi VoIP satu sama lain. Bentuk hubungan tersebut bisa dalam bentuk pertukaran file, suara, gambar. Penekanan utama dalam VoIP adalah hubungan keduanya dalam bentuk suara. 

Pada perkembangannya, sistem koneksi VoIP mengalami evolusi. Bentuk peralatan pun berkembang, tidak hanya berbentuk komputer yang saling berhubungan, tetapi peralatan lain seperti pesawat telepon biasa terhubung dengan jaringan VoIP. Jaringan data digital dengan gateway untuk VoIP memungkinkan berhubungan dengan PABX atau jaringan analog telepon biasa. Komunikasi antara komputer dengan pesawat (extension) di kantor adalah memungkinkan. Bentuk komunikasi bukan Cuma suara saja. Bisa berbentuk tulisan (chating) atau jika jaringannya cukup besar bisa dipakai untuk Video Conference. Dalam bentuk yang lebih lanjut komunikasi ini lebih dikenal dengan IP Telephony yang merupakan komunikasi bentuk multimedia sebagai kelanjutan bentuk komunkasi suara (VoIP). Keluwesan dari VoIP dalam bentuk jaringan, peralatan dan media komunikasinya membuat VoIP menjadi cepat popular di masyarakat umum. 

E. Kebutuhan Bagian Komunikasi Pbx Pada Server Softswitch 

1. Media Gateway Controller (MGC) atau Call Agent

MGC atau Call Agent adalah elemenutama softswitch, berfungsi untuk mengontrol semua sesi layanan dan komunikasi, mengatur interaksi elemen-elemen jaringan yang lain, dan menjembatani jaringan dengan karakteristik yang berbeda, yakni termasuk PSTN, SS7, dan jaringan IP.

2. Signalling Gateway (SG)

Signalling gateway (SG) menciptakan suatu jembatan antara jaringan SS7 dengan jaringan IP dibawah kendali dari MGC.SG hanya menangani pensinyalan SS7,sedangkan MGC menangani sirkit suara yang telah dibangun oleh mekanismepensinyalan SS7.

3. Media Gateway (MG)

Media gateway berfungsi sebagai elemen transport untuk merutekan trafik dalam jaringan softswitch dan juga mengirim atau menerima trafik dari jaringan lain yang berbeda, seperti PSTN,PLMN, VoIP H.323, dan jaringan akses pelanggan. Media gatewayterbagi menjadi trunk gateway dan access gateway

• Trunk gateway adalah mediagateway yang menjalankan fungsi media bagi softswitch class 4, yaitu merutekan trafik dari jaringan PSTN/PLMN (jaringan mobile).Trunk gateway akan melakukan proses konversi terhadap format transmisi jaringan terhubung yang berbeda beda, baik format sinyalt rafik maupun signalling atau protokolnya.
• Access gateway adalah media gateway yang menjalankan fungsi media bagi softswitch class 5 untuk menghubungkan softswitchdengan jaringan korporasi atau terminal pelanggan (CPE).

4. Media Server

Media server melaksanakan fungsinya yakni, untuk memperkaya softswitch dengan kemampuan media. Jika diperlukan, ini akan mendukung digital signal processing (DSP). Misalnya yakni untuk menanggapi respon suara, tugas itu akan dilakukan oleh media server. Media Video juga akan dilayani oleh suatu Media Server manakala bisa diterapkan.Media akses adalah media yang digunakan oleh jaringan softswitch untuk menjangkau pelanggan. Media akses dapat menggunakan cable modem, leasedcircuit, v.52, DSL, HFC, dan radio akses.

5. Feature Server

Untuk Menyediakan fasilitas atau layanan seperti billing, multi-partyconferencing, dll. Feature server menggunakan sumber daya dan layanan yang terkait dengan komponen yang lain pada softswitch tersebut. Contoh :gatekeeper, dll.

6. Operating support system (OSS)

Adalah elemen jaringan yang berfungsi untuk mendukung operasi dan pemeliharaan jaringan, seperti managemen jaringan, provisioning, billing, monitoring,statistik, dll.

Read More

Hatsune Miku PV Blogger Template v1.1

previously I've shared a tutorial How to Add a Progress Bar with Bootstrap. Today I will share a template for PV themed blue with pictures hatsune miku. this is my first template with the theme of PV. I hope you like it. by post grid design, custom post pv, defer videos and so forth. but I forgot to add the widget in footer maybe next version I will add the widget in footer.
Example Post i get from http://kara-tsuru.com and header image from konachan.net

Description Template

Hatsune Miku PV Anime Blogger Template is a template for Share PV or video like a Blog PV or Blog AMV with Custom Post for PV, and defer video for optimize loading blog.

This template is responsive, 2 column and colored blue with pictures hatsune miku from konachan.

Note : Click Button "How To Configure Template" for setting this template

Fix Lightbox : Go to HTML Editor, Add this CSS .CSS_LIGHTBOX{z-index:200!important;} before */]]></b:skin>

Document (Only) Template (Only) Live Preview How to Configure Template

• Responsive
• 2 Column
• PSD Header
• Optimize
• SEO
• Custom Post PV
• Pagination
• Spetific Label
• Genre Dropdown
• Search Box
• Document
• Remove Footer credits

Read More

How to Add a Progress Bar with Bootstrap

How to Add a Bootstrap Progress Bar 3 - today i want share bootstrap progress bar, before i already share Progress bar. but this different progress bar this use bootstrap for make a progress bar. if your blog has been no bootstrap please read the tutorial Bootstrap 3 in Blogger

How to add bootstrap progress bar in blogger ?

1. Go To Blogger > Yourblog > Layout > Add a Gadget > HTML/Javascript
2. Choose Style Progress Bar

Do not forget to replace the value style="width: 45%" and the aria-valuenow="45" with the number you want

Basic Progress Bar

45% Complete

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="45"
  aria-valuemin="0" aria-valuemax="100" style="width:45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

you can add this selector for change color
progress-bar-success progress-bar-info progress-bar-warning progress-bar-danger
add after name "progress-bar"
example : "progress-bar progress-bar-danger"

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="45"
  aria-valuemin="0" aria-valuemax="100" style="width:45%">
    45%
  </div>
</div>;

45% Complete

Progress Bar With Label

45%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="45"
  aria-valuemin="0" aria-valuemax="100" style="width:45%">
    45%
  </div>
</div>;

Progress Bar Color With Label
if you want without label change 30% Complete (success) with <span class="sr-only">30% Complete (success)</span>

30% Complete (success)

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (success)
  </div>
</div>

30% Complete (info)

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (info)
  </div>
</div>

30% Complete (warning)

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (warning)
  </div>
</div>

30% Complete (danger)

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (danger)
  </div>
</div>

Striped Progress Bars

30% Complete (success)

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (success)
  </div>
</div>

30% Complete (info)

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (info)
  </div>
</div>

30% Complete (warning)

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (warning)
  </div>
</div>

30% Complete (danger)

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (danger)
  </div>
</div>

Make Animated Progress Bar
Progress Bar Striped Animated

30% Complete

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete
  </div>
</div>

Read More

Update Meta Tag Bootstrap Template

Update Meta Tag Bootstrap Template because someone asked template now less SEO. then I decided to follow the old meta tag that I took from template mas sugeng which I think is also seo with slight modifications, for everyone who use my templates please follow the tutorial below to change the meta tags in the template, in order to get more traffic from previous.

1. Go to blogger > Yourblog > Edit HTML > Find HTML <head> (CTRL + F).
   

   <!-- Meta Tag -->
   <meta charset='utf-8'/>
   <meta content='width=device-width, initial-scale=1' name='viewport'/>
   <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <title><data:blog.pageTitle/></title>
   <b:else/>
       <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
           <title>404: Page Not Found | <data:blog.title/></title>
       <b:else/>
           <title><data:blog.pageName/></title>
       </b:if>
   </b:if>
   <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
   <script type='text/javascript'>
   //<![CDATA[
   (function() { (function(){function c(a){this.t={};this.tick=function(a,c,b){var d=void 0!=b?b:(new Date).getTime();this.t[a]=[d,c];if(void 0==b)try{window.console.timeStamp("CSI/"+a)}catch(e){}};this.tick("start",null,a)}var a;window.performance&&(a=window.performance.timing);var h=a?new c(a.responseStart):new c;window.jstiming={Timer:c,load:h};if(a){var b=a.navigationStart,e=a.responseStart;0<b&&e>=b&&(window.jstiming.srt=e-b)}if(a){var d=window.jstiming.load;0<b&&e>=b&&(d.tick("_wtsrt",void 0,b),d.tick("wtsrt_",
   "_wtsrt",e),d.tick("tbsd_","wtsrt_"))}try{a=null,window.chrome&&window.chrome.csi&&(a=Math.floor(window.chrome.csi().pageT),d&&0<b&&(d.tick("_tbnd",void 0,window.chrome.csi().startE),d.tick("tbnd_","_tbnd",b))),null==a&&window.gtbExternal&&(a=window.gtbExternal.pageT()),null==a&&window.external&&(a=window.external.pageT,d&&0<b&&(d.tick("_tbnd",void 0,window.external.startE),d.tick("tbnd_","_tbnd",b))),a&&(window.jstiming.pt=a)}catch(k){}})();window.tickAboveFold=function(c){var a=0;if(c.offsetParent){do a+=c.offsetTop;while(c=c.offsetParent)}c=a;750>=c&&window.jstiming.load.tick("aft")};var f=!1;function g(){f||(f=!0,window.jstiming.load.tick("firstScrollTime"))}window.addEventListener?window.addEventListener("scroll",g,!1):window.attachEvent("onscroll",g);
    })();
   //]]>
   </script>
   <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;//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='//www.blogger.com/openid-server.g' rel='openid.server'/>
   <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
   <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
   <!-- Facebook Open Graph -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta expr:content='data:blog.pageName' property='og:title'/>
   <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
   <meta content='article' property='og:type'/>
   </b:if>
   <meta expr:content='data:blog.title' property='og:site_name'/>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <meta expr:content='data:blog.metaDescription' name='description'/>
   <meta expr:content='data:blog.title' property='og:title'/>
   <meta content='website' property='og:type'/>
   <b:if cond='data:blog.metaDescription'>
   <meta expr:content='data:blog.metaDescription' property='og:description'/>
   <b:else/>
   <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot;for watch and download anime.&quot;' property='og:description'/>
   </b:if>
   </b:if>
   <b:if cond='data:blog.postImageUrl'>
   <meta expr:content='data:blog.postImageUrl' property='og:image'/>
   <b:else/>
   <b:if cond='data:blog.postImageThumbnailUrl'>
   <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
   <b:else/>
   <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs04331aOCnqTguffC4iKHmdQPrJ2d0Ao0cnH5FK8jYKPfQ1OBTwvbRy5uvG_G_r4NPHflemH_29_6xBi_tC6YVLQzblozJU-MciwJAGv6A_FI-ivW_rYtglF7tkMzo24hqVY7MZr5BWY/s400/no-thumbnail.jpg' property='og:image'/>
   </b:if>
   </b:if>
   <meta content='XXXXXX' name='Author'/>
   <meta expr:content='data:blog.title' name='twitter:site'/>
   <meta content='summary_large_image' name='twitter:card'/>
   <meta content='@XXXXXX' name='twitter:creator'/>
   

2. Replace the above code with this code
   

   <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
   <![endif]-->
   <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/> 
   <b:include data='blog' name='all-head-content'/>
   <meta content='XXXXXX' name='Author'/>
   <!-- Title Blogger -->
   <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><title><data:blog.pageTitle/></title><b:else/>
   <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><title><data:blog.pageName/> - <data:blog.title/></title><b:else/>
   <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.pageName == &quot;&quot;'><title>All Posts - <data:blog.title/></title><b:else/>
   <b:if cond='data:blog.pageType in {&quot;error_page&quot;}'><title>Page Not Found - <data:blog.title/></title><b:else/><title><data:blog.pageName/></title></b:if></b:if></b:if></b:if>
   <!-- Meta Keyword -->
   <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
   <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
   <!-- Noindex -->
   <b:if cond='data:blog.pageType in {&quot;archive&quot;} or data:blog.searchLabel or data:blog.searchQuery'><meta content='noindex,nofollow' name='robots'/></b:if>
   <!-- Facebook Open Graph Tag -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta expr:content='data:blog.pageName' property='og:title'/>
   <meta content='article' property='og:type'/>
   <b:else/>
   <meta expr:content='data:blog.pageTitle' property='og:title'/>
   <meta content='website' property='og:type'/>
   </b:if>
   <b:if cond='data:blog.postImageUrl'>
   <meta expr:content='data:blog.postImageUrl' property='og:image'/>
   <b:else/>
   <b:if cond='data:blog.postImageThumbnailUrl'>
   <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
   <b:else/>
   <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgc4HOGmrg6XifhpXyGvunXfKDTXGMwOqbU8caXmYKxuf_6DMsOefIAGzKExG23Tlr5wjgBQdDx3v82iArj0aUAJ1lH9TqSv0L1BaVJ3HIt4kT15fzH93ZQosXk9FUy_0hfXuAtxSAbW-/s1600/no-image.png' property='og:image'/>
   </b:if>
   </b:if>
   <b:if cond='data:blog.metaDescription'>
   <meta expr:content='data:blog.metaDescription' property='og:description'/>
   <b:else/>
   <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
   </b:if>
   <meta expr:content='data:blog.title' property='og:site_name'/>
   <meta content='en_US' property='og:locale'/>
   <meta content='en_GB' property='og:locale:alternate'/>
   <meta content='id_ID' property='og:locale:alternate'/>
   <meta content='summary' name='twitter:card'/>
   <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
   <meta content='XXXXXX' name='twitter:site'/>
   <meta content='XXXXXX' name='twitter:creator'/>
   <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
   

3. Then Save Template

Change this
<meta content='XXXXXX' name='Author'/>
.....
<meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
.....
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
....
<meta content='XXXXXX' name='twitter:site'/>
<meta content='XXXXXX' name='twitter:creator'/>

NOTE : This applies in my bootstrap template, such as Fanstrap, Fanbase v2, Ryotaku v2, and Sakura v2. for template Sparkling, Simple Fast. Please remove external links bootstrap

Update Meta Tag Bootstrap Template karena ada yang tanya templateku (mulai dari fanstrap serta keturunannya) kurang joss seonya. maka saya putuskan bukan ikut meta tag yang lama yang saya ambil dari template mas sugeng dengan sedikit modifikasi dari saya, untuk yang sedang menggunakan template saya silahkan ikuti tutorial dibawah ini untuk mengganti meta tagnya. moga trafiknya naik hehehe.

1. Pergi ke Blogger > Blogmu > Edit HTML > Cari kode HTML <head> (CTRL + F).
   

   <!-- Meta Tag -->
   <meta charset='utf-8'/>
   <meta content='width=device-width, initial-scale=1' name='viewport'/>
   <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <title><data:blog.pageTitle/></title>
   <b:else/>
       <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
           <title>404: Page Not Found | <data:blog.title/></title>
       <b:else/>
           <title><data:blog.pageName/></title>
       </b:if>
   </b:if>
   <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
   <script type='text/javascript'>
   //<![CDATA[
   (function() { (function(){function c(a){this.t={};this.tick=function(a,c,b){var d=void 0!=b?b:(new Date).getTime();this.t[a]=[d,c];if(void 0==b)try{window.console.timeStamp("CSI/"+a)}catch(e){}};this.tick("start",null,a)}var a;window.performance&&(a=window.performance.timing);var h=a?new c(a.responseStart):new c;window.jstiming={Timer:c,load:h};if(a){var b=a.navigationStart,e=a.responseStart;0<b&&e>=b&&(window.jstiming.srt=e-b)}if(a){var d=window.jstiming.load;0<b&&e>=b&&(d.tick("_wtsrt",void 0,b),d.tick("wtsrt_",
   "_wtsrt",e),d.tick("tbsd_","wtsrt_"))}try{a=null,window.chrome&&window.chrome.csi&&(a=Math.floor(window.chrome.csi().pageT),d&&0<b&&(d.tick("_tbnd",void 0,window.chrome.csi().startE),d.tick("tbnd_","_tbnd",b))),null==a&&window.gtbExternal&&(a=window.gtbExternal.pageT()),null==a&&window.external&&(a=window.external.pageT,d&&0<b&&(d.tick("_tbnd",void 0,window.external.startE),d.tick("tbnd_","_tbnd",b))),a&&(window.jstiming.pt=a)}catch(k){}})();window.tickAboveFold=function(c){var a=0;if(c.offsetParent){do a+=c.offsetTop;while(c=c.offsetParent)}c=a;750>=c&&window.jstiming.load.tick("aft")};var f=!1;function g(){f||(f=!0,window.jstiming.load.tick("firstScrollTime"))}window.addEventListener?window.addEventListener("scroll",g,!1):window.attachEvent("onscroll",g);
    })();
   //]]>
   </script>
   <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;//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='//www.blogger.com/openid-server.g' rel='openid.server'/>
   <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
   <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
   <!-- Facebook Open Graph -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta expr:content='data:blog.pageName' property='og:title'/>
   <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
   <meta content='article' property='og:type'/>
   </b:if>
   <meta expr:content='data:blog.title' property='og:site_name'/>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <meta expr:content='data:blog.metaDescription' name='description'/>
   <meta expr:content='data:blog.title' property='og:title'/>
   <meta content='website' property='og:type'/>
   <b:if cond='data:blog.metaDescription'>
   <meta expr:content='data:blog.metaDescription' property='og:description'/>
   <b:else/>
   <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot;for watch and download anime.&quot;' property='og:description'/>
   </b:if>
   </b:if>
   <b:if cond='data:blog.postImageUrl'>
   <meta expr:content='data:blog.postImageUrl' property='og:image'/>
   <b:else/>
   <b:if cond='data:blog.postImageThumbnailUrl'>
   <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
   <b:else/>
   <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs04331aOCnqTguffC4iKHmdQPrJ2d0Ao0cnH5FK8jYKPfQ1OBTwvbRy5uvG_G_r4NPHflemH_29_6xBi_tC6YVLQzblozJU-MciwJAGv6A_FI-ivW_rYtglF7tkMzo24hqVY7MZr5BWY/s400/no-thumbnail.jpg' property='og:image'/>
   </b:if>
   </b:if>
   <meta content='XXXXXX' name='Author'/>
   <meta expr:content='data:blog.title' name='twitter:site'/>
   <meta content='summary_large_image' name='twitter:card'/>
   <meta content='@XXXXXX' name='twitter:creator'/>
   

2. Ganti kode diatas dengan kode dibawah ini
   

   <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
   <![endif]-->
   <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/> 
   <b:include data='blog' name='all-head-content'/>
   <meta content='XXXXXX' name='Author'/>
   <!-- Title Blogger -->
   <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><title><data:blog.pageTitle/></title><b:else/>
   <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><title><data:blog.pageName/> - <data:blog.title/></title><b:else/>
   <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.pageName == &quot;&quot;'><title>All Posts - <data:blog.title/></title><b:else/>
   <b:if cond='data:blog.pageType in {&quot;error_page&quot;}'><title>Page Not Found - <data:blog.title/></title><b:else/><title><data:blog.pageName/></title></b:if></b:if></b:if></b:if>
   <!-- Meta Keyword -->
   <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
   <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
   <!-- Noindex -->
   <b:if cond='data:blog.pageType in {&quot;archive&quot;} or data:blog.searchLabel or data:blog.searchQuery'><meta content='noindex,nofollow' name='robots'/></b:if>
   <!-- Facebook Open Graph Tag -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta expr:content='data:blog.pageName' property='og:title'/>
   <meta content='article' property='og:type'/>
   <b:else/>
   <meta expr:content='data:blog.pageTitle' property='og:title'/>
   <meta content='website' property='og:type'/>
   </b:if>
   <b:if cond='data:blog.postImageUrl'>
   <meta expr:content='data:blog.postImageUrl' property='og:image'/>
   <b:else/>
   <b:if cond='data:blog.postImageThumbnailUrl'>
   <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
   <b:else/>
   <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgc4HOGmrg6XifhpXyGvunXfKDTXGMwOqbU8caXmYKxuf_6DMsOefIAGzKExG23Tlr5wjgBQdDx3v82iArj0aUAJ1lH9TqSv0L1BaVJ3HIt4kT15fzH93ZQosXk9FUy_0hfXuAtxSAbW-/s1600/no-image.png' property='og:image'/>
   </b:if>
   </b:if>
   <b:if cond='data:blog.metaDescription'>
   <meta expr:content='data:blog.metaDescription' property='og:description'/>
   <b:else/>
   <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
   </b:if>
   <meta expr:content='data:blog.title' property='og:site_name'/>
   <meta content='en_US' property='og:locale'/>
   <meta content='en_GB' property='og:locale:alternate'/>
   <meta content='id_ID' property='og:locale:alternate'/>
   <meta content='summary' name='twitter:card'/>
   <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
   <meta content='XXXXXX' name='twitter:site'/>
   <meta content='XXXXXX' name='twitter:creator'/>
   <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
   

3. lalu Save Template

Silahkan ganti terlebih dahulu kode yg mirip kek dibawah ini ganti XXXX
<meta content='XXXXXX' name='Author'/>
.....
<meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
.....
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
....
<meta content='XXXXXX' name='twitter:site'/>
<meta content='XXXXXX' name='twitter:creator'/>

NOTE : Ini hanya untuk template bootstrap, seperti Fanstrap v2, Fanbase v2, Ryotaku v2, and Sakura v2. untuk template simple fast dan sparkling silahkan hapus meta tag bootstrap
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>

Read More

How to Add a Facebook Comments in Blog

How to Add a Facebook Comments in Blog - because the template that I created does not use facebook comment box. so I made a tutorial how to add facebook comments were mild with the help setTimeout makes blogs is not heavy. please follow the instructions below.

Adding a Facebook Plugin Comment on the BlogAdding Javascript Facebook
javascript is not only useful on facebook comment, but other facebook plugin like fan page plugin, like button, the share button and more.

1. Go to Blogger > Yourblog > Template > Edit HTML > Find <body (CTRL + F in editor)
2. Add the code below after html <body
   

   <div id="fb-root"></div>
   <script type='text/javascript'>//<![CDATA[
   setTimeout( function () {
   (function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
   fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
   }, 2000);
   //]]></script>
   

3. Then Save Template

NB : If this code already exists please replace the above code so that fast blog

Adding HTML Facebook Comments

1. Go to Blogger > Yourblog > Template > Edit HTML > Find <b:include data='post' name='threaded_comments'/> (CTRL + F in editor)
2. You will find 2 html the same as below
   

   <b:if cond='data:blog.pageType == "static_page"'>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   <b:if cond='data:blog.pageType == "item"'>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   

3. Then Replace with the code below
   

   <b:if cond='data:blog.pageType == "item"'>
     <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   <b:if cond='data:blog.pageType == "static_page"'>
     <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   

4. Save Template

Adding CSS Facebook Comments
because facebook comment unresponsive, then you need to add this css and also add spacing between the facebook comments and the comments box blogger.

1. Go to Blogger > Yourblog > Template > Edit HTML > Find */]]></b:skin> or </style>(CTRL + F in editor)
2. Add css below after html */]]></b:skin> or </style>
   

   #fb-comments{display:block;margin:15px auto;}
   .fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}
   

3. Then Save Template

Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script

Cara menambahkan kotak komentar facebook di blog - karena template yang saya buat tidak menggunakan kotak komentar facebook. maka dari itu saya membuatkan tutorial cara menambahkan kotak komentar dengan bantuan "setTimetout" yaitu biar blog tetap ringan. bagi yang ingin membuatnya silahkan ikuti tutorial dibawah ini.

Menambahkan Plugin Kotak Komentar Facebook di BlogMenambahkan Javascript Facebook
javascript ini bukan hanya berguna pada kotak komentar facebook, tetapi plugin facebook lainnya seperti, tombol suka, tombol share, dan lainnya.

1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari Kode <body (CTRL + F pada saat di editor)
2. Tambahkan kode dibawah ini sesudah kode <body
   

   <div id="fb-root"></div>
   <script type='text/javascript'>//<![CDATA[
   setTimeout( function () {
   (function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
   fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
   }, 2000);
   //]]></script>
   

3. Lalu Save Template

NB : bagi yang sudah punya kode yang mirip seperti diatas saya sarankan ganti kode yang ada di blog mu dengan kode diatas ini.

Menambahkan HTML Kotak Komentar Facebook

1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <b:include data='post' name='threaded_comments'/> (CTRL + F pada saat di editormu)
2. Kamu akan melihat 2 kode yang sama seperti contoh dibawah ini
   

   <b:if cond='data:blog.pageType == "static_page"'>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   <b:if cond='data:blog.pageType == "item"'>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   

3. kalau udah ketemu silahkan ganti sama kode dibawah ini
   

   <b:if cond='data:blog.pageType == "item"'>
     <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   <b:if cond='data:blog.pageType == "static_page"'>
     <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
     <b:include data='post' name='threaded_comments'/>
   </b:if>
   

4. Lalu Save Template

Menambahkan CSS Kotak Komentar Facebook
karena kotak komentar facebook tidak responsive, maka kamu harus menambahkan kode css dibawah ini dan juga membuat jarak bagi kotak komentar facebook dan kotak komentar google.

1. Pergi ke blogger > Blogmu > Template > Edit HTML > Cari kode */]]></b:skin> atau </style>(CTRL + F pada saat di blog)
2. Tambahkan css dibawah ini sebelum kode */]]></b:skin> atau </style>
   

   #fb-comments{display:block;margin:15px auto;}
   .fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}
   

3. Lalu Klik Save Template

Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script

Read More

How to add Bootstrap to Blogger

How to add Framework Twitter Bootstrap to Blogger - yesterday i already share How to add a progess in blog, today i will share how to add framework twitter bootstrap 3 in blogspot.

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

My template also now using bootstrap 3.0 to create a responsive and full-featured blog provided from bootstrap like jumbotron, wells, progress, alerts, pager, pagination, etc.

What is Bootstrap?

1. Bootstrap is a free front-end framework for faster and easier web development
2. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
3. Bootstrap also gives you the ability to easily create responsive designs

How to add Bootstrap in blog?We will use the CDN (Content Delivery Network) of MaxCDN which provide support for Bootstrap.
Note : If you use a template that I design, then you do not need to follow this tutorial, Because my template already use bootstraps

Add a Bootstrap CSS in Blog

1. Go to Blogger > Yourblog > Template > Edit HTML > Find <head> (CTRL + F in editor)
2. Put the code below before <head>

   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
   <!-- If the viewport meta tag already exists in your blog, then you should replace it with below -->
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   

3. Save Template

Add a Bootstrap Javascript in Blog
If you want to make javascript drop down menus, tabs, scrollspy, collapse button (button spoiler), carousel, pop up alerts, button effect. then you should add this javascript. but if just want to create a responsive blog you do not need to add this javascript.

1. Go to Blogger > Yourblog > Template > Edit HTML > Find </head> (CTRL + F in editor)
2. Put the code below before </head>

   <!-- jQuery library (Optional - if your blog have jquery dont copy this) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   

3. Save Template

Now your blog have a bootstrap 3, for component, css, javascript you can visit the blog Bootstrap

Add a Bootstrap Container in Blog

1. Go to Blogger > Yourblog > Template > Edit HTML > Find <div id='outer-wrapper'> (CTRL + F in editor)
2. Then add class='container' in <div id='outer-wrapper'>

   <div class='container' id='outer-wrapper'>

3. Save Template

Add a Bootstrap Grid in Blog
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

1. Go to Blogger > Yourblog > Template > Edit HTML > Find <div id='main-wrapper'>
   (CTRL + F in editor)
   

   If it does not find HTML <div id='main-wrapper'>
   Please find this
   <div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
   

2. then replace with this html

   <div class='col-xs-12 col-sm-8 col-md-8 clearfix' id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

3. Find <div id='sidebar-wrapper'> (CTRL + F in editor)
   

   If it does not find HTML <div id='sidebar-wrapper'>
   Please find this
   <div id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
   or
   <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
   

4. Then replace with this

   <div class='col-xs-12 col-sm-4 col-md-4 clearfix' id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'> 

5. Find <div id='content-wrapper'> (CTRL + F in editor)
   
6. Then replace with this <div class='row' id='content-wrapper'>
   
7. Save Template

How to Make Post Gridsometimes i wonder why people liked the Style Post Grid.
If you want make post like grid you can follow this step

1. Find HTML <div class='blog-posts hfeed'> CTRL + F in editor)
2. Replace with this <div class='blog-posts hfeed row'>
3. Find HTML <b:include data='post' name='post'/> (CTRL + F in editor)
4. Replace with this
   

   <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>
   <div class='_grid col-xs-6 col-sm-4 col-md-4'><b:include data='post' name='post'/><div/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if></b:if>
   

5. Then Save Template

Now your blog is installed bootstrap, but your blog is not yet fully responsive. You have to manage the rest with CSS media queries for selectors who have not been responsive. if you are still confused with the tutorial above, please comment.
thank you

Cara Menambahkan Bootstrap di blogger - kemarin saya sudah share Cara menambahkan progress bar di blog, hari ini saya akan share cara menambahkan bootstrap di blogger.

Bootstrap yaitu kumpulan rangka HTML, CSS, dan Javascript yang paling popular sering digunakan developer untuk membuat blog responsive, dan mobile friendly.

Templateku juga menggunakan bootstrap versi 3 untuk membuat blog responsive dan full fitur yang disediakan bootstrap seperti jumbotron, well, progress, alert, pagination, button, dropdown, navigasi, dan lupa lagi.

Apa itu Bootstrap?

1. Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah
2. Bootstrap menyediakan desain HTML dan CSS untuk typography, form, button, tabel, navigasi, pop up, slider dan lainnya
3. Bootstrap juga memudahkan adnda untuk membuat blog responsif

Bagai mana cara menambahkan Bootstrap di blog?kita akan menggunakan CDN (Content Delivery Network) dari MaxCDN yang sudah disediakan di situs bootstrapnya.
Catatan : Jika kamu menggunakan template yang saya desain, maka kamu tidak perlu ikuti tutorial ini karena template saya sudah menggunakan bootstrap

Menambahkan CSS Bootstrap di blog

1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <head> (CTRL + F di editor)
2. Taruh kode dibawah ini sesudah kode <head>

   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
   <!-- jika meta tag viewport sudah ada di blogmu maka ganti sama kode dibawah ini -->
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   

3. Save Template

Menambahkan Javascript Bootstrap di blog
jika kamu mau membuat navigasi dropdown, tab, scrollspy, tombol spoiler, slider, kotak pop up, kotak info atau kotak peringatanda, dan tombol efek maka kamu harus menambahkan javascript bootstrap di blogmu, namun jika kamu hanya ingin membuat blogmu responsive maka kamu tidak perlu menambahkan javascript ini.

1. Pergi ke blogger > Blogmu > Template > Edit HTML > Cari kode </head> (CTRL + F in editor)
2. Put the code below before </head>

   <!-- jQuery library (Opsional - jika blogmu udah ada jquery jangan kocy js script dibawah ini) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   

3. Save Template

sekarang blogmu sudah terpasang bootstrap, untuk komponen, css, javascript kamu bisa cek disitus officialnya Bootstrap

Cara Menambahkan Kontainer Bootstrap di blog

1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <div id='outer-wrapper'> (CTRL + F di editor)
2. lalu tambahkan kode class='container' di <div id='outer-wrapper'> maka hasilnya seperti dibawah ini

   <div class='container' id='outer-wrapper'>

3. Lalu save template

Membuat Main Wrapper dan Sidebar-Wrapper Responsive
dalam Sistem Grid Bootstrap yaitu hanya memperbolehkan 12 kolom. contohnya

<div class='container' id='content'>
<div class='col-xs-12 col-sm-8 col-md-8' id='main'>
</div>
<div class='col-xs-12 col-sm-4 col-md-4' id='side'>
</div>
</div>

element id='main' dan elemen id='side' harus totalnya berjumlah 12 tidak boleh lewat. 8 + 4 = 12
semoga paham, untuk col-xs-12 yaitu kolom akan 100% pada saat di mobile. silahkan cek di situsnya untuk info lebih lanjut

1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <div id='main-wrapper'>
   (CTRL + F di editor)
   

   Jika tidak ketemu kode <div id='main-wrapper'>
   Silahkan cari kode ini
   <div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
   

2. Jika sudah ketemu lalu ganti dengan html dibawah ini

   <div class='col-xs-12 col-sm-8 col-md-8 clearfix' id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

3. Cari <div id='sidebar-wrapper'> (CTRL + F di editor)
   

   Jika tidak ketemu kode <div id='sidebar-wrapper'>
   Silahkan cari kode ini
   <div id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
   atau
   <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
   

4. Jika sudah ketemu lalu ganti dengan html dibawah ini

   <div class='col-xs-12 col-sm-4 col-md-4 clearfix' id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'> 

5. Cari kode <div id='content-wrapper'> (CTRL + F di editor)
   
6. jika ketmeu kode diatas lalu ganti denga kode dibawah ini <div class='row' id='content-wrapper'>
   
7. Save Template

Membuat Post Bergaya Grid dengan Bantuan Bootstrapterkadang saya sering bingung mengapa orang lebih suka template bergaya "Grid".
bagi yang ingin membuat post bergaya grid silahkan ikut tutorial dibawah ini

1. Cari kode HTML <div class='blog-posts hfeed'> CTRL + F in editor)
2. Lalu ganti dengan kode ini <div class='blog-posts hfeed row'>
3. Cari kode HTML <b:include data='post' name='post'/> (CTRL + F in editor)
4. Lalu ganti dengan kode ini
   

   <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>
   <div class='_grid col-xs-6 col-sm-4 col-md-4'><b:include data='post' name='post'/><div/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if></b:if>
   

5. Terus Save Template

Blogmu sudah terpasang bootstrap berserta cincongnya, namun blogmu belum sepenuhnya responsif, kamu harus mengatur css untuk seletor yang kamu buat/tidak ada dibootstrap dengan menggunakan CSS Media Queries bisa cari digugel tuh infonya, jika masih bingung cincong diatas silahkan fatok the snake di komentar.
terima kasih

Read More