Rivado Blog: blogger tips

Tampilkan postingan dengan label blogger tips. Tampilkan semua postingan

Sabtu, 05 April 2014

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.

Jumat, 04 April 2014

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

Buka Template > Edit HTML

Klik salah 1 kode, pencet CTRL + F

Cari </body>

Diatas kode tersebut tambahkan kode

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

<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

Cari ]]></b:skin>

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

Cari kode <body>

Dibawah kode tersebut tambahkan kode berikut

<div id='preloader'>
<div id='status'/>
</div>

Rabu, 26 Februari 2014

Cara Memasang Template Yang Berbeda di Setiap Bagian Blog

Sekarang berdasarkan artikel disini. Saya mengerti cara membuat template lain bekerja dalam suatu posting blog. Sayangnya, untuk melakukan hal ini anda harus sabar dan mengerti sedikit coding namun anda pasti bisa. Dalam hal ini kita hanya mengambil CSS. CSS utama berupa tulisan berwarna biru di dalam <skin>. Dimulai di <b:skin><![CDATA[/*, diakhiri di ]]></b:skin>.

Untuk contoh bandingkan saat kursor menyentuh gambar di blog post yang ini dengan blog post yang lain.

(Perumpamaan) Misalnya anda ingin gambar lingkaran di template anda berubah memanjang ketika membuka posting blog.

Misalnya, CSS template default berupa ini

headerst

panjang 5 cm

Sedangkan CSS template lain yang akan digunakan seperti berikut

kepalamanusia

panjang 10 cm

Lalu anda inspect element di header. Tag CSSnya berupa headerst. Maka kita ubah kepalamanusia menjadi headerst. Maka lingkaran tersebut akan memanjang.

Jadi CSSnya:

headerst

panjang 10 cm

Cara meletakkan CSS baru

1. Di Edit HTML klik kiri di script untuk meletakkan kursor lalu pencet CTRL+F

2. Cari kode </head>

3. Diatas kode tersebut paste kode berikut

KONDISI<style>ISI CSS</style></b:if>

Jika anda masih benar-benar pemula dalam programming blog, silahkan komentar kemauan anda, maka saya akan bantu.

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 != ""'>
<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

Rivado Blog