Cara Membuat Label Dengan Fungsi Scroll

Buat sobat yang mempunyai banyak label mungkin akan direpotkan dengan label atau kategori yang memanjang kebawah .label yang memanjang seperti itu tentunya akan membuat sidebar blog menjadi tidak enak dipandang karena akan memanjang ke bawah ,oleh karena itu banyak blogger yang membuat labelnya dengan fungsi scroll. Label dengan fungsi scroll adalah label yang kedudukanya bisa di geser atau menyelinap kedalam .dengan menggunakan label dengan fungsi scroll ini label blog sobat tidak akan memanjang ke bawah..Sebagai contoh sobat bisa klik disini ,dan coba sobat perhatikan label blog tersebut . atau lihat gambar di bawah ini untuk melihat contohnya..






itu dia yang dinamakan Label Dengan Fungsi Scroll .Nah... jika sobat tertarik untuk membuat label seperti itu silakan sobat ikuti lankah-langkah Cara Membuat Label Dengan Fungsi Scroll dibawah ini .

Cara Membuat Label Dengan Fungsi Scroll

1.Login Ke blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Selanjutnya cari kode di bawah ini .

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

5.Kemudian Copy dan paste Kode berikut Tepat dibawah kode tersebut.

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

6.Selanjutnya cari kode dibawah ini.

</b:includable>

7.Jika sudah ketemu Copy dan pasti kode dibawah ini tepat diatasnya.

</div>

8.Klik SIMPAN TEMPLATE .

Catatan : Jika kode diatas tidak ketemu di blog sobat silakan cari kode <div class='widget-content'> . dan angka 240px yang berwarna merah diatas adalah tinggi label scroll-nya silakan sobat ganti sesuai dengan keinginan sobat.

Source :http://klinik-it.blogspot.com/2010/03/cara-membuat-label-dengan-fungsi-scroll.html

[ + Baca ]

Cara Buat Iklan Melayang Dengan Tombol Close

Tidak pernah habis-habisnya klinik-it membahas soal tempat pemasangan iklan yang baik dan mudah di KLIK oleh pengunjung .Dalam Postingan Kali ini klinik-it akan menjelaskan tentang Cara Buat Iklan Melayang Dengan Tombol Close. Tentunya iklan yang melayang mudah untuk di lihat oleh pengunjung dan jika pengunjung tidak ingin melihatnya pengunjung pun bisa mengklik tombol CLOSE yang telah ada. sebagai Contoh iklan Yang MELAYANG bisa kamu Klik Disini.

Ideal kan memasang iklan melayang seperti itu ? Cara Buat Iklan Melayang Dengan Tombol Close itu saya dapatkan dari blognya Mas O-OM. dan sedikit saya share lagi di blog ini. Nah... Buat kamu yang Tertarik untuk membuat Iklan Melayang Dengan Tombol Close seperti itu bisa pelajari tutorialnya Di bawah ini .

1.Login Ke Blogger.

2.Klik Tata Letak.

3.Klik Element Halaman.

4.Kemudian Klik Tanbah Gadget dan pilih HTML / JAVASCRIPT .

5.Selanjutnya Copy dan Paste Kode Berikut Di Dalamnya.

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPMUet7tImgFAX6VTtyrjG_yKtnpQPAkrmuASPnd8mz5hNSY7I2qO0QN0ae7zhPw7T1tSfY5H8WcAHxTU8AnrTG8SdNaglYw9snoWq_EFf1Z6bdaK63dXbCgR4jOCp-Dxm8GRmfy6Ea4/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPMUet7tImgFAX6VTtyrjG_yKtnpQPAkrmuASPnd8mz5hNSY7I2qO0QN0ae7zhPw7T1tSfY5H8WcAHxTU8AnrTG8SdNaglYw9snoWq_EFf1Z6bdaK63dXbCgR4jOCp-Dxm8GRmfy6Ea4/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

MASUKAN KODE IKLAN DISINI

</center>

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

6.Ubah Teks MASUKAN KODE IKLAN DISINI yang berwarna merah Dengan kode iklan kalian masing-masin,kemudian klik SIMPAN.

Source :http://klinik-it.blogspot.com/2010/03/cara-buat-iklan-melayang-dengan-tombol.html

[ + Baca ]

Cara Pasang User Online Status

Setelah beberapa waktu lalu saya memposting aritikel tentang Cara Buat User Online Status dari http://www.histats.com/, Kali ini saya akan memposting artikel yang ga jauh beda sii.hehehe yaitu tentang bagaimana Cara Pasang User Online Status di blog, Namun bedanya User Online Status yang saya posting kali ini adalah User Online Status kali ini hanya menampilkan berapa orang yang sedang ONLINE di blog kamu.Contohnya Bisa kamu liat aja sendiri di bawah ini :

Cara buatnya juga gampang ,Silakn kamu ikutin aja langkah-langkah berikut ini untuk pasang Cara Pasang User Online Status Di blog kamu.

1.Klik Situs http://whos.amung.us/showcase/http://whos.amung.us/showcase/

2.Klik gambar User Online Status yang kamu inginkan untuk mendapatkan kode HTML nya.

3.Setelah kamu pilih tampilan User Online Status yang kamu inginkan,Copy kode HTML yang Muncul.

4.Login Ke blogger dengan ID kamu.

5.Kemudian klik Tab menu "Tata Letak" lalu Klik "Tambah Gadget" pada elemen template.

6.Kemudian pilih kategori HTML/javascript pada jendela baru setelah kamu mengklik "Tambah Gadget"

7.Lalu paste Kode HTML dari http://whos.amung.us/showcase/ di dalamnya .jangan lupa klik "save"

8.Selesai,tinggal kamu lihat hasilnya,..

Source : http://klinik-it.blogspot.com/2010/02/cara-pasang-user-online-status.html

[ + Baca ]

Konsep Handphone Futuristic dan Kreatif

Teknologi berkembang di tingkat drastis. Apa yang baru hari ini, besok usang. Mari kita jujur, kita tidak bisa hidup tanpa ponsel. Its apa kita hidup dan berkeliaran di sekitar dengan sehari-hari. Sebagai Pengguna Interaksi menjadi lebih dan lebih menuntut hari-hari ini, teknologi harus mengatasi up.

Kita telah melihat evolusi Ponsel dari hari itu adalah pertama kali menyadari. Mereka telah dibanjiri dengan fitur yang kita tidak pernah berpikir bisa mungkin dan itu terus berkembang.Seluler menjadi lebih tipis dan menawarkan nilai lebih estetika dari apa pun. dimensi yang lebih baru interaksi pengguna sedang diuji setiap hari.

Beberapa telepon tidak memiliki tombol dan dilengkapi dengan layar multi-touch, accelerometers, sistem audio, sistem video dan ratusan media lainnya dan fitur produktivitas.Mungkin istilah 'Smart Telepon' adalah cara terbaik untuk menjelaskan mereka mempertimbangkan cara yang berkembang. telepon hari ini membanggakan dalam menawarkan pengalaman layar lebar, sourround suara, integrasi dan apa yang tidak.

Tapi sebagai desainer kita terikat untuk membayangkan apa masa depan kita dapat terlihat seperti. Memvisualisasikan bagaimana kita bisa bentuk gadget di kedatangan 5 sampai 10 tahun selalu menarik. Jadi, dalam artikel ini saya telah memamerkan lebih dari 25 konsep sel kreatif dan futuristik telepon yang pasti akan memukau Anda dan menempatkan pikiran imajinatif Anda di tempat kerja. Perhatikan:

Spoiler for 1) Mobile Script:

Hal ini memiliki dua layar sentuh (kecil dan besar), yang menyediakan akses terbaik untuk informasi dan menyediakan lapangan yang luas komunikasi, seperti link Video, Kemampuan untuk melihat film, Menggunakan browser, Target daerah dengan bantuan layanan internet.Semua fungsi ini lebih nyaman digunakan pada layar besar, yang terletak di dalam ponsel dalam keadaan runtuh.
1.
2.
3.

Spoiler for 2)Magic Stone:

Pendekatan revolusioner terletak pada kenyataan, bahwa pelanggan dapat model yang benar-benar setiap bentuk kasus telepon mobile, dengan benar-benar semua warna dan pola yang berbeda dan gambar di halaman melalui internet dengan bantuan skema yang disederhanakan.

Spoiler for 3)NaNokia by Mac Funamizu:

Aku tidak tahu apa itu tentang Apple fanboys, tapi mereka tidak tahan untuk melihat desain yang baik tanpa logo tercinta mereka bersinar sayang di bagian belakang. Perancang, Mac Funamizu, menarik pada Nokia Aeon untuk merancang telepon dia ingin miliki, lengkap dengan seragam standar Apple. Menggunakan teknologi umpan balik taktil mencolok, permukaannya menyesuaikan dengan tujuan yang berbeda sementara layar e-tinta menyelubungi telepon di grafis dan informasi.

Spoiler for 4) Sony Simplicity Concept:

Sony Konsep Kesederhanaan adalah sebuah ponsel, hanya ponsel, tidak ada yang lain. Ini dibuat untuk orang-orang yang tidak memerlukan fungsi-fungsi modern seperti SMS, Organizer, Kamera, E-Mail, surfing dan sebagainya, itu dibuat untuk orang-orang yang hanya ingin berkomunikasi melalui telepon. Sama seperti di masa lalu yang baik.

Spoiler for 5) Wrist Phone:

Pergelangan tangan Phone adalah sederhana, telepon sok non dan merupakan alat yang sangat dasar yang tidak memiliki hal-hal yang mewah. Hal ini membuat murah untuk memproduksi dan memasarkan. Hal lain yang mendukung adalah faktor portabilitas; Anda dapat membungkusnya di sekitar pergelangan tangan Anda. Membiarkan masalah konektivitas ke samping, telepon memiliki potensi untuk membuat sasarannya.

Spoiler for 6) Kambala mobile phone with a Earphone:

Jangan terlalu bingung, Kambala adalah sebuah ponsel yang mengubah untuk earphone juga.Pop menjadi pusat dan klip ping lubang suara keluar; klip ini untuk telinga Anda, dan Anda mendapat telepon-earphone! Sebuah layar flexi-menerus dengan banyak sensor makeup permukaan dan memiliki kemampuan untuk mengirimkan gambar pada bagian dalam telepon ke luar. Bahkan tidak tindakan bunglon melalui pencampuran dengan nada kulit Anda ketika Anda klip ke telinga Anda.

Spoiler for 7) Nokia 888 Concept Phone:

Sebuah perangkat komunikasi pribadi selular yang memungkinkan Anda akan bebas dan menyenangkan. Hal ini ringan, sederhana dan santai. Anda dapat mengubah bentuk sesuai dengan kebutuhan Anda di siang hari. Anda tidak perlu untuk membawa di saku baju atau di pergelangan tangan Anda. Anda bisa membawanya di mana saja, di anyform. Anda dapat menggulungnya, menekuknya, mengenakan pakaian seperti klip. Hal ini juga membuat perubahan bentuk tertentu yang membuatnya lebih ergonomis.

Spoiler for 8 ) Smart Phone:

Spoiler for 9) The Window Phone Concept:

The "Jendela Telepon" membuat prediksi yang akurat dan bahkan perubahan tampilan untuk mencerminkan kondisi iklim luar.

Spoiler for 10) Solar Powered Sticker Phone:

Konsep Telepon Sticker di belakang cukup sederhana, kebanyakan dari kita cenderung untuk menempatkan telepon selular kami di dekat jendela untuk penerimaan sinyal yang lebih baik.Jadi konsep ini mengambil langkah lebih jauh dengan menambahkan panel surya ke bagian belakang telepon dan memberikan sedikit lengkungan sehingga dapat tetap (melalui hisap) ke kaca jendela untuk beberapa sinar matahari.

dikutip dari : www.unic77.tk: Konsep Handphone Futuristic dan Kreatif

[ + Baca ]

Cara Membuat Cursor Bertabur Bintang

Mempercantik atau memperindah tampilan Blog adalah naluri dari setiap blogger, dan jika tampilan blog seorang blogger telah mencapai tahap yang paling indah nantinya juga sang pemilik akan bangga terhadap blognya.Dalam postingan kali ini Shufi akan menjelaskan tentang bagaimana Cara Membuat Cursor Bertabur Bintang.Cursor yang bertabur bintang adalah salah satu cara untuk mempercantik tampilan blog.

karena saat cursor di geser kursor tersebut akan mengeluarkan bintang-bintang. Contohnya Bisa anda lihat pada gambar di atas.

Setelah melihat Contohnya Tertarik gak temen2 untuk membuatnya ?jika tertarik silakan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini untuk Membuat Cursor Bertabur Bintang.

1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .

Bintang Biru

<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script>


Bintang Hijau

<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script>


Bintang Merah

<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>


Bintang Putih

<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script>


Bintang Ungu

<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script>


6.Kalo sudah selesai jangan lupa click SIMPAN...

7.Selanjutnya silahkan anda lihat hasilnya...

Source : http://klinik-it.blogspot.com/2010/03/cara-membuat-cursor-bertabur-bintang.html

[ + Baca ]

Cara Membuat Footer 3 Kolom

Sobat pasti sering kan kehabisan tempat pada saat memasang widget di blog. Mau dipasang di sidebar penuh, di header penuh, di footer juga penuh. Trus gimana dong????

Gampang Sob… Pecah aja footer blog Sobat menjadi tiga bagian. Jika kita lihat, Template default Blogger cuma memiliki footer satu kolom aja. Kalau kita jadikan 3 kolom kan lumayan tuh, space di blog kita jadi makin banyak. Kalau masih bingung, Sobat bisa lihat di blog kumpulan tutorial ngeblog. Coba Sobat scroll ke bagian paling bawah halaman, terlihat footernya ada 3 kolom. Bagaimana?? Tertarik untuk membuat footer menjadi 3 kolom. Ya udah deh, silakan Sobat simak tutorial singkat berikut ini.

Langkah 1

Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Beri tanda centang pada "Expand widget template" kemudian CoPas kode berikut ini di atas kode ]]></b:skin> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)

#footer-column-divide {

clear:both;

}

.footer-column {

padding: 10px;

}

Langkah 2

Cari kode berikut ini

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Setelah itu hapus kode <b:section class='footer' id='footer'/> lalu ganti dengan kode berikut ini

<div id='footer-column-divide'>

<div id='footer1' style='width: 30%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 40%; float: left;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col2'

preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 30%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col3'

preferred='yes' style='float:right;'/>

</div>

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

</div>

Selanjutnya klik tombol Simpan Template.

Source : http://seputar-internet.blogspot.com/2010/05/cara-membuat-footer-3-kolom.html

[ + Baca ]

Tambah 3 Kolom di Bawah Header

Untuk menambah 3 kolom di bawah header, gimana caranya ?

Langsung tutorialnya :

• Login di blogger dengan account/id Anda

• Klik menu Layout

• Klik Tab Edit HTML

• Klik tulisan Download Full Template, lalu save data tersebut. Untuk backup template blog kita apabila terjadi kesalahan dalam mengedit kode template.

• Cari kode seperti ini dan paste tepat dibawah kode ini :

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Free Template (Header)' type='Header'/>

</b:section>

</div>

• Lalu copy-paste kode dibawah ini diatas kode ]]></b:skin> atau dalam tag CSS anda.

#underheader-column-container {

clear:both;

}

.underheader-column {

padding: 10px;

}

<div id='underheader-column-container'>

<div id='underheader5' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='underheader-column' id='col7' preferred='yes' style='float:left;'/>

</div>

<div id='underheader6' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='underheader-column' id='col8' preferred='yes' style='float:left;'/>

</div>

<div id='underheader7' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='underheader-column' id='col9' preferred='yes' style='float:right;'/>

</div>

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

</div>

• Lalu simpan/save template.

• Lihat hasilnya.

Catatan :

Ubah widht dan sesuaikan dengan blog Anda dan floatnya!!

Source : http://langsungtutorial.blogspot.com/2010/04/tutorial-tambah-3-kolom-di-bawah-header.html

[ + Baca ]

Pasang Menu Horizontal Multi Drop Down Blog

Mau pasang Menu Horizontal Multi Drop Down seperti di blog ini (spt tampak di bawah ini) :



Langsung tutorialnya :

• Login di blogger dengan account/id Anda

• Klik menu Layout

• Klik Tab Edit HTML

• Klik tulisan Download Full Template, lalu save data tersebut. Untuk backup template blog kita apabila terjadi kesalahan dalam mengedit kode template.

• Cari kode seperti ini </b:skin>dan letakkan kode dibawah ini sebelum kode </b:skin> tersebut :

.jqueryslidemenu{

font: bold 12px Verdana;

background: #414141;

width: 100%;

}

.jqueryslidemenu ul{

margin: 0;

padding: 0;

list-style-type: none;

}

/*Top level list items*/

.jqueryslidemenu ul li{

position: relative;

display: inline;

float: left;

}

/*Top level menu link items style*/

.jqueryslidemenu ul li a{

display: block;

background: #414141; /*background of tabs (default state)*/

color: white;

padding: 8px 10px;

border-right: 1px solid #778;

color: #2d2b2b;

text-decoration: none;

}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/

display: inline-block;

}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{

color: white;

}

.jqueryslidemenu ul li a:hover{

background: black; /*tab link background during hover state*/

color: white;

}

/*1st sub level menu*/

.jqueryslidemenu ul li ul{

position: absolute;

left: 0;

display: block;

visibility: hidden;

}

/*Sub level menu list items (undo style from Top level List Items)*/

.jqueryslidemenu ul li ul li{

display: list-item;

float: none;

}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */

.jqueryslidemenu ul li ul li ul{

top: 0;

}

/* Sub level menu links style */

.jqueryslidemenu ul li ul li a{

font: normal 13px Verdana;

width: 160px; /*width of sub menus*/

padding: 5px;

margin: 0;

border-top-width: 0;

border-bottom: 1px solid gray;

}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/

background: #eff9ff;

color: black;

}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{

position: absolute;

top: 12px;

right: 7px;

}

.rightarrowclass{

position: absolute;

top: 6px;

right: 5px;

}

• Temukan kode berikut </head>
• Letakkan kode dibawah ini sebelum kode </head>tersebut.

<!--[if lte IE 7]>

<style type="text/css">

html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

</style>

<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/>

• Kemudian temukan kode dibawah ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>

</b:section>

</div>

• Letakkan kode dibawah ini persis di bawah kode diatas :

<div class='jqueryslidemenu' id='myslidemenu'>

<ul>

<li><a href='http:langsungtutorial.blogspot.com'>Home</a></li>

<li><a href='#'>Daftar Isi</a></li>

<li><a href='#'>Tutorial Blog</a>

<ul>

<li><a href='#'>Sub Item 1.1</a></li>

<li><a href='#'>Sub Item 1.2</a></li>

<li><a href='#'>Sub Item 1.3</a></li>

<li><a href='#'>Sub Item 1.4</a></li>

</ul>

</li>

<li><a href='#'>Islam</a></li>

<li><a href='#'>Folder 2</a>

<ul>

<li><a href='#'>Sub Item 2.1</a></li>

<li><a href='#'>Folder 2.1</a>

<ul>

<li><a href='#'>Sub Item 2.1.1</a></li>

<li><a href='#'>Sub Item 2.1.2</a></li>

<li><a href='#'>Folder 3.1.1</a>

<ul>

<li><a href='#'>Sub Item 3.1.1.1</a></li>

<li><a href='#'>Sub Item 3.1.1.2</a></li>

<li><a href='#'>Sub Item 3.1.1.3</a></li>

<li><a href='#'>Sub Item 3.1.1.4</a></li>

<li><a href='#'>Sub Item 3.1.1.5</a></li>

</ul>

</li>

<li><a href='#'>Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href='http://langsungtutorial.blogspot.com'>Tukar Link</a></li>

</ul>

<br style='clear: left'/>

</div>

• Lalu simpan/save template.

• Lihat hasilnya.

Silahkan ganti kata Home, Daftar isi, Tip dan Triks, Template GratisTukar Link dan beberapa submenu dengan nama menu yang anda inginkan sebagai navigasi blog.

Selamat mencoba. . . .

Source : http://langsungtutorial.blogspot.com/2010/04/mau-pasang-menu-horizontal-multi-drop.html

[ + Baca ]

Membuat Buku Tamu Tersembunyi di Sayap Kanan Blog

    Para sobat blogger, Kang Fatur nongol lagi nie setelah satu bulan lebih ga posting-posting yaa malum jadi orang susah akhirnya waktu buat postingpun ga ada karena sibuk masalah pribadi. Walaupun sibuk yaa alhamdullilah dihari minggu ini Kang Fatur bisa posting lagi untuk berbagi dengan sobat-sobat blogger.

Kali ini Kang Fatur mao berbagi dengan sobat yaitu membuat Buku Tamu Tersembunyi hehe aneh yaa?? sebetulnya widget ini sudah banyak para blogger lain yang bikin tapi demi para pengunjung blog Kang Fatur, yaa Kang Fatur sediakan disini dan mudah-mudahan bermanfaat di hati para sobat.

Gak usah panjang lebar lagi tiba saatnya kita ke langkah-langkah pembuatan :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

GANTI DENGAN KODE BUKU TAMU SOBAT

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://ade-tea.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi.html">
sini (Blog KangFatur)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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




4. Pada kode di atas, cari kode Warna merah dan ganti kode tersebut dengan kode buku tamu yang sobat dapatkan dari situsnya,
5. Sobat juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah sobat deeh hehe.
6. Border dan Backgrounnya juga bisa sobat ubah ubah O.K
7. Selamat mencoba!

Source : http://tipsdantrikfatur.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi.html

[ + Baca ]

Efek Opening Aneh

ahahah... kayak ga ada nama yang lain aja buat efek pembuka yang satu ini ! btw karena sudah bingung buat kasih namanya, terpaksa saya kasih nama n'tu ajah.....
setelah kang fatur posting Membuat Efek Roaming Windows akhirnya kangfatur buat lagi nie yang judulnya pake aneh, Kenapa diblang aneh yaa karena membuat Jendela kita menjadi mondar mandir kaya yang lagi pusing hehe. Okay... , jika para sobat tertarik, silahkan ikuti langkah-langkah berikut :

1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan script
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget


Kemudian Copast(Copy paste) kode dibawah ini :


<script>
//Edited by Andreas fafandreo at october'2008
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>




Setelah sobat paste kode diatas, silahkan sobat klik tombol Save/simpan o.k?
Jangan lupa, karena kita menginginkan agar gadget ini beraksi pada saat awal halaman dibuka, maka letakkan gadget ini pada posisi PALING ATAS !! baik pada side bar maupun tempat gadget lainnya o.K?
Dan lihat hasilnya !! hehehe... kalian dapet opening yang bikin dag-dig-dug pengunjung !!
Mudah bukan ?
Kalau sudah dipasang... silahkan anda bagikan ilmu ini pada teman-teman yang membutuhkan, Jangan pelit ya ?
Selamat mencoba !!

[ + Baca ]

Membuat Link Untuk Download

Sobat Saiman beberapa waktu yang lalu mengajukan sebuah pertanyaan yang di tulis pada shoutbox, beliau menanyakan tentang cara memasang artikel atau file exe di blog agar bisa di download orang lain. Sepengetahuan saya yang terbatas ini, di dalam blog tidak bisa untuk menyimpan file exe kemudian bisa di download oleh orang lain, akan tetapi walaupun begitu ada cara lain yang bisa kita tempuh yakni menggunakan jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan kemudian bisa di download lagi oleh orang lain.

Secara sederhana saya jabarkan cara kerjanya, pertama tentu saja kita harus mempunyai account pada situs tersebut, kemudian setelah mempunyai account, baru kita upload data yang ingin kita simpan, lalu setelah proses upload berhasil kita akan di beri URL address file yang kita upload. Nah langkah terakhir agar pengunjung dari blog kita bisa mendownload file tersebut adalah memasang tulisan yang mempunyai link terhadap URL address file yang kita upload tadi, jadi tentu saja orang lain bisa mendownload file yang kita pasang melalui blog kita. Kira-kira begitu bos .

Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

1. Silahkan klik di sini untuk menuju http://www.SnapDrive.net


2. Klik tulisan Register


3. Isi formulir yang disediakan dengan data diri sobat


• Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil


• Password --> isi dengan password yang di inginkan. contoh : pakraden


• Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden


• Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id


• First name -->isi dengan nama depan sobat


• Last name --> isi dengan nama belakang sobat


• Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia


• Postcode --> isi dengan kode post daerah sobat


• Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)


• Date of birth --> pilih tanggal kelahiran sobat


• Preferances isi dengan tulisan yang tertera di situ


4. Klik tombol Register


5. Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi


6. Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum


7. Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut


8. Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih


9. Klik tombol OK


10. Silahkan Login dengan username serta password yang tadi di tuliskan saat register


11. Setelah berada di halaman account sobat, klik tulisan Upload


12. Klik tombol Add Files


13. Pilih file yang ada dikomputer sobat yang mau di upload


14. Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung


15. Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya


16. Klik tulisan HTML Code


17. Copy kode yang di berikan lalu paste pada program notepad


18. Klik tulisan Logout untuk keluar dari situs tersebut


19. Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a>


Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :

<br/><br/>
<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>


Maka nanti di blog kita akan tampil seperti ini :


Untuk men download program billing internet, silahkan anda klik link di bawah ini :

download


Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!


Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan dapat di mengerti. Selamat mencoba ....

Source : http://kolom-tutorial.blogspot.com/2007/06/membuat-link-untuk-download.html

[ + Baca ]

Teks Mengikuti Kursor.

* Login di blogger, lalu masuk ke page element.

* Klik add page element (Terserah anda mau disimpan dimana. Baik di sidebar atau di bagian footer)

* Pilih html / javascript .

COPY PASTE KODE DIBAWAH INI :

<script> //mouse //Circling text trail- Tim Tilton //Website: http://www.tempermedia.com/ //Visit http://www.dynamicdrive.com for this script and more function cursor_text_circle(){ // your message here var msg='WELCOME'.split('').reverse().join(''); var font='Times New Roman'; var size=3; // up to seven var color='#fff'; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 for just plain rotation w/out drag var speed=.2; // This is the rotation speed, set it negative if you want // it to spin clockwise var rotation=-.2; // Alter no variables past here!, unless you are good //--------------------------------------------------- var ns=(document.layers); var ie=(document.all); var dom=document.getElementById; msg=msg.split(''); var n=msg.length; var a=size*13; var currStep=0; var ymouse=0; var xmouse=0; var props="<font face="+font+" color="+color+" size="+size+">"; if (ie) window.pageYOffset=0 // writes the message if (ns){ for (i=0; i < n; i++) document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+a+"><center>'+props+msg[i]+'</font></center></layer>'); } else if (ie||dom){ document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">'); for (i=0; i < n; i++) document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>'); document.write('</div></div>'); } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position } if (ns||ie||dom) (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; var y=new Array(); var x=new Array(); var Y=new Array(); var X=new Array(); for (i=0; i < n; i++){ y[i]=0; x[i]=0; Y[i]=0; X[i]=0; } var iecompattest=function(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body; } var makecircle=function(){ // rotation properties if (ie) outer.style.top=iecompattest().scrollTop+'px'; currStep-=rotation; for (i=0; i < n; i++){ // makes the circle var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style; d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : ''); d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval } } var drag=function(){ // makes the resistance y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); for (var i=1; i < n; i++){ y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } makecircle(); // not rotation speed, leave at zero setTimeout(function(){drag();},10); } if (ns||ie||dom) if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", drag, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", drag ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); drag(); }; } else window.onload = drag; } } cursor_text_circle(); </script>


* SAVE

NB : Ganti Kata WELCOME dg Kata Milik Anda.

Source : http://savalia2001.blogspot.com/2010/02/teks-mengikuti-kursor-readmore-otomatis.html

[ + Baca ]

Pasang Auto Readmore di Blog

  Fungsi Read More kali ini emang agak berbeda dengan versi Read More terdahulu. Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan.

Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi,

karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja oklay...

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.



Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

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

<data:post.body/>

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

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

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

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



Good Luck....
And shufi ucapin Syukron katsiir but bang O-om yang udah mau bagi2 tutorial nich.

Source : http://www.o-om.com/2009/04/cara-pasang-auto-read-more-terbaru-part.html

[ + Baca ]