-->
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Selasa, 03 Mei 2011

Cara Membuat Recent Post dengan Thumbnails


Apakah blog anda memakai recent post???tahu gak recent post? Recent post adalah posting terakhir. Menampilkan postingan terakhrir dengan tampilan daftar sudah biasa, namun kali ini dengan tampilan gambar yang ada pada postingan anda. Jika anda berminat, ikutilah langkah-langkah di bawah ini:
1. Masukklah atau sign in atau log in ke akun bloger anda.
2. Setelah itu klik rancangan dan klik elemen-elemen
3. Kliklah Tambah Gadget dan pilih HTML
4. Copy-Paste code dibawah ini

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";

thumbwidth = 40;
thumbheight = 40;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

icon2 = " ";
numposts = 5;
home_page = "http://bayuadiyasa.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


5. Ingatlah Cek dahulu sebelum anda simpan dengan mengatur hal-hal seperti:
boxwidth - Lebar widget
cellspacing - Space antara cells (default adalah 1 sudah bagus)
borderColor - Warna Border (Warna template widget bisa anda ganti.Defauld adalah putih)
thumbwidth & thumbheight - Lebar dan panjang thumbnail (default adalah 40 sudah bagus)
fntsize - Ukuran huruf judul postingan
acolor - Warna huruf judul postingan
aBold - Bila ingin ditebalkan adalah true, jika tidak false saja.
numposts - Berapa banyak recent post yang akan ditampilkan
home_page : http://bayuadiyasa.blogspot.com/ (Ganti dengan URL blog anda)
6. Setelah anda merasa puas dengan sesuatu yang anda kerjakan, klik simpan atau save.
Nah, selesai juga tutorial blognya, inget share yah...good luck blogger sejati




Sabtu, 30 April 2011

Cara Membuat Link Post Terakhir Pada Blog

Pernahkah anda melihat pada blog atau website?perhatikanlah jikalau blog atau website itu ada link post terakhirnya. Dalam hal ini, jumlah link post terakhir pada blog atau website anda dapat anda tentukan sendiri dengan mengikuti langkah-langkah sebagai berikut:
1. Masuklah atau log in atau sign in ke akun blogger anda
2. Kliklah menu dashboard
3. Kliklah layout atau Tata Letak
4. Kemudian kliklah Add a Gadget atau tambah gadget
5. Kliklah HTML atau javascript
6. Copy-Paste code di bawah ini

<a href="http://bayuadiyasa.blogspot.com/search?max-results=%7B20%7D">LIHAT 20 POSTING TERAKHIR</a>
7. Untuk anda, http://barajakom.blogspot.com gantilah dengan alamat blog anda.
8. Selain itu kalimat LIHAT 20 POSTING TERAKHIR dapat anda tukar dengan kalimat yang anda sukai.
9. Ingat klik Save atau simpan
Nah, akhrinya beres juga pekerjaan anda semoga berhasil dan bermanfaat yah.have nice day ^_^












Cara Menghilangkan Judul dan Deskripsi Blog Pada Header

Biasanya blog anda pasti memakai header dengan keadaan tulisan atau judul serta deskripsi blog yang tidak bisa diganggu gugat kreasinya. Namun, untuk menghilangkan hal itu, anda bisa mengikuti langkah-langkah sebagai berikut:
1. Masukklah atau log in atau sign in ke akun bloger anda,
2. Klik Menu Rancangan
3. Setelah itu klik edit HTML
4. Setelah itu, ingatlah centang Expand Widget........
5. Ctr+F atau carilah code dibawah ini
#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

6. Jika anda telah menemukannya, tambahkanlah code visibility:hidden; sehingga menjadi seperti code di bawah ini
#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}
7. Setelah selesai, ingat klik Save atau simpan
Semoga bermanfaat dan ingat berkunjung kembali yah....











Selasa, 26 April 2011

Cara Mengganti Icon Blog Anda Pada Addresbar

Biasanya, tampilan icon pada titlebar hanya tampilan icon blog berwarna orange. Akan tetapi, icon tersebut dapat diganti dengan mengikuti cara-cara di bawah ini:

1. Masuklah(sign in) ke akun blogger anda.
2. Setelah itu pilihlah menu Layout (Tata Letak) dan kemudian klik Edit HTML.
3. Carilah kode di bawah ini.
<b:include data='blog' name='all-head-content'/>
4. Kalau sudah ketemu copy-paste kode berikut di bawah kode tadi.
<link href='url-gambar' rel='shortcut icon'/>
5. Gantilah url gambar di atas dengan url anda yang akan anda pakai sebagai icon yang anda inginkan
Nah, semoga apa yang anda coba lakukan berhasil dan tidak mengalami kendala. Salam Bahagia untuk kita semua..

Jumat, 15 April 2011

Cara Buat Readmore Pada Postingan Blog

Penah tidak sobat lihat postingan di blog ada bagian yang tidak lengkap dan isi tulisan baca selengkapnya(readmore). Caranya buat gak terlalu sulit kok. Langkah-langkahnya gini:
1. Login ke Blogger sobat dulu
2. Pilih Tata Letak kemudian pilih Edit HTML
3. Ingat beri tanda centang pada “ Expand Widget Templates “
4. Cari kode di bawah ini
</head>
5. Kalau sudah ketemu, taruh kode berikut tepat di bawahnya
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>
6. Setelah itu, cari kode dibawah ini
<data:post.body/>
7. Ganti kode yang anda temukan dengan kode di bawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
8.Simpan atau save hasil pekerjaan anda.

Senin, 11 April 2011

Cara Pasang Widget Buku Tamu Bisa Menghilang

Hey guezt....Pernah liat buku tamu kalok di klik muncul lagi kan? Kalok kamu pengen narok kayak gitu di blog kamu caranya gni:

1. Log in di blogger dengan id anda untuk masuk ke akun dan mengedit blog anda.
2. Klik Rancangan
3. Tambahkan gadget dengan mengklik Add a Gadget
4. Pada menu yang tersedia, pilih atau klik HTML/Javascript
5. Selanjutnya masukkan kode di bawah ini dengan cara copy dan paste pada kotak HTML tersebut.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLSyRrrOFcBXfgTr_NLVKR2rA-PYoeja8C246jiabrhRXLF-gC2xHnqXa6fzLC62Y_qQb2B93rXNqvjK5qrBu4gqphthIM3vJ_zkog3n4M2wvkhB9pPIkdc-oLS0uviBlJtYleg0tOIABd/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<-- kode buku tamu kamu disini -->

<br/>
Mau punya buku tamu seperti ini?<br/>
<a href="http://sodiycxacun.blogspot.com/2010/05/cara-memasang-buku-tamu-tersembunyi.html">
Klik disini
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6. Klik Save/ Simpan
Nah..semoga bermanfaat bagi anda yah...salam kenal....good luck.