Tuan's Jamur: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Buat Buku Tamu CBOX

langsung aja jangan bertele-tele gan hahaha
cekidot di mari cara buat Cbox
STEP 1

1. Klik http://www.cbox.ws
2. Lalu klik "Get your own free Cbox now!"
3. Lalu Tulis Isian Form yang disediakan diantaranya ada Cbox

name: Isi dengan nama username
Email address: Email aktif agan
Password: Isi dengan Password agan
Confirm Password: Tulis kembali Password agan
Website: Isi dengan URL web/blog yang akan agan pasang Cbox
Language: Pilih Bahasa
Style: Warna untuk Cbox agan

4. Setelah itu, "CREATE MY CBOX"
5. Cek email yang agan daftarkan, lalu klik link Validnya, Lalu agan bisa Log In dengan menggunakan nama email dan password cbox agan.

STEP 2

1. Salin kode agan ke clipboard dengan mengklik tombol di atas.
2. Sign in di blogger.com / blogspot.com.
3. Di blog agan, pergi ke dashboard dengan mengklik menyesuaikan.
4. Klik pada Tata Letak
5. Pilih Halaman elemen.
6. Klik Tambah Gadget.
7. Pilih HTML / JavaScript, klik kotak konten dan paste kode agan di dalamnya dengan menekan Ctrl + V.
8. Simpan perubahan.

Setelah mengkonfirmasikan bahwa Cbox agan berhasil, agan mungkin ingin menyempurnakan tata letaknya atau menyesuaikan warna dan font.

SELAMAT MENCOBA!

Pasang Widget Facebook dan Twitter di sebelah kanan

Caranya gampang saja , simple dan jelas gan :

login ke blooger atau webblog anda selain blogger, pilih tambahkan widget html/java script, lalu masukkan kode html dibawah ini di blog anda :

Ubah lah kalimat yang berwarna merah sesuai dengan alamat URL Facebook dan Twitter agan.
selamat mencoba yaa

Pasang Buku Tamu Tersembunyi

Assalamualaikum agan agan dan sista nya
ketemu lagi nih . pada posting kali ini ane akan share tentang buat buku tamu yang tersembunyi haha
Untuk memudahkan pengunjung meninggalkan pesan singkat di blog, agan dapat menggunakan buku tamu. Banyak situs yang menyeiakan layanan pembuatan buku tamu, seperti di shoutcamp, dan Cbox. Buku tamu merupakan salah satu sarana untuk berinteraksi antara pemilik blog dengan para pengunjung blog dalam rangka mempererat tali silahturrahim. Bila blog agan belum di pasang buku tamu, silanhkan baca buat di sini
Masalah yang mungkin muncul adalah bahwa agan kesulitan memasang buku tamu di sidebar (biasanya buku tamu di pasang di sidebar) blog. Ini tergantung template yang agan gunakan. untuk mengatasinya atau menghemat tempat, agan dapat memasang buku tamu tersembunyi. Walaupun namanya buku tamu tersembunyi, bukan berarti form buku tamu tersebut tidak dapat dilihat, akan tetapi tetap terlihat namun hanya sebagian saja, yaitu berupa tombol yang terdapat di sisi halaman blog. Dengan cara mengklik tombol, kotak dialog buku tamu akan terbuka. Begitu juga untuk menutupnya dengan cara mengklik tombol tersebut. Jadi sistemnya mirip dengan tombol hide-show.

Untuk memasang buku tamu tersembunyi di blog, ikuti langkah-langkah berikut!

Silahkan Login di Blogger
Masukkan ID dan Password agan.
Pada Dasbor klik Rancangan
Pada Elemen Laman klik Tambah Gadget
Pada Tambahkan Gadget Pilih HTML/JavaScript
Isi Judul yang agan suka atau di kosongkan saja
Pada Konten isi dengan kode HTML di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://lh5.googleusercontent.com/_A9Nk3CE9KcY/Tb-05vCbwUI/AAAAAAAAAUc/F2qssrYMjcs/s128/BT.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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">

(---Masukkan di sini script kode buku tamu agan---)

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

Klik tombol Simpan
Tarik Gadget tersebut di tempat yang agan inginkan
Klik tombol Simpan lagi untuk memastikan agan telah menambahkan Gadget baru di blog
Selesai, lihat hasilnya.

PASANG JAM DI BLOG

Banyak sekali sahabat blogger baru yang menanyakan bagaimana cara pasang jam di blogger, aksesoris ini ternyata banyak juga peminatnya terutama kau hawa yang sangat mengetahui akan arti kecantikan yang akan dituangkan dalam sebuah blog. Jujur om sangat tidak menyarankan untuk memasang jam pada blog kalian, selain bikin lambat page load juga kurang terlalu berguna, coba baca artikel om sebelumnya 17 Tips agar halaman blog tampil Profesional. Walaupun sudah banyak para blogger yang mengetaui cara pasang jam ini tapi tidak begitu bagi blogger pemula yang baru memulai membuat blog tentu perlu tahapan dan bimbingan jadi gak ada salahnya untuk memasang aksesoris ini jika dirasa berguna :). Layanan gratis aksesori jam sangat banyak, namun kali ini om hanya menjelaskan cara pasang jam menggunakan layanan gratis dan paling banyak digunakan http://www.clocklink.com/

Langkah-langkah pasang jam di blogger sebagai berikut:

1. Klik alamat http://www.clocklink.com/
2. Kemudian pilih tab Gallery atau klik aja disini http://www.clocklink.com/gallery.php
3. Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link "animal" tersebut
4. Pilih gambar yang ingin sobat gunakan, lalu klik "view html" dibawah gambar jam.
5. Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja tombol "Accept"
6. Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kode yang atas.
7. Copy atau Simpan kode yang telah dipilih untuk sementara waktu
8. Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan lupa disimpan
9. Selesai :) dan lihat hasilnya.

Contoh jam :

Selamat mencoba dan happy Blogging :)

CARA MENAMBAHKAN SCROLL PADA ARSIP BLOG

Pada postingan kali ini yang akan saya bahas adalah tutorial memasang scroll pada archive blog (Arsip Blog). kalau memasang scroll pada widget java script mungkin mudah karena tinggal copy paste sript pembuka di atas sendiri dan meletakkan script penutup diakhirnya, tapi jika yang ingin di beri scroll adalah widget bawaan blogger maka membutuhkan sedikit trik khusus (ngotak atik di edit HTMLnya) tapi ga` rumit ko` gan...!! cekidot lah

Archive Blog (memakai scroll)

Tertarik untuk membuatnya??ikuti langkah-langkah berikut:

1. Sign In di Bloggermu

2. Klik Menu Rancangan

3. Klik Menu Edit HTML

4. Beri Tanda Centang Pada Kotak "Expand Widget Template"

5. Cari Kode <div id='ArchiveList'> dengan Control F

6. Lalu Tambahkan Kode Berikut di Atasnya:

<div style='overflow:auto; width:ancho; height: 150px;'>

7. Ganti 150px dengan ukuran kesukaanmu

8. Kemudian cari kode dibawah ini:

<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

9. Lalu ganti dengan kode berikut (anda juga bisa hanya menambahkan kode yang bercetak merah)

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>
</div></div>

selamat mencoba yah gan !!!!!

CARA BIKIN READ MORE

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>

</b:if>

<div style='clear: both;'/>

Kalau sudah kita ke tahap selanjutnya

------------------------------------------

Pertama, silahkan menuju menu DESIGN -> Edit HTML, Cari kode
</head> kemudian letakan script dibawah ini di atas kode </head> jangan lupa save template/simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kalo sudah silahkan klik preview kalau memang masih ragu-ragu lalu silahkan disimpan dan lihat hasilnya

Keterangan nih gan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Selamat Mencoba !

CARA MEMBUAT SCROLL! haha

Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja ke TKP ! haa

Cara buat menu scroll :
Copi code berikut:

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid"> <ul>
    <p><a href="YOUR LINK">JUDUL</a> </p>
    <p><a href="YOUR LINK">JUDUL</a> </p>
    <p><a href="YOUR LINK">JUDUL</a> </p>
    <p><a href="YOUR LINK">JUDUL</a> </p>

</ul>
</div>

Setelah itu paste pada tempat yang agan inginkan di blog , apakah pada postingan, sidebar dll. Untuk alamat LINKnya agan ganti dan sesuaikan sendiri!
Untuk memasangnya pada postingan sobat harus berada dalam tab edit HTML, sedangkan untuk memasangnya pada sidebar saran saya untuk sobat agar tak bingung menyesuaikan dengan lebar sidebar ganti lebarnya menjadi 100% kodenya widht: 100% cara memasangnya (untuk yang belum tahu ni):

Pada bagian dasbor pilih menu layout/ tata letak

Klik elemen halaman

Tambah gadget pada sidebar yang anda ingin tampilkan menu scroolnya!

Pilih tambah HTML/JavaScript

Beri titel, simpan codenya dalam konten

Save, lihat hasilnya diblog sobat !

Semoga Bermanpaat yak gan

CARA MEMASANG SHOUTBOX DI BLOG

Shoutbox atau yang lebih dikenal dengan nama buku tamu ini telah digunakan oleh puluhan bahkan ratusan ribu blogger dunia untuk digunakan sebagai jejaring sosial hangat untuk berkomunikasi sesama blogger.

Nah agan yg demen blogger wajib gunain ni shoutbox. Ga terlalu berat kok buat di pasang di blog, memang kita harus perlu juga memerhatikan berat blog. Tapi shoutbox ini perlu juga lho untuk sobat lain yang ingin menyampaikan saran dan kritiknya. hahaa

Cara membuat shoutbox di blog agan nih thret nya :

1. pertamax Buka situs http://www.shoutmix.com kemudian pada halaman website tersebut anda klik CREATE YOUR SHOUTBOX NOW. Seperti pada gambar dibawah ini.

2. Setelah itu agan akan dibawa ke halaman pendaftaran seperti dibawah ini, dimana pada halaman tersebut anda harus mengisi semua data yang diperlukan dengan benar. registrasi bahasa gaul nya mah haha

3. setelah agan mengisi data-data pada halaman pendaftaran tadi, kemudian anda akan diminta untuk memilih style ataupun bentuk tampilan shoutbox yang akan anda pasang pada blog agan nantinya. Seperti pada gambar dibawah ini.

4. Setelah anda pilih salah satu style shoutbox seperti pada gambar di atas dan setelah anda mengisi kode verifikasinya juga maka proses pembuatan account shoutbox anda telah selesai. Dan anda sudah bisa memasang shoutbox dengan style yang anda pilih tadi pada blog anda.

Cara memasang shoutbox di blog :

Login to BloGGeR : Tulis User Name atau Alamat email kemudian tulis Password (sandi) sampeyan.
Dashboard (Dasbor) :Sampeyan akan di hantarkan ke halaman Dasboard. KLIK link "Layout (Tata Letak)".
Page Element (Elemen Laman) : Di halaman ini akan terlihat "blok-blok" desain blog kita. Terlihat ada beberapa elemen penyusun blog (Atas, tengah, samping kanan atau kiri dan bagian bawah). KLIK "Tambah Gadget" (dalam box garis terputus-putus), yang terletak di bagian samping kanan atau kiri (Sidebar).
HTML/Javascript : Setelah beberapa saat akan terlihat sebuah window baru yang di dalamnya terlihat beberapa jenis widget yang bisa di tambahkan ke blog sampeyan. Tarik halaman lebih ke bawah dan temukan box penambahan widget yang bertuliskan "HTML/Javascript". KLIK tepat di teks "HTML/Javascript" dan tunggu hingga muncul box tempat kode html nantinya di simpan.
Paste Kode Shouthbox : Box HTML/Javascript seperti di atas adalah tempat menyimpan kode css, javascript atau kode html. Copy kode shoutbox yang sampeyan dapatkan kemudian paste-kan di sini.
SAVE/Simpan KLIK "SAVE/Simpan". Setelah proses penyimpanan selesai, lihatlah shoutbox agan dengan membuka blog.
SELAMAT MENCOBA YAK GAN !!!!!!

CARA MERUBAH TEMPLATE BLOG

Bosan dengan tampilan blog ? hahaha silahkan ganti tampilan nya dengan template yang dapat anda cari secara gratis di banyak situs penyedia template gratis.

Untuk merubah template silahkan cek di TKP gan :

Cari Situs Penyedia Template Gratis
Untuk informasi template gratis bisa lihat di blog saya yang lain di http://www.blogspottemplate.com/ atau agan bisa seaching di mbah gugel
Di situs penyedia template pilih template yang anda sukai .
Lalu klik 'download'.
Simpan hasil download dihardisk anda,.
Setelah di download Klik kanan ikon hasil download itu ,
lalu klik " extrak here"Setelah proses men download template selesai, dan sudah sesuai dengan pilihan template antara yg lama dengan yg baru, Langkah selanjutnya sbb :

Signup (Masuk) ke dashboar blogspot milik anda.
Pilih "~~LAYOUT~~" Design atau "tata letak".

Pilih Edit HTML.
Klik "Download Full Template" untuk menyimpan template lama anda dan agar anda mempunyai backup unuk jaga-jaga jika terjadi "gagal"
lalu klik tab "Telusuri" atau "browse" .
Nah anda akan mencari file hasil download anda di dalam file hardisk yang tadi anda simpan.
Jika sudah ketemu klik 'open'.
anda akan kembali ke halaman blogspot.
Lalu klik "Unggah" atau Upload.
Setelah proses upload selesai, akan ada konfirmasi bahwa template baru itu akan menghapus beberapa wdiget/gadget yang telah terpasang di blog anda sebelumnya.
Oleh sebab itu jika anda ingin gadget itu tampil kembali di template anda yang baru ,maka sebelum anda merubah template, sebaiknya kode-kode html dari widget dicopy dulu dan bisa anda simpan di notepad sementara.
Selesai. Selamat mencoba hahahahaa...

Footer Widget 3

Teknologi

Kesehatan

Footer Widget 1

(Tab Widget 4)

Follower

Arsip Blog

Footer Widget 2

Category

Kehidupan

Fakta

Entertainmet

World News

Populer

Misteri

Random

(Tab Widget 3)

(Tab Widget 5) Popular Posts

Tuan's Jamur