Promote Your Web Here

Get paid To Promote at any Location

31 May 2009

Membuat Flashing Link (Template Standar)

Flashing link adalah salah satu bentuk link dengan background yang berkedip ataupun dengan link itu sendiri yang berkedip. Ini mungkin dapat membantu mengalihkan perhatian pada pembaca blog sobat. Dengan adanya link yang berkedip diantara postingan sobat :).

Sebagai contoh sobat dapat melihat dibawah :
1. contoh 1
2. contoh 2

Maaf Contoh ini tidak dapat tampil di blog saya karena tidak menggunakan Template Standar.

Cara pembuatan Flash Link :
1. Download Flash Link.js DISINI
2. Setelah di download silahkan sobat Upload kedalam file penyimpanan sobat, sebagai contoh sobat taruh di www.geocities.com
3. Masuk kedalam Blogger sobat --> "Tata Letak" --> "Edit HTML" --> tandai "Expand Widget Template
4. Masukan Kode dibawah tepat dibawah <head>

<script type="text/javascript" src="http://www.geocities.com/ciao.indo/flashinglinks.js">
</script>
Ganti Kode yang berwarna Hijau dengan URL penyimpanan File flashlink.js sobat
5. Simpan template Sobat

Cara Penulisan diposting/widget :
<a href="Link URL" rel="flashfg[colorvalue]">Contoh 1</a>

<a href="Link URL" rel="flashbg[colorvalue]">Contoh 2</a>
- Pada kode diatas warna Merah adalah URL link sobat
- Jangan lupa selalu Tambahkan Kode yang berwarna Kuning dalam penulisan dalam kode warna Kuning tersebut Kode color value dapat sobat ganti warna apa yang akan ditampilkan.
- Contoh Kode yang sudah jadi menjadi seperti ini : <a href="URL Link Sobat" rel="flashfg[blue]">Contoh Saja</a>

Demikian cara pembuatan dan penempatan Flash Link, Semoga dapat bermanfaat buat sobat semua.

Artikel asli : www.dynamicdrive.com

30 May 2009

Template Editan

Wah bingung mau bikin posting apa lagi yah..dengan tidak mengurangi rasa hormat saya, saya membuat postingan template yang Originalnya punya Kang Rohman yaitu Megazine Template 3. Namun dalam template yang saya sodorkan kali ini...**cielahhh sodorkan** adalah hasil saya mengedit dengan menambahkan 4 kolom Footer.

Sehingga akan menambah beberapa kolom lagi. Template ini cocok buat sobat yang memiliki banyak widget dan fariasi pada tampilan blognya.

Dari template aslinya saya merubah disamping footernya telah ditambahkan pula Read More hanya dengan menambahkan kode :
<span class="fullpost">

</span>
kode tersebut tinggal sobat taruh pada pengaturan --> Format --> Post Template kemudian simpan

Download | Preview

Nb : Terimakasih buat Kang Rohman...Tanpa menghilangkan Credit dari Template kang Rohman...

29 May 2009

Face Book Bikin Gempar

FaceBook merupakan sebuah situs jejaring sosial. Pencipta dari Facebook sendiri adalah seorang muda yang pada saat itu baru berusia 23 tahun, dia adalah Mark Zuckerberg. Dengan penemuannya dia kini termasuk salah satu Pemuda terkaya di dunia.

Dari Facebook banyak bermunculan ide baru pula lho sobat, hingga sebuah Band Besar Tanah Air (GIGI)" membuat lagu dengan judul My Facebook


MP3 Download : Gigi - MyFaceBook.mp3
File Size : 7.410Kb

Dari sebuah situs ini banyak bermunculan Kebaikan dan Kejelekannya. Diantara kebaikan antara lain kita dapat bertemu dengan teman-teman kita, bahkan teman semasa Sekolah Dasar. Sedangkan untuk kejelekan mungkin sobat juga sudah mengetahui sendiri, Hingga ada Ultimatum yang menyatakan bahwa "FACEBOOK DIHARAMKAN". Namun dari itu semua bagaimana kita menyikapinya, Jika memang bisa bermanfaat dan memberikan sebuah kebaikan kenapa tidak menggunakannya, dan jika menurut sobat atau yang lain itu memberikan efek yang buruk maka jangan pernah ikut dan mendalaminya Geto aja Kok REPOT "Versi GUSDUR" (maaf hanya bercanda Gus...hehehe...)

Nah menurut sobat dan pemikiran sobat itu sendiri gimana nih...

26 May 2009

Membuat Widget Top Artikel

Sobat tahu posting/artikel mana yang sering dikunjungi?? Artikel mana yang jadi favorit pembaca sobat?? Nah untuk itu saya mencoba memberikan postingan tentang "Widget Top Artikel". Widget ini berfungsi untuk mengetahui artikel mana yang menjadi favorit pengunjung blog sobat. Dari postingan kemarin ada juga yang membahas tentang TOP namun kemarin adalah postingan "TopKomentator"

Udah ah sobat ga usah banyak basa-basi, nanti malahan basi beneran deh, hehehe..., Fungsinya seperti yang dikemukakan diatas dan mungkin banyak juga sobat blogger yang sudah menggunakannya. Namun disini saya cukup kasih cara membuat Widget Top Artikel secara instant.

Silahkan sobat gunakan Form Otomatis dibawah Untuk Memasang Widget Top Artikel :


Catatan :
- Setelah mengisi Namablog dan Id filter sobat Harap Klik "Update"
- Silahkan bagi sobat yang berkenan menambahkan widget ini kedalam postingan sobat dapat menggunakan Form dibawah :



25 May 2009

Membuat Widget Top Komentator

Widget Top Komentator merupakan sebuah widget untuk mengetahui siapa saja yang mengomentari tulisan/artikel pada blog sobat. Widget ini akan memberikan urutan siapa yang mengomentari blog sobat dari yang terbanyak hingga terkecil.

Fungsi dari widget ini selain untuk mengetahui top komentator juga sebagai Back Link dari blog sobat, dikarenakan blog saya adalah blog yang "do follow". Hmm padahal belum saya cek kembali blog saya "dofollow" atau tidak setelah ganti template.

Banyak para blogger sudah menggunakannya, namun bila sobat ada kesulitan penulisan kodenya saya memberikan sebuah cara instant memasang widget Top Komentator.

Silahkan sobat gunakan Form Otomatis dibawah Untuk Memasang Widget Top Komentator :

Catatan :
- Setelah mengisi Namablog dan Id filter sobat Harap Klik "Update"
- Silahkan bagi sobat yang berkenan menambahkan widget ini kedalam postingan sobat dapat menggunakan Form dibawah :


23 May 2009

Mencapai Potensi Hidup Maksimal

Setiap orang mendambakan masa depan yang lebih baik, kesuksesan dalam karir, rumah tangga dan hubungan sosial, namun seringkali terbentur oleh berbegai kendala. Dan kendala terbesar justru ada pada diri kita sendiri. Melalui berbagai karyanya, Joel Osteen menantang kita untuk keluar dari pola pikir yang sempit dan mulai berpikir dengan paradigma yang baru.

Menurut Joel Osteen ada 7 langkah agar kita mencapai potensi hidup yang maksimal :

1. Perluas wawasan. Dalam hal ini Sobat harus memandang kehidupan ini dengan mata iman, pandanglah diri sobat sedang melesat jauh ke level yang lebih tinggi. Sobat harus memiliki gambaran yang cukup kuat apa yang akan sobat raih. Gambaran ini harus menjadi bagian dari diri sobat, didalam benak sobat, dalam percakapan sobat, meresap kedalam pikiran bawah sadar sobat, didalam perbuatan sobat dan dalam setiap aspek kehidupan sobat.

2. Mengembangkan gambar diri yang sehat. Dalam arti sobat harus melandasi gambar diri yang ada pada sobat diatas apa yang tuhan katakan tentang sobat.
Keberhasilan sobat meraih tujuan sangat tergantung pada bagaimana sobat memandang diri sobat sendiri dan apa yang sobat rasakan tentang diri sobat. Sebab hal itu akan menentukan tingkat kepercayaan diri sobat dalam bertindak. Fakta mengatakan bahwa sobat tidak akan pernah melesat lebih tinggi dari apa yang sobat bayangkan mengenai diri sobat sendiri.

3. Temukan kekuatan dibalik fikiran dan perkataan sobat. Target utama serangan musuh adalah pikiran sobat. Dia tau sekiranya dia berhasil mengendalikan dan memanipulasi apa yang sobat pikirkan, maka dia akan berhasil mengndalikan dan memanipulasi seluruh kehidupan sobat. Pikiran menentukan perilaku, sikap dan gambar diri. Pikiran menentukan tujuan. Kitab suci memperingatkan kita untuk senantiasa menjaga pikiran.

4. Lepaskan masa lalu dan biarlah dia pergi..
Sobat renungkan, mungkin sobat telah kehilangan segala yang tidak seorangpun patut mengalami dalam kehidupan ini. Jika sobat ingin hidup berkemenangan, sobat tidak boleh memakai trauma masa lalu sebagai dalih untuk membuat pilihan-pilihan yang buruk saat ini. Sobat harus berani tidak menjadikan masa lalu sebagai alasan atas sikap buruk sobat selama ini, atau membenarkan tindakan sobat untuk tidak mengampuni seseorang.

5. Temukan kekuatan didalam keadaan yang paling buruk sekalipun. Kita harus bersikap “saya boleh saja terjatuh beberapa kali dalam hidup ini, tetapi kita tidak akan terus tinggal dibawah sana”. Kita semua menghadapi tantangan dalam hidup kita. Kita semua pasti mengalami hal-hal yang datang menyerang kita. Kita boleh saja dijatuhkan dari luar, tetapi kunci untuk hidup berkemenangan adalah belajar bagaimana untuk bangkit lagi dari dalam.

6. Memberi dengan suka cita. Salah satu tantangan yang besar yang kita hadapi adalah godaan untuk hidup mementingkan diri sendiri. Sebab kita tahu bahwa tuhan memang menginginkan yang terbaik buat kita, Tuhan ingin kita makmur, menikmati kemurahanNya dan banyak lagi yang Tuhan sediakan buat kita, namun kadang kita lupa dan terjebak dalam perilaku mementingkan diri sendiri. Sesungguhnya kita akan mengalami lebih banyak sukacita dari yang pernah dibayangkan apabila kita mau berbagi hidup dengan orang lain.

7. Memilih untuk berbahagia hari ini. Sobat tidak harus menunggu sampai semua persoalan terselesaikan. Sobat tidak harus menunda kebahagiaan sampai sobat mencapai semua sasaran sobat. Tuhan ingin sobat berbahagia apapun kondisinya. SEKARANG JUGA

Dikutip dari : mencapai potensi hidup yang maksimal – Joel Osteen.

22 May 2009

Twitter semakin ganas


Pengguna Twitter semakin hari semakin meningkat, apalagi ada sebuah program mendulang dollar via Twetter yaitu melalui sebuah program yang bernama Revtwt.

Caranyapun bila dikatakan sangatlah mudah, yaitu dengan mendaftarkan akun twitter sobat (bila belum punya twitter silahkan daftar disini). Setelah sobat mendaftar, sobat hanya mempromosikan sesuatu produk dari Revtwt di status twitter sobat. Bayarannyapun sangat ber-variasi antara $0.035-$0.75/Klik tergantung dari jenis iklannya.


Sobat...lebih hebohnya lagi nih kalau hal ini tidak hanya melalui status twitter sobat saja, namun dapat tampil di Blog, Milis, Komentar Forum dan via Email. Imbalannyapun terkesan lebih besar yaitu berkisar antara $0.200-$15.000/completion.

Lebih hematnya lagi bahwa pembayaran dapat dilakukan langsung ke account Paypal sobat, dan withdrawlnya juga sangat ringan yaitu hanya senilai $20. Baiklah sobat ga usah panjang lebar banget nanti saya dikira Tukang Jamu, dan jika sobat ada yang berminat silahkan join RevTwt saja.

RSS Reader Terbaru Bernama ByTagg

By Tagg adalah sebuah mesin follower baru dengan fitur yang tidak kalah menarik dengan follower sejenisnya. ByTagg mempunyai kemampuan sebagai Rss Feed Reader, Twitter Reader dan juga dapat digunakan sebagai search engine (mesin pencarian).

Disamping itu pula ByTagg juga dapat dijadikan sarana beriklan sobat yang cukup efektif. Tools ini juga memiliki sebuah program affiliasi.

Sebagai Banner dalam tools tersebut terdapat fitur yang dapat sobat taruhi banner sobat dengan ukuran 234px x 60px.

Tools ini bekerja dalam system operasi Windows XP, Vista. Sesuai perkembangannya kemungkinan besar juga akan merambah kepada System Operasi Linux dan MAC.

Keterangan Downlad:
File Size : 1,1MB
Download File : http://download.bytagg.com

Sumber Inspirasi : www.o-om.com

21 May 2009

Template Baru 8 Kolom

Hihi..setelah berselancar kesana kemari akhirnya saya menemukan sebuah template yang cukup lumayan, terdapat banyak kolom (8 kolom). Nah ini tentunya cocok buat sobat yang ingin menggunakannya dengan beraneka ragam Widget. Seperti halnya saya sendiri (orangnya bosanan) yang selalu ganti template dan banyaknya widget yang saya pakai nampaknya template ini yang saya rasa cocok.

Template dengan banyak kolom dapat dilihat seperti ini.


Fitur-fiturnya :

- Header dengan lebar 970px

- Readmore tidak berfungsi dengan baik dari kode aslinya...untuk itu saya sarankan rubah kode ReadMore pada kode asli seperti ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read more...</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>

Ganti dengan Kode Ini :
<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/>
<a expr:href='data:post.url'><strong>Selengkapnya...»»</strong></a></p>
</b:if>

- Kolom tambah widget dibawah header dan diatas posting sudah tersedia.

- Footer 3 kolom. serta lainnya.

Catatan :
Ternyata setelah saya pakai ada beberapa komplain dari sobat blogger diantaranya sobat Adith pada shoutmix saya (tanggal 21-05-2009 jam 22.15wib) yang menyatakan bahwa "beliau tidak dapat berkomentar di blog ini" maka dengan segera saya cek kode dari comment dan selama 30 menitan saya mencari letak kesalahan berada dimana. Akhirnya ketemu juga letak kegagalan Template Awal ini.

Dari hasil pencarian letak kolom komentar saya taruh dibawah postingan dengan menghilangkan dan atau menambah kode berikut :

1. Pada Mode Edit HTML carilah kode <p class='comment-footer'>. Sobat akan menemukan 2 buah penempatan kode tersebut.

2. Pada kode diatas yang pertama (1) akan terdapat seperti ini :
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
Dalam kode tersebut hapuslah kode yang berwarna merah

3. Pada kode yang ditemukan untuk kedua kalinya (hasil pencarian kode 1) akan ketemu kode seperti nomer 2. Ganti kode tersebut dengan kode berikut :
<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

Selesai hasil pengeditan komentar. Maka kotak komentar akan terlihat langsung dibawah postingan seperti sekarang.

Contoh widget ini dapat sobat lihat pada blog saya dan dapat dilihat pula disini

Download Tempalte

Template asli saya ambil dari : http://www.ourblogtemplates.com

19 May 2009

Membuat Tabview Widget

Tabview merupakan sebuah widget yang perlu digunakan untuk menyimpan beberapa konten dalam satu tempat, yang akan ditampilkan bilamana tab konten tersebut di klik olehnya.

Dalam pembuatan widget seperti ini banyak digunakan beberapa kode diantaranya berektensi Java Script.


Cara membuat TabView :
1. Masuk kedalam blogger sobat

2. Arahkan ke Tab "TATA LETAK/LAYOUT" ==> "EDIT HTML" ==> Beri tanda pada kotak disamping tulisan "Expand Widget Templates"

3. Jangan lupa untuk BackUp template sobat sebelumnya dengan menekan tulisan "Download Full Templates"

4. Cari Kode ]]></b:skin> kemudian Copy dan Pastekan Kode Berikut tepat diatas Kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #7A7A7A; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Californian FB", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #58FA58; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #000000; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #000000; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5. Setelah itu Copy dan Paste Kode Berikut tepat dibawah kode ]]></b:skin>

<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>

6. Simpan Template Sobat.

Cara memasang Tabview Pada Widget/Sidebar
1. Tuju Halaman TATA LETAK/LAYOUT" ==> "PAGE ELEMENT" ==> "TAMBAH WIDGET"

2. Pilih HTML/Java Script"

3. Masukan Kode berikut ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Tab.1</a>
<a>Tab.2</a>
<a>Tab.3</a>
<a>Tab.4</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">
Isi Konten Tab.1
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.2
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.3
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.4
</div>
</div>

</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Pada kode yang Berkedip merupakan Jumlah Tab yang mau sobat masukan, terserah sobat mau membuat berapa Tab. Tinggal sobat menambahkan Kode yang sama seperti kode yang Berkedip.

- Pada Kode yang berwarna Kuning merupakan Tinggi Kotak Widget TabView yang akan sobat buat.

- Pada Text berwarna Merah merupakan Isi Konten yang akan di tampilkan pada masing-masing TabView.

Demikian cara membuat Widget TabView,Semoga dapat difahami. Selamat mencoba.

18 May 2009

Membuat Text dan Gambar "CRAWLER"

Text atau Gambar "CRAWLER" merupakan sebuah text / gambar yang dapat bergeser kedepan (ke kiri) maupun berbalik kembali ke belakang (ke kanan) apabila posisi "mouse" digeserkan ke arah yang berlawanan.

Isi dari kontent "CRAWLER" merupakan halaman pengkodean HTML biasa. Yang menggunakan beragam konten "Marquee", "CRAWLER" merupakan konten lebih mudah dengan menggunakan event tanpa "Onload". "CRAWLER" sangat mudah dan dapat dipadukan dengan berbagai macam script. Silahkan lihat Contoh dibawah

Membuat text crawler, perlu kehati-hatian yang sangat harap perhatikan semua perintah dalam membuatnya,jangan sampai anda melewatkan salah satu cara dan aturan dalam membuatnya.







Cara membuat Text / Gambar "CRAWLER" :
1. Download Crawler.js, setelah di download kemudian upload file Crawler.js tersebut kedalam direktori penyimpanan file sobat (ex : www.geocities.com).

2. Masuk ke blogger sobat kemudian ke Tab "TATA LETAK/LAYOUT" ==> "EDIT HTML" ==> tandai kotak kecil pada tulisan "Expand Template Widget". Jangan lupa untuk selalu Backup template sobat dengan klik tulisan yang berbunyi "Download Full Templates"

3. Cari Kode <head> kemudian tempatkan kode dibawah tepat dibawah kode <head>.
<script type="text/javascript" src="http://www.geocities.com/ciao.indo/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
ganti kode yang berwarna Biru dengan Alamat direktori penyimpanan file Crawler.js sobat.

4. "simpan Template" sobat.

Cara menuliskan kode Sript pada Halaman Blog Sobat :

Pada contoh diatas saya menggunakan cara (text crawler) sebagai berikut :
<div class="marquee" id="mycrawler">
Membuat text crawler, perlu kehati-hatian yang sangat harap perhatikan semua perintah dalam membuatnya,jangan sampai anda melewatkan salah satu cara dan aturan dalam membuatnya.
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'blue',
'border': '1px solid #2EFE2E'
},
inc: 6, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>

Penjelasan :
- Pada text warna Biru merupakan Text yang akan ditampilkan.

- Pada Text :
'padding': '5px', = Tinggi Kotak
'width': '450px', = Lebar/Panjang kotak
'background': 'blue', = warna Background Kotak
'border': '1px solid #2EFE2E' = Warna Border Kotak

- Pada Text warna Pink merupakan kecepatan gerakan text.

- Pada Text "mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)" merupakan penggunaan Mouse untuk jeda, default untuk "pause" yaitu false. Penggunaan False disini agar Marquee tidak sangat berpengaruh.

Pada contoh diatas saya menggunakan cara (Image/Gambar crawler) sebagai berikut :
<div class="marquee" id="mycrawler2">
<img src="http://i40.tinypic.com/9tlic8.jpg" /> <img src="http://i43.tinypic.com/1zbqs5t.jpg" /> <img src="http://i44.tinypic.com/2419ul3.jpg" /> <img src="http://i43.tinypic.com/296nh3r.jpg" /> <img src="http://i40.tinypic.com/mk7ki.jpg" />
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true
});
</script>

Penjelasan :
- Text warna Merah merupakan dimana sobat menaruh gambar yang akan ditampilkan sobat (URL gambar)

- Penjelasan Lain sama

- pada Text :
** moveatleast: 2, = merupakan Kecepatan minimum untuk Kursor drives (default tidak bergerak onmouseout)
** neutral: 150, = Ini adalah ukuran area di bagian tengah tenda besar di mana hovering akan menghentikannya. (default ke 16)
** savedirection: true = merupakan pengatur arah jika mouse di pindahkan, Gambar/text akan berjalan mundur (defaulnya menggunakan "false")

Semoga dapat bermanfaat broo....selamat mencoba

Bahan referensi dari : www.dynamicdrive.com

15 May 2009

Membuat Ukuran Text Lebih Bersahabat

Sobat, kadang sebuah ukuran text dalam blog sobat tidak sesuai dengan kriteria ukuran yang ada. Kadang ukuran text tersebut terlalu kecil atau bahkan membengkak tidak sesuai dengan blog sobat yaitu karena perbedaan konfigurasi OS ataupun browser sobat. Hal ini dapat diatasi dengan menggunakan sebuah trik CSS yang saya ambil dari salah satu blog tips blog yang sebenarnya dari sumber aslinya Dynamicdrive

Script ini sesuai bagi pengguna web dengan menggunakan CSS, dan akan dapat berguna buat browser sejenis Internet Explorer V.5 keatas, Net Scape V 6 Keatas, Opera Versi 7 keatas. Sebagai contoh silahkan klik tombol berikut ini :

+ Perbesar Text | + Perkecil Text

Bagaimana Cara Pembuatannya :
1. Download Text sizer.js disini

2. Upload hasil download sobat tadi kedalam direktori penyimpanan sobat seperti www.geocities.com atau lainnya.

3. Setelah Upload selesai silahkan sobat copy kode berikut :

<script type="text/javascript" src="http://yourfilelink.com/textsizer.js"></script>

Ganti URL berwarna Merah dengan alamat URL penyimpanan file "textsizer.js" sobat.

4. Masuk kedalam Blogger sobat dengan ID dan Password sobat. Kemudian "LAYOUT/TATA LETAK" ==> "EDIT HTML" ==> Jangan lupa tandai "expand widget templates" dan backup dengan klik "Download full templates"

5. Taruh Kode diatas tadi (setelah diedit URL dengan URL sobat) dan taruh persis dibawah <head>

6. Untuk memanggil/menggunakannya taruh kode berikut kedalam posting/halaman web sobat :
<a href="javascript:ts('body',1)">+ Perbesar Text</a> | <a
href="javascript:ts('body',-1)">+ Perkecil Text</a>

Selamat mencoba dan semoga bermanfaat.

14 May 2009

Award Lagi Award Lagi

Sukur alhamdulillah ternyata banyak sobat blogger disekitar saya banyak yang peduli sama blog saya, sehingga dalam sehari ini saya mendapatkan award 2 kali. Kali ini datangnya award dari sahabat dekat saya yaitu sobat eRGe.

Tak kuasa ku menahan haru karena saya tergolong blogger baru yang masih penuh dengan ujicoba segala hal di dalam dunia blog. Tiada kata yang bisa terucap buat sobat-sobat saya yang selalu memberi support saya dan selalu ada disamping saya. Sobat eRGe inilah blog yang sobat berikan pada saya.

eRGe Award


Sebuah kepercayaan kepada saya akan saya torehkan dalam sebuah widget tersendiri untuk mengenang semua yang telah memberikan kepercayaan, dukungan, motivasi kepada saya untuk terus berkarya dan berbagi sesuai dengan tema blog saya "Belajar dalam Blog" yang artinya "saya belajar dan anda mengajar atau sebaliknya, dengan tujuan kemajuan dan keberhasilan yang didapat"

Buat semua sobat semoga semua yang saya terima dan saya tulis kembali dapat bermanfaat bagi sahabat semua.Amien.

Award Pertama Blog Ini

Sobat apa yang sobat bayangkan apabila blog sobat mendapat sebuah penghargaan berupa award?? Mungkin sobat akan senang sekali, apalagi jika sobat termasuk seorang blogger baru seperti saya. Terimakasih kepada sobat reza009 yang telah memberikan saya sebuah award yang pertama kali saya peroleh.

Namun dari penjelasan award tersebut tidak ada penjelasan bagaimana tindakan saya selanjutnya setelah mendapatkan award tersebut. Apakah ini award berantai atau hanya award biasa yang saya terima. BTW, tak apalah kalau toh bukan award berantai saya akan pasang, dan inilah bentuk award tersebut.



Saya ucapkan sekali lagi terimakasih. Kalau memang award ini bukan award berantai saya tidak akan membagikan kepada siapa saja. Dengan beberapa alasan antara lain :

1. Tidak ada aturan yang mengharuskan saya membagikan award ke blogger lain

2. Belum banyaknya pengunjung dan teman blogger saya disini.

Baiklah sobat sepertinya hanya sampai sini pemikiran saya, maaf lagi ga enak badan adi ga enak buat mikir, hehehe. Jika sobat mau membantu saya buat naikin Trafic alexa n gogle rank saya silahkan sobat jadi sahabat saya dengan follow,berkunjung n komentar di blog saya. Terimakasih saya ucapkan buat semua yang telah setia dengan saya.

Cara Menulis Kode HTML di Posting

Tulisan kali ini saya terinspirasi dari komentar aaLiL di dalam tulisan saya sebelumnya "Membuat Text Area", dalam komentar tersebut aaLiL bertanya bagaimana menulis kode HTML di postingan. Apakah itu sebuah pertanyaan iseng atau memang belum tahu caranya, secara aaLiL adalah seorang blogger senior yang telah lama berkecimpung di dunia blog dan beliau juga seorang "Pakar SEO"

Baiklah sobat, ini mungkin sambil mereview ulang buat yang belum atau yang sudah mengetahui cara menuliskan kode HTML dalam postingan. Saya juga masih belajar dan saya hanya menggunakan jasa sebuah web untuk merubah kode HTML tersebut.

"Cara yang paling mudah merubah kode HTML yaitu :"
1. silahkan sobat kunjungi website berikut
maka akan terbuka seperti ini


2. Tuliskan kode HTML yang akan sobat rubah pada kolom kemudian klik Tombol yang bertuliskan ENCODE

3. Silahkan sobat copy dan pastekan ke dalam postingan.

Selamat mencoba dan semoga bermanfaat

12 May 2009

Membuat Text Area

Text area merupakan tempat penyimpanan text ataupun kode-kode HTML,biasanya digunakan untuk menyimpan kode HTML untuk tukeran Banner atau Link. Penggunaan Text area agar memudahkan untuk di copy kede yang terdapat didalamnya.

Saya akan bahas beberapa jenis text area. Mungkin sobat kadang tidak merasakan bahwa text area juga memiliki beberapa jenis, diantaranya text area model biasa dan model "read only". Adapun dalam penerapan untuk banner text area lebih baiknya menggunakan text area jenis "Read Only", Inilah pembahasannya

Pembuatan text area biasa yaitu dengan menggunakan kode seperti berikut :

<p align="center"><textarea name="code" rows="5" cols="15"> Silahkan Tuliskan Kode/Tulisan Sobat di sini, Maka tulisan sobat akan tampil dalam text area </textarea></p>
Dari kode diatas maka akan terbentuklah seperti ini :


Dalam kode diatas sobat akan melihat kode rows="5" cols="15"> ubahlah angka tersebut untuk menentukan ukuran text area.

Menggunakan Text Area Read Only :
Text Area Model "read only" baiknya digunakan untuk menyimpan kode banner, karena dengan text area model ini kode-kode sobat akan aman dan tidak akan terhapus. Silahkan sobat bandingkan dengan text area model yang biasa. Kode Text area model Read Only sebagaimana berikut :
<p align="center"><textarea rows="3" cols="32" name="Famous Quotes" readonly="readonly"><a href="http://kanzenk.blogspot.com" target="_blank"><img border="0" alt="Belajar Dalam Blog" src="http://i655.photobucket.com/albums/uu275/kanzenk/z1ao.jpg"/></a></textarea></p>
Dari kode diatas akan menjadi :


Untuk memeriksa silahkan sobat letakkan kursor kemudian tekan "delete/back space" maka tulisan di dalam text area tidak akan terhapus.

Semoga dapat bermanfaat bagi sobat semua.

11 May 2009

Membuat Widget di Sidebar Buka/Tutup

Kebanyakan widget di sidebar kadang menjengkelkan, karena blog kita akan kelihatan panjang widget daripada postingan. Sobat dari hasil saya berjalan-jalan alias dalam bahasa jawanya tuh BLOG WALKING hehehe..., saya menemukan sebuah blog yang membahas tentang hal ini. Terimakasih buat sobat saya Easyblogtrick, dengan bahasannya saya dapat mempraktekkan dan menuliskan kembali.

Sobat dapat melihat contoh yang telah saya pergunakan pada widget daftar isi, labels, dan pengunjung. Bagaimana cara pembuatannya, ternyata setelah saya praktekkan sangatlah mudah.

Berikut ini tahapan membuat widget seakan dapat dibuka maupun ditutup :

1. Masuk kedalam Blog area sobat dengan menggunakan ID dan password sobat.

2. Klik Tab "LAYOUT/TATA LETAK" =>> "EDIT HTML"

3. Beri tanda pada kotak disamping tulisan "EXPAND WIDGET TEMPLATES", ingat lebih baik sobat selalu backup template sobat sebelum merubah sesuatu pada template sobat dengan menekan tulisan "Download Full Templates.

4. Cari kode widget yang akan sobat buka/tutup, disini misal saya gunakan daftar isi, cara pencariaan yang mudah dengan menekan tombol Ctrl+F kemudian ketik apa yang sobat cari. Disini kode standar untuk daftar isi seperti berikut.

<b:widget id='HTML5' locked='false' title='DAFTAR ISI' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
Perhatikan kode yang berwarna biru yang merupakan kode awal dari widget daftar isi dan kode yang berwarna merah yang merupakan akhir kode widget
5. Ganti kode yang berwarna kuning dan berkedip dengan kode seperti ini :
<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[+/-]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
Ganti kode/tulisan berwarna biru dengan kreasi sobat (bisa dengan kata Buka, Open, dsb)

6. Copy kode berikut
<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
Kemudian letakkan kode tersebut diatas kode
</b:includable>

7. Langkah pembuatan telah selesai, kemudian simpan/save Template sobat.

Selamat berkreasi, dan semoga berhasil.

09 May 2009

Membuat Daftar Isi Blog

Daftar isi merupakan sebuah index pencarian tercepat sebuah blog atau website, yang merupakan daftar dari isi postingan yang ada dalam website / blog. Sebagai contoh yan saya pergunakan pada center side menu saya yang berjudul "DAFTAR ISI", untuk melihatnya klik tanda +/- maka widget akan terbuka.

Pembuatan Menu DAFTAR ISI sebenarnya tidak begitu sulit jika sobat sudah pernah membuat sebuah Widget "RECENT POST/POST TERAKHIR", Kenapa saya bilang begitu?

Baiklah sobat, sebenarnya menu "DAFTAR ISI" sama dengan menu pada "RECENT POST/POST TERAKHIR" yang sudah saya bahas, hanya terdapat perubahan Jumlah tampilan, berita, dan tanggal post di hilangkan.Bagaimana cara meletakan Kode pada sidebar sobat dengan perubahan kode tersebut ??

Saya akan tuliskan perbedaan antara Kode pada widget RECENT POST/POSTINGAN TERAKHIR dan Kode pada DAFTAR ISI

Kode Pada Recent Post/Postingan Terakhir

<script style="text/javascript" src="http://sites.google.com/site/zenk82/Home/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://kanzenk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Kode Pada Daftar Isi
<script style="text/javascript" src="http://sites.google.com/site/zenk82/Home/recentpost.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://kanzenk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>

Lihat perbedaan Kode yang ditandai warna Merah

CARA MEMBUAT DAFTAR ISI
1. Ikuti Langkah pada Tata Cara Membuat "RECENT POST/POST TERAKHIR"

2. Masuk ke Blog Area Sobat =>> Layout/Tata letak =>> Tambah Gadget =>> HTML/Java Script

3. Paste Kode Daftar Isi diatas kemudian Paste, Untuk perhatian pada Kode :
- "http://sites.google.com/site/zenk82/Home/recentpost.txt" diganti dengan alamat URL direktori penyimpanan File sobat pada Kode Kesatu dalam Ulasan "RECENT POST/POST TERAKHIR".
- "http://kanzenk.blogspot.com" diganti dengan URL Blog sobat.

4. Klik Tombol "Simpan"

Jika sobat merasa bingung dan merasa lama silahkan sobat klik tombol dibawah untuk menginstal langsung kedalam blog sobat.



selamat berkarya dan bila ada masalah dalam kode tersebut silahkan post di komentar.

08 May 2009

Kanzenk Ganti Template

Template menunjukan karakteristik blog seseorang, selama blogging saya belum pernah ganti template dan baru kali ini saya mencoba ganti template. Ternyata dalam mengganti template tidak semudah yang sobat bayangkan dan juga tidak sesulit mencari jarim dalam jerami. Akhirnya dengan sedikit susah saya berhasil juga mengganti template blog ini.

Awalnya blog ini menggunakan tempalate Magazine R1-4 Milik kang rohman, kemudian saya ganti dengan template baru ini dengan judul template Black-Brown-Pop dan terinspirasi dari templatenya sobat Erge.


Dari template diatas kemudian saya rubah menjadi seperti ini, template ini banyak mengadopsi dari template sobat Erge.

Maklum saya masih baru dalam blogging, jadi masih banyak kekurangan ataupun sesuatu penempatan yang tidak pas(acak-acakan). Karena dari Back-Up widget lama kadang tidak sama didalam penempatan yang baru sehingga perlu perbaikan.

Akhirnya 90% selesai pembangunan blog dengan template baru ini. Terimakasih buat Sobat ERGE dan Kang Rohman.

06 May 2009

Membuat Gambar Thumbnail

Gambar Thumbnail kali ini yang akan dibahas yaitu gambar thumbnail model Expando merupakan sebuah bentuk penyederhanaan ukuran gambar dari ukuran gambar yang sebenarnya, dan akan nampak gambar dengan sebenarnya jika "mouse" digeser kegambar tersebut. Silahkan sobat arahkan "mouse" ke gambar dibawah.



Jika sobat ingin membuat gambar thumbnail seperti diatas, yoo ayoo ikuti langkah berikut :

1. "Login" kedalam Blog sobat dengan menggunakan ID dan Password sobat

2. Pilih tab "LAYOUT/TATA LETAK", kemudian pilih juga "EDIT HTML"

3. Tandai Kotak Kecil yang bertuliskan "EXPAND WIDGET". Sebagai perhatian lebih baik sobat back-up template sobat dulu sebelum menambahkan kode atau merubah kode HTML caranya Klik tulisan "DOWNLOAD FULL TEMPLATE"

4. Cari Kode <head> kemudian copy kode dibawah dan letakan kedalam kode <head> atau persis dibawah <head>. Ini kodenya :
<style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

<script type="text/javascript" src="expando.js">

/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>

Ganti tulisan berwarna biru dengan dimana sobat menaruh file "expando.js" (tentunya di lokasi penyimpanan file sobat, semisal www.geocities.com). Ups maaf lupa neh saya, sobat belom punya file "expando.js" bisa sobat download disini, setelah di download sobat upload ke hosting penyimpanan file sobat.

5. Setelah proses paste kode diatas selesai selanjutnya klik "SIMPAN TEMPLATE / SAVE TEMPLATE"

CARA MENARUH GAMBAR EXPANDO

Cara menuliskannya kedalam widget / posting sobat dengan menuliskan kode seperti berikut :
1. Untuk Gambar Tanpa Link
<img class="expando" border="0" src="URL gambar.jpg" width="100" height="75">

Text berwarna merah jangan sampai terlewatkan / harus selalu dituliskan, text warna kuning ganti dengan URL Gambar dan untuk text berwarna hijau merupakan ukuran gambar tumbnail (bukan ukuran sebenarnya), sobat dapat menggantinya sesuai kebutuhan.

2. Untuk Gambar Dengan Link
<a href="URL Tujuan" target="_blank"><img border="0" alt="" src="URL Gambar" class="expando" width="80" height="20"/></a>

Jika sobat ingin Ebooknya saya mendapatkan ebook ini dari teman saya Pit-Onta sobat juga dapat download ebook Tutorial Membuat Gambar Expando atau dengan klik gambar sampul ebooknya.


Sumber Bahasan :
Sumber asli dari web Dynamicdrive.com dan mas Pit-Onta

Semoga bermanfaat.

05 May 2009

Membuat Label Cumulus "JS"

Label blog "CUMULUS" disini adalah sebuah label dengan ektensi file Java Script. Pemasangan label sangat membantu pengunjung mencari kategori apa yang sedang dicari pengunjung. Untuk contoh label yang menggunakan ini silahkan sobat lihat disini. Kesan pemasangan label seperti ini agaknya rumit namun jika mengetahui akan terlihat mudah.

Saya mencoba mempermudah bahasa untuk mengulas pembahasan "Label Cumulus". Setelah sobat melihat contohya apakah sobat tertarik untuk mempergunakannya dalam blog sobat?. Sebelum ke tahap selanjutnya saya hanya ingin memberitahukan kelebihan dan kekurangan dari label semacam ini.

Menurut saya label seperti ini ada kelebihannya yaitu Blog sobat akan terkesan lebih indah bila dibandingkan dengan menggunakan Label Standar. Namun dari sisi kelebihan pasti ada sebuah sisi kekurangan yang menurut saya adalah blog sobat terkesan akan sedikit berat karena dalam label ini mengginakan ektensi Java Script. Nah lohh..sekarang gimana sobat saja. Masih ingin memasangnya atau tidak?

By the way its oke lahh masalah mau memasang atau tidak itu urusan sobat..hehe.peace ahh takut kena razia. Saya akan bagi caranya seperti ini, simak baik-baik yah :

1. Login kedalam member area blog anda dengan ID dan Password anda

2. Pilih Tab "TATA LETAK/LAYOUT", kemudian pilih "EDIT HTML", tandai kotak "EXPAND WIDGET". Jangan lupa untuk BackUp template sobat sebelumnya dengan mendownloadnya, pilih/klik Tulisan "DOWNLOAD FULL TEMPLATE".

3. Cari kode dibawah ini :

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

Jika mengalami kesusahan mencari kode karena banyaknya pengkodean silahkan sobat lakukan dengan cara tekan tombol Ctrl+F pada keyboard sobat dan paste kode diatas.

4. Setelah menemukan kode diatas silahkan sobat copy kode dibawah ini kemudian Paste tepat dibawah Kode diatas.
<b:widget id='Label9' locked='false' title='Tag' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;300&quot;, &quot;200&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Klik tombol SAVE TEMPLATE/SIMPAN

Catatan :
a. Pada tulisan kode yang berwarna merah adalah lebar dan tinggi widget, silahkan sobat ganti sesuai dengan widget sidebar sobat.

b. Pada Tulisan yang berwarna hijau adalah warna Background dari widget label cumulus, sedang yang berwarna kuning adalah warna Text yang ada dalam widget label cumulus.

c. Untuk tulisan dengan warna biru adalah Ukuran Text pada widget label cumulus.

Untuk mengganti kode warna Hexadesimal silahkan sobat mengunjungi http://www.html-color-code.info. Selamat mencoba.

SOBAT DAPAT MENDOWNLOAD TUTORIALNYA JUGA DISINI

Membuat Banner Blog Online

Banner adalah salah satu identitas sebuah blog/website. Apabila Blog/website tidak ada Banner seakan bagai sayur tanpa garam. Terus terang saya salah satu orang yang kurang mahir membuat banner, karena saya bukan dari kalangan desain grafis. Namun hal itu jangan menjadi penghalang buat sobat dan saya, karena dalam dunia cyber masih banyak jasa pembuatan banner secara Online.

Mungkin banner yang dihasilkan merupakan banner yang sangat sederhana, tapi tidak terlalu buruk. Seperti halnya banner yang saya miliki, itu adalah hasil dari pembuatan banner secara Online juga banner yang berada di Blog ini. Jadi masih patut untuk dicoba.

Bagi sobat yang ingin mencoba saya mempunyai rekomendasi banner Online yang cukup bagus. Silahkan sobat kunjungi www.bannerfans.com untuk mencoba pembuatan banner.

Fungsi yang ada dalam web tersebut antara lain :


1. LAYOUT : untuk menentukan ukuran banner yang akan sobat buat, didalamnya tertera Ukuran Banner, Warna Banner dan jenis Gradien. Lebih bagusnya lagi banner sobat dapat custom sesuai gambar yang akan sobat upload dan dengan ukuran Custom.

2. TEXT & FONTS : Untuk mementukan jenis dan ukuran Text. Terdapat beberapa jenis Fonts dan ukuran. Text sobat juga dapat diputar dengan menu Rotasi, Warna juga dapat disesuaikan dengan selera sobat.

3. SHADOWS & EFFECTS : Fungsinya untuk memperindah dengan penebalan karakter, ada beberapa pilihan penebalan (bayangan) yaitu bayangan keatas kiri, dan sebagainya. Warna juga dapat ditentukan sendiri oleh sobat.

4. BORDER : sobat dapat menentukan jenis border pada banner yang akan sobat buat.

5. FORMAT : sobat dapat menentukan format gambar yang akan sobat pergunakan, ada JPG, GIF, dan PNG.

Setelah sobat merubah semua, sesuai dengan apa yang sobat kehendaki jangan lupa untuk klik tulisan "UPDATE BANNER". Setelah selesai sobat dapat mendownload gambar banner yang sobat bikin dengan menekan tulisan/tombol "DOWNLOAD IT!". Sobat juga dapat langsung meminta kode dari hasil banner yang sobat buat dengan menekan tulisan/tombol "GET KODE"

SELAMAT MENCOBA

Membuat Read More / Baca Selanjutnya

Sobat, apabila sobat menulis sebuah artikel ataupun posting di blog merasa terlalu panjang, sehingga tempilan pada blog sobat sedikit kurang indah yang dikarenakan panjangnya artikel / posting sobat. Hal ini dapat sobat antisipasi dengan cara membuat penggalan artikel dengan cara menambahkan Read More/baca selanjutnya. Bagaimana cara melakukan hal ini.

Melalui posting ini saya akan mencoba berbagi bagaimana membuat penggalan artikel (Read more/baca selanjutnya), Kode yang saya dapat saya pelajari dari blog master saya Kang Rohman.

Cara membuat Read More / Baca Selanjutnya :

1. Silahkan sobat masuk kedalam member area blog sobat dengan menggunakan ID dan Pasword sobat.

2. Klik "Tata Letak", kemudian "Edit HTML"

3. Untuk berjaga-jaga bila ada sesuatu yang tidak diinginkan ada baiknya sobat download Template sobat terlebih dahulu dengan menekan tulisan "Download Template Lengkap", kemudian Save/simpan

4. Setelah template sobat di download kembali ke Halaman tadi Sobat akan melihat Opsi "Expand Template Widget" Tandai kotak tersebut dengan mencentang/klik.

5. Sobat harap bersabar untuk prosesnya, selanjutnya silahkan sobat caro Kode berikut :

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

Untuk memudahkan pencarian silahkan sobat klik pada kode HTML kemudian tekan Ctrl+F dan paste kode yang dicari (kode diatas).

6. Setelah menemukan kode tersebut Hapus kode tersebut dan ganti dengan Kode dibawah ini :
<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/>
<a expr:href='data:post.url'><strong>Selengkapnya...»»</strong></a></p>
</b:if>

7. "Simpan Template"

8. Langkah selanjutnya silahkan sobat ke Tab "PENGATURAN / SETTING"

9. Klik "Format", Kemudian cari Tulisan "Template Posting", Biasanya letaknya berada dibawah. Setelah itu sobat Paste Kode berikut ini :
<span class="fullpost">


</span>

10. Kemudian Simpan / save

Cara Posting :

1. Mohon untuk diperhatikan dalam tata cara posting ini, terkadang sobat masih banyak yang kurang memperhatikannya. sebagai langkah awal silahkan sobat tekan menu Posting

2. Dalam Halaman Posting sobat akan melihat 2 Opsi penulisan Yaitu opsi penulisan dengan model Edit HTML dan Compose, Pilihlah model penulisan Edit HTML. Maka akan terlihatlah Kode
<span class="fullpost">


</span>

3. Tuliskan Posting/artikel yang akan sobat perlihatkan sebelum Kode
<span class="fullpost">

4. Tulis Posting/artikel yang akan sobat sembunyikan (akan nampak jika sudah di klik readmore/baca selanjutnya) sebelum kode
</span>
Atau diantara
<span class="fullpost">

DISINI

</span>

5. Klik Tombol Mempublikasikan

Silahkan sobat lihat hasilnya. SELAMAT MENCOBA

04 May 2009

Bikin Recent Post

Recent Post atau Posting terbaru merupakan salah satu informasi secara singkat Judul dari posting yang baru saja dibuat oleh penulis. Biasanya tampilan ini berurutan sesuai dengan apa yang telah di postkan penulis lebih awal ke yang paling baru. Cara membuatnya ada 2 code yang harus sobat ikuti. Dari kode-kode tersebut diantaranya ada kode yang harus sobat simpan dalam direktori penyimpanan file sobat. Jika sobat tidak memiliki/penuh direktori penyimpanan file tersebut sobat dapat menggunakan jasa penyimpanan gratis.

Beberapa direktori penyimpanan Gratis antara lain www.geocities.com (login dengan account yahoo sobat), www.tripod.com, www.sites.google.com dan lainnya.

Kode yang pertama :

// ----------------------------------------
// SHOW RECENT POST
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 2.1
// Date: 2007-02-02
// Author: Hans Oosting
// URL: beautifulbeta.blogspot.com
// ----------------------------------------


function showrecentposts(json) {


for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Baca)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style="font-size:80%;"></span>');
if (!standardstyling) document.write('</div>');


document.write('<span style="font-size:80%;">Widget by <a href="http://hackosphere.blogspot.com">Hackosphere</a><br/>Powered by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
if (!standardstyling) document.write('</div>');
}

Caranya :
1. setelah sobat copy kode tersebut silahkan sobat masukan kedalam notepad, kemudian simpan dengan ekstensi file text, misal recentpost.txt.

2. Upload file txt tersebut kedalam direktori file sobat seperti contoh diatas.

3. Setelah file tersimpan pada direktori sobat, sobat bersabar sebentar yah ada kode kedua yaitu :

<script style="text/javascript" src="http://sites.google.com/site/zenk82/Home/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://kanzenk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

4. Ganti text yang berwarna MERAH dengan URL file yang ada pada direktori sobat, ganti text yang berwarna BIRU dengan angka yang lain (ini menunjukan jumlah posting baru yang akan ditampilkan), dan ganti text berwarna HIJAU dengan alamat URL blog sobat.

5. Silahkan sobat masuk kedalam Blog area sobat, kemudian pilih "LAYOUT", "TAMBAH GADGET", "HTML/JAVA SCRIPT".

6. Copy kode kedua setelah dirubah sesuai petunjuk, kemudian pastekan kedalam GADGET, kemudian SIMPAN.

Jika sobat merasa bingung dan merasa lama silahkan sobat klik tombol dibawah untuk menginstal langsung kedalam blog sobat.



selamat berkarya dan bila ada masalah dalam kode tersebut silahkan post di komentar.

Cara Pasang Widget Alexa Rank pada Blogger

Alexa rank adalah sebuah widget pendeteksi trafik pengunjung pada sebuah website ataupun blog. Alexa merupakan pendeteksi tersohor dikalangan masyarakat pecinta blog dan website. Seperti ini kutipan resmi tentang alexa yang ada pada situs Alexa :

The traffic rank is based on three months of aggregated historical traffic data from millions of Alexa Toolbar users and data obtained from other, diverse traffic data sources, and is a combined measure of page views and users (reach). As a first step, Alexa computes the reach and number of page views for all sites on the Web on a daily basis. The main Alexa traffic rank is based on a value derived from these two quantities averaged over time (so that the rank of a site reflects both the number of users who visit that site as well as the number of pages on the site viewed by those users). The three-month change is determined by comparing the site's current rank with its rank from three months ago. For example, on July 1, the three-month change would show the difference between the rank based on traffic during the first quarter of the year and the rank based on traffic during the second quarter.
Alexa Certified Traffic Ranking for kanzenk.blogspot.com

Alexa Rank sangat penting sekali khususnya buat para pencari uang yang menggunakan sarana Online seperti blog maupun website seperti ask2link. Karena hal ini akan mengetahui seberapa besar pengunjung Blog/Web tersebut dalam harian,bulanan, maupun tahunan.

Bagaimana cara memasang ALEXA RANK pada blog :
1. Klik disini neh, untuk menuju ke halaman alexa.

2. Sobat akan dibawa kehalaman alexa, disana akan ada 3 pilihan jenis widget yaitu Alexa Traffic Graph (bentuk widget berupa gambar grafik), Alexa Site Stats Button (bentuknya seperti yang saya pergunakan), dan Alexa Traffic Rank Button (akan berbentuk traffic rank blog anda). Pilih Opsi kedua atau ke tiga.

3. Ketikan alamat URL blog sobat pada form widget yang sobat pilih (catatan : sobat tuliskan URL tanpa http ataupun www dengan arti langsung misalnya kanzenk.blogspot.com) kemudian tekan tombol Build Widget

4. Sobat dialihkan halaman menuju Kode HTML untuk widget yang sobat pilih dengan alamat blog sobat. Silahkan pilih bentuk dan ukuran Widget yang telah sobat buat.

Cara Memasang Pada Blog (blogger.com):
1. Masuk kedalam account Blog sobat

2. Klik pada "Layout"

3. Pilih menu "Add a gadget / tambah widget" Pilih "HTML/Java Script"

4. Masukan Kode HTML Alexa yang sudah dibuat tadi kemudian tekan "SAVE"

Silahkan cek halaman Blog sobat.

Cara Membuat Blog

Sobat, masih banyak diantara sobat yang bingung membuat Blog, hingga diantara teman saya sendiri ada yang menanyakan "bagaimana membuat Blog di Blogspot" dan membuat widget tambahan.

Untuk membuat blog dalam "Blogspot" ada baiknya sobat memiliki sebuah account. Pengenalan awal sebuah blog :

1. Blog itu apa ?
Blog merupakan sebuah kata yang sering digunakan oleh para Blogger dan atau singkatan dari *web log* yaitu sebuah situs yang sifatnya bersifat pribadi yang di bertumpuan pada penggambaran sisi si Pembuat blog tersebut.

2. Ragam Blog dan cara membuat blog (blogspot)
Blog sangat beragam jenisnya, diantaranya blogspot,wordpress,blogsome, dan yang gratis lainnya seperti untuk membuat website secara instant seperti ucoz, dan webnode.

Untuk membuat blog di"blogspot" yaitu sobat harus memiliki sebuah account di blogger, caranya yaitu :
KLIK UNTUK DAFTAR

Setelah sobat klik tulisan yang berkedip tadi, maka sobat akan diantarkan kepada sebuah halaman blogger,seperti gambar dibawah.


setelah sobat ada dalam halaman tersebut,silahkan sobat ikuti langkah-langkah membuat blog di blogspot sebagai berikut :

1. Klik tanda panah yang bertuliskan "CIPTAKAN BLOG ANDA / CREATE NEW BLOG",maka akan tampak halaman (form) seperti ini.

2. Isikan "alamat email" sobat (tentu saja dianjurkan alamat email yang valid)

3. Ketikan kembali alamat email sobat yang tadi pada kolom "ketik ulang alamat email"

4. Ketikan pasword yang sobat inginkan pada kolom "Masukan sebuah pasword"

5. Masukan kembali pasword sobat pada kolom Ketik ulang sandi

6. Isi kolom "Nama tampilan" dengan nama yang akan sobat tampilkan untuk menandai postingan blog sobat.

7. Tulis Kata (tulisan) yang tertera pada kolom "Verifikasi Kata"

8. Beri tanda pada form yang bertuliskan "Saya menerima Persyaratan dan Layanan", kemudian tekan tanda panah yang bertuliskan "LANJUTKAN". Maka sobat akan dibimbing ke halaman berikutnya (Langkah ke-2)

9. Tuliskan judul blog yang sobat inginkan (nanti bisa sobat rubah) pada kolom "Judul Blog"

10. Tuliskan alamat Blog sobat pada kolom "Alamat blog (URL)", mohon diperhatikan untuk selalu cek ketersediaan URL.

11. Klik tanda panah yang bertuliskan "LANJUTKAN"

12. Pendaftaran selesai kemudian sobat dibawa kehalaman untuk memilih "template" yang sobat kehendaki, untuk awal pilih template standard (nanti dapat dirubah). Kemudian Klik tulisan "LANJUTKAN"

13. Setalah itu sobat dibawa kehalaman berikutnya yang kemudian akan ada tulisan peringatan "Blog anda telah Diciptakan", sekarang tinggal sobat klik gambar panah dengan tulisan "MULAI POSTING.

Selamat mencoba dan berkarya dengan blog sobat.

TERIMAKASIH TELAH BERKUNJUNG, KOMENTAR, KRITIK DAN SARAN SANGAT SAYA BUTUHKAN. DAPATKAN BACK LINK DENGAN BERKOMENTAR DISINI "U COMMENT I FOLLOW"
Shoutmix lama saya !!!

Followers

SUPPORT MY BLOG

SUPPORT ME !!

Komentator

Widget Oleh : Pit-Onta

BANNER

BeLaJaR DaLaM BLog

 

Copyright © 2009 by Kanzenk Blog's