cara meringkas alamat url / link

B

anyak sekali Situs yang menawarkan jasa untuk memperpendek / meringkas url / link yang kita miliki, tujuannya agar tidak terlalu sulit untuk diingat. dari perusahaan internet terbesar sendiri menawarkan jasa ini yang sering di sebut dengan Google url Shortener, situs lain yang menyediakan jasa ini adalah AdF.ly , ini yang sering saya gunakan, karena selain dapat meringkas url, situs ini juga menawarkan kerjasama dalam menghasilkan beberapa Dolar, dari mereka yang mencari alamat situs lewat link yang kita miliki.


cara pendaftaran ke situs ini sangatlah mudah dan gratis, dan langkah untuk meringkas url kita pun tidak begitu sulit, tinggal Copy Paste saja. AdF.ly juga memberikan kita menjadi seorang publisher ( pihak yang mempublikasikan suatu halaman, dan advertiser ( pihak yang memiliki halaman untuk di promosikan ).
kita juga bisa mendapatkan banner dengan berbagai pilihan ukuran sesuai yang kita inginkan, seperti di bawah ini

More about → cara meringkas alamat url / link

Gambar melayang di pojok Halaman

sekali lagi postingan untuk mempercantik Blog, Tapi masih saya ingatkan untuk efisiensi acces blog anda akan berkurang karena semakin banyak Gambar ataupun animasi yang akan ditampilkan. seperti biasa kta perlu menambahkan kode -kode pada bentuk mentah halamn Blog kita.
pertama yang harus kita lakukan adalah meletakkan gambar ataupun animasi Gif pada sebuah situs hosting. sebagai contoh kita gunakan situs Photoserver.ws, upload gambar kalian disana dan pilih url ada direct link-nya.


kedua login ke Blog anda masing - masing dan pilih tata letak Edit HTML, pada area penulisan script cari kode ]]></b:skin>
lalu Copy dan paste kode di bawah ini diatas kode ]]></b:skin>

berikut code sript-nya :
<br /> #anima_sudut {<br /> position:fixed;_position:relative;top:0px; left:0px;<br /> clip:inherit;<br /> _top:expression(document.documentElement.scrollTop+<br /> document.documentElement.clientHeight-this.clientHeight);<br /> _left:expression(document.documentElement.scrollLeft+<br /> document.documentElement.clientWidth - offsetWidth); }<br />

selanjutnya cari code
</body>
copy dan paste code sript dibawah ini diatas code </body>
berikut code-nya
<br /> <div id='anima_sudut'><a href='http://jayaputrasbloq.blogspot.com/'><br /> <img alt='' border='0' src='http://i647.photobucket.com/albums/uu191/ariamsi/disiniann.gif'/></a><br /> </div>
ganti xxx.blogspot.com dengan alamat Blog anda
dan Gantikan alamat gambar atau animasi dengan alamat gambar yang tadi anda upload
simpan Template anda dan selesai
untuk posisi bisa anda ubah sesuai keinginan
jika berhasil baca Hamdallah jika blom berhasil maka anda belum beruntung, semoga bermanfaat.

More about → Gambar melayang di pojok Halaman

Membuat Efek Marquee ( text Bergerak )

Kadang-kadang untuk mempercantik halaman Blog, tips berikut sangat banyak dilirik oleh para blogger. Marquee adalah kode html yang berfungsi untuk memberikan efek ke banyak arah gerak sesuai dengan keinginan. Adapun efek adalah gerakan horizontal ke kiri dan kanan, aataupun kiri ke kanan, dan efek gerak vertikal ke atas dan bawah.

mari kita coba bersama-sama: Kode efek marquee adalah seperti sampel ini  

<marquee> xxx </ marquee>

Dimana, <marquee> adalah Kode untuk menggerakkan text, sementara xxx adalah isi teks yang akan beri efek gerak dan </ marquee> adalah penutup kode

dengan kode di atas saja, sebenarnya sudah mampu memberikan efek gerak, tetapi arah yang dihasilkan umumnya dari kiri ke kanan secara horizontal.
kita masih bisa memodifikasi gerakan dengan arah gerak yang lain, perhatikan contoh berikut :


Efek dari kanan ke Kiri
kodenya adalah :
<marquee direction="left" scrollamount="3" width="100%">Gerak dari Kanan Ke kiri</marquee>
Hasilnya :
Gerak dari Kanan Ke kiri


Efek Dati Kiri ke Kanan
Kodenya adalah :
<marquee direction="right" scrollamount="3" width="100%">Gerak dari Kiri ke Kanan</marquee>
Hasilnya :

Gerak dari Kiri ke Kanan

Efek gerak kanan kiri sesui ukuran Bidang
kodenya adalah :
<marquee behavior="alternate" direction="right" scrollamount="3" width="100%">Efek Gerak Kanan Kiri</marquee>

Hasilnya :

Efek Gerak Kanan Kiri

Efek gerak Vertikal Ke atas
kodenya adalah :
<marquee direction="up" heigt="100" scrollamount="3" width="100%">Gerak Vertikal ke Atas</marquee>

hasilnya :
Gerak Vertikal ke Atas
kita dapat menambahkan langkah untuk menghentikan efek gerak ketika teks didekati oleh mouse, dan bergerak lagi ketika mouse pointer meninggalkan teks:
perhatikan kode dibawah ini :
<marquee direction="up" heigt="100" onmouseover="this.stop ()" onmouseout="this.start ()" scrollamount="3" width="100%">Dekatkan Mouse anda</marquee>
hasilnya ( dekatkan mouse pada area Text yang sedang bergerak )
Dekatkan Mouse anda
dengan langkah diatas kita dapat memainkan Link yang bisa diklik oleh pengunjung :
perhatikan Kode di bawah ini :

<marquee direction="up" heigt="100" onmouseout="this.start ()" onmouseover="this.stop ()" scrollamount="3" width="100%"><a href="http://komp-rakitan.blogspot.com/2012/02/mikrotik-router.html">Mikrotik Router</a></marquee>

hasilnya :
Mikrotik Router
satu lagi, kita masih dapat memberikan kode tambahan untuk memberikan latar belakang pada teks yang bergerak
cermati kode berikut :
<div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="RED" scrollamount="3" width="100%">Text dengan Background Warna merah</marquee></b></span></div>
hasilnya :

Text dengan Background Warna merah

Silahkan berikan kreasi lain yang mugkin dapat di tambahkan untuk memodifikasi efek gerak pada text, semoga dapat menghilangkan rasa bosan dalam aktifitas ngeblog anda

More about → Membuat Efek Marquee ( text Bergerak )

Membuat Menu TabView

Berikut adalah posting dari icki tentang bagaimana pembuatan tag View untuk dapat dipasang pada blog kita. ada yang bilang bagi - bagi ilmu adalah sesutau yang baik untuk dilakukan.
langsung aje ye carany ade di bawah ni !

Berikut langkah-langkahnya

1.Login ke blogger dengan ID anda
2.Lalu Klik Menu Templates
3.Klik Sub Menu Edit HTML
4.Pada Kotak Edit HTML cari Kode ]]></b:skin>
5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */

div.Tabateonsoft div.TFs

{height: 30px; overflow: hidden;}

div.Tabateonsoft div.TFs a

{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;

background:#f0f0f0;

color: #333;

border-top:1px solid #CCCCCC;

border-right:1px solid #999999;

border-bottom:1px solid #999999;

border-left:1px solid #cccccc;

-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;

}

div.Tabateonsoft div.TFs a:hover

{ background: #E8E8E8;

border-top:1px solid #999999;

border-right:1px solid #cccccc;

border-bottom:1px solid #cccccc;

border-left:1px solid #999999;}

div.Tabateonsoft div.TFs a.Active

{ background: #E8E8E8;

color: #000000;

border-top:1px solid #999999;

border-right:1px solid #cccccc;

border-bottom:1px solid #cccccc;

border-left:1px solid #999999; font-weight:bold;}

div.Tabateonsoft div.Pages

{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}

div.Tabateonsoft div.Pages div.Page

{height: 100%;padding: 0px; overflow: hidden; }

div.Tabateonsoft div.Pages div.Page div.floor

{ font-size:11px;padding: 3px 5px; text-align:left;} 

6.Lalu letakkan kode berikut dibawah kode <head>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

7.Save Template
8.Pergi ke halaman Element Halaman
9.Klik Add Widget Element
10.Pilih Menu HTML/Java Script
11.Lalu Copy kode berikut

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

sekarang untuk modifikasi lebih lanjut terserah sobat semua mo diganti apanya kek, semoga bermanfaat

More about → Membuat Menu TabView

Mengganti Favicon Blog

kesempatan ini saya ingin berbagi pengalaman inovatif pada blog untuk kawan - kawan bloger. kepuasan untuk berbloger adalah tujuan utama para bloger mania, mudah - mudahan tips ini dapat menambah kepuasan yang kita dapatkan.langsng  saja ya.

icon address bar pada blog kita masing - masing dibrikan secara default oleh bloger, kita masih bisa melakukan inovasi yang lebih baik sesuai keinginan kita, lihat icon address pd blog saya, ini adalah hasil modivikasi manual dari pengolahan HTML templat

1. pertama kita harus mempunyai gambar yang telah di upload, untuk membuat icon animasi bisa kita gunakan file Gif. file dapat diupload di photoserver.ws atau yang laen, sedang software utuk membuat animasi dapat kalian download di www.blumentals.net
   
2. jika file untuk icon telah terupload temukan url lokasi file tersebut dan simpan ( terserah disimpan dimana yang penting nanti bisa di Copy/paste )
3. log in pada bloger dengan id n password masing2
4. pilih tata letak - edit HTML
5. temukan kode </head>
6. tuliskan script berikut tepat sebelum kode   </head>
   berikut scriptnya
   <link href='http://xxx.blogspot.com/gambar.gif' rel='SHORTCUT ICON'></link>
   
7. sekarang kita ambil lokasi gambar yang telah kita simpan tadi dan gantikan pada script yang berwarna merah kemudian simpan template, lihat blog kalian dan saksikan hasilnya, gampangkan

Catatan :

• jangan menggunakan file gambar dengan ukuran besar agar loading blog tidak terlalu berat
• gunakan file gambar dengan dimensi ukuran 30px  X 30px maximal

selamat mencoba dan semoga dapat menambah kepuasan sahabat blogger

More about → Mengganti Favicon Blog

Menghilangkan Tampilan Navbar Blog

Navbar biasanya dianggap mengganggu tampilan blog, dulunya sih dari pihak bloger tidak diijinkan menghilangkan navbar blog artinya akan sangat beresiko untuk kelangsungan account bloger kita, tapi kenyataan sekarang banyak blog yang ga menampilkan navbar karena secara fisik terlihat mengurangi gaya tampilan blog. disini saya memposting cara untuk menghilangkan navbar bagi yang belum tahu caranya. sebenarnya udah lama cara ini di posting oleh para senior bloger, tapi g ada salahnya kita inget - inget lagi sambil bagi - bagi pengalaman pada para pemula di dunia bloging.

berikut adalah caranya :

saaaaaaaaannngaaaatt gampang untuk template baru, buka tata letak pada account blog anda pilih edit HTML dan cari kode ]]></b:skin>, copykan kode berikut ini di atas kode tersebut

/* hilangkan navbar<br /> ----------------------------- */<br /> <br /> #navbar-iframe {<br /> height:0px;<br /> visibility:hidden;<br /> display:none<br /> }
terakhir simpan template, and Liht tampilan di halaan utama !

More about → Menghilangkan Tampilan Navbar Blog

3 langkah membuat read more

berulang kali para Bloger mencari kesana kemari untuk membuat potongan posting yang tampil agar postingan terpenggal dan tidak mEmbuat penuh Halaman posting di Muka blog.

disini kita hanya perlu 3 langkah untuk membuat read yang berfungsi untuk memenggal tampilan Posting

Pertama

login ke account blog anda, masuk ke PENGATURAN pilih FORMAT

pada Template posting terdapat text area isikan kode berikut kedalamnya

<span class="fullpost">

</span>

lalu simpan Pengaturan

Kedua
masuklah ke Dasbor
pilih tata letak
Edit HTML

temukan kode Berikut :

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

atau

<data:post.body/>

Ketiga
hapus kode tersebut dan ganti dengan kode di bawah ini :

<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>

simpan template
selesai

untuk melihat masuk ke entri baru
secara otomatis akan terisi kode yang kita setting tadi

tuliskan postingan yang ingin kita sembunyikan diantar kode yang telah ada pada area posting

catatan :
tulisan selengkapnya dapat di ganti sesuai keingingan

More about → 3 langkah membuat read more

Membuat Slide Photo di blog

bagi kawan - kawan bloger yang belum tau dan ingin memasang tampilan foto slide show (gambar kesayangan kalian) di blog masing - masing, kesempatan ini saya ingin berbagi pengalaman. pada awalnya ( saya juga masih pemula ) saya bingung gimana memasng foto dengan tampilan slideshow yang indah di blog saya, namun setelah bergerilya kesana kemari akhirnya saya temukan juga dan hasilnya bisa kalian lihat di samping kanan blog ini.

untuk pemasangan slide show saya memanfaatkan salah satu site yaitu picturetrail.com. dari situ telah disediakan program instan yang bisa kita gunakan dengan mudah dan cepat, pertama kunjungi dulu www.picturetrail.com lakukan registration ( sign Up ) ,jika kalian telah menjadi member dan berhasil masuk, pilih slideshow untuk membuat animasi foto yang kalian inginkan. pada slideshow ada add foto untuk menambah foto kalian dan customize flick untuk mempercantik dan memilih model tampilan slide, jika selesai lakukan penyimpanan pada Save dan kalian akan dapatkan kode HTML-nya, kopy kode tersebut dan buatkan gadget baru pada blog kalian lalu paste disitu, simpan dan lihat hasilnya.

untuk agar mudah di akses usahakan gambar yang dibuat pada picturetrail tidak terlalu besar ukuranya. selamat mencoba. semoga bisa menambah semangat sahabat bloger

More about → Membuat Slide Photo di blog

Efect Cursor bergelembung

Sebelum saya ingin berterima kasih pada Kang Fathur , setelah sekian lama sayatidak mengunjungi blog teman (Kang Fathur), ternyata ia masih mengupdate Blog kesayangan-nya, dan saya menemukan posting yang membahas modifikasi kursor , halaman tersebut sebenarnya banyak membahas script seperti ini, tetapi tip ini adalah yang baru saya temukan di halaman kang fathur, dari script ini kita akan menghasilkan banyak gelembung udara dengan warna yang dapat kita mengatur, yang lebih menguntungkan lagi dapat membuat blog lebih cantik, efek ini tidak terlalu berat ketika saya mencoba untuk menerapkan pada Blog Free Download Software.  


Berikut script dan caranya:

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript"> // <![CDATA[ var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=100; // maximum number of bubbles on screen /**************************** * JavaScript Bubble Cursor * * (c) 2010 mf2fm web-design * * http://ade-tea.blogspot.com * * DON'T EDIT BELOW THIS BOX * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)"; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; } window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } // ]]> </script>

Langkah pemasangan :
salin script di atas dan menaruhnya di kotak html pada penambahan gadget baru dan simpan - selesai
sangat mudah!!!
silakan lakukan modifikasi untuk animasi yang Anda inginkan.
semoga bisa membantu dan menambah semangat kreatif

More about → Efect Cursor bergelembung