TIK ITU ASIK: Blogger Tutorial

Showing posts with label Blogger Tutorial. Show all posts

Membuat scroll di postingan

Halo para sobat bloger jumpa lagi di postingan baru Blogger Tutorial, kali ini saya akan kasih tau para sobat blogger yang pingin di dalam postingan ada scrollnya, buat mengirit-ngirit tempat posting.

wah bagus juga yaaaa....????? kalo di dalam posting ada scrollbarnya kalo para sobat pingin dan penasaran, langsung aja ajarin ajarin caranya cukup gampang ko' dan ga banyak copy paste disana sini

Oke para sobat seperti biasa login dulu ke blog para sobat

Klik Tata Letak edit HTML
Beri tanda centang pada "Expand Template Widget" yang ada di pojok kanan
Kemudian Carai code berikut ]]></b:skin> copy dan letakkan code di bahwah ini tepat di atas ]]></b:skin> :

.scrollbox {
height:150px;
width:450px;
overflow:auto;
}

Lihat text yang berwarna kunig itu adalah ukuran scrollbar. para sobat bisa menggantinya dengan ukuran yang para sobat inginkan. lalu simpan template

pada saat para sobat posting, letakkan isi posting yang akan di scrollbar di antara code <div class="scrollbox"> dan </div>

Contohnya adalah sebagai berikut.
<div class="scrollbox">
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
</div>

Selamat mencoba, semoga bermanfaat, n jangan lipa comennya ok

Kang Fathur

Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot

Blog Triks Blogger Tutorial Tips Blogger Tips Trik Blog Widget

Seperti yang telah ramai diberitakan di dunia internet, Google telah membuat satu fitur baru:" Official Google +1 Button" yang merupakan tool bagi pengunjung blog/web serta search engine untuk memberikan "voting" bagi sebuah halaman blog/web yang menurutnya memiliki nilai (value) manfaat yang besar. Menurut Google, +1 Button juga memberikan referensi dan rekomendasi bagi Google dalam menentukan peringkat suatu halaman web di search engine (SERPs). Oleh karena itu, memasang tombol +1 Google bisa menjadi salah satu alternatif bagi pemilik blog/web untuk meningkatkan SEO blog/web tersebut. Meskipun saat ini fitur Google +1 baru muncul di domain google.com, namun memasangnya mulai sekarang tidak ada salahnya, karena di domain tersebut pun semua website di berbagai belahan dunia juga diperhitungkan, apalagi jika nanti fitur ini juga muncul di domain google.co.id, pasti lebih bermanfaat dan berkali lipat efeknya terhadap SEO dan SERPs.

Cara memasang Tombol +1 Google di Blogger/Blogspot:
Untuk template blogger yang default atau secara official merupakan bawaan blogger, fitur ini dapat dibuat dengan mudah melalui halaman page elements/edit gadget, karena fitur ini sudah secara resmi ditambahkan ke Blogger. Perhatikan gambar berikut:

Tombol +1 Google dapat dengan mudah ditampilkan dengan mencentang "Show Share Button". Masuk ke dashboard > design/rancangan > kemudian klik "edit post " di bagian badan template dan akan tampil pop up window seperti gambar di atas.

Namun, bagi template yang sudah dimodifikasi dan bukan default template, fitur "share button" biasanya telah dihapus. Oleh karena itu diperlukan editing template HTML untuk menambahkan fitur/tombol +1 Google tersebut.

Secara official, ada 4 jenis button atau tombol Google +1:

Besar (tall)

Standar

Medium

Small

Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"
Copy kode berikut dan paste tepat SEBELUM kode </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
Copy kode berikut:


<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone size="standard"></g:plusone>
</div>
</b:if>


Kostumisasi Tombol Google +1:
- Ganti standard dengan tall, medium atau small jika ingin mengubah ukuran tampilan button/tombol seperti contoh di atas.
- Ganti right dengan left jika ingin button/tombol berada di sisi kiri.
- Kode berwarna biru akan menampilkan tombol hanya ketika halaman posting dibuka. Jika anda menggunakan auto readmore, maka tombol tersebut tidak akan muncul di post summary, sehingga tampilan post summary tidak akan rusak. Jika anda tidak menggunakan auto readmore atau menggunakan readmore tapi tetap ingin menampilkannya di post summary, hapus kode biru tersebut.
Jika ingin memasang button di bagian bawah posting, cari <div class="post-header-line-1"> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya. Jika kode tersebut tidak ketemu, letakkan kode di ATAS <data:post.body>.
Jika ingin memasang button di bagian bawah posting, cari <data:post.body> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.
Save template.

Kang Fathur

Cara Mengganti Icon Pada Adress Bar

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Ada salah satu sobat yang bertanya melalui komentar "kang fatur gimana cara mengganti icon pada adress bar kaya yang punya kang fatur". OK untuk sobat raa_cassie mungkin ini jawaban dari saya, mudah-mudahan bisa membantu

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi sobat yang tidak puas dengan icon/gambar tersebut, sobat bisa menggantinya dengan gambar sesuai dengan keinginan kita. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....

masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXV-70J6SPqy5CyYmsgrL05NVDLZbt3cXoveCNC7zTLDGylLPvZPfWPT1AZRwNFZyVaV3YwiyMnHI2covsCysRTWebL7N0KJSzsaQzik93cle27677irdrVpvSYzRDUzY9fmtWmq0Zwg/s1600/Title+Bar.gif' rel='shortcut icon'/>

Ganti huruf yang dicetak tebal dan merah dengan lokasi gambar dimana sobat menyimpannya. Sobat bisa menyimpan gambarnya di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo sobat tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

http://img404.imageshack.us/img404/1214/image10vr1.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

Selamat mencoba....

Kang Fathur

Membuat Efek Bintang berjatuhan di halaman blog

Blogger Tutorial Blogger Widget Efek Blogger JavaScript

Kadangkala kita bosan melihat halaman blog kita gitu-gitu aja tanpa ada pemandangan yang mengasikkan, dan ingin memolesnya biar keliatan indah. Oke para sobat bloger khususnya pemula kali ini saya dapet trik lagi ni setelah ke sana kemari mencari-cari akhirnya saya menemukan juga yaitu cara membuat efek bintang berjatuhan di halaman blog para sobat. Wah wah wah...........wah!!!! udah kebayang ya pasti halaman blog kita tidak sepi lagi kalau sudah ada bintang-bintang mah hehehehe....

Oke para sobat, Jika para sobat tertarik untuk menambah efek bintang, kali ini ksaya akan coba membantu para sobat.

Untuk itu silahkan ikuti langkah-langkah berikut ini :

1. Seperti biasa Masuk ke Blog para sobat
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten yang tersedia

yang ini Efek bintang berjatuhan dengan jumlah 30 buah

<script src="https://sites.google.com/site/efekefek/file-js/bintang30.js " type="text/javascript"></script>

kalau yang ini Efek bintang berjatuhan dengan jumlah 20 buah

<script src="https://sites.google.com/site/efekefek/file-js/bintang20.js" type="text/javascript"></script>

7. Klik Simpan
8. Selesai

Selamat mencoba, semoga berhasil dan bermanfaat di hati sobat

Jangan lupa ucapin makasih yaaaaa.......??

Kang Fathur

Efek Opening Aneh

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Hahahah... kayak ga ada nama yang lain aja buat efek pembuka yang satu ini ! btw karena sudah bingung buat kasih namanya, terpaksa saya kasih nama n'tu ajah.....
setelah kang fatur posting Membuat Efek Roaming Windows akhirnya kangfatur buat lagi nie yang judulnya pake aneh, Kenapa diblang aneh yaa karena membuat Jendela kita menjadi mondar mandir kaya yang lagi pusing hehe. Okay... , jika para sobat tertarik, silahkan ikuti langkah-langkah berikut :

1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan script
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget

Kemudian Copast(Copy paste) kode dibawah ini :

<script>
//Edited by Andreas fafandreo at october'2008
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>

Setelah sobat paste kode diatas, silahkan sobat klik tombol Save/simpan o.k?
Jangan lupa, karena kita menginginkan agar gadget ini beraksi pada saat awal halaman dibuka, maka letakkan gadget ini pada posisi PALING ATAS !! baik pada side bar maupun tempat gadget lainnya o.K?
Dan lihat hasilnya !! hehehe... kalian dapet opening yang bikin dag-dig-dug pengunjung !!
Mudah bukan ?

Kalau sudah dipasang... silahkan anda bagikan ilmu ini pada teman-teman yang membutuhkan, Jangan pelit ya ?

Selamat mencoba !!

Kang Fathur

Menghilangkan Navbar Blogspot

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Sobat Monik mengajukan pertanyaan yang di tulis melalui shoutMix di Blog Kang Fatur yang ini. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :
<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
5. Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Perubahan Template
Selesai.

Untuk template baru

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
5. Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

6. Klik tombol Simpan Template
7. Selesai.

Selamat menikmati blog tanpa Navbar, semoga bermanfaat.

Kang Fathur

Membuat Widget Tersembunyi

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog Widget

Para sobat bloger, Kang Fatur nongol lagi nie setelah satu bulan lebih ga posting-posting yaa malum jadi orang susah akhirnya waktu buat postingpun ga ada karena sibuk masalah pribadi. Walaupun sibuk yaa alhamdullilah dihari minggu ini Kang Fatur bisa posting lagi untuk berbagi dengan sobat-sobat blogger.

Kali ini Kang Fatur mao berbagi dengan sobat yaitu membuat Buku Tamu Tersembunyi hehe aneh yaa?? sebetulnya widget ini sudah banyak para blogger lain yang bikin tapi demi para pengunjung blog Kang Fatur, yaa Kang Fatur sediakan disini dan mudah-mudahan bermanfaat di hati para sobat.

Gak usah panjang lebar lagi tiba saatnya kita ke langkah-langkah pembuatan :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<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/AVvXsEi26aVKnr3DxIhB83nei4nM2-QQbSBqnEHvpEDP6oWxxWgcjHBJuQvkmRpcyRdKkM36SJ092xBuwk15fsjylBlW6-pn591gxYkdMms6Q9DLf5a9-xCVaHV01FLZfF4-mFs2ZIe1ZAkJ4lLF/') 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">



<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://ade-tea.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi.html">
sini (Blog KangFatur)
</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>

4. Pada kode di atas, cari kode dan ganti kode tersebut dengan kode buku tamu yang sobat dapatkan dari situsnya,
5. Sobat juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah sobat deeh hehe.
6. Border dan Backgrounnya juga bisa sobat ubah ubah O.K
7. Selamat mencoba!

Kang Fathur

Posting Blog Mengunakan MS Office Word2007

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Bagi para pecinta Blog yang pingin selalu update blog tapi cuma punya koneksi internet yang minim. Ini ada salah satu alternatip agar blog selalu up to date, tanpa bikin bandwidth jebol. Semua orang tentu sudah sangat tahu dengan aplikasi ini. Microsoft Office Word (ato disingkat MS Word). Untuk versi 2007, sudah disediakan add on Post untuk Blog. Sedangkan Untuk versi sebelumnya, membutuhkan installasi aplikasi yang bernama BloggerForWord.

Untuk membuat post pada MS Word 2007, kita tinggal klik tobol Office pada sisi kiri atas jendela Word, klik New, pilih New Blog Post, Klik tombol Create. Maka akan muncul opsi untuk mendaftar ke pusat layanan Blog (Blogger, Wordpress dll).

Jika sudah tersambung dengan internet, maka kita bisa langsung membuat account dengan klik tombol Register Now, maka akan keluar pilihan penyedia blog seperti Windows Live Spaces, Blogger, Wordpress dll, seperti pada gambar di bawah ini. Selanjutnya klik Next..

Selanjutnya masukkan User Name dan Password account Blog kedalam kolom yang disediakan. Centang Remember Password jika pada computer pribadi. Jangan centang jika di computer public yang dapat digunakan orang banyak, karena sangat riskan. Klik OK

Selanjutnya akan muncul opsi Upload gambar. Jika memiliki tempat / alamat Uploag gambar tersendiri, maka kolom Picture Provider bisa diisi. Untuk kali ini, biarkan default.klik OK

Jika keluar pesan seperti di bawah ini, berarti manage account berhasil. Kelak jika akan melakukan Posting, kita tinggal klik tombol Publish pada toolbar. Jika kita akan menamba account baru, kita bisa klik tombol Manage Account pada toolbar.

Proses Setting account sudah selesai, kita pun bisa menulis post pada halaman yang telah disediakan. Untuk Accoun Wordpress, Kita dapat menambahkan Kategory Post melalui tombol Insert Category pada toolbar Ribbon.

Jika sudah selesai, kita dapat langsung melakukan posting dengan klik tombol Post, Post. Jika posting sukses, maka di atas header akan muncul text notifikasi bahwa posting ke Blog sukses dilakukan pada jam ...... tanggal...... seperti pada gambar di atas.

Selamat mencoba, moga bermanfaat dihati sobat.

Kang Fathur

Background Berbeda-beda Setiap Halaman

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Halo para sobat bloger khususnya kang fatur dateng lagi nie mao bagi bagi dengan sobat tercinta, pernah ada sobat yang meminta pada kang fatur tolong kang katanya saya ajarin cara membuat Background berbeda-beda seperti Backgrounnya kang fatur!!. Demi permintaan sobat akhirnya kang fatur bikin postingin yang berjudul "Bikin background yang berbeda untuk setiap halaman blog". Lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya O.K.

O.K. Jangan banyak banyol bentar lagi hari semakin malam, duduk udah pegal, kopi udah abis, rokok tinggal sebatang, perut udah laper, sebaiknya kita lanjutkan aja O.K.

Persiapan :

Memasang background utama :

Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

body {background-image: url("http://alamat-gambar-sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}

2. Gantilah http://alamat-gambar-sobat yang berwarna merah dengan url gambar sobat.

3. Kode center no-repeat; (hijau) bisa sobat ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blog sobat, apakah mau di taruh di tengah, di kanan atau di kiri.

4. Kode no-repeat; boleh sobat hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh.

5. Kalau sudah selesai ngeditnya , balik lagi ke blog sobat. Cari kode seperti di bawah ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan sobat tadi.

6. Jika udah beres, klik SAVE

Nah sampai pada tahap ini, sobat sudah bisa melihat perubahan background blog sobat, klik aja View Blog.

Memasang background untuk halaman depan :

Halaman depan adalah halaman atau tampilan utama blog sobat. Di halaman ini sobat menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.

Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.

Langkah pertama :

a. Copy script di bawah ini :

body {background-image: url("
<style type="text/css">
body {background-image: url("http://alamat-gambar sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed; }.bkgspc {margin-top:10px;color:#909090;font-size:10px;font-family:Arial;}.bkgspc a {color:#909090;}</style><div class="bkgspc" align="center">
Visit InfoServe for <a href="http://ade-tea.blogspot.com/" target="_blank">Blog Kang Fatur</a>.</div>

b. Edit dengan menggunakan wordpad atau document.txt.

c. Ganti http://alamat-gambar-sobat (kode yang berwarna merah ) dengan url gambar sobat

d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambar sobat itu nantinya.

e. Kode no-repeat; bloeh sobat hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman

Langkah ke-dua :

Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau kang fatur uraikan kembali di sini. yuuuu ...

Seperti biasa :

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Add a Gadget.
5. Pilih HTML/JavaScript.
6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah terserah sobat dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.
7. Pastekan kode hasil editan kita tadi ke ruang conten.
8. Terus Save.

Langkah ke-tiga :

Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Edit HTML
5. Conteng kotak Expand Widget Templates
6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.

<b:widget id='HTML20' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

7. Klik save, lantas klik view blog untuk melihat hasilnya.

Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... yuuuuuk ...

Memasang background untuk halaman Selanjutnya :

Halaman selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya.

Namun biar lebih jelas, baiknya kang fatur uraikan sedikit di bawah ini. ok coy ...

1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya dengan worpad atau document txt.

2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.

3. Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik perbedaannya.

<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>

<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:if>
</b:if>
</b:includable>
</b:widget>

4. Save dan view blog untuk melihat hasilnya.

Selamat mencoba semoga sukses dan bermanfaat di hati sobat :

Kang Fathur

Membuat "Tag Cloud" Widget

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Halo para sobat blogger!! Kang Fatur ada kabar gembira lagi nie buat para sobat khususnya yang pencinta blog Kang Fatur hehe PD amat ya?????.

Yeah! Tadi malam sedang mencari animasi "Tag & Clouds" widget. Kang Fatur menemukan situs menarik oleh Roy Tanck's. Penulis telah menulis sebuah skrip yang sangat baik untuk menampilkan tag, kategori yang berputar dalam 3D animasi. Tapi Roy Tanck's telah menulis skrip ini hanya untuk Wordpress yang disebut "WP-Cumulus": tetapi para blogger jangan bersedih hati, Kang Fatur sudah atur alias dsain lagi supaya bisa dipasang di Blogspot dan akhirnya Alhamdulillah bisa buat Blogspot juga hehe. dan baru pada Sore ini Kang Fatur bisa terbitkan (bagi-bagi) pada kawan/sobat.

O.K Para sobat semua tiba saatnya kita ke tahap pemasangan karena waktu semakin petang aja.

Seperti Biasa

1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan "Tag Clud".
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget

Kemudian paste script berikut : tapi ada baiknya para sobat paste dulu di Notepad untuk merubah dulu

<script src="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js" type="text/javascript"></script>
<div id="flashcontent" style="overflow: visible;"><embed quality="high" allowscriptaccess="always" flashvars="tcolor=0xffffff&mode=tags&distr=true&tspeed=100&tagcloud=<tags><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a><a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a></tags>" type="application/x-shockwave-flash" height="300" src="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" id="tagcloud" bgcolor="#000000" width="300" name="tagcloud"></embed></div>
<script type="text/javascript"><br/>var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#000000");<br/>// uncomment next line to enable transparency<br/>//so.addParam("wmode", "transparent");<br/>so.addVariable("tcolor", "0xffffff");<br/>so.addVariable("mode", "tags");<br/>so.addVariable("distr", "true");<br/>so.addVariable("tspeed", "100");<br/>so.addVariable("tagcloud");<br/>so.addParam("allowScriptAccess", "always");<br/>so.write("flashcontent");<br/></script>Tag Cloud by <a href="http://kangfatur.blogspot.com/" starget="new">Kang Fatur</a>

PERHATIAN!!!
Cari kode seperti ini :
<a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a>
Kemudian ganti kode yang berwarna Kuning dengan Link tujuan sobat lalu teks yang berwarna Merah ganti dengan Judul Link sobat yang akan ditampilkan.

Jika Tag Cloud Widget ini akan sobat sesuaikan baik itu warna Background, Warna Teks dan Width serta Hight nya sobat cari kode seperti dibawah ini :

1. Untuk warna Background cari kode bgcolor="#000000" kemudian ganti dengan kode warna yang diinginkan
2. Untuk warna teks cari kode tcolor="ffffff" emudian ganti dengan kode warna yang diinginkan
3. Untuk Lebar dan Tinggi cari kode height="300" dan width="300" ganti sesuai dengan keadaan template sobat,

Yaaa pokoknya atur aja deech O.K mungkin para sobat juga dah pada ngerti ya khan???

Setelah langkah demi langkah selesai klik Simpan dan lihat blog!!

Selamat mencoba!! semoga berhasil dan bermanfaat.

Kang Fathur