April 2013 | Belajar ngeblog

Cara Mudah Pasang Gambar Dan Animasi Melayang Di Sudut Blog

Kali ini saya akan bagikan cara pasang animasi atau gambar nya dengan menggunakan kode CSS yang akan di pasang di dalam HTML Template blog cara yang ini menguntungkan buat blog karena tidak memberatkan loading pada blog ,Kalau sobat tertarik langsung aja ya sob pada cara pasang nya di blog dengan langkah sebagai berikut :

1. Login dulu ke Blogger
2. Pilih Template
3. Klik Edit Html Template
4. Simpan dulu kode untuk berjaga-jaga seandai nya ada kesalahan pengeditan
5. Centang Expand Template Widget
6. Cari kode ]]></b:skin> ( Gunakan Ctrl+F untuk memudahkan pencarian kode )
7. Letakan kode CSS di bawah ini diatas kode ]]></b:skin> atau sebelum kode ]]></b:skin>

#Animasi-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); }

8.Langkah selanjut nya Cari kode </body>
9. Pasang kode Script di bawah ini tepat diatas kode </body>

<div id='Animasi-melayang'>
    <a href='http://aryooteg.blogspot.com'>
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnL0MuVDWnB1rhUgi3-iuo1OGF6NjvPEqHoVEy342dTcxBK7gYPs7vCj3menaijMhC3B6peOTGOHZDzyQNz_jeQ2dkOq6f32fYt8TAmq-gKvRhkQ3pJGLHb16bmzYyMhGLhyphenhyphen-ffQR7htt/s1600/cewek+goyang.gif'/></a>
    </div>

Keterangan : kode warna merah silahkan ganti dengan kode URL Gambar atau animasi pilihan sobat

10. Klik simpan untuk melihat hasil nya di blog

Itu lah Cara Mudah Pasang Gambar Dan Animasi Melayang Di Sudut Blog dengan menggunakan kode CSS , semoga artikel ini bermanfaat

Cara Mengganti Icon Kursor Blog Dengan Gambar Animasi

Mau mengganti kursor blog standar yang berbentuk panah dengan icon atau gambar yang sesuai dengan pilihan supaya tampilan blog lebih keren dan indah , kelebihan kursor ini bisa di ganti-ganti kalau sudah bosan dan hanya tampil pada blog sobat yang telah di pasangi kode script nya .

Kalau sobat penasaran atau tidak percaya silahkan coba pasang kode script nya di blog sobat dengan langkah-langkah sebagai berikut :

1. Login dulu di Blogger .
2. Pilih Template di Dasbor Blog
3. Klik Edit HTML Template
4. Centang dulu Expand Template Widget
5. Cari kode </head> di blog ( gunakan Ctrl+F untuk memudahkan pencarian kode ).
6. Pasang kode kursor di bawah ini diatas kode </head> atau sebelum kode </head>

<style type='text/css'>
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif"), auto;}
</style>

Keterangan : Kode warna giru adalah kode gambar atau icon kursor kalau sobat mau mengganti dengan tampilan lain bisa sobat gunakan kode di bawah ini sesuai dengan gambar kursor yang sobat sukai .

http://ak.imgfarm.com/images/cursormania/files/4/2308a.gif

http://cursors0.totallyfreecursors.com/thumbnails/bullseye-ani.gif

http://cursors2.totallyfreecursors.com/thumbnails/tail2.gif

http://ak.imgfarm.com/images/cursormania/files/6/3019a.gif

http://ak.imgfarm.com/images/cursormania/files/26/13148a.gif

http://ak.imgfarm.com/images/cursormania/files/24/12224a.gif

http://cursors0.totallyfreecursors.com/thumbnails/rainbow-ani3.gif

http://cursors3.totallyfreecursors.com/thumbnails/fireblue.gif

7. Terakhir klik simpan untuk melihat hasil nya diblog .

Kalau sobat mau menambah efek gambar mebesar jika disentuh cursor untuk mempercantik tampilan blog sobat silahkan kunjungi halaman ini " efek gambar mebesar jika disentuh cursor " dan kalau ada kesalahan kode jangan lupa berikan saran melalui form komentar di bawah ini ya ....dan kalau berhasil jagan lupa juga ucapan nya terima kasih melalui form komentar pertanda sobat telah berkunjung ke blog ini .

Cara Memasang Permalink Pada Blog

Oke sahabat blogger,, pada kesempatan ini saya share tentang Cara Memasang Permalink Pada Blog

seperti pada gambar di bawah ini

Permalink adalah sebuah Link atau tautan yang merujuk ke Suatu blog atau forum tertentu masuk setelah berlalu dari halaman depan ke arsip. Kebanyakan pengguna Blogger memasang permalink pada bagian bawah postingan mereka. Dalam kotak Permalink tersebut dalam kota tersebut sudah ada tag atau kode html yang berisi permalink dari postingan yang sedang dibuka atau dibacanya. Permalink ini juga berfungsi untuk mempermudah pembaca atau pengguna blog lain agar mengetahui permalink dari postingan yang sedang dibacanya. Supaya Pengguna Blog lain bisa menyematkan atau menaruh kode HTML permalink itu di blog mereka, sehingga memberikan tautan (backlink) ke halaman postingan tadi.

Cara Memasang Permalink Pada Blog

Login Ke Dashboard Blog Sobat masing-masing.
Pilih Menu Template
Pilih Menu Edit Html (Jangan lipa beri tanda centang Expand Template Widget)
Selanjutnya silahkan cari kode ]]></b:skin>
Kemudian Letakan kode Berikut Tepat diatas kode ]]></b:skin>

.admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee";
color:#aaa;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid #000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px 10px;margin:0 0 0 0;display:block;}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{background:#000000;width:90px;height:100px;border:1px solid #000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

Keterangan : Angka 90 yang saya beri warna biru tersebut adalah Lebar dari permalink. dan angka 100 yang warna Merah adalah tingginya. Sobat bisa menyesuaikanya dengan template sobat masing-masing.

Selanjutnya cari kode <data:post.body/>
Jika Sobat menggunakan template yang menggunakan auto readmore, kemungkinan kode tersebut ada dua buah. silahkan pilih kode yang nomer dua.
Lalu Letakkan kode berikut tepat dibawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> TIPS DAN ARTIKEL BLOGGING TERLENGKAP</h4>
<div class='kontainer'>
<img alt='Christian angkouw' src='http://i1323.photobucket.com/albums/u586/LHK-Blogs/photocopy_zpsadca962e.png'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>. Oleh Admin Lhk-Blogs, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://lhk-blogs.blogspot.com/' target='_blank'>:: Like this widget ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Keterangan : Kode yang saya beri warna Hijau adalah URL atau alamat Gambar yang akan Sobat gunakan pada permalink tersebut. jadi silahkan ganti dengan URL Gambar sobat masing-masing.

Silahkan Simpat Template Sobat dan Lihat Hasilnya.

Demikian Artikel Yang bisa saya share Tentang Cara membuat kotak Permalink pada blog kepada sobat, Semoga bermanfaat dan terimakasih atas kunjunganya.

cara membuat tulisan berjalan ( marquee )

Tulisan atau Teks yang Berjalan seperti yang banyak kita temui di acara tv adalah marquee. Disebut demikian karena menggunakan kode html marquee. Tulisan berjalan memang membuat tampilan blog menjadi lebih menarik, menjadikan text yang menjadi pusat perhatian juga barangkali.

Ada beberapa model yang dapat dihasilkan dari marquee, nah saya akan mencoba untuk membuat beberapa model tulisan atau teks berjalan di blog dengan menggunakan kode html marquee.

Script yang pertama : <marquee>TEXT BERJALAN DARI KIRI KEKANAN </marquee>

hasilnya seperti ini

http://aryooteg.blogspot.com/

Script yang kedua : <marquee direction="right">TEXT BERJALAN KE KANAN</marquee>
http://aryooteg.blogspot.com

Script yang ketiga : <marquee behavior="alternate">TEXT BERJALAN BOLAK BALI</marquee>
http://aryooteg.blogspot.com/

Script yang keempat :<marquee direction="down" height="75">TEXT BERJALAN KE BAWAH</marquee> http://aryooteg.blogspot.com

Script yang kelima :<marquee behavior"alternate" onMouseOver="this.stop()" onMouseOut="this.start()">TEXT BERJALAN DAN BERHENTI SAAT DISENTUH MOUSE</marquee> http://aryooteg.blogspot.com/

Script yang keenam :<marquee scrolldelay="300">TEXT BERJALAN DELAY 0.3 DETIK</marquee> http://aryooteg.blogspot.com

Script yang ketuju :<marquee bgcolor="orange">TEXT BERJALAN LATAR ORANGE</marquee> http://aryooteg.blogspot.com

Script yang kedelapan :<marquee direction="up" height="100" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="5">TEX BERJALAN KE ATAS</a></marquee> cara membuat tulisan berjalan ( marquee )

Na demikian tutorial tentang cara membuat tulisan berjalan ( marquee ) semoga bermamfaat.
Salam blogger dari Aryo oteg yang masi belajar ngeblog...

Cara Membuat Efek Terang (Fokus) Gambar Blog

Cara Membuat Efek Terang (Fokus) Gambar Blog

Kali ini saya akan berbagi tentang Cara Membuat Efek Terang (Fokus) Gambar Blog ini merupakan kebalikan dari efek blur gambar blog dimana tampilan awal dari gambar tersebut adalah buram atau blur namun setelah di sorot dengan mouse maka tampilan gambar akan berubah menjadi terang atau fokus. Membuat efek terang gambar blog merupakan cara terbaik merubah tampilan blog daripada menggunakan efek blur karena ia akan lebih memperjelas tampilan gambar itu sendiri.

Namun, meskipun memberikan efek terang atau fokus gambar blog, ia tidak lebih baik dari mempebesar gambar blog karena adanya tampilan terbatas yang ditampilkan oleh gambar tersebut. Dan detail yang ditampilakn juga kurang terlihat jelas namun berbeda jika memberikan efek Zoom gambar blog seperti yang terlihat pada tampilan gambar berikut ini

Demonya

Foto Rhefky ausdita

Dan jika anda ingin membuat efek terang (fokus) gambar blog berikut caranya ; Masukkan kode berikut kedalam artikel gambat blog anda.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpvjAfxlyOvazMyv6LoGoYGKn1fc2Ez5-L_7SEfl1azlDFgIM5745g_cq8b0Qy6xc5_4UWPyeutSGqSgYfyGBW-5UvHp_ZAeup7WxIbDXL8906Is_hciILrpJU_N1ydpKisxlQBPG2sGi/s320/COWOK+SEDERHANA.gif"style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>

Keterangan.
ganti tex yang berwarna biru dengan link gambar anda..

Okey Sekian. Terimakasih telah berkunjung dan membaca artikel ini, cara membuat efek terang (fokus) gambar blog ..

Cara bemberikan efek membesar (ZOM) gambar di blog

Berikut saya akan memberikan trik untuk memberikan efek yang membesar pada gambar di blog ketika disentuh cursour, trik ini saya dapatkan di salah satu web yang menurut saya cukup keren, nanti aja yea saya kasi link web tempat saya mendapat trik ini,,,,,,

Oke langsung saja ke tutorial cara memberikan efek membesar pada gmbar blog

untuk melihat hasilnya seperti apa

coba sobat arahkan cursor mousnya pada gambar dibawah ini

DEMO

gimana keren kaan

Untuk membuat efek memperbesar gambar blog seperti demo diatas, silahkan ikuti caranya sebagai berikut.

Berikut Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog

Masuk ke akun blogger anda
Pilih menu Template >> Edit Html >> tekan Ctrl+F pada keyboard
Cari kode </head>
Letakkan kode berikut diatas </head>

ini kodenya

<a class="preview" href="Ulr Gambar Besar" title="Judul Gambar"><img alt="gallery thumbnail" height="110" src="Ulr Gambar Besar Tapi Kecil" width="170" /></a>

Keterangan

Ulr Gambar Besar : Ukuran asli dari gambar
Ulr Gambar Besar Tapi Kecil : Ukuran asli dari gambar yang sudah memiliki ukuran kecil karena sudah memiliki skala 110 untuk tinggi gambar dan 170 untuk lebar gambar
height="110" : Ukuran tinggi gambar
width="170" : Ukuran lebar gambar

Oke sob sekian dulu artikel dari say tentang Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog
semoga bermamfaat.. nah seperti tdi saya bilang sya akan kasi link web tempat saya mendapatkan trik
Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog

ini sumbernya http://panduantemplateblog.blogspot.com/2013/02/cara-memberikan-efek-memperbesar-zoom.html

Oke soeb jngan lupa like dan kasi coment dibawah

Belajar ngeblog

Cara Mudah Pasang Gambar Dan Animasi Melayang Di Sudut Blog

Cara Mudah Pasang Gambar Dan Animasi Melayang Di Sudut Blog

Cara Mengganti Icon Kursor Blog Dengan Gambar Animasi

Cara Memasang Permalink Pada Blog

cara membuat tulisan berjalan ( marquee )

cara membuat tulisan berjalan ( marquee )

Cara Membuat Efek Terang (Fokus) Gambar Blog

Cara bemberikan efek membesar (ZOM) gambar di blog

ATIKEL TERKAIT

Artikel Terbaru

Kategori