Mengganti Tulisan Newer Post Older Post Dengan Gambar

Cara mengganti tulisan Newer Post, Older Post, dan Home diblog atau mengganti posting baru, posting lama dengan gambar adalah sebagai berikut

1. Cara Mengganti Tulisan Newer Post
Untuk mengganti tulisan Posting Lebih Baru (Newer Post), carilah kode perintah:

<data:newerPageTitle/>

Ganti kode diatas dengan kode dibawah

<img src='URL GAMBAR'/>

2. Cara Mengganti tulisan Older Post
Untuk mengganti tulisan Posting Lama (Older Post), carilah kode perintah:

<data:olderPageTitle/>

Ganti kode diatas dengan kode dibawah

<img src='URL GAMBAR'/>

3. Cara Mengganti tulisan Home
Untuk mengganti tulisan Halaman Muka (Home), carilah kode perintah:

< data:homeMsg/>

Ganti kode diatas dengan kode dibawah

<img src='URL GAMBAR'/>

keterangan; ganti url gambar dengan gambar sesuai selera anda, atau anda tinggal download gambarnya yang telah saya sediakan.

untuk gambar kiri/ newer post anda bisa download disini
untuk gambar kanan/ older post anda bisa download disini
untuk gambar rumah/ home anda bisa download disini

Koleksi banner blog dofollow

Hai, hai , hai…

kali ini teori ngeblog bakal nunjukin koleksi banner dofollow yang di buat oleh admin teori ngeblog sendiri untuk kamu…jadi di jamin, bannernya gak pasaran…he…he..he…

Tapi jangan salah…walaupun cuman memposting banner blog do follow…..tapi banner blog do follow merupakan media yang terpenting untuk menunjukkan bahwa blog kita telah do follow, sehingga nanti para pengunjung blog kita tau dan banyak memberi komentar ke blog kita….

Tapi di sini gak cuman mamerin banner do follow aja….tapi kamu bisa mengcopynya untuk di pasang di blog kamu… yang pasti blog kamu harus do follow dulu baru memasang banner ini…ya jelaslah…he…he…he.…..dan buat teman-teman yang memang mengcopy banner buatan saya ini, tolong follow di blog ini….ya hitung-hitung hasil kerja keras saya membuat banner ini di bayar dengan follow dari kamu lah….karena follow dari kamu sangat berarti untuk blog ini…he…he…he….

Langsung aja…gak usah berlama-lama….silahkan di lihat….dan di plototin banner-banner buatan saya ini…..

<a alt="teoringeblog" href="http://www.teoringeblog.blogspot.com/" title="Teoringeblog"><img border="0" src="http://img138.imageshack.us/img138/3779/teoringeblog.gif" /></a>

<a alt="teoringeblog" href="http://www.teoringeblog.blogspot.com/" title="Teoringeblog"><img border="0" src="http://img31.imageshack.us/img31/8118/teoringeblog2.gif" /></a>

<a alt="teoringeblog" href="http://www.teoringeblog.blogspot.com/" title="Teoringeblog"><img border="0" src="http://img707.imageshack.us/img707/4929/teoringeblog3.gif" /></a>

<a alt="teoringeblog" href="http://www.teoringeblog.blogspot.com/" title="Teoringeblog"><img border="0" src="http://img19.imageshack.us/img19/7858/teoringeblog4.gif" /></a>

<a alt="teoringeblog" href="http://www.teoringeblog.blogspot.com/" title="Teoringeblog"><img border="0" src="http://img32.imageshack.us/img32/8872/teoringeblog5.gif" /></a>

<a alt="teoringeblog" href="http://www.teoringeblog.blogspot.com/" title="Teoringeblog"><img border="0" src="http://img62.imageshack.us/img62/3906/teoringeblog6.gif" /></a>

<a alt="teoringeblog" href="http://www.teoringeblog.blogspot.com/" title="Teoringeblog"><img border="0" src="http://img697.imageshack.us/img697/3505/teoringeblog7.gif" /></a>

ya walaupun bannernya sengaja saya buat dengan background dasar hijau…tapi teman-teman bisa memesan banner blog dengan bentuk yang sama tapi dengan warna yang berbeda dengan memesan melalui komentar di blog ini…..

Trik Rotasi Gambar Dengan CSS

Terkadang kita sering merotasi foto kita, entah di Facebook atau di blog, yang biasanya bertujuan untuk memberikan efek realistis dan tidak kaku. Tapi ternyata kita juga bisa lho merotasikan foto kamu dengan CSS, baik saat biasa maupun saat disentuh kursor. Tapi sayangnya trik ini hanya ampuh untuk browser dengan dukungan CSS 3, sisanya? Good bye aja deh!

Contoh:

Biasa	Miring tanpa hover miring
Biasa dengan hover miring	Miring dengan hover miring

Sekarang pertanyaannya adalah Bagaimana Caranya?

Secara umum, inilah scriptnya.
Image miring tanpa hover miring

• CSS
  .rotasi1 { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi1" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi1"><img border="0" src="Your Image Link"/></span>

Image biasa dengan hover miring

• CSS
  .rotasi2:hover { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi2" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi2"><img border="0" src="Your Image Link"/></span>

Image miring dengan hover miring

• CSS
  .rotasi3 { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3:hover { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi3" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi3"><img border="0" src="Your Image Link"/></span>

Gabungan dari CSS di atas
.rotasi1 { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); } .rotasi2:hover { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3 { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3:hover { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Penjelasan

• Hover adalah keadaan saat kursor menyentuh/berada di atas objek (dalam posting ini adalah image).
• Image adalah gambar/foto.
• 7deg adalah nilai rotasi untuk rotasi 7^o searah jarum jam dan bisa diubah sesuai keinginan.
• Angka bisa diberi nilai negatif (-) untuk rotasi berlawanan arah jarum jam, misal -7.
• Your Link diganti dengan link tujuan (jangan lupa dengan http:// di depan)
• Your Image Link diganti dengan link image (jangan lupa juga dengan http:// di depan)
• Script bisa ditambah atau dikurangi (alias dimodifikasi) sesuai dengan kebutuhan masing-masing.

Untuk Blogger

• Cara menambahkan CSS
  - Ke Dasbor Blogger > Tata Letak > Edit HTML.
  - Tambahkan CSS di atas script ]]></b:skin>.
  - Klik Simpan template
• Cara menambahkan HTML
  - Langsung copy paste HTML ke tempat yang diinginkan (di elemen halaman, di posting, di sidebar, dll).
  - Ganti Your Link dan Your Image Link sesuai dengan ketentuan di bagian penjelasan.

Masih kurang jelas? Silakan bertanya di tempat komentar di bawah.

Image Gallery With CSS3

CSS3 lagi?? owh shit man.... Asyik nih saya tulis lagi tentang css3 yang keren abis dah, kali ini css3-nya tentang Image Gallery. Sebenarnya trik css3 kali ini menggunakan efek hover yang apabila disentuh akan memperbesar atau berubah bentuk. Dari pada pusing baca penjelasan saya yang g jelas mendingan kita lihat demonya yuk.

Nah kode yang saya pakai untuk menampilkan image Gallery With CSS3 adalah sebagai berikut

Css yang di pakai :

.box {
z-index: 1;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-transform: rotate(-15deg);
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}

.box:hover {
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
}

nah untuk diatas adalah kode css-nya apabila sobat ingin memasang-nya di template sobat tinggal tambahkan saja kode tersebut di atas kode ]]></b:skin> dan simpan deh selesai namun efek tersebut tidak akan berfungsi apabila kode css tersebut tidak di panggil. Jadi untuk memanggilnya kita gunakan class="box1" pada HTML, contoh seperti di bawah ini

<div class="box1">
<img src="Alamat-Gambar-Sobat" />
</div>

nah kurang lebih seperti itu, biar jelas silahkan sobat coba jadi jangan cuman baca saja nanti malah g bisa, oiya kalau sobat ingin mempelajari lengkap tentang css3 sobat bisa kunjungin css.info . Sekarang tugas saua selesai, dan saya mau pamit kurang lebihnya di maafkan y. Terima kasih dan Salam OT .

JON'S

 

 

Gambar GIF / Gambar Gerak 2

http://img710.imageshack.us/img710/579/followtherules.gif





http://img35.imageshack.us/img35/3600/lighth.gif

Apakah Blog Kamu Gaul?

Pertanyaan yang sama dengan judul postingan ini. Apakah blog kamu gaul? Jawabannya ada pada diri kalian sendiri. Tidak ada seorang pun yang bisa menilai apakah blog kalian gaul apa tidak. Dalam dunia weblog, suatu blog akan ditata sesuai dengan keinginan pemilik blog itu sendiri. Dan suatu blog akan dinilai serius kalau memiliki domain berbayar seperti dotcom, dotinfo, dotwebdotid, dansebagainya. Tapi di samping itu kita bisa membuat weblog kita seperti weblog dengan domain berbayar, kita Cuma harus pinter-pinter mengelola isi dan tata letak pada blog kita. Situs dengan domain berbayar akan menang karena tata letak mereka jauh di atas kita, mereka juga memiliki kemampuan CSS, PHP dan sebagainya. Sebaliknya kita hanya newbie yang gaptek akan weblog. Seminimalnya
kita harus memiliki kemampuan pada tata letak weblog kita. Pahami ukuran pada sidebar dan main wrapper blog kita. Semua ukuran bisa dilihat di Edit HTML atau dengan cara lain juga bisa, yaitu memilih menu gambar pada tambah gadget, sorot mata kalian ke bawah dan akan menemukan ukuran gadget pada sidebar yang dipilih. Nah, kalo udah sesuaikan deh. Dengan begitu ukuran tidak sembarangan. Jadi blog kita terkesan lebih rapi. Ini symbol untuk kalian yang ingin menjadi pemilik blog yang gaul. Symbol ini juga didasarkan oleh hati, yaitu sayang terhadap blognya sendiri, jangan biarkan blog kita tersiksa dengan apa yang kita lakukan padanya. Sayangilah blog kita. Hiasi mereka dengan apa yang kita punya, sehingga blog dan pemiliknya yaitu kita dapat merasakan kebahagiaan.




<a href="http://die-silver.blogspot.com/2009/03/apakah-blog-kamu-gaul.html"><img border="0" width=”300” src="http://photos-p.friendster.com/photos/18/45/56375481/1_909080905l.jpg"/></a>





<a href="http://die-silver.blogspot.com/2009/03/apakah-blog-kamu-gaul.html"><img border="0" width=”300” src="http://photos-p.friendster.com/photos/18/45/56375481/1_387994759l.jpg"/></a>





<a href="http://die-silver.blogspot.com/2009/03/apakah-blog-kamu-gaul.html"><img border="0" width=”300” src="http://9151714091851333125-a-1802744773732722657-s-sites.googlegroups.com/site/diesilversite/Home/symbol_blogger_blog_gaul2.jpg?attredirects=0&auth=ANoY7coqp4SdaaceGhmZ83JpQGhNJ568DqR_GDv8B98bq826jBaOyImjuNp-KnrJ2KSzh22FMyw4hLFKRnJWFh-n5uKjkC0qlMl0p3eCHs3-qteoSxKoxns4FrzHcjrZ-oY_lC4XaeSGn7p1gXGrtKCyeazyF_UDkLSewAhmW4o4Rn7O4njy7wBp9zej6WMAuEmyAbJXfZ-29aOYqMN-2xqcWlu3dXdp87O8WF0jt7K9F2DVlgfVZBo%3D"/></a>





<a href="http://die-silver.blogspot.com/2009/03/apakah-blog-kamu-gaul.html"><img border="0" width=”300” src="http://9151714091851333125-a-1802744773732722657-s-sites.googlegroups.com/site/diesilversite/Home/symbol_blogger_blog_gaul1.jpg?attredirects=0&auth=ANoY7cppldF278wMbJ6jXpk-Q0t0rYtJJbRIbpWYxb4GZIeHKUi2kW8bRSqxzLqFgd0lMm0SMx1w0Ocyi7-WWG9Rrbg3chLes6vpwBZyg42EdQ2DhfRyyQPEjQKbKGjUkABLWFdJy4tjwd1kX9b7o1bnWwhmK0Y7UJfs6kWCuoNFxPvD7PCbwym320tDMTTQtU4ugjcj73GxtE9FaezPgK80_RbzUNYdSepPw6OJ-qjX4EDqIretXJw%3D"/></a>


Hehe. Terlalu berbelit-belitkah? :r ya udah, ambil aja gambar di atas dan letakkan di sidebar kalian kalau bisa di bagian atas, symbol ini untuk memicu kalian agar semangat nge-blog dan ingat yaa, ini bukan award. Ini adalah symbol untuk semua blog yang gaul. Kalau kamu merasa gaul, kenapa tidak mengambil symbol ini??? Ohya, ukuran asli gambar ini yaitu 300 pixels, kalian bisa menggantinya dengan ukuran yang sesuai pada sidebar blog kalian, misalnya kalo sidebar kalian memiliki lebar 130 ya ganti ukuran gambar dengan 125, sesuaikan jarak antara kanan kiri dan atasnya. dan untuk gambar yang nggak persegi tetep diatur width-nya yaa. Jangan lebar sebelah… ngerti nggak? Contohnya itu tu punya q, letaknya pas khand??? Sebagai info, q milih friendster sebagai hosting gambar ini karena friendster memiliki kepastian sebagai hosting gratis untuk gambar. Ini cuma cara q, masalahnya akun q di photobucket.com sudah habis dan harus upgrade to pro yang memakan uang. Jadi q melirik friendster. Hehe :D . Tapi ada juga yang q hosting di googlepages, buat iseng2 aja kok. Nah, Setelah membaca postingan ini apa pendapat kalian tentang ini? Apakah ini dapat menjadi dorongan untuk kita agar blog kita terkesan lebih baik? Sebenarnya tujuan q hanya satu yaitu melihat pemilik blog atau blogger yang ingin blognya berkembang. Dengan kata lain ya orang mana yang pengen banget liyat blognya itu jadi super berguna bagi orang lain.

Membuat Gambar Melayang di Blog

Saat ini saya akan membahas bagaimana cara membuat gambar melayang di blog. gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh scrool mouse. Apakah sobat tertarik membuatnya ???. Sebelum membuatnya, sobat harus menyiapkan gambar. terserah sobat mau gambar bergerak yang biasanya berformat .gif atau gambar bisa yang berformat .jpeg atau bisa juga gambar foto kita...hehehe biar narsis.

Gambar yang ingin dipasang lalu di upload atau disimpan di image hosting. sobat bisa menyimpannya di photobucket.com, imageshack.com, flickr.com atau image hosting lain. Tetapi untuk gambar dengan format .gif saya biasa menyimpannya di imageshack.com. ooo...iya saya sarankan, gambar yang ingin dibuat melayang sebaiknya gambarnya jangan besar-besar karena dapat mengganggu pengunjung blog kita.

Nah untuk step-step selanjutnya akan saya tulis lebih ringkas. Setelah sobat menyimpan di image hosting, inilah yang harus sobat lakukan :

1. Login Acount blogger anda.

2. Masuk pada Pengaturan.

3. Pilih Tata letak.

4. Edit html.

5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >

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

Ket : Kode yang tercetak kuning ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.

6. Berikutnya cari lagi di dalam template anda kode < /body >
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.

<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>

Ket : kode yang berwarna kuning diganti dengan url tempat gambar anda disimpan.

7. Simpan, jadi deh........

o....ya, kalo anda suka dengan blog ini pasang banner saya atuh.....Okeeey

CARA EDIT INFO FILE MP3 (MENAMBAH gambar COVER,ALBUM,TITTLE,ARTIS,GENRE DLL)

 MUSIK!!  bisa dikatakan tidak dapat dipisahkan dari kehidupan sehari-hari kita.
sobat gaptek pasti pernah mendengar musik kan????
baik itu lewat tape,cd,dvd,ataupun lewat PC dan HANDPHONE.
kalau sobat gaptek putar file musik (mp3 )
Supported files and tags formats:

• mp3 (all ID3 tag versions)
• wma, asf and wmv (including DRM protected files)
• Apple iTunes and iPod aac (m4a, m4b, m4v and m4p) and mp4 files
• ogg, flac (vorbis comment tags)
• mpc, mp+ (APE/APEv2 tags)
• monkey's audio (APE/APEv2 tags)
• wav pack (APE/APEv2 tags)
• optim frog (APE/APEv2 tags)
• wav (ID3v2 tag in 'tag ' RIFF chunk)

akan ada muncul nama artis,album,title bahkan COver albumnya di Player yang kita gunakan .
misalnya sobat gaptek putar musik d WInamp. di winamp akan muncul judul,album,title(title berbeda dengan NAMA file, title ialah nama yang muncul di music player) dan  nama albumnya

nah sekarang saatnya kita mengedit info yang muncul di player tersebut.
mengedit ta info dari mp3 tersebut mudah, bisa dengan music player itu langsung seperti winamp / windows media player.
namun ada cara yang LEBIH MUDAH yaitu dengan software kecil bernama AUDIOSHELL. biarpun kecil software ini sangat bagus menurutku. hanya dengan klik properties (alt+enter) dari file mp3 yang ingin kita sudah bisa langsung edit infonya atau tambahkan cover langsung di mp3 tersebut.

download audioshell untuk edit artis,album,cover,title dari file mp3  di SINI

EDIT TAG INFO FILE MUSIK

 dengan adanya software ini kita jadi bisa menambahkan nama kita,atau foto kita di file mp3 yang ada di pc/laptop kita, lalu biarkan orang yang minta lagu dari kita teerkejut karena nama / kita yang muncul ketika mereka mutar mp3  yang diminta dari kita  (pengalaman pribadi BLOGGER GAPTEK...wkwkwkwkw)

semoga bermanfaat

Gambar Bergerak

Sweet things are easy 2 buy,
but sweet people are difficult to find.
Life ends when u stop dreaming, hope ends when u stop believing,
Love ends when u stop caring,
Friendship ends when u stop sharing.
So share this with whom ever u consider a friend.
To love without condition… ……… ………
to talk without intention… ……
to give without reason…… ……and
to care without expectation. ……is the heart of a true

. . . b