Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):    jika ingin letak di atas header letakkan kode di bawah diatas kode ini  <div id='header_wrapper'>untuk bawah footer letak dibawah kode <div id='footer'>

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'> jika ingin letak di atas header letakkan kode di bawah diatas kode ini  <div id='header_wrapper'>
untuk bawah footer letak dibawah kode <div id='footer'>

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya dibagian elemen halaman,

Continue reading...

Cara Memasang Recent Post

Langsung saja kepada pokok persoalan, disini sobat tidak perlu sampai edit template cukup login ke dasbor sobat Rancangan - Elemen Laman tambah gadget selanjutnya sobat pilih HTML/JavaScript selanjutnya copy pastekan kode berikut :

Untuk Recent Post berikut kodenya :


<div style="overflow:auto; padding:5px; width:270px; height:280px; background-color: ; border:0px solid #ccc;">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[1] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[2] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[3] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[4] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
showRandomImg = true;
boxwidth = 268; 
cellspacing = 8;
borderColor = "";
bgTD = "";
thumbwidth = 40;
thumbheight = 40;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://www.andisyam.web.id/";
</script>
<script src="http://vbcomp.googlecode.com/svn/trunk/js/recentposts_thumbnail.js" type="text/javascript"></script>
</div>

ketrngn
untuk yang berwarna merah, silahkan sobat atur sesuai keinginan sepeti lebar kotak, jarak antara, lebar dan tinggi image thumbnails, ukuran huruf dan jumlah recent post yang akan sobat tampilkan.

Continue reading...

Cara Tambah Jenis Flash Label Cloud Wordle (FatColud) Widget Untuk Blogger / Blogspot

Hi! Pertama, saya berharap Anda sangat Selamat Tahun Baru. Ya, widget blogger baru di depan Anda. Pernahkah Anda melihat kata Awan Wordle? Widget ini mirip dengan awan Wordle kata disebut sebagai FatCloud. Dengan widget ini Anda dapat menampilkan label Anda sebagai awan kata Wordle dalam format yang berbeda. Widget ini berbasis Flash dan Menghasilkan Label Cloud (FatCloud) secara otomatis.

Ini mencakup Berbagai jenis Font, Differenttypes Sudut teks dan Skema Warna dengan desain kustom juga, sehingga Anda dapat Desain Label Cloud Anda berbeda

Saya mencakup semua pilihan di widget ini. Lihat di bawah layar-shot

Bagaimana Menambahkan Widget ini ke Blogger?

1. Masuk ke Akun Blogger
2. Pergi ke Desain> Edit Html
3. Pencarian untuk Kode Bellow dari Bagian (Tanpa memeriksa Perluas WidgetCheckbox)

< b : section class = 'sidebar' id = 'sidebar' preferred = 'yes' > 

Catatan: Kode di atas tidak terlihat di semua template karena perubahan dalam Kelas atauId. Untuk anggaplah Jika template memiliki dua sidebars dari Kanan dan Kiri Kelas, kemudian atau Id diubah ke sidebar kiri, sidebar kanan, sidebar-wrapper-kiri dan seperti begitu ... 

Jadi harap pastikan sebelum pencarian di atas kode

Dan Akhirnya menambahkan Kode Widget Dihasilkan hanya Setelah itu Dan Simpantemplate Anda 

Ingin ada Bantuan tentang widget ini?, Lalu Hubungi saya melalui Komentar atau Klik di sini

<b:widget id='Label89' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2> <data:title/> </ h2>
</ B: if>
<div class='widget-content'>
<div id='way2blogging_label_cloud' style='width:100%;height:300px'>
<b:loop values='data:labels' var='label'>
<a class='tag-link' expr:href='data:label.url' expr:style='"font-size: 1" + data:label.cssSize + "pt;"'> <Data : label.name /> </ a>
</ B: loop>
</ Div>
<script src='http://bloggerblogwidgets.googlecode.com/files/FC_Blogger_Way2blogging.js' type='text/javascript'/>
<p style='font-size:0.6em;text-align:right'> FatCloud untuk Blogger oleh <a href='http://way2blogging.blogspot.com'> Way2Blogging </ a> </ p>
<script type='text/javascript'>
fatCloud.SWF = "http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging-fatcloud.swf";
var way2blogginglabelcloud_fatcloud = baru FatCloud ("way2blogging_label_cloud", "Wordle");
way2blogginglabelcloud_fatcloud.options = {"textAngle": "Horizontal", "sizeRatio": "12", "colorscheme": "Aqua", "fgColor": "# 868A08", "mgColor" : "# 7401DF", "SColor": "# F5F6CE", "bgcolor": "# FFFFFF", "font": "Laporan", "randomFont": "ya"};
fatCloud.fontList = ["Expressway", "Meloche", "Museo", "Negosiasi", "Laporan"];
way2blogginglabelcloud_fatcloud.noXML = true;
way2blogginglabelcloud_fatcloud.saveSkinCacheURL = "/";
document.getElementById ("way2blogging_label_cloud") style.visibility = "tersembunyi".;
</ Script>
<b:include name='quickedit'/>
</ Div>
</ B: includable>
</ B: widget>

Continue reading...

Cara Membuat Recent Post berjalan

sebelumnya saya akan menjelaskan secara singkat apa itu Recent Post..?
Recent Posts adalah widget yang menampilkan beberapa judul posting terbaru, yang bisa anda tampilkan pada sidebar sehingga pengunjung lebih mudah mengetahui posting-posting yang terbaru.

Biasanya recent post hanya menampilkan link judul atau dengan Thumbnail Image. Namun sekarang ada yang sedikit berbeda yaitu recent post dengan Thumbnail Image dengan model Slide Show (berjalan kebawah).

Jika anda berminat dan ingin membuatnya, ikuti langkah berikut :


1. Login ke akun Blogger anda
2. Klik Perancang >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">
#rp_plus_img{height:282px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://rizki-khaizir.googlecode.com/files/recentpostslidethumbnails.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 25;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>


5. Klik Simpan
6.dan  Lihat hasilnya.


Catatan :

1. Untuk membuat halaman menjadi lebih tinggi, gantilah nilai height:282px sesuai keinginan;
2. Untuk mengganti kecepatan, rubahlah nilai var speed = 400; sesuai keinginan anda;
3. Rubahlah nilai var numposts = 25; untuk menampilkan jumlah postingan;
4. Rubahlah nilai var numchars = 75; untuk mempilkan jumlah karakter;
5. Feed sobat harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh" atau anda bisa langsung masukkan feeds anda dalam script tersebut.

Selamat mencoba, anda juga bisa meng-otak-atik script sesuai kehendak anda . Semoga berhasil dan bermanfaat.

Continue reading...