ChiemBoun: trik blogspot

Tampilkan postingan dengan label trik blogspot. Tampilkan semua postingan

Rabu, 10 Juni 2009

Pasang Widget Google Translate

Widget yang akan terpasang adalah seperti gambar berikut, silahkan sorotkan mouse anda ke gambar-gambar bendera yang ada sehingga terlihat sedikit efek blur sebagai pemanis :

Bagi anda yang tertarik untuk memasang widget ini, berikut adalah langkah-langkahnya :

1. Silahkan login ke blogger dengan ID anda

2. Klik Tata Letak

3. Klik tab Elemen Halaman

4. Klik Tambah Gadget

5. Klik tanda plus (+) untuk HTML/Javascript

6. Copy paste kode google translate ke dalam kolom yang tersedia :

7. Klik tombol Simpan

8. Selesai

Sangat mudah sekali bukan? Selamat menikmati widget google translate baru anda.

Jumat, 29 Mei 2009

Cara Daftar Membuat Blog Baru di Blogger

Cara daftar dan membuat blog baru di blogger, adalah tutorial membuat blog di blogger.com atau blogspot.com. Untuk persiapan anda harus memiliki email di gmail.com, karena account di gmail bisa dengan mudah untuk daftar membuat blog di blooger.com atau blogspot.com karena mereka sama-sama dalam satu perusahaan IT yaitu google.com inc. untuk yang belom punya imel nanti bisa mendaftar email baru dan sekaligus daftar email di gmail.com

Pertama, buka blogger.com atau blogspot.com.

pilih menu bahasa menjadi Bahasa Indonesia untuk memudahkan pengoperasian

Bagi yang sudah punya account di Gmail.com, silahkan login pada lingkaran hijau dengan memasukkan alamat lengkap email dan juga password-nya. Bagi yang belum bisa mendaftar acoount baru disini.

Kedua, Isi Nama Tampilan (lingkaran hijau). maksudnya ini adalah nama anda ketika anda posting dan centang/contreng saya menerima persyaratan dan pelayanan (lingkaran kuning). lalu klik LANJUTKAN

pilih-nama-blog

Ketiga, Beri nama blog anda. Isi Judul Blog sesuai dengan tema blog yang akan dibuat (lingkaran biru). lalu isi nama Alamat Blog (url) yang sesuai dengan judul blog anda (lingkaran merah). kemudian klik cek ketersediaan, ini untuk mengecek apakah nama blog tersebut sudah ada yang memakai atau belom.

Kalau sudah ada yang memakai seperti ini.

sudah-ada-blog

Kalau nama blog belum ada yang memakai seperti ini

blog-belum-ada

Kalau sudah yakin dengan judul dan nama alamat blog, lanjutkan dengan klik di LANJUTKAN.

Keempat, Kemudian pilih template model warna blog dasarnya dulu. kalau kurang cocok nanti bisa ganti dengan template blog yang lainnya.

template1

Akhiri dengan klik di LANJUTKAN.

Kelima, Blog anda sudah jadi.

blog-sudah-jadi Selamat…!! Anda sudah mempunyai Blog di Blogger.com dengan alamat blog http://namaanda.blogspot.com

Untuk memulai posting (menulis) membuka Dashboard blog anda klik di MULAI BLOGGING.

Hal-hal yang kurang jelas atau mempunyai kesulitan daftar blog baru silahkan bertanya lewat kolom komentar.

Sumber : http://tips-trik.web.id/blogger/cara-daftar-membuat-blog-baru-di-blogger

Jumat, 08 Mei 2009

Cara Membuat Kotak Ngoceh (Shout Box)

Kotak ngoceh atau istilah lainnya shout box, Say Box, Tag Board, dan Chatter Box adalah suatu kotak yang berfungsi untuk mengirimkan pesan-pesan pendek, namun bisa juga berfungsi sebagai tempat ngobrol (chatting). Dengan shoutbox, kita juga bisa mempromosikan blog kita, misalnya nih, kita datangi blog orang yang menyediakan kotak ini kemudian kita kasih komentar atau cuma sekedar salam di shoutbox mereka, lalu yang punya blog akan melihat di shoutbox, biasanya meraka akan balas mengunjungi blog kita. Nha gitu ceritannya. Biasanya kotak ngoceh diselipkan kedalam halaman web/blog dengan bahasa java Script. Bagi kamu yang jago pemrograman java script mungkin bisa membuatnya sendiri dengan membuat kode-kode yang memusingkan kepala. Namun buat kamu yang nggak jago nggak usah kuatir karena sekarang ini banyak situs internet yang menyediakan layanan ini, salah satunya yaitu Shoutmix . Caranya adalah sebagai berikut :

1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok.
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" :D 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 pingin 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"
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu simpan.
13. Jadi deh.....

Sumber : mas Kendin_x

Sabtu, 02 Mei 2009

Cara Membuat “breadcrumb-navigation” pada Blogger

Tahukah kalian apa itu “breadcrumb-navigation” ...??
ok, klo kmu tidak tahu, silahkan buka : www.elite-mantab.web.id dan www.x4punya.blogspot.com
Maka di situ akan ada navigasi sederhana yang berupa teks, tetapi, hal itu hanya bisa pada sebuah website, untuk www.elite-mantab.web.id adalah website dan www.x4punya.blogspot.com adalah sebuah Blogspot, nah pada blogspot ini kita bisa tambahi “breadcrumb-navigation” juga, .
untuk lebih jelasnya lagi, silahkan lihat gambar dibawah ini :

Nah, Navigasi di ataslah yang di sebut dengan namanya “breadcrumb-navigation”, dari situ, sang pembaca bisa melihat posisi artikel yang sedang di baca.

Oke deh, g usah kebanyakan omong, langsung aja kita mulai acaranya :

1. Login dulu di Blogger kalian
2. Klik Tata letak / Layout
3. Kemudian klik Edit HTML
4. Untuk antisipasi kegagalan, download template kamu terlebih dahulu, klik Download Template Lengkap

5. klik / beri tanda centang di tulisan Expand Template Widget.
6. Dan kemudian cari code : ]]></b:skin>
7. kemudian letakkan kode dibawah ini tepad berada di atasnya : ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

8. Kemudian cari code ini : <div class='post hentry uncustomized-post-template'>
9. kemudian letakkan code ini tepat di bawahnya

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

10. Kemudian klik save, dan lihat hasilnya dengan cara klik salah satu judul artikel anda....

gimana? bisa kah?

Semoga bermanfaat.....

Jumat, 01 Mei 2009

Membuat News Ticker Versi 2

OK, bertemu lagi nih ama Gue,,, masih inget g dulu kita bikin News Ticker? klo lupa, silahkan baca disini : Membuat News Ticker

Nah, untuk Versi kali ini akan berbeda, kalau yg kemarin hanya ada text berjalan dan backgrounya biru, nah, kali ini kita akan membuat news tivkernya kelihatan lebih asyik..

contohnya lihat di : www.elite-mantab.web.id

ok sekarang kita mulai aja matarinya,

1. Seperti biasanya, Login ke Blog yang mau di utak atik
2. Klik Tataletak / Layout
3. Klik Edit HTML
4. cari code : ]]></b:skin>
5. Taruh Code di bawah ini tepat di atas kode ]]></b:skin>

#divBlackNotesContent {position: fixed; left:0px; bottom: 0px; width: 100%; height:71px; z-index: 1; background:url(http://www.autoblackthrough.com//template/img_blacknotes/back.png) repeat-x bottom;}
#divBlackNotesInnerContent{
position:relative;
text-align:left;
width:990px;
margin:auto;
z-index:0;
}
#divBlackNotesLeftImg{
position:absolute; left:0px; float:left;
}
#divBlackNotesMid{
position:absolute; left:99px; float:left;
background:url(http://img376.imageshack.us/img376/8528/back2.png) repeat-x bottom;
width:792px;
height:30px;
padding-top:41px;
}
#divBlackNotesRightImg{
position:absolute; left:891px; float:left;
}
.pointer {
cursor: pointer;
}
.blacknotes{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
letter-spacing:0.5px;
margin-top:5px;
color:#999999;
float:left;
}

6. dan selanjutnya cari code : </body>
7. klo udah ketemu, tarus kode di bawah ini tepat pada bawahnya kode </body>

Nah,, setelah itu selesai, silahkan di simpan...
Taraaa,,, gimana? jadi apa g?

Sabtu, 25 April 2009

Mengganti Template Blogger

new blogger template berbeda dengan template classic, proses mengganti template juga lebih mudah. Hanya saja perlu download template baru yang ada, kemudian upload lewat account blogger.

Cara Mengganti template di new blogger:

Yang sudah pakai New Blogger Template

Login ke blogger.com, setelah masuk ke dashboard, pilih blog yang ingin kamu ganti templatenya. Klik pada link Layout.
Setelah halaman Template terbuka, pilih sub menu Edit HTML
Sekarang upload fil .xml yang udah kamu download, Klik tombol Browse dan cari dimana file .xml kamu simpan, kemudian klik tombol Upload

Yang masih mamakai Classic Template, mau pakai yang new blogger template

Login ke blogger.com, setelah masuk ke dashboard, pilih blog yang ingin kamu ganti templatenya. Klik pada link Template.
Setelah halaman Template terbuka, pilih sub menu Customize Design
Klik Tombol Upgrade Your Template dan pilih salah satu template yang ada, kemudian klik tombol Save Template

Jadi code nya seperti make classic template, cukup upload dan templatemu langsung berubah. Ingat, selalu backup/ download template yang dipakai sebelum mengganti dengan template baru.

Jumat, 09 Januari 2009

Membuat Menu Slide Show Tab View

Tukah anda Link Favorit Aku...?
liat tuh di atas ndiri.... ada tulisannya Link Favorit,

gmna kamu mau bikin seperti itu...??? mudah kuk caranya,,,,,
hehehe aslinya aku males mau posting ni trik... coz aku lgi ada Ujian di Sekolahan (sambil promosi)
tyus setelah Gukde (aku panggil beliau gtu, tpi g tau cpa namanya hehehe) minta tutorialnya cara bikin gituan, ya.. tyus aku postingin... hehehe...
Ada Keong Masuk Pantai... = Ngumung aja loe g selesai-selesai,,, agagagagaga.....

udah deh kita langsung aja mulai....

baca do'a dulu yaw... biar g gagal... :D
1. Login ke Blogger.com
2. Tataletak --> Edit HTML --> cari code :

]]></b:skin>

taruh ni script persis di atasnya :

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

tyus cari code : </head>

lalu letakan script di bawah ini tepat di atas code : </head>

3. Oke... tyus di Save ya,,,,,,
4. lalu Klik tab Elemen Halaman
5. Klik Tambah Gadget pilih HTML/JavaScript
6. Klik tombol plus (+) Untuk HTML/JavaScript.

7. Copy lalu paste kode berikut pada kolom yang tersedia :

<center>
<div style="float:left;margin:0px 10px 0px

0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">

<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
<li><a href="#" rel="tab5">5</a></li>
<li><a href="#" rel="tab6">6</a></li>
<li><a href="#" rel="tab7">7</a></li>
<li><a href="#" rel="tab8">8</a></li>

</ul>
<br style="clear: left"/>
</div>

<div style="width:240px;text-align:justify;padding: 5px; margin-

bottom:1em">

<div id="tab1" class="tabcontent">
<a href="http://www.osis-mantab.co.cc">
<img border="0"

width="240"

height="152" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="weblog OSIS MAN Tambakberas" src="http://img379.imageshack.us/img379/7527/osisyh2.jpg" title="weblog OSIS MAN Tambakberas"/></a>

<p><h3><a href="http://www.osis-mantab.co.cc">Webblognya OSIS MAN

Tambakberas Jombang</a></h3></p>
www.osis-mantab.co.cc<br/>
Silahkan mampir ya....
</div>

<div id="tab2" class="tabcontent">
<a href="http://www.matematik-mania.blogspot.com">
<img border="0"

height="152" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="Bpk. Tholib S.Pd" width="240" title="Bpk. Tholib S.Pd"

src="http://img253.imageshack.us/img253/7662/paktholibke9.jpg"/></a>
<p><h3><a href="http://www.matematik-mania.blogspot.com">Matematik

-Mania</a></h3></p>

Bpk.Tholib S.Pd (Guru Matematika MAN Tambakberas Jombang
</div>

<div id="tab3" class="tabcontent">
<a href="http://www.x4punya.co.cc">
<img border="0"

height="152" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" title="Sepuluh Empet"

src="http://img132.imageshack.us/img132/7646/96063721tp9.jpg"/></a>
<p><h3><a href="http://www.x4punya.co.cc">Tempat ngumpulnya Siswa

X-4</a></h3></p>

www.x4punya.co.cc
nah,,, disini tempat nonggkrongnya anak-ank X-4 MAN Tambakberas Jombang
Walikelas : Moh. Sihabuddin S.Pd
</div>

<div id="tab4" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-

your-ear-buzz.html">
<img border="0"

height="152" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="ipod" width="240" title="ipod"

src="http://img386.imageshack.us/img386/5403/mantarasby0.jpg"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-

make-your-ear-buzz.html">Website Resmi MAN Tambakberas

Jombang</a></h3></p>

MA NEGERI TAMBAKBERAS JOMBANG, Jl.Merpati Tambakberas Jombang.
</div>

<div id="tab5" class="tabcontent">
<a href="http://uzey.blogspot.com/">
<img border="0" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="uzey.blogspot" width="240"

title="uzey.blogspot" height="152"

src="http://img353.imageshack.us/img353/2968/ozynj7.jpg"/></a>
<p><h3><a

href="http://uzey.blogspot.com/">uzey.blogspot</a></h3></p>

Blog karya seorang guru Komputer MAN Tambakberas Jombang. yang

akrab di panggil Bang Ozy.
</div>
<div id="tab6" class="tabcontent">
<a href="http://sisfo.web.id/">
<img border="0" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="sisfo" width="240"

title="sisfo" height="152"

src="http://img116.imageshack.us/img116/9381/sisfosn0.jpg"/></a>
<p><h3><a

href="http://sisfo.web.id/">Sisfo.web.id</a></h3></p>

Dandy Ahmad Site's. Share Your Knowledge Here!
</div>
<div id="tab7" class="tabcontent">
<a href="http://tambakberas.com/">
<img border="0" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="yppbu" width="240"

title="yppbu" height="152"

src="http://img224.imageshack.us/img224/4823/tambakberascomgl2.jpg"/></a>
<p><h3><a

href="http://tambakberas.com/">Tambakberas.com</a></h3></p>

YAYASAN PONDOK PESANTREN BAHRUL 'ULUM TAMBAKBERAS JOMBANG (YPPBU)
</div>

<div id="tab8" class="tabcontent">
<a href="http://annajy.com/smkti/">
<img border="0" style="border-right: 0px; border-top: 0px; border-

left: 0px; border-bottom: 0px" alt="yppbu" width="240"

title="yppbu" height="152"

src="http://img399.imageshack.us/img399/4724/smkticopywr4.jpg"/></a>
<p><h3><a

href="http://annajy.com/smkti/">SMK TI ANNAJIYYAH BU</a></h3></p>

Jl.Kh.Wahab Chasbullah Gg.3 Tambakberas Jombang
</div>

</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(5000)

</script></div>
</center>

Keterangan :
Untuk code yg berkedip-kedip "<li><a href="#" rel="tab8">8</a></li>"

itu adalah untuk Buttonnya / urutan jalannya gambar, jika mau menambahi, anda tinggal copy code tersebut tepat di bawahnya yg berkedip-kedip. Dengan syarat mengganti angka 8 (tab8 dan >8< ) dgn angkasesuai urutan tersebut.

untuk merubah tulisan dan gambarnya anda bisa merubah script yg ada di bawahnya :

NB : untuk tulisan : id="tab1" berarti conect pada Tobol no. 1 ( <li><a href="#" rel="tab1">1</a></li> ).

terus buat ngatur kecepatan pindah-pindahnya ke tab 1 ke yg lain, anda tinggal merubah angka yg ada di dalam code :

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(5000)

angka 5000 itu menunjukan kecepatan pindahnya, semakin besar angka itu semakin lambat untuk pindah ke tab yg lain, begitu pula bila angka semakin kecil, maka akan cepat pula pindahnya ke tab yg lain.

sekian anda terimakasih.... semoga bermanfaat.

Script Original By :dynamic drive. Modivikasi oleh : Hanif Saifudin

Bikin Judul Blog Bergerak (Versi 2)

Hem.... kayaknya untuk para pecinta keramaian pada Blog... kini saya mau kasih tutorial untuk membuat judul blog bergerak, ya... kemarin saya dah posting tutorial semacam ini, tapi yg kemarin hanya seperti ini :

------KEMARIN GERAKNYA SEPERTI INI (marquee)------

nah, sekarang akan saya buat beda, contohnya bisa di lihat di WebBlognya anak-anak OSIS MAN Tambakberas

Gmna? dah di lihat...???
hem... pasti mau kan...????

oke... kita mulai aja caranya....
1. Login ke Blogger.com
2. Klik --> Tataletak --> Edit HTML --> cari code : <title><data:blog.pageTitle/></title>

Klo dah ketemu taruh script berikut ini tepat di bawahnya :

lalu di simpan,,, and jangan lupa lihat hasilnya + comentnya... :D

Rabu, 07 Januari 2009

Cara Menampilkan Recent Post (Postingan Terbaru)

Kamu pingin nampilin postingan terbaru (Recent Post) kamu di side bar?
Kalo pingin, beginilah caranya :

1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".

4. Ganti nama blogmu dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.

dah beres............ coba liat...............

Membuat Kotak Komentar Blogger di Bawah Postingan

Akhirnya datang juga....
Setelah lama ditunggu-tunggu oleh para penggemar setianya, akhir blogger/blogspot menerbitkan juga comment box atau kotak komentar yang langsung muncul berada dibawah postingan. Kalau dulu hanya berupa link "Post a Comment", maka yang sekarang lain, yg sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah ini). Dengan adanya kotak komentar yang seperti ini, akupun rela mengganti kotak komentarku yang dulu (haloscan) dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, bukan blogger.com
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (perhatikan gambar ini)

3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

7. Kemudian ganti kode tersebut dengan kode dibawah ini:

8. Tyus di save....... and liat hasilnya :D

Senin, 05 Januari 2009

Trik Memproteksi Blog dari COPAS

Mungkin bagi sebagian para pemilik blog sering kali jengkel jika melihat artikel-artikel yang dibuatnya dengan memeras otak (emangnya cucian) tiba-tiba sudah ada di tempat blog milik orang lain, apalagi kalo disitu tidak disebutkan sumber asli dari artikel tersebut, pasti orang tersebut akan bilang "ANJRIT"

dan sumpah serapah yang lain (apa aja ya kata sumpah serapah?, aku taunya cuma itu doang, aku kan selalu ngomong yg baik2 jadi nggak tahu kata-kata kotor

hooooeeeekkkkk..). Tapi mungkin bagi sebagian orang lagi sih nggak mempermasalahkannya, entah artikelnya diambil kek, di copy kek, di cekek kek "No Problem". Nha, kamu termasuk golongan yang mana nih? yang Protectif atau yang Cuekif (bahasa mana tuh "Cuekif"). Kalo kamu termasuk yang yang Protectif alias golongan orang yang artikelnya nggak mau dicuri orang, sini ikut saya , tak tunjukin jalan menuju sorga, eeh, maksudnya cara melakukannya.

Udah berdebar-debar ya?, nggak sabar nunggu ya? ya udah deh ini dia Tips dan Trik untuk memproteksi artikel dari pencurian...

pertama-tama kita panjatkan puja dan puji sukur kita kepada Tuhan YME. Walah malah pidato. Langsung aja deh
Pertama-tama kita panjatkan, walah kok itu lagi sih
Pertama-tama kita analisa dulu, biasanya kalo mau nyuri artikel kan ada beberapa cara nih, mulai dari menyeleksi tulisan yang mau dicuri kemudian di copy-paste. Atau melihat "Source Code"nya dengan meng-klik kanan dan lain-lain. Ada beberapa cara untuk mengatasi masalah tersebut, mulai dari cara yang mudah sampai cara yang sulit. Nha untuk Tips dan Trik kali ini kita akan mencoba menggunakan cara yang mudah saja, tapi ingat, cara ini hanya efektif untuk menghadapi maling kelas teri, jadi nggak akan mempan menghadapi para penjahat kelas kakap yang sudah banyak makan asam garam dunia internet (emangnya enak makan asam ama garam?). Tapi lumayan kan untuk berjaga jaga dari maling-maling kelas teri. Nha berikut adalah triknya...
copy script dibawah ini kedalam body kamu (lho? kok kedalam body sih?), maksudnya kedalam tag Edit HTML
cari kode ini letaknya kira-kira di tengah bagian kiri, dan biasanya setelah kode . perlu diperhatikan bahwa di dalam kode html terdapat banyak tulisan "body", jangan salah memilih body .
kalo sudah ketemu letakkkan script ini didalamnya

onmousedown="return false" oncontextmenu="return false" onselectstart="return false"

contohnya kayak gini nih

Nha, script diatas untuk memproteksi agar text yang ada tidak bisa di seleksi untuk dicopy, dan juga tidak bisa di klik kanan.
trus bagaimana kalo kalo pencurinya lihat source code kita lewat menu-menu yang ada di web browser? misalnya yang pake Mozilla dengan cara Klik View -->> Page Source atau dengan menekan Ctrl+u. Nha untuk menakali masalah ini kita kita pakai cara licik aja, yaitu dengan menurunkan script html kebawah, caranya gimana tuh?
gini, taruh kursor/pointer ke atas tag (letaknya dibagian atas), trus tekan enter sampai kira-kira 70 kali. Nha kalo pencurinya melihat source code kita, dia hanya akan melihat kode kepala dari html kita, sedangkan isi dari blog kita kan udah turun ke bawah, tul ga?
tapi ingat sekali lagi, ini hanya untuk pencuri kelas teri, walaupun diproteksi secanggih apapun, pasti tetap aja ada orang yang akan bisa membongkarnya, tapi kan setidaknya kita berjaga-jaga, ya tho?
Monggo di jajal..

Perhatian : Kalo pake trik proteksi ini, maka untuk form-form isian seperti search engine, kotak komentar haloscan, shoutbox ogix. tidak bisa diisi. Jadi kalo memang tidak benar-benar diperlukan, jangan menggunakan trik ini. he..he..

Minggu, 30 November 2008

Membuat News Ticker

News Ticker...... siapa yang tidak tau "NEWS TICKER"...? :-/
Oke kali ini kita akan membuat tampilan blog kita seperti "TV"... maksutnya gini... Kan biasanya di TV ada Tulisan berjalan di bawah kan...?????? Lha... kita sekarang akan membuat model seperti itu. untuk lihat contohnya bisa di lihat di Blog CREW ELITE ==> www.osis-mantab.co.cc

oke... dah d liat lom?
gmna? mau kan????? "Ya Iyalah... Masak Ya Toibah" hehehehehe.......
oia aku lupa....... tuh beritanya dari "METRO TV"...............................

langsung aja kita mulai......
1. Seperti biasanya... LOGIN ke BLOG kalian dulu.

2. Cari Kode ]]></b:skin>
3. Taruh kode di bawah ini tepat di atasnya ]]></b:skin>

#newsticker {align: center;position:fixed;_position:absolute; width:100%;height:33px;z-index:10000; bottom:0; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Keterangan :

Untuk yang berwarne biru (

bottom) adalah posisinya, bila ingin di rubah tinggal ganti tulisan itu. Bottom = Bawah, Top = Atas

4. Cari kode </html>
5. Taruh Kode di bawah ini tepat di atasnya </html>

Kalau sudah.... jangan lupa Di Simpan....
Tyus sekarang lihat Hasilnya..................................

Semoga berhasil................. :D

Jumat, 14 November 2008

Menampilkan berita metrotv,detik,okezone di blog

Jika anda ingin menampilkan berita dari headline news situs-situs terkenal seperti CNN,BBC,Yahoo News, Google News ataupun dari dalam negeri seperti detik,okezone,metrotv dan lain-lain,
caranya tidak sesudah yang anda kira. Kemarin saya menuliskan script pendek tentang bagaimana cara menampilkan newsticker metrotv, sekarang saya berikan beberapa langkah mudah untuk menampilkan berita dari 3 situs terkenal yang sesuai judul diatas.

Secara umum, tidak perlu background programming untuk membuat berita online tersebut tampil di website / web-blog anda, yang perlu anda kuasainya hanya COPY dan PASTE JAVASCRIPT yang nantinya di BURN oleh provider yang menyediakan space / direktori khusus untuk menyimpan berita yang akan mereka BIND / EMBED dari okezone,detikinet,metrotv tersebut.

Yang harus anda ketahui adalah anda harus menyediakan URL address RSS/XML nya situs-situs yanh ingin angkut tersebut. Saya kasih bocoran RSS ketiga situs berita diatas :

detikinet mempunyai alamat http://www.detikinet.com/index.php/feed/ ,
okezone mempunyai URL address http://www.okezone.com/rss ,
metrotv mempunyai link URL http://www.metrotvnews.com/rss_docs.asp ,

setelah mendapatkan URL RSS mereka, anda tinggal menuju ke

http://www.tickermyfeed.com/

setelah itu, silahkan bakar feed berita yang telah ada alamatnya tadi dikotak:

Enter URL of Your Own RSS or ATOM Feed:

setelah itu anda akan mendapatkan script berupa sepenggal javascript dari mereka yang tinggal anda insert / selipkan ke blog / website anda misalnya di blogspot, wp, livejournal, thumbbloger dll.

Untuk yang lebih advanced dimana anda bisa menghosting sendiri berita serta memparser lebih jauh lagi, anda bisa ke :

http://www.dynamicdrive.com/

nanti anda akan disediakan download-annya.

Jika anda serius ingin membuat programnya sendiri, apakah anda ingin membuatnya dengan bahasa programming php, java, asp, python, perl, vb , anda harus menguasai paling tidak librari DOM Structure, atau jika tidak, anda harus belajar bagaimana memanipulasi string (kunci dasar memparsing) dan yang perlu diingat, anda harus mengetahui skema XML dan spesifikasi RSS.

Selamat mencoba..

Selasa, 28 Oktober 2008

Kode-kode warna

Di dalam dunia web/blog, warna itu sangat penting dan sangat berpengaruh terhadap penampilan web/blog. Warna-warna biasanya digunakan untuk background, text, links, table dll. Kalo kombinasi warna pada web/blog kita tidak sesuai, atau tidak enak dipandang mata mata, maka hal itu akan membuat pengungjung web/blog kita menjadi kurang nyaman, dan kemungkinan akan malas untuk mengunjungi blog kita lagi. Tapi karena untuk untuk membuat warna-warna ini harus menggunakan kode-kode warna, maka bagi yang tidak begitu mahir tentang html akan kesulitan untuk mendapatkan kode-kode warna ini.

Nha oleh karena itulah dibawah ini telah aku buat Chart HTML Kode Warna bagi yang tidak tahu atau bagi yg pingin tahu kode-kode warna. Cara penggunaannya cukup mudah, km tinggal klik warna yang kamu pilih, maka kode warnanya akan tampil di kotak "kode warna:". Ok silahkan dicoba. mau liat kodenya Klik Disini.....

Sabtu, 13 September 2008

Membuat Search Engine

membuat search engine di blog lebih menarik dengan background gambar dan tombol sumbit juga ada gambarnya, menurut kamu menarik gak sih search engine yang kaya begini... kalau kamu belum faham juga ni dibawah aku kasih contoh search engine yang menarik

Gimana? Dari gambar diatas kamu tertarik gak pengen buat search engine yang kaya gituan wkakaak pastinya penegen dunk orang menarik iya kan?

Iya itu adalah background karya aku sendiri dan nanti kamu juga bisa buat Backgroundnya sendiri dan juga tombol submit buatan kamu sendiri okey

langsung aja deh ke cara pembuatanya

1. Log in ke blogger dahulu kalau sudah masuk menu Layout kemudian masuk Edit HTML

2. Lalu taruh Code Dibawah diatas Code ]]></b:skin>

#searchform {
position:letf;
top: 20px;
right: 0px;
background: url(http://anas.ku93.googlepages.com/search-back.png) no-repeat right bottom;
height: 59px;
width: 210px;
}
#searchform #s{
background: #ffffff url(http://anas.ku93.googlepages.com/form-field-bg.gif) no-repeat ;
height: 17px;
width: 148px;
margin: 30px 5px 0px 10px;
padding: 3px 7px 2px 5px;
color: #999999;
border: none;
}
#searchform #searchsubmit {
background: url(http://anas.ku93.googlepages.com/searchbtnnk7.png) no-repeat left top;
height: 24px;
width: 24px;
border: none;
text-indent: -999%;
line-height: 1px;
margin-top: 6px;
}

3. Kemudian Simpan Template

4. Lalu langkah selanjutnta adalah masuk menu Layout ---> Page Elements

5. Pilih tempat yang mau dipasangi Search engine kemudian Add A Gadget

6. Lalu pilih HTML/JavaScript kemudian Taruh Code Dibawah Kedalamnya

7. Lalu Simpan dehh

Nah jika kamu ingin membuat karyamu sendiri silahkan ganti link backroundnya yahh dan atur penempatanya okey

http://anas.ku93.googlepages.com/search-back.gif ---> Ini adalah Link Backgroundya

http://i254.photobucket.com/albums/hh92/eblogtemplates/itheme/form-field-bg.gif -----> Ini Background Form

http://i254.photobucket.com/albums/hh92/eblogtemplates/itheme/searchbtnnk7.png ---> Ini Tombol Submitnya

Gimana trik aq... jadul tapi manjur kan wkakakakak okelah silahkan menjoba jangan lupa isi komentar yahh...........

BACKGROUND YANG BISA KAMU GUNAKAN

http://anas.ku93.googlepages.com/search-back.png

http://anas.ku93.googlepages.com/search-qwu.png

Software Pengolah Blog

Wewwww keren ada software pengolah blog tanpa online di web, seperti halnya online di web kita dapat mengedit postingan, Publish posting da masih banyak lagi.... berikut di bawah perincianya

WYSIWYG editor (mirip Dreamweaver)
Fasilitas Content Management

Sehingga kita bisa melihat tags, links, atau image yang kita pakai di blog kita
Kita juga bisa mengedit postingan kita langsung (seperti mengedit via web)

Support Multiple Blogs

Platform blog yang sudah disupport antara lain:

Blogspot

Wordpress

Roller dan masih banyak lagi.....

Bikin Judul Blog Bergerak

Yupz sesuai dengan judul yang diatas aku akan menerangkan secuil ilmu yang aku dapatkan dari pengalaman. jika anda belum faham aku kan menerangkan dulu.
judul blog berjalan?
judul blog kita terlihat berjalan di title bar browser anda untuk lebih mempercantik blog kita dan blog kita telihat menarik jika dikunjungi oleh orang lain:D
gimana pengen tau caranya?
aku akan kasih tau caranya dech. yaitu:

Login ke blogger kemudian ke menu Layout ---> Edit HTML
Cari kode/script <title><data:blog.pageTitle/></title>
Ganti kode diatas dengan
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

Catatan
text yang berwarna merah diatas adalah merupakan kecepatan pergerakanya jika kamu tambah angkanya maka pergerakanya akan lambat dan jika mengurangi angka maka pergerakanya akan semakin cepat

silahkan mencoba kalau belum berhasil silahkan coba lagi sampai berhasil :D

Kamis, 11 September 2008

Siapa yang menjiplak artikel mu...?

Nah, pas jalan-jalan gak sengaja ketemu situs bagus. Situs buat mengetahui siapa yang telah menjiplak artikel di blog kita. Caranya cukup mudah, gak perlu mendaftar, tinggal taruh alamat/URL blogmu trus pencet tombol "GO", tinggal tunggu bentar trus langsung keluar siapa yang ngambil ato yang copy paste artikel blogmu. Kalo untuk mengetahui siapa yang menjiplak artikel2 atau postingan2 tertentu maka yg kamu masukkan ke sana adalah link dari judul postinganmu, jadi nanti akan ketahuan siapa yang menjiplak postinganmu tersebut.

Tapi sayang untuk yang versi gratis kita hanya bisa mengetahui beberapa aja, jadi gak bisa mengetahui semua yang ngopy paste blog kita. Tapi lumayan kan buat mengintip dikit. he..he.. . OK bagi yang pengen tahu nih alamatnya http://www.copyscape.com, langsung datengin aja tuh kesana.

Cara Menuliskan Script pada posting

Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita menuliskan kode <head> dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode <head> , maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini & l t ; h e a d & g t ; . Nah terus bagaimana kalau ada banyak kode yang harus kita posting?
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?

Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:

Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.

Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut

Kode	Kode Pengganti
	<
>	& g t ;
"	& q u o t ;

- Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus tekan tombol Replace All.
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.

Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.

Piye? Gampang to? gitu aja kok repot.....

Highlight pada Script

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Contohnya bisa kamu lihat pada blogku ini. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain. Nha kamu mau tahu cara pembuatamnya?

Gini nih caranya :
1. Login ke blogger lalu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin> :

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu.

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.

Dah gitu aja, gampang kan