Cara Menginstall Template Vadotaku Series

Cara Menginstall Template Vadotaku Series

. Akhirnya saya berhasil membuat template ketiga saya. Sebelum mempublikasikannya. Saya post dulu mengenai cara install template di blogger, sehingga saya tidak perlu menulis di masing-masing template. Semoga info berikut berguna.

Basic - Cara Memasang Template BLOGGER Secara Umum

1. Download Template di link berbentuk seperti berikut

Demo / Sampel website template ada di link berbentuk seperti berikut






2. Buka Blogger, di dasbor buka section Template > Edit HTML

Backup template yang ada buat cadangan: CTRL+A, klik kanan, CUT, buka notepad, paste, save

3. Buka file .zip atau .rar yang didownload (Vadotaku Series dan template umumnya menggunakan zip)

Letakkan file xml (contoh template.xml) di desktop. Klik kanan Open with Notepad. CTRL+A , copy, buka EDIT HTML Blogger, Paste.

3. Save Template

Customization - Kustomisasi

1. META TAGS - Cari kode berikut

<meta content='My Awesome Blog' name='description'/>
<meta content='keyword1, keyword2, rivadotaku' name='keywords'/>

Ganti My Awesome blog, yang terkandung pada meta deskripsi dengan deskripsi blog anda. Ganti keyword1 yang terkandung pada meta keywords dengan kata kunci blog anda. Konten yang diganti hanya yang berada di dalam content=''



2. IMAGES



Cari URL Gambar yang ingin diganti, klik kanan pada gambar.

 Hasil URL yang dicopy bisa di cari di edit html. Aktifkan kursor di edit html lalu CTRL+F. Copy URL yang tadi lalu pilih enter untuk mencari. Bila tidak ditemukan gunakan inspect element.

Biasanya gambar berupa background. Contoh seperti di gambar.

Specialization - Fungsi keren lainnya

Ada di keterangan di .zip template.

Vadotaku 004 Template

Vadotaku 004 Template - Simple New York

Konnichiwa minna. Kini template saya yang kedua berhasil dibuat! Fitur-fitur lebih baru! Setelah saya belajar programmer lebih lanjut. Fitur-fiturnya:

1. Responsive


2. Meta Tags


3. Dan masih banyak yang lainnya

Download langsung aja tkp ada di blog ini dan www.vado004.blogspot.com

DOWNLOAD
DEMO

Cara Membuat Widget Recent Comments

Sumber http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html

Tata Letak > Add a Gadget > HTML/Javascripts> Contents

Copy Paste kode berikut

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://bloganda.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Ganti  bloganda.blogspot.com dengan alamat blog anda

Ganti angka 5 pada  a_rc=5 dengan jumlah komentar yang anda inginkan

Ganti  m_rc=false dengan  m_rc=true jika anda ingin menambahkan tanggal komentar

Ganti  n_rc=true dengan n_rc=false jika anda ingin menyembunyikan judul

Ganti  angka 100 pada o_rc=100 dengan jumlah huruf paling banyak komentar yang ditampilkan

Rivado Shido

Cara Memunculkan Tab Earnings / Penghasilan [FIXED]

Setelan>Bahasa dan Pemformatan>Bahasa> Pilih English



Gampang bukan? Masalah selanjutnya hanyalah diterima atau tidak, hehehe.

Cara Membuat Preloader Simpel Di Blog

Sumber http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/

Preloader kali ini berfungsi untuk memunculkan animasi sementara blog sedang di load. Elemen lain akan disembunyikan selama proses loading dan akan dimunculkan dengan efek fade dengan mulus.



Tertarik?



Proses Instalasi, komentar bila anda gagal

Plugin JQuery

1. Buka Template > Edit HTML


2. Klik salah 1 kode, pencet CTRL + F


3. Cari </body>


4. Diatas kode tersebut tambahkan kode 

<!-- jQuery Plugin -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<!-- Preloader -->
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>

CSS / Skin

1. Cari ]]></b:skin> 


2. Diatas kode tersebut tambahkan kode

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}
#status {
    width:200px; /* lebar gambar, kalau yang dibawah nya tinggi gambar */
    height:200px;
    position:fixed;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(http://sierrafire.cr.usgs.gov/images/loading.gif); /* alamat gambar */
    background-repeat:no-repeat;
    background-position:center;
    background-size: 200px;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

HTML

1. Cari kode <body>


2. Dibawah kode tersebut tambahkan kode berikut

<!-- Preloader -->
<div id='preloader'>
    <div id='status'/>
</div>

Cara Menyembunyikan Suatu Widget Dalam Halaman Tertentu

Selamat malam semua. Kali ini saya akan memberikan tutorial tentang cara menyembunyikan suatu widget dari suatu halaman. Hal ini sungguh berguna jika anda ingin membuat halaman berisi film (mungkin supaya fokus, hehehe). 

Berikut caranya:

1. Cari tag elemen widget tersebut .Baca disini

2. Dasbor > Template > Edit HTML

3. Tuju ke kode widget anda

Kode akan terlihat seperti ini

Atau anggap saja seperti ini sebagai contoh

01	<b:widget id='WidgetID' locked='false' title='Widget title'type='HTML'>

02	<b:includable id='main'>

03	<b:if cond='data:title != &quot;&quot;'>

04	<h2 class='title'><data:title/></h2>

05

</b:if>

06	<div class='widget-content'>

07	<data:content/>

08

</div>

09	<b:include name='quickedit'/>

10	</b:includable>

11	</b:widget>

4. Masukkan kode kondisi dibawah <b:includable id='main'>. Masukkan kode

<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>

diatas </b:includable>

Maka akan seperti ini contohnya

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>
MASUKAN KODE KONDISI
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>
</b:includable>
</b:widget>

5. Simpan / Save template

Komentar jika ada kesalahan

Disunting dari http://www.bloggersentral.com/2010/02/display-widget-on-specific-pages-in.html