FRANS BELAJAR: Juni 2011

Sabtu, 25 Juni 2011

Cara Membuat Blog

Tutorial cara pembuatan Blog

~ Pengertian blog

Blog atau weblog adalah catatan pribadi seseorang di internet. Berisi informasi yang sering di update dan kronologis. Blog lebih identik dengan sebuah diary. Perbedaan mendasar adalah bahwa blog bisa dibaca siapa aja. Banyak blog yang fokus terhadap satu objek informasi, misalnya politik, web design, olah raga dll, tapi kebanyakan blog itu lebih seperti jurnal pribadi yang berisi informasi perjalanan dan kehidupan sehari-hari seseorang blogger dan pemikirannya.

beberapa ciri blog : isi utama biasanya berupa informasi yang bersifat kronologis, dan terbagi menjadi beberapa kategori,

terdapat arsip untuk berita atau informasi lama,

ada tempat buat orang lain meninggalkan pesan atau memberi komentar,

terdapat link ke web/blog favorit atau yang sering dikujungi misalnya di blogroll

Membuat blog nggak harus punya domain atau hosting, karena saat ini banyak sekali penyedia layanan untuk pembuatan blog secara gratis, misalnya blogger, wordpress dll. persyaratannya juga nggak susah, nggak harus ngerti pemrograman ato web design untuk punya blog, karena sudah disediakan template yang bisa dipilih dan diubah. jadi jangan sampe ketinggalan, buruan daftar dan mulai nge-blog. kalo jaman dulu, punya imel ajah udah keren, sekarang nggak lagi, sekarang jamannya bikin blog dan punya blog, he he he..

Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogspot.com.
Ga perlu basah basi lagi langsung saya praktekan cara membuat blogger, cekidot..

~Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, Click disini untuk mendaftar akun google.
1. click cretae new account

2. Isi formulir pendaftaran dengan lengkap..

3. Masukan Verifikasi akun Anda, masukan no ponsel anda seperti di bawah ini.

4. lalu tim Gmail akan mengirimkan kode Verifikasi google , lalu masukan Verifikasi kode tsb.

selesai pedaftaran

5. login / masuk ke Gmail dengan akun google yang telah anda buat tadi.

6. Muncul form pendaftaran seperti di bawah ini, Isikan data data anda dan click lanjutkan.

7. click ciptakan blog anda.

8. Beri judul nama blog anda, cek ketersediaan dan click lanjutkan..

9. Langkah selanjutnya pilih template yang anda inginkan dan lanjutkan.

10. Blog anda telah selesai, dan click Mulai Blogging.

11. Postinglah kata-kata pertamamu, contoh seperti di bawah ini
setelah selesai Terbitkan Entri.

12. Muncul kata berikut, lalu click Lihat Entri / Lihat Blog.

13. Teng tereeng.... jadi deh..

Sekian tips cara membuat blog dari saya, semoga bermanfaat bagi anda.. trimakasih..

Cara Membuat Tulisan Berjalan (Marquee)

Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita. mungkin sebagian besar sudah mengetahuinya. tapi disini ade mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

Note: yang akan ade bahas ini merupakan tulisan berjalan biasa bukan tulisan berjalan yang apabila ada mouse di area tulisan itu akan berhenti.

berikut cara pembuatannya :

Login ke Blogger
Kemudian klik Tata Letak dan Elemen Halaman
Ketika sudah berada di Elemen Halaman klik Tambah Gadget
Lalu pilih HTML/JavaScript
Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :

1. Teks berjalan dari kanan ke kiri

kode :

hasil :

Contoh Tulisan Berjalan

2. Teks berjalan dari kiri ke kanan

kode :

hasil :

Contoh Tulisan Berjalan

3. Teks berjalan bolak balik

kode :

hasil :

Contoh Tulisan Berjalan

4. Teks berjalan dari atas ke bawah

kode :

hasil :

Contoh Tulisan Berjalan

5. Teks berjalan dari bawah ke atas

kode :

hasil :

Contoh Tulisan Berjalan

6. Teks berjalan mondar-mandir

kode :

hasil :

Contoh Tulisan Berjalan

7. Teks berjalan zig-zag nembus

kode :

hasil :

Contoh Tulisan Berjalan

8. Teks berjalan zig-zag mantul

kode :

hasil :

Contoh Tulisan Berjalan

Langkah Selanjutnya adalah mengganti tulisan

Contoh Tulisan Berjalan

dengan tulisan atau kata-kata yang anda inginkan.

Ket :
# direction="left/right/up/down" --> Mengatur arah gerakan teks.

# scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

# behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :
~> Scroll --> teks bergerak berputar
~> Slide--> teks bergerak sekali lalu berhenti
~> Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

# Fungsi dari :

<center> ............. </center>

adalah agar tulisan tersebut selalu berada di tengah.

SEMOGA BERHASIL

Demikianlah artikel mengenai Cara Membuat Tulisan Berjalan (Marquee)
Semoga Bermanfaat

Sumber

Jumat, 24 Juni 2011

Cara Membuat Related Post Thumbnails Bergerak

Langsung Aja Sob

a. Login ke Blogger.
b. Di halaman Dasbor, kita pilih Rancangan.
c. Kemudian pilih Edit HTML
d. Beri tanda centang pada Expand Template Widget
e. Cari kode </head>
f. Taruh (copy paste) kode berikut ini di atasnya

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

g. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

h. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kep-katro.blogspot.com/2011/04/cara-membuat-related-post-tumbnail.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>

h. save template

Cara Pasang Kotak Komentar Facebook di Blogger

Langkah 1. Nonaktifkan Default Komentar.

Hal pertama yang harus Anda lakukan yakni Nonaktifkan Setting Komentar ANda . karena Anda tidak ingin memiliki 2 bentuk komentar, dan jika memang membutuhkan dua komentar biarkan saja seperti biasa.

Silahkan ke account blogger Anda

navigasikan ke Lalu Klik Pada Menu Klik kemudian gulir ke bawah dan klik SIMPAN.

Langkah 2. Buatlah Facebook App ID ( Aplikasi di Facebook ).

sekarang Anda harus menghasilkan facebook app id Anda sendiri, itu benar-benar mudah dan prosesnya hanya satu langkah, Login dulu dengan Account Facebook Anda LaluSilahkan Kunjungi, pengembang facebook disini : Facebook developers

Anda akan diwa ke halaman seperti Contoh pada Gambar dibawah :

Masukkan nama aplikasi Anda, (Anda dapat mengetikkan nama apa saja) dan Klik Setuju lalu klik Buat Aplikasi. Sebagai contoh saya membuat aplikasi dengan nama " Kotak Komentar "

kemudian klik pada tab Connect ( Terhubung ) (pada daftar-tab kiri) Anda akan dibawa kehalaman Terhubung seperti gambar dibawah ini :

Ingat Sewaktu Memasukkan ULR Terhubung Jangan Lupa beri tanda / pada akhir ULR Blog sobat, sebagai Contoh pada gambar diatas saya masukkan ULR Terhubung : http://trafikmagic.blogspot.com/

Masukkan Base Domain : blogspot.com.

Lalu Klik Simpan Perubahan

Selanjutnya Silahkan Klik Dasar Untuk Mengambil No Application ID , Copy dulu Application ID di NotePad atau Word agar mudah kita ambil saat kita gunkan nanti pada Langkah Berikutnya.

Langkah 3. Menambahkan Kode pada template blogger

Anda harus menambahkan kode berikut ke template blogger Anda untuk

memastikan bahwa kotak komentar akan bekerja untuk blog Anda dengan cara yang benar.

silahkan pergi ke account blogger Anda lagi,

Arahkan ke + Lalu Centang

Jangan Lupa Download Template Anda untuk menjaga jika terjadi kesalahan.

Untuk Mempermudah dalam pencarian kode Tekan Ctrl + F

Cari

< body >

Tambahkan Kode berikut dibawahnya

<div id='fb-root'/>

<script>

window.fbAsyncInit = function() {

FB.init({

appId : 'APP-ID Anda',

status : true, // check login status

cookie : true, // enable cookies to allow the server to access the session

xfbml : true // parse XFBML

});

};

(function() {

var e = document.createElement('script');

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

e.async = true;

document.getElementById('fb-root').appendChild(e);

}());

</script>

Ganti APP ID dengan APP ID Aplikasi Facebook yang tadi Anda buat.

Sekarang Cari

</head>

Letakkan Kode Berikut dibawahnnya

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

<meta expr:content='data:blog.pageTitle' property='og:title'/>

<meta expr:content='data:blog.url' property='og:url'/>

<b:else/>

<meta expr:content='data:blog.title' property='og:title'/>

<meta expr:content='data:blog.homepageUrl' property='og:url'/>

</b:if>

<meta content='Nama Blog Anda' property='og:site_name'/>

<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>

<meta content='APP-ID Anda' property='fb:app_id'/>

<meta content='Profile-ID-Facebook Anda' property='fb:admins'/>

<meta content='article' property='og:type'/>

Nama Blog Anda : Ganti dengan Nama Blog Anda

APP-ID Anda : Ganti dengan APP ID anda
Profile-ID-Facebook Anda : Ganti dengan ID Profile Facebook Anda.

Sekarang kita selesai menambahkan kode facebook untuk template Anda, jangan menyentuh apa pun dan melanjutkan ke langkah berikutnya.

Langkah 4. Menambahkan Komentar Box blogger template Anda.

silahkan cari kode berikut

<data:post.body/>

Letakkan Kode Berikut dibawahnya

Jika Punya dua <data:post.body/> karena sudah pasang Readmore Silahkan Letakkan di bawah <data:post.body/> yang kedua

<b:if cond='data:blog.pageType == "item"'><br /> <p align='left'><a href="http://www.kumpulancara.com/" target="new"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBjpc6kqyJYep35HfjS9HrDzNXfemF1MQrFSh4ui-b5xdYWxrgMkV0ovNeNViSRmOgJkJRawXdV2Fce6C1TtaBAjUE63rxjNRVZ8wMoh19JuB90c5YUvJGf55pSCW_Q2yRVUT5mZ7QEco/s1600/comment.gif" /></a></p><div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if><br />

Untuk Merubah Lebar Silahkan Ganti Angka 450 sesuai Template Masing2

sumber

Cara membuat garis di bawah judul postingan dan judul sidebar pada blog

Panduan sukses blogger kali ini membahas cara membuat atau menambah garis di bawah judul postingan dan judul sidebar. mungkin blogger senior sedikit tersenyum tentang pembahasan saya kali ini. karna ini adalah hal yang sangat mudah. tapi nggak ada salah nya kalau saya membuat artikel ini hanya sakadar sharing dan mudahan saja ini sangat bermanfaat bagi yang masih baru di dunia blogger. karna mereka harus belajar dengan yang mudah dulu baru ke yang agak ruwet alias ribet, hehehe. nah untuk membuat nya ikuti langkah-langkah di bawah ini.

Berikut ini langkah-langkah cara membuat garis di bawah judul postingan dan sidebar pada blog anda:

Login terlebih dahulu ke blogger
Klik Rancangan
Pilih Edit HTML
Untuk memberi garis pada judul artikel blog cari kode .post h3{ margin-bottom:7px; .........} (cari berdasar kan .post h3)
Kemudian tambahkan kode di bawah ini yang berwarna merah seperti contoh berikut

.post h3{
border-bottom:1px solid silver;
margin-bottom:7px;
.........
}
Untuk memberi garis pada judul sidebar cari kode .sidebar h2{margin-bottom: 7px;......}
Kemudian tambahkan kode dibawah ini seperti contoh berikut

.sidebar h2{
border-bottom:1px dotted silver;
margin-bottom:7px;
.......
}
Untuk memastikan kode tersebut benar untuk judul postingan dan judul sidebar klik tombol "PRATINJAU"
Nah jika anda sudah berhasil simpan tamplate milik anda
Selesai.....

Catatan:

Nah untuk border-bottom:1px dotted silver; ini adalah garis bawah yang terputus-putus dengan warna silver. ini bisa anda ganti dengan warna lain Red atau Black
Untuk garis yang tidak terputus-putus anda bisa menggunakan kode border-bottom:1px solid silver;
Nah untuk warnanya anda juga bisa menggunakan dengan kode warna seperti berikut border-bottom:1px solid #000; (ini adalah garis bawah dengan ukuran 1px dengan warna hitam)

Warna di atas adalah sebagai contoh. jika warna tersebut tidak cocok dengan warna tamplate anda. anda bisa mengganti nya dengan warna lain. semoga artikel ini bermanfaat untuk sahabat semua dan salam sukses.......

sumber

Cara Membuat Readmore Otomatis

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down.

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

Berikut langkah – langkah dalam membuat read more otomatis :

Silahkan login ke blogger terlebih dahulu.

Klik Tata Letak.

Kemudian klik Edit HTML.

Centang Expand Template Widget.

Letakkan kode berikut ini tepat diatas kode </head> :

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :

<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;'/>

sehingga sekarang hanya ada satu <data:post.body/>

Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>

Ganti kode tersebut dengan kode berikut 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>

Kemudian Simpan Template.

Keterangan :

summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.

summary_img = 360 –-> untuk tinggi postingan dengan gambar.

img_thumb_height = 120 –> tinggi gambar.

img_thumb_width = 150 –> lebar gambar.

Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Silahkan sobat atur sesuai template sobat. Selamat berkreasi. Happy

Membuat Scroll pada Arsip Blog

Membuat Scroll pada Arsip Blog Pernahkah anda melihat sebuah situs yang arsip blognya berjejer sangat panjang ke bawah? Itu adalah pengaturan standar dari blogspot. Di samping memakan ruang sidebar hal itu tentu sedikit mengganggu tampilan blog. Kondisi tersebut sebenarnya bisa diatasi dengan cara membuat scroll, yaitu semacam tombol yang bisa ditarik-tarik ke atas dan ke bawah untuk melihat seluruh arsip blog secara bergantian. Ukuran kotak scroll tersebut bisa diatur sesuai keinginan kita, sehingga tampilannya tidak banyak memakan ruang sidebar. Cara membuatnya adalah:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Kemudian klik pada Edit HTML.

3. Untuk berjaga-jaga jika terjadi kesalahan backuplah terlebih dahulu template anda, dengan cara klik Download Template Lengkap.

4. Jika sudah centanglah kombo Expand Template Widget.

5. Kemudian carilah kode: <div id='ArchiveList'>

6. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.

7. Kemudian perhatikan beberapa baris kode di bawahnya. Lengkapnya akan terlihat seperti di bawah ini.

<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <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>
<b:include name='quickedit'/>

8. Kode yang berwarna biru adalah kode yang harus ditambahkan untuk membuat scrollnya. Letakkanlah kode tersebut seperti posisi di atas. Khusus yang berwarna merah (100) adalah angka untuk tinggi kotak scrollnya. Anda bisa ganti sesuai dengan ukuran yang paling pas untuk blog anda. Setelah itu klik SIMPAN TEMPLATE dan tunggu hingga proses berlangsung.

9. Sekarang hasilnya sudah bisa anda lihat dengan mengklik Lihat Blog.

10. Sebagai contoh hasilnya akan tampak seperti ini.

Cara Menganti Kursor Pada Blog

Cara mengganti kursor pada blog.

Bosan dengan kursor standar? Ganti aja biar lebih menarik dan lebih keren.

Salin (copy) salah satu kode contoh dibawah ini dan letakkan pada bagian <head>, klik “Save” kemudian “Refresh/Reload” blog kamu untuk melihat hasi perubahan. Cara mengganti cursor pada blog.

Cursors: TotallyFreeCursors.com

Sumber