Jumat, 04 Maret 2011

tips n triks memasang tutorial blogspot

Meletakkan gambar/widget di pojok blog

maksud judul diatas adalah,kamu akan bisa memasang widget/gambar di pojok blog.bisa di pojok atas maupun pojok bawah.yang lebih kerennya lagi.gambar atau widget itu akan terus berada disana walaupun scroll di arahkan ke bawah.cocok sekali kalo untuk pasang iklan
coba kamu perhatikan gambar di bawah ini;


saya akan ajarkan cara membuatnya:

1.masuk ke blogger
2.layout-edit html-centang expand template widget.
3.cari kode ini ]]></b:skin>
4.taruh code dibawah ini tepat diatas code nomor 3

#Lookj_keren {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

tulisan yang dicetak tebal bisa anda ganti sebagai posisi letak gambar
1.bottom=dibawah
2.top=diatas
3.left=kiri
4.right=kanan


5.kemudian cari lagi code ini </body> dan letakkan script di bawah ini sebelum kode tersebut

<div id="Lookj_keren">
<a href="http://alamat blog.blogspot.com">
<img src="http://img361.imageshack.us/img361/1435/pojokyu7.jpg" border="0" /></a></div>


tulisan berwarna merah bisa kamu ganti dengan alamat blogmu

tulisan berwarna biru bisa diganti dengan link gambar








menambah script berita di blog

Kamu tidak ingin ketinggalan bertita bertita terhangat dunia?ya nonton berita donk..tapi kalo gak sempat gimana?hm...gimana kalo pas lagi blogging,sambil baca baca berita tuh..asyik juga kayaknya.jadi kalo ada pengunjung yang datang ke blog kamu gak akan ketinggalan berita berita terhangat.gampang kok cara buatnya

1.login ke blogger
2.masuk ke layout-page element
3.add gadget-add html/java
4.copy kode dibawah ini ke page element blog kamu

<iframe frameborder="0" marginheight="0" marginwidth="0" height="17" src="http://www.metrotvnews.com/newsticker.asp" id="NewsWindow" style="background-color: transparent;" scrolling="no" width="945" allowtransparency="true"></iframe>

lalu letakkan page element tersebut di posisi yang sering dilihat oleh pengunjung..
oh ya berita yang kita ambil disini.berita dari metro TV




Membuat Label Animasi

Biasanya kalo label yan gada di blog tampilannya seperti ini:

tips(5)
tutorial(6)
widget(7)


kalo hanya seperti itu saja kelihatannya kurang menarik.gimana kalo kita buat menjadi tampilan animasi..coba kamu lihat label yan gada di blog ini.di sebelah kiri atas.klik mouse kamu kesana.bagus kan tampilannya?

cara buatnya gampang kok..ikuti langkah langkah dibawah ini

1.login ke blogger
2.masuk ke layout-edit html
3.cari kode ini

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

4.copy kode dibawah ini tepat dibawah kode nomor 3

<b:widget id='Label99' 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'>
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


5.kemudian save
6.sekarang label kamu sudah berubah menjadi animasi.bagus bukan?

catatan:
jika dirasa penempatan atau ukuran label terlihat kurang pas dengan template kamu.kamu bisa melakukan sedikit perubahan.

a.width="250" untuk mengubah lebar label..tinggal ganti angkanya saja
b.height="200" untuk mengubah tinggi label..tinggal ganti angkanya saja
c.<param name="bgcolor" value="#ffffff" /> untuk mengubah warna background
d.<param name="flashvars" value="tcolor=0x000000& untuk mengubah warna tulisan



membuat daftar isi blog

Dalam sebuah buku ada yang namanya daftar isi.daftar isi ini berguna untuk menampilkan semua isi yang ada didalam buku tersebut.tentunya daftar isi ini akan sangat berguna sekali untuk pembaca.karena jika banyak tulisan dalam buku itu,mereka akan kesulitan mencari artikel jika mereka harus mencarinya satu persatu.daftar isi ini juga bisa anda tampilkan didalam blog,sehingga akan sangat memudahkan pembaca dalam mencari artikel dalam blog anda.jadi ketika ada pengunjung yang mengklik blog kamu maka akan tampil semua judul postingan beserta tanggal postingan.ok tanpa berlama lama,saya akan ajarkan cara membuatnya
A.langkah pertama1.sigin ke blogger
2.masuk ke layout-edit html...sebelum kita mengedit blog sebaiknya anda copy dulu semua code html anda ke notepad..supaya jadi backup kalo nanti kita gagal
3.copy kode dibawah ini tepat diatas kode ]]></b:skin>

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}


4.simpan template itu

B.langkah kedua
1.klik page element
2.tambah sebuah element halaman
3.tambah kode html/javascript
4.copy kode dibawah ini dan masukkan kedalam element halaman yang muncul

<div id="toc"></div>

5.letakkan element halaman tersebut tepat diatas element post6.kemudian simpan
7.tambahkan sebuah elemet halaman lagi
8.beri judul element halaman tersebut..bisa daftar isi atau terserah kamu
9.copy code dibawah ini dan masukkan kedalam element itu

<div id="toclink"><a href="javascript:showToc();"><img src="http://amen24.googlepages.com/folder.gif"/>
&nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div>
<script style="text/javascript" src="http://amen24.googlepages.com/daftarisi.js">
</script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>


ganti tulisan yang dicetak tebal dengan alamat blog kamu

10.letakkan element daftar isi tersebut ditempat dimana sering dilihat oleh pengunjung




Membuat text area

Text area berfungsi untuk menyimpan kode kode html.contohnya seperti ini:





didalam kolom tersebut kamu bisa menyimpan kode kode HTML yang bisa di copy oleh pengunjung blog.sekarang akan saya ajarkan cara membuatnya.


anda cukup copy code berikut :

1.Text area biasa

<p align="center"><textarea name="code" rows="6" cols="20"> test cara membuat text area...anda bisa menuliskan kode kode HTML di dalam kolom ini</textarea></p>

catatan:
1.kamu bisa mengganti tulisan yang di cetak tebal dengan kode kode yang ingin anda letakkan dalam kolom tersebut.anda bisa meletakkan dalam postingan atau bisa juga diletakkan di dalam page element

2.row="6" ini menunjukkan tinggi dari kolom tersebut.jika ingin kotaknya lebih tinggi,silahkan ganti dengan angka yang lebih besar

3.cols="20" ini menunjukkan lebar kolom


2.Text area Highlightdengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all
maka semua text yang ada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.

contohnya seperti ini



cara membuatnya..copy code dibawah ini:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">dengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all maka semua text yan gada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.</textarea></p></div></form>

catatan:
1.ganti tulisan yang dicetak tebal dengan tulisan yang anda inginkan
2.<div align="center"> --> itu menunjukkan tombol highligh akan berada di tengah,jika ingin tombol itu berada di kanan atau kiri,tinggal ganti dengan left atau right
3.Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
4.<p align="center"> menunjukkan bahwa text area berada ditengah,jika ingin berada di kanan atau kiri tinggal ganti dengan right atau left
5.<text style="WIDTH: 300px"> menunjukkan lebar kolom
6.HEIGHT: 144px menunjukkan tinggi kolom



Memasang kotak shoutbox

kotak shoutbox,kotak cuap cuap,kotak komentar,kotak curhatan dan masih banyak lagi istilah yang dipakai oleh para blogger.tapi intinya kotak ini berguna untuk menuliskan uneg uneg atau jejak kamu setelah berkunjung kesalah satu blog.jadi nanti pemilik blog bisa membacanya dan kemudian bisa langsung membalas di kotak itu juga.kota ini lebih praktis ketimbang kotak komentar.karena kalo kotak ini bisa diletakkan dihalaman depan,sedangkan kotak komentar adanya di setiap postingan.

cara memasang shoutbox atau kotak ngoceh:

1. Buka situs Shoutmix terlebih dahulu kamu harus daftar.tenang saja gampang kok.cukup klik "create your shoutbox now"
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu ingin menaruh shoutbox di blog kamu pilih "Place Shoutbox on Webpage"
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak "generated Codes"

sekarang kita akan meletakkan kode itu dialam blog

1.Login ke blogger-Layout-Add Page Elements
2. Tambahkan element HTML/Javascript.
3.Paste Kode yang telah kamu copy dari shoutbox.com
4.kemudian save..sekarang liat blog kamu.udah tambah satu kotak cuap cuap disana..

selamat ngoceh!!!




Memasang adense(iklan) didalam postingan

ingin menghasilkan duit dari blog kamu?mudah kok..pasang iklan di blog kamu.banyak kok web yang bersedia membayar kamu apabila kamu mau nampilin iklan mereka di blog kamu.jadi saat ada iklan di blog kamu yang diklik,kamu akan langsung dibayar oleh web tersebut.jika blog kamu berbahasa indonesia,kamu bisa coba mendaftar disini .Tapi kalo blog kamu berbahasa inggris,kamu bisa coba daftar di google adsense,adbrite,atau advertiser.lumayan kan sambil ngeblog bisa ngasilin duit.

sekarang yang jadi masalah,terkadang walaupun blog kita sudah rame pengunjungnya tapi kok kenapa blog kita belum menghasilkan...

berarti peletakan iklan dalam blog kamu kurang maksimal.supaya lebih maksimal.sebaiknya kamu coba untuk memasang iklan didalam postingan.nanti iklan ini akan berada di bawah judul postingan anda.jadi saat pengunjung membaca postingan anda.mereka akan dipaksa melihat iklan anda tersebut.

cara memasang iklan didalam postingan :
1.login ke blogger
2.layout-edit html
3.terus ambil kode iklan yang telah disiapkan di web iklan yang telah anda daftar tadi
4.cari kode dibawah ini

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

5.sekarang kita akan meletakkan kode iklan yang telah kita dapatkan tepat dibawah kode di no 4...tapi sebelum meletakkan kode iklan tersebut.kita harus memparse kode tersebut terlebih dahulu.liat cara memparse kode disini

6.setelah kode iklan di parse.letakkan kode tersebut dibawah kode no 4

7.kemudian simpan..sekarang kamu sudah bisa melihat hasilnya


0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More