Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Teks berjalan si Marquee Effects Buat Lengkapi Read More dan Percantik Blog

Maquee Effect atau teks berjalan menjadi materi Panduan Blogger yang sangat menarik. Marqueee Effects merupakan bentuk efek teks berjalan, baik kearah horizontal maupun vertical. Bisa dibentuk dengan KODE html yang teramat sederhana hingga penggunaan javascript untuk menciptakan efek marquee yang lebih komplek dan tentunya dengan hasil yang berbeda pula. Kita akan coba melihat dan membuat marque effect dari mulai yang paling sederhana hingga marquee effect yang sudah dikemas dalam bentuk box guna menampilkan teks yang disertai image.

D E M O


D E M OD E M O

Scroller with a size range

Sebuah auto scroller yang super sederhana dan dapat bekerja sebagai auto scroller berdasarkan jarak (range), namun demikian bisa dimanfaatkan sebagai scroll to top controll dan scroll to bottom controll. Saat difungsikan sebagai scroll to top controll dan scroll to bottom controll, javascript ini amat mempermudah blogger untuk menggunakan. Sedikit akan lebih sulit jika kita menggunakan sebagai auto scroller yang berdasarkan range (jarak menggulung) karena harus melakukan perhitungkan (memperkirakan) titik pemasangan scroller dan titik targetnya.

D E M O

Menggunakan sebagai Scroll to top/bottom controll:

Scrolling with Fade Out Effect

Scrolling with Fade Out Effect menciptakan effect blur pada sisi atas dan sisi bawah scroller ketika dilakukan penggeseran. Effrect ini tercipta karena penggunaan background image transparan di kedua ujung scroller dengan background berbentuk file png.

Untuk menciptaan effect blur secara lebih luas dilakukan dengan melakukan perubahan tinggi background image di ke dua ujung scroller.

Langkah untuk membuat Scrolling with Fade Out Effect :

1. Amankan Template terlebih dahulu! Silahkan caranya lihat di sini.

2. Tetap di Edit HTML kemudian cari KODE ]]></b:skin>.

3. Copy paste KODE CSS di bawah ini dan letakkan persis di atasnya.

KODE CSS Scrolling with Fade Out Effect :

.ScFadeout { 
width:300px;
position:relative;
margin:25px auto 100px auto;
ext-align:left;
border-right:20px solid #333;
background: #999999 url(http://i45.tinypic.com/20p44h.gif);
border-top:1px solid #33CCFF;
border-left: 1px solid #33CCFF;
border-bottom: 1px solid #33CCFF;
}
.artikel {
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #0033FF;
padding:0 10px 50px 10px;
background:url(http://i45.tinypic.com/20p44h.gif);
width:300px;
height:250px;
overflow: auto;
}
.topeffect {
position: absolute;
height: 40px;
width:100%;
top:0; left:0;
background:url(http://i46.tinypic.com/j7gfm9.png);
}
.bottomeffect {
position: absolute;
height: 40px;
width:100%;
bottom:0; left:0;
background:url(http://i50.tinypic.com/2iafvxd.png);
}
.artikel h1 {margin:20px 10px 10px; color:#FF0000;}

4. KLIK Simpan Template.

5. Gunakan KODE HTML berikut di bagian body di antara tag <body> dan tag </body> atau pada saat posting.

xHTML dan Scrolling with Fade Out Effect :

<div class="ScFadeout">
<div class="topeffect"></div>
<div class="bottomeffect"></div>
<div class="artikel">
<h1>Judul Artikel</h1>
<h3>Teks tambahan !</h3>
Tuliskan Teks di sini !
Tuliskan Teks di sini !
Tuliskan Teks di sini !
Tuliskan Teks di sini !
<img class="art" src="Image.jpg" width="260" style="border:10px solid #666666;"/>
</div>
</div>

Catatan :

1. Atur tinggi Scrolling with Fade Out Effect dengan merubah nilai height pada KODE CSS di syntax :

.artikel {
.
.
height:250px;
}

2. Untuk memperluas ruang effect blur di kedua ujung atas dan bawah scroller, harus dilakukan perubahan ukuran gambar (image) background topeffect dan bottom effect. Tentunya ini harus dilakukan dengan melakukan edit ulang pada background gambarnya untuk selanjutnya di upload di image hosting.

3. Setelah background mage diupload, rubah ukuran tinggi (height:40px) pada KODE CSS di bottomeffect dan top effect sesuai tinggi gambar yang baru.
4. Selamat berkarya dan SUXES untuk anda !!

Panduan BloGGeR Cara Membuat DIV Tab View

Tab view sangat tepat digunakan blog yang mempunyai materi posting bervariasi. Tab view tak ubahnya sebuah box menu yang dibagi dalam beberapa tab. Masing-masing tab mempunyai lebar sama dengan box yang digunakan dan hal seperti ini sangat berguna karena setiap tab bisa memanfaatkan lebar kolom secara maksimal. Banyak cara bisa digunakan untuk membuat tab view, namun kali ini kita coba membuat dengan bantuan sebuah javascript yang sangat sederhana namun mampu melakukan dungsinya secara sempurna.

Tab view ini terhitung sangat irit dalam penggunaan KODE CSS ataupun script namun demikian mampu memberikan penampilan yang sangat istimewa. Tentu saja dengan iritnya penggunaan CSS dan script ini akan sangat menguntungkan terhadap stabilitas loading blog.
D E M O

Pretty Simple Tab Navigation

Banyak orang selalu mengatakan; Lihat dulu baru beli ! Prinsip seperti itu kelihatannya sangat tepat untuk Simple Tab ini. Mungkin begitu mendengar atau melihat makna dari kata tersebut yang muncul di benak pikiran adalah sebuah tab yang tak mungkin akan menarik untuk dilihat apalagi digunakan di blog. Oleh karena itu tak perlu basa-basi karena ini bukanlah ajang iklan rokok. Seperti orang bilang "tak kenal maka tak sayang", maka silahkan buka dulu lewat demo ! Tolong setelah membukanya buanglah anggapan bahwa sederhana sama artinya dengan tidak cantik dan menarik !

D E M O

Langkah untuk membuat Simple Tab :

Hidden Menu Tab Menu - Menu Tersembunyi

Meskipun Hidden Tab Menu ini hanya menggunakan KODE CSS dan CSS3, namun ternyata bisa memberikan penampilan yang sangat memuaskan. Sangat kompatible untuk semua browser dan dapat dengan cepat aplikasikan disetiap blog.

D E M O

Rounded Corner with Javascript-1

Menggunakan javascript rounded corners merupakan solusi terakhir untuk membuat rounded corners/border radius yang kompatible di semua browser termasuk Internet Explorer. Sekalipun sebenarnya javascript ini cukup membuat beban loading semakin bertambah, namun inilah satu-satunya cara mengatasi permasalahan kompabilitas border-radius. Jika anda berniat menggunakannya, sebaiknya lakukan cek terlebih dahulu apakah pada saat ini masih diperlukan untuk menggunakannya.

Langkah untuk membuat Rounded Corner with Javascript-1 :

Rounded Corners with Animation Effect.

Rounded Corners with Animation Effect membentuk dua buah box yang memang sebagai pasangan yang tidak terpisahkan. Heading box dan post box yang dibangun secara total dengan KODE CSS. Menjadi lebih eksotis karena box ini mempunyai sisi lengkung di semua ujungnya. Penambahan background image beranimasi gif diharapkan mampu memberi efek postitif pada penampilan sehingga akan tampil lebih cantik,menarik sekaligus atraktif. Rounded Corners with Animation Effect dibuat dengan begitu lengkap sehingga dengan mudah digunakan setiap blogger,bahkan bagi pemula sekalipun.

KLIK DEMO untuk melihat bentuk jadinya :

Langkah untuk membuat Rounded Corners with Animation Effect :
  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Kembali halaman baru akan terbuka,klik "Edit HTML".
  4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
    • Backup/Restore Template » berisi fitur untuk melakukan backup template.
    • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
    • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
  5. Cari KODE ]]></b:skin> pada "box Edit HTML"
  6. Copy kode css di bawah ini dan letakkan di atas ]]></b:skin>
    KODE CSS :
    .b1,.b2,.b3,.b4{font-size:1px;overflow:hidden;display:block;}
    .b1{height:1px;background:magenta;margin:0 5px;}
    .b2{height:1px;background:#FF0000;border-right:2px solid #FF0000;border-left:2px solid #FF0000;margin:0 3px;}
    .b3{height:1px;background:#FF00FF;border-right:2px solid #FF0000;border-left:2px solid #FF0000;margin:0 2px;}
    .b4{height:3px;background:#FF00FF url(https://lh5.googleusercontent.com/-vXpxJojg6sY/T2OEWczwUcI/AAAAAAAAAag/AM8LW_FDxR0/s128/mini-anima-1.gif);border-right:2px solid #FF0000;border-left:2px solid #FF0000;margin:0 1px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);}
    .bgjudul{background:#bb521c url(https://lh3.googleusercontent.com/-SfNm0-XTYIc/T2OC7MuXMaI/AAAAAAAAAaU/qeX58pWOY4g/s128/mini-anima.gif);border-right:1px solid #FF0000;border-left:1px solid #FF0000;opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);}
    .bgposting{background:#bb521c;border-right:1px solid #FF0000;border-left:1px solid #FF0000;}
    .bgjudul div{margin-left:5px;}
    .teksjudul{ font-family:Times New Roman;font-size:18px;font-weight:900;color:#CCFF00;padding:0 15px;}
    .bgjudul:hover{opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);background:#bb521c066;}
    .teksjudul:hover{ color:#00FF00;}
    .posting{padding:15px 8px;background:#bb521c url(https://lh6.googleusercontent.com/-I4jXT-3UIzE/T2OFEwW7CFI/AAAAAAAAAas/Ao2K4KgKrNQ/h50/pink-Vgrad-3x500.png);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;color:#00FFFF;font-weight:normal;}
  7. Klik "Simpan Template (Save Template)".
Gunakan KODE HTML berikut di bagian body.
xHTML :
<div id="boxjudul" style="margin:20px 5px 10px;"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="bgjudul"><div class="teksjudul">Rounded Border Corner with Animation Effect!</div></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div><div id="boxposting" style="margin:10px 5px 20px"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="bgposting"><div class="posting">Letakkan Teks di sini !
Rounded Corners with Animation Effect is designed to fill a gap in modern browser and supported by all browsers.<br/>Currently Firefox,Safari and Internet Explorer(IE) have limited support for the proposed CSS border-corners.<p>We would love to hear your comments on Rounded Corners with Animation Effect.</p><p>Thank's for your visiting our blog!</p><br/>gubhugreyot - bloggerstars-1
</div></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>

Catatan :

Untuk memjadikan Rounded Corners secara permanen bisa langsung menjadi bagian blog secara utuh (tanpa harus selalu memasang kembali xHTML setiap kali posting) maka xHTML harus di simpan dalam ruang EDIT Template di bagian post body

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » Setu   KLIWON,Maret,17,2012

» Happy Blogging - gubhugreyot «

Heading Style with Effect

Heading style with effect tidak hanya dapat digunakan untuk membuat sebuah judul/title sebuah paragraf saja, namun dapat digunakan dan dikembangkan untuk berbagai hal lain dalam blog, seperti misalnya untuk membuat sebuah link, baik saat posting ataupun saat menggunakan gadget. Heading yang sangat berbeda dengan bentuk/tampilan heading pada umumnya ini bertujuan agar membuat blog terlihat berbeda dan lebih indah. Effek yang tercipta dihasilkan melalui css3 transition dan opacity effect. CSS3 lain yang digunakan adalah border-radius yang digunakan untuk membentuk sudut lengkung. Silahkan anda klik link demo di bawah ini untuk mengetahui secara lebih jelas seperti apa sebenarnya yang dimaksud dengan heading style with effect serta kegunaannya.

D E M O

Langkah untuk membuat Heading Style with Effect :

Rainbow Tab »Tabs content CSS3 Cantik & Antik

"Rainbow tabs" hanyalah sebuah istilah sekedar untuk memberi nama tab konten yang kita buat menggunakan css3. Perpindahan tab menggunakan fungsi hover effect. Anda bisa melihat bagimana rainbow tab bekerja. Tabs content ini tak hanya bisa digunakan melalui "Add a Gadget", namun bisa juga anda gunakan di halaman posting.

Raibow tabs merupakan tab dengan efek transparansi dimana untuk menciptakan efek ini digunakan background rgba. Adapun tujuannya selain membuat "warna terlihat lebih mengkilat" juga agar dalam tab bisa ditampilkan sebuah background image yang terlihat secara samar-samar.

D E M O

Kode CSS dan xHTML

Mouse Position Show

Dimana sebenarnya posisi cursor saat tangan menjelajah titik-demi titik halaman blog ? Mouse Position Show akan menolong kamu untuk mengetahuinya!

Mouse position show juga akan sangat menolong ketika blogger sedang membuat desain template atau melakukan perubahan desain dan penataan blog. Dengan mouse position show kita bisa langsung mengetahui posisi serta ukuran setiap ruang, bidang, kolom, border, dan beberapa yang lain berkaitan dengan segala elemen yang ada di blog.

D E M O

Langkah untuk membuat Mouse Position Show :

Hover Tab Image Gallery

Meskipun hanya menggunakan KODE CSS, Hover Tab Image mempunyai tampilan yang sangat menarik. Nilai lebih yang dimiliki tab ini adalah sedikitnya KODE yang digunakan sehingga sangat mempengaruhi kecepatan loadingnya. Untuk menampilkan image/gambar kamu juga tidak perlu susah-susah untuk merubah ukuran gambar karena image akan secara otomatis ditampilkan sesuai ukuran tab. Yang penting bahwa image yang akan ditampilkan harus mempunyai perbandingan ukuran gambar 400 x 230 (lebar:tinggi » pixel). Sangat praktis dan tentu saja mudah untuk membuatnya. O..., ya...Hover Tab Image ini di desain untuk menampilkan 5 buah image. Sangat tepat sekali karena tidak terlalu banyak untuk setiap kali posting. Penasaran untuk melihat seperti apa penampilan Hover Tab Image ? Silahkan lihat melalui DEMO yang sudah tersedia!

D E M O

Langkah untuk membuat Hover Tab Image :

HTML Tags

Mempelajari KODE HTML berarti harus mengenal terlebih dahulu elemen-elemen dasar dalam tags HTMl.


STRUCTUREMETA INFORMATION TEXTLINKIMAGE & OBJECTS LIST
html
head
body
div
span
DOCTYPE
title
link
meta
style
p

h1, h2, h3, h4, h5, and h6

strong
em
abbr
acronym
address
bdo
blockquote
cite
q
code
ins
del
dfn
kbd
pre
samp
var
br
a
base
img
area
map
object
param
ul
ol
li
dl
dt
dd
TABLESFORMS SCRIPTINGPRESENTATIONAL
THE WHOLE SHEBANG
table
tr
td
th
tbody
thead
tfoot
col
colgroup
caption
form
input
textarea
select
option
optgroup
button
label
fieldset
legend
script
noscript
b,
i,
tt,
sub,
sup,
big,
small,
hr
- a -abbr -acronym - address
-area -b -base -bdo -big
-blockquote -body -br -button
-caption -cite -code -col
-colgroup -dd -del -dfn -div
-dl -DOCTYPE -dt -em
-fieldset -form
-h1, h2, h3, h4, h5, and h6
-head -html -hr -i -img -input
-ins -kbd -label -legend
-li -link -map -meta
-noscript -object -ol
-optgroupoption -p -param
-pre -q -samp -script -select
-small -span -strong -style
-sub -sup -table -tbody -td
-textarea -tfoot -th
-thead -title -tr -tt -ul -var

Semoga bermanfaat !

Cara Menambah Gadget - Widget Blogger

Penambahan "gadget" merupakan salah satu solusi alternatif yang bisa dilakukan ketika blogger ingin menambahkan beberapa teks, kode html (kode css, javascript dan xHTML) yang dimaksudkan untuk modifikasi blog, membuat widget baru atau mungkin menampilkan sebuah image. Selain itu tambah gadget (Add a Gadget) juga menjadi pilihan alternatif bagi blogger untuk menyimpan javascript dan kode css karena saat ini sangat sulit menemukan file hosting gratis untuk kode css dan javascript selain google code dan google sites.

Cara melakukan penambahan gadget :

Cara Mengamankan/Back-Up Template di Halaman Edit HTML

Mengamankan template merupakan prosedur standar yang yang harus dilakukan blogger ketika melakukan langkah perubahan terhadap desain blog, baik berupa penambahan atau pengurangan KODE CSS, Javascript dan KODE HTML lain. Langkah pengamanan template sebuah blog ini dimaksudkan untuk menjaga seandainya terjadi kegagalan pada saat dilakukan modifikasi terhadap template. Dengan diamankannya desain awal blog, maka pengguna blog tidak akan kesulitan untuk mengembalikan lagi desain blog ke bentuk awal sebelum dilakukan perubahan.
Langkah yang harus di tempuh untuk mengamankan template adalah sebagai berikut :
div>

Popup Text Box

Fixed Popup Text Box pada prinsipnya adalah sama dengan CSS Popup Tooltip di posting sebelumnya. Perbedaan besarnya adalah pada posisi pemunculan text box. Text box akan terlihat tepat ditengah halaman ketika link di sorot (cursor di atas link). Beberapa hal penting mungkin saja ditampilkan dengan cara seperti ini, oleh karena itu silahkan ikuti panduan cara membuatnya.

Create CSS Popup Tooltip

Popup Tooltip yang dibangun murni melaui kode CSS berfungsi sebagai box untuk menyampaikan hal khusus yang dipandang menarik dan tidak ditampilkan secara langsung dalam posting tetapi berkaitan dengan materi posting yang disampaikan. Selain berisikan teks, popup tooltip juga di selipi image/gambar asalkan tidak terlalu besar.

D E M O

Cara membuat CSS Popup Tooltip :

Cara Membuat Popup Window Script: Panduan BloGGeR Informasi Alternatif

Panduan BloGGeR atau Tutorial BloGGeR tentang "PopUp Window" dimaksudkan untuk bisa memberikan pilihan alternatif penyampaian informasi oleh blogger dalam bentuk yang berbeda. Popup Window secara sederhana bisa digambarkan sebagai window dalam ukuran lebih kecil (karena bisa dibuat menjadi sangat kecil) yang nantinya akan muncul di window (jendela/halaman) yang sedang di buka.

D E M O

Langkah pembuatan Popup Window :

Simple Javascript Pre Loader Blog

Loading Blog Script dapat dipergunakan secara permanen di dalam web atau blog sehinngga ketika blog mulai dibuka maka image loding akan muncul sebagai pertanda bahwa loading sedang berjalan. Image yang disertakan dapat diganti dengan image yang lain yang lebih menarik sehingga penampilan blog bertambah keren.

D E M O

Cara membuat Loading Blog :

Disable Right Click

Javascript disable Right Click berfungsi untuk "mematikan fungsi klik kanan mouse" sehingga keseluruhan fungsi yang biasa dilakukan melalui "klik kanan" mouse sama sekali tak dapat bekerja sebagaimana mestinya, sehingga ketika anda mencobanya maka monitor akan diam seribu bahasa tak memberikan satupun informasi yang diharapkan. Bagi beberapa bloogger trik ini biasa digunakan untuk "mempersulit pengunjung melakukan copy paste atau open source code". Untuk membuatnya anda harus menyimpan javascriptnya di antara tag pembuka dan penutup head, seperti misalnya di bawah <head> ,di atas </head> atau di bawah ]]></b:skin>

D E M O

Page Peel Animation

Sangat jarang sekali blog yang menggunakan Page peel effectsebagai penambah daya tarik blog. Page peel effect biasanya ditempatkan di ujung kanan atau kiri atas halaman blog. Dibalik lembar page peel yang dapat tersingkap (di buka) dimanfaatkan dengan diisi informasi atau image yang membuat pembaca blog penasaran sehingga tertarik untuk membukanya. Di dalamya juga disertakan sebuah link dalam bentuk link html atau yang lain.

Memebuat Page peel effect tidaklah sesulit yang di bayangkan, hanya saja Page peel dengan luas yang cukup besar membutuhkan gambar yang cukup besar pula sehingga tentu saja beban blog bertambah besar. Untuk menyiasati hal ini gunakanlah gambar/image yang tidak terlalu besar dan pilihlah file image yang sesuai (gif, png atau jpg) sehingga muatan gambar juga menjadi entheng.

Untuk membuatnya kita akan gunakan JQery-Latest.js, KODE CSS dan sedikit javascript tambahan sebagai pengembangan fungsi jquery-latest.js.

O..., ya..., kamu bisa juga melihat bagaimana sebenarnya yang dimaksud dengan Page peel melalui DEMO yang sudah saya sediakan.

Langkah pembuatan Page peel Animation:

1. Amankan template terlebih dahulu dengan cara:

Login ke Blogger --> Tata Letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. Tetap di Edit HTML. Cari KODE ]]></b:skin> (kode ini ada di atas KODE </head>) kemudian letakkan KODE CSS di atasnya sedang jQuery-latest.js dan javascript pendukung persis di bawahnya.

KODE CSS

#pagepeel {
position: relative;
right: 0; top: 0;
float: right;
}
#pagepeel img {
background:url(http://i49.tinypic.com/ev8j09.gif) no-repeat;
border:0;
width: 100px; height: 100px;
z-index: 99;
position: absolute;
right: 0; top:0;
-ms-interpolation-mode: bicubic;
}
#pagepeel .msg_block {
width: 100px; height: 100px;
overflow: hidden;
position: absolute;
right: 0; top:0;
background: url(http://i49.tinypic.com/2mr8gly.jpg) no-repeat right top;
}

jQuery-latest.js dan javascript

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#pagepeel").hover(function() {
$("#pagepeel img , .msg_block").stop()
.animate({
width: '487px',
height: '487px'
}, 2000);
} , function() {
$("#pagepeel img").stop()
.animate({
width: '100px',
height: '100px'
}, 2220);
$(".msg_block").stop()
.animate({
width: '100px',
height: '100px'
}, 2200);
});
});
</script>

3. Gunakan KODE HTML berikut di bagian body di antara tag <body> dan tag </body> (di bawah <body>).

x HTML

<div id="pagepeel">
<a href="http://gubhugreyot.blogspot.com" target="_blank"><img src="http://i48.tinypic.com/2prsb41.png" alt="" border="0"/></a>
<div class="msg_block">
</div>

Catatan :

1. Page peel ini disebuat Page Peel Animation karena menggunakan image dengan animasi gif untuk menciptakan animasi gerak pada page peel.

2. height dan width pada javascript (487px) menyatakan panjang dan lebar page peel yang dapat di buka.

width dan height yang lain untuk menciptakan effect lipat pada halaman yang paling ujung.

3. Modifikasi image yang ada untuk mendapatkan page peel yang sesuai dengan blog kamu!

Floating Box with Opacity Effect: Sebuah Cara Memperindah Blog

Panduan BloGGeR dan Tutorial BloGGeR yang sangat spesial untuk membangun dan membuat blog di BlogSPOT sampeyan semua semakin cantik dan pastinya akan membuat banyak pengunjung blog penasaran. Floating Transpaerent Box di desain dengan hanya sedikit javascript tapi mampu memberikan sebuah penampilan berbeda. Sampeyan bisa tambahkan foto ganteng sampeyan atau foto cantik sampeyan biar pada "dlongap-dlongop" dan tak beranjak ke blog lain. Atau mungkin sampeyan mau tawarkan iklan di sini. Iklan pabrik songkel gigi misalnya ... Ha ..... Hooo ... jangan ketawa .... wong aku sendiri jadi ketawa kok .... he ....ha ....ha .... Onde ... Lihat saja demonya dulu, baru nanti pikir mo buat apa.

D E M O

Langkah pembuatan Floating Box with Opacity Effect :

Cara Buat JQuery Floating Menu

Kalau diposting sebelumya sudah kita sajikan floating menu berbeban entheng, untuk posting kali ini kita akan coba buat yang sedikit lebih kompleks. JQuery Floating Menu masih memanfaatkan jQuery.1.3.2.js dengan pertimbangan supaya tidak terlalu banyak jenis javascript harus kita tempatkan di blog karena tentu saja akan membuat blog semakin bertambah berat. Untuk membangun menu ini selain jQuery kita masih menambahkan sedikit CSS dan javascript pendukung. Seperti biasanya, KODE CSS diletakkan di atas KODE ]]><b/:skin> sedang jQuery.1.3.2.js diletakkan di bawah KODE </head>.

Cari juga KODE </body>, kemudian letakkan javascript pendukung tepat di atasnya.

Oke..., sebelum mencobanya kamu boleh melihat hasil yang telah jadi dengan membuka di DEMO. Jangan lupa setelah semua KODE CSS, jQuery dan javascript ditempatkan dengan teliti di template, silahkan simpan kode dan script tersebut dengan KLIK Simpan Template. Sekali lagi sebelum semua dimulai jangan lupa untuk mengamankan template terlebih dahulu (backup template) dengan cara

Login di Blogger --> Tata Letak --> Edit HTML

--> KLIK Download Template Lengkap --> Simpan File di Folder PC


D E M O

CSS Floating Menu plus css3 Effects

CSS Floating Menu ini telah dikembangkan dengan melibatkan kode css3 transition dan css3 transformation sehingga terlihat jauh lebih dinamis dibandingkan apbila kita hanya menggunakan kode css saja. CSS3 transition & css3 transformation difungsikan untuk menciptakan gerak animatif saat pemunculan menu sekaligus memberi efek animatif saat cursor menyentuh link menu. Penggunaan scroller dimaksudkan agar menu punya kapasitas daya tampung lebih (sebanyak anda suka).

D E M O

Cara membuat :
  1. Login ke Blogger.
  2. Setelah Dasbor (Dasboard) telihat, cari dan klik "Design (Rancangan)".
  3. Halaman baru kembali akan terlihat. Klik "Edit HTML".
  4. Lakukan "Backup Template".
  5. Cari kode "]]></b:skin>"
  6. Copy dan pastekan kode css di atas kode "]]></b:skin>"
  7. Klik "Simpan Template (Save Template)".
  8. Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget" yang terdapat di "Elemen Laman (Page Elemen)".
  9. Selesai (Finish).

No Select Text

No Select Text dimaksudkan untuk membuat sebuah text atau kumpulan teks dalam blog atau website tidak dapat dicopy atau dipindahkan oleh siapapun ke tempat lain. Penggunaan fungsi ini bermanfaat di saat sesuatu teks yang kita postingkan tidak kita kehendaki untuk diperbanyak atau disalin oleh orang lain demi alasan atau kepentingan tertentu. No Select Text dapat digunakan untuk seluruh bagian blog atau hanya satu bagian kecil tertentu (alinea, kalimat atau bahkan kata dan font) karena dilengkapi dengan sebuah "id" yang ditanamkan pada tag tertentu. Anda bisa menggunakan "id" ini dalam tag "DIV", tag "p" atau tag "span". Dengan keleluasaan penggunaan seperti ini tentunya akan memberi nilai lebih bagi penggunanya.

D E M O

Motion Image Gallery

Gambar/image akan mengalir dari arah kanan ke kiri atau sebaliknya dari kiri ke kanan ketika mouse di arahkan di atas image. Kecepatan gerak Motion Image Gallery dapat diatur dengan merubah variable kecepatannya.

Langkah pengerjaan Motion Image Gallery :

1. Download motiongallery.js dan upload di file hosting supaya template menjadi lebih ringkas.

DOWNLOAD motiongallery.js.

2. Gunakan link hasil upload motiongallery.js membentuk KODE :

<script type="text/javascript" src="http://..../..../motiongallery.js"></script>

3. Login di Blogger --> Tata Letak --> Edit HTML.

4. Cari KODE ]]></b:skin> kemudian simpan KODE CSS persis di atasnya, sedang motiongallery.js di sebelah bawahnya.

5. Langkah terakhir KLIK Simpan Template.

KODE CSS

#box{
border:10px solid red;
width:500px;
background:url(http://i48.tinypic.com/2d6l4bc.jpg);
}
#boxdalam {
margin:10px 0;
position:relative;
overflow:hidden;
width: 460px;
height: 390px;
}
#boxdalam a img { padding:20px; margin:0 6px;
border: 8px solid #fff;
}
#boxdalam a:hover img {
border: 8px solid #000;
}
#statusdiv {
font-size:16px;
font-family: Verdana;
font-weight: bolder;
background: #3333FF;
border: 3px solid #99CCFF;
padding: 4px;
position: absolute;
left: -300px;
visibility: hidden;
}
#boxdalam a:hover {
color:green;
}

6. Gunakan KODE HTML di bawah ini di bagian body di antara tag <body> dan tag </body> atau pada saat membuat posting.

xHTML

<div id="box"><div id="boxdalam">
<div id="gallery" style="position:absolute;left:0;top:0;white-space: nowrap;">


<nobr id="trueContainer"><a href="javascript:enlargeimage('Link-1')"><img src="image-1.jpg" border=1></a> <a href="javascript:enlargeimage('Link-2', 300, 300)"><img src="image-2.jpg" border=1></a> <a href="Link-3"><img src="image-3.jpg" border=1></a> <a href="Link-4"><img src="image-4.jpg" border=1></a> <a href="Link-5"><img src="image-5.jpg" border=1></a> <a href="Link-6"><img src="image-6.jpg" border=1></a></nobr>


</div>
</div></div>

Catatan :

1. Image yang di gunakan di motion image gallery berukuran width=400px dan height=332px.
2. Jika ingin menambah jumlah image langsung saja tambahkan KODE seperti halnya <a href="Link-6"><img src="image-7.jpg" border=1></a>
3. Link-1 s/d Link-6 merupakan Link yang berkaitan dengan image yang ditampilkan.
4. image-1.jpg s/d image-6.jpg adalah URL/Link image yang akan ditampilkan.
5. Apabila ingin merubah ukuran tampilan gambar, image maka beberapa variable pada KODE CSS harus dilakukan perubahan.
6. Di bawah ini tersedia beberapa Link gambar yang bisa digunakan untuk mencoba :

- http://img.theomegaproject.org/thumbs/2009/12/13.jpg
- http://img.theomegaproject.org/thumbs/2009/12/14.jpg
- http://img.theomegaproject.org/thumbs/2009/12/68.jpg
- http://img.theomegaproject.org/thumbs/2009/12/118.jpg
- http://img.theomegaproject.org/thumbs/2009/12/101.jpg
- http://img.theomegaproject.org/thumbs/2009/12/114.jpg


Semoga berhasil dengan baik dan bermanfaat untuk blog kamu !!!

onMouseover Scrollbar Effect Plus: Panduan BloGGeR Cara Membuat Scroller

OnMouseover Scrollbar Effect Plus membuat komponen warna scrollbar berubah ketika mouse berada di atasnya. Pada saat bersamaan effect transparansi yang disertakan membuat semua yang berada di dalam scrollbar terlihat dengan sempurna karena hover yang disertakan melibatkan effect opacity. Menjadi sangat menarik karena semuanya seperti tersembul hanya pada saat orang tertarik untuk mengetahui apa saja yang tersimpan.

Langkah pembuatan onMouseover Scrollbar Effect Plus

Amankan template sebelum memulai pengerjaan dengan cara :

  1. Login Blogger --> Tata Letak --> Edit HTML -->
  2. Download Template Lengkap --> Simpan di Folder PC
  3. Lanjutkan dengan mencari KODE ]]></b:skin> dan KODE
    </body>.
  4. Copy paste CSS dan javascript : Simpan CSS di atas KODE ]]></b:skin> dan Javascript di atas KODE </body>
  5. .
  6. KLIK Simpan Template untuk menyudahi proses penyimpanan KODE dan script.

KODE CSS onMouseover Scrollbar Effect Plus

Onmouseover Image Slider: Panduan BloGGeR Serial Cara Membuat Image Gallery

Panduan BloGGeR dan Tutorial BloGGeR Image Gallery.

Menggunakan image gallery sebagai box untuk menampilkan foto atau gambar menjadi sangat penting sekaligus bermanfaat karena ruang dalam blog menjadi tidak berjejalan. Penggunaan slider sebagai sebuah gallery menjadi sangat jamak karena tidak terlalu banyak penambahan kode CSS ataupun javascript. Kalau kita perhatikan dengan seksama, pada saat ini hampir semua jaringan persuratkabaran, televisi dan radio pastilah menggunakan website sebagai satu media alternatif untuk lebih mendekatkan diri ke tengah masyarakat. Disitulah kita bisa melihat bahwa hampir keseluruhannya menggunakan slider sebagai fungsi penampil gambar atau foto bahkan sekaligus kepala beritanya. Bagaimana sebenarnya slider ini dibuat? Dengan Penggabungan javascript dan sedikit CSS, ditanggung kamupun akan memiliki sebuah slider cantik yang tak kalah menarik dari banyak yang telah kamu lihat.

Langkah pembuatan Onmouseover Image Slider :

Flashing Border Script

Seperti lampu Natal yang berkelap-kelip, yang dimaksud dengan flashing border di sini juga mampu berkedip seperti halnya lampu natal. Dua warna ternyata sudah mampu memberikan penampilan berbeda dan bisa membuat pengunjung penasaran. Menampilkan border dengan 2 warna berbeda yang terlihat secara bergantian dilakukan dengan menempatkan sebuah javascript di dalam template.

D E M O

Cara Membuat Flashing Border

Document Text Sizer-2 » Adding CSS3 on Text Sizer

Sebenaranya Document Text Sizer-2 mempunyai fungsi yang sama dengan Document Text Sizer-1. Jika Document Text Sizer-1 bisa merubah ukuran teks di seluruh blog, Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya seluruh bagian text sizer akan terlihat secara penuh sekaligus transparansi juga hilang. Efek transparansi dicipatakan melalui opacity property sedang efek animasi "muncul dan hilangnya" sebagian Text Sizer Controll dikendalikan dengan css3 transition dan margin.

D E M O

Javascript dan kode CSS di bawah ini sudah disertai dengan posisi peletakkan kode di template. Perhatikan teks yang berkedip! Kode tersebut yang harus dicari dan kode CSS serta javascript disimpan dalam posisi seperti ini.

Document Text Sizer-1

Rasa syukur mestinya harus selalu kita panjatkan kepada Tuhan yang maha mengasihi karena hingga detik ini kamu masih dikarunia mata yang sehat. Tapi pernahkah kamu berpikir bahwa beberapa di antara kita banyak juga yang mempunyai kemampuan melihat tidak lagi normal. Terlebih para orang tua yang sekalipun sudah pakai kacamata tebal tapi terasa masih susah juga untuk meniti huruf demi huruf. Document Text Sizer merupakan satu fungsi layanan bagi mereka yang kesulitan untuk membaca huruf-huruf dengan ukuran kecil. Kemampuannya untuk memperbesar teks dengan beberapa variasi ukuran pastilah akan sangat menolong.Sebelum mencoba , kamu bisa melihatnya dengan KLIK DEMO dan melihat bagaimana semuanya bekerja.

D E M O

Cara membuat Document Text Sizer-1 :

Snow Effects

Berbeda dengan Money Rain Effects yang harus menggunakan image untuk menciptakan sebuah effek, Snow Effects mampu menciptakan efek hujan salju tanpa harus menambahkan gambar/image. Efek ini benar-benar murni menggunakan javascript. Seperti apa tampilan sebuah blog dengan Snow Effect di dalamnya ? KLIK DEMO untuk melihat hasilnya!

D E M O

Cara membuat Snow Effects :

Money Rain Effects

Hujan uang ? Siapa nggak suka?! Ada pepatah mengatakan "Lebih baik hujan uang di negeri sendiri daripada hujan batu di negeri orang (kepala bejol-benjol, lho!). Ini pepatah baru yang tentu saja semua orang suka. Kamu pingin pembaca blog kamu tambah kerasan karena di blog terjadi hujan uang?! Lho ini benar-benar nyata, bung! Klo nggak percaya buka saja sendiri (KLIK DEMO!).

D E M O

Membuat background body dengan javascript

Dengan javascript sederhana ini sebuah background image yang baru akan menghiasi blog anda. Yang perlu diperhatikan adalah memilih background yang tepat, baik warna maupun teksturnya. Penyediaan dua buah javascript pada tutorial ini dikarenakan ada perbedaan kode yang digunakan di "Template Tata Letak" dan "Blogger Template Designer".

D E M O

Cara menggunakan javascript untuk membuat bg body:

Star Effects

Kalau anda mengamati blog ini, akan terlihat bintang-bintang bertebaran menghiasi latar blog yang berupa alam di temaram senja. Cukup dengan copy paste javascript di bawah ini dan simpan di bagian body di atas KODE </body> (Maaf, udah ganti background ma javascriptnya dah terhapus!)

Simple Ticker: Cara Membuat dan Memasang Simple Ticker di Blog

Simple Ticker merupakan sebuah ticker yang dibangun menggunakan jquery/1.3.2/jquery.min.js dan sedikit CSS serta javascript. Penggunaan jQuery.1.3.2.min.js menjadikan ticker ini layak dipertimbangkan untuk dibuat sebagai salah satu pelengkap blog karena jQuery.1.3.2.min.js mempunyai kompabilitas tinggi dan sangat umum digunakan pada web ataupun blog.
Silahkan KLIK DEMO untuk melihat Simple Ticker.

D E M O

Tabs with Opacity Effects

Tabs with opacity Effects merupakan sebuah tab multi fungsi yang bisa digunakan untuk melakukan posting dengan muatan teks, gambar ataupun KODE HTML. Penampilannya yang exotic tentunya akan memberikan citra lebih bagi penampilan sebuah web atau blog. Kamu bisa melihat penampilannya dengan KLIK DEMO.

D e m o :

Silahkan buka demonya melalui link berikut. Dalam demo tidak dipergunakan background image seperti dalam kode css di bawah atau seperti yang terlihat di screenshoot, namun hanya menggunakan background color.


Cara membuat Auto Hide Box :

Copy dan simpan KODE CSS dan Javscript berikut di bagian head di antara tag <head> dan tag </head>. Kode css bisa disimpan di atas KODE ]]></b:skin> dan javascript di bawah kode <head> kemudian gunakan KODE HTML di bagian body di antara tag <body> dan tag </body> atau pada saat posting. Jika bog anda sudah menggunakan jQuery 1.3.2 atau versi yang lebih baru silahkan gunakan javascriptnya saja.

Bullet Image Link Hover

Apabila biasanya setiap list hanya menggunakan style type circle, disc, square, huruf dan angka, melalui javascript dan CSS di bawah, maka style type list akan dengan mudah kita rubah menjadi berbentuk gambar. Satu yang menjadi kelebihan penggunaan fungsi script ini adalah setiap list dapat menggunakan gambar yang berbeda diseuaikan dengan item apa yang akan disampaikan pada setiap listnya. KLIK DEMO untuk melihat bentuk tampilan Bullet Image Link Hover!

D E M O

Cara membuat Auto Hide Box :

Autohide Box

Auto hide boxs berfungsi untuk menyampaikan pesan ataupun konten lain yang berupa teks dan gambar yang hanya muncul di halaman blog pada saat blog mulai dibuka. Durasi kemunculan box bisa disesuaikan dengan kebutuhan dan keinginan blogger yang disesuaikan dengan seberapa penting pesan atau iklan yang ingin ditampilkan dan diatur melalui javascript. Menggunakan jQuery.1.3.2.min.js untuk fungsi ini tidak akan merugikan buat pengguna karena biasanya hampir semua blogger pasti menggunakannya untuk beberapa fungsi yang lain. Untuk melihat bagaimana Auto Hide Box bekerja, silahkan KLIK DEMO.
D E M O

Head Title Animation

Head title animation bisa diisi dengan kata-kata sambutan atau teks lain yang berkaitan dengan blog. Animasi teks yang akan terlihat di address bar ini sekalipun sederhana namun mampu memberikan penampilan berbeda yang membuat blog semakin menarik. Letakkan dan simpan script berikut di bagian head di antara tag <head> dan tag </head>

Cara menggunakan Original Size Image on Mouseover :

Copy text to clipboard

Script ini digunakan untuk menciptakan fungsi copy text to clipboard dan hanya kompatibee di Internet Explorer. Untuk menggunakannya, silahkan simpan script berikut ini di bagian head di antara tag <head> dan tag </head>
Javascript :
<script>
bBool=false
var copiedtext=""
var tempstore=""
function initiatecopy() {
bBool=true;
}
function copyit() {
if (bBool) {
tempstore=copiedtext

document.execCommand("Copy")
copiedtext=window.clipboardData.getData("Text");
if (tempstore!=copiedtext) {
alert(copiedtext);
}
bBool=false;
}
}
document.onselectionchange = initiatecopy

document.onmouseup = copyit
</script>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:



Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

Rahasia Mempercepat Loading Blog

Mestikah pameo lebih cepat lebih baik harus menjadi slogan dan keharusan yang harus dipegang teguh para blogger? Hiii...hiii !!! Tentu saja, harus ! Kinerja blogger bukanlah seperti orang hamil yang selalu harus "alon-alon waton kelakon". Cepat, cerdas, tangkas dan .... Tentu saja menghasilkan produk berkualitas dengan daya serap pasar yang tinggi. Hanya satu rahasianya! Kwalitas bisa dipertanggung jawabkan dan ... ini yang sangat penting.... Loading blog prima alias cepat bisa di akses dan GPL (gak pakai lama loadingnya). Ha...ha... !!! kendala yang tidak gampang diatasi dan menjadi problem bagi semua. Jangan kuwatir! Beberapa tips ini mungkin bisa gunakan bersama :

1. Buat seringkas mungkin CSS template kamu.
2. Lakukan Compress CSS di layanan compress CSS gratis bila nggak mampu melakukannya sendiri.
3. Jangan jejali posting dan template dengan gambar/image yang berbeban terlalu besar.
4. Gunakan setiap KODE dan script se-efektif mungkin.
5. Kalau memungkinkan buang semua spasi pada code dan script yang digunakan di blog.
6. Gunakan file dalam bentuk link untuk setiap contoh/demo tutorial yang menggunakan terlalu banyak kode.
7. Jangan pernah memaksakan sesuatu yang baru harus menjadi tampilan blog supaya tampil lebih atraktif atau gaya karena telalu banyak gaya bisa berakibat loading megal-megol kaya' pantat sampeyan.
9. Jangan pernah berpikir bahwa indah dalam penataan dan penggunaan code/script itu selalu indah indah untuk blog.
10. Pilih file image/gambar sesuai dengan spesifikasi yang berkaitan dengan loading(gif, png, jpg atau yang lain).
11. Selalu upload dan gunakan image di blogger, picasa atau semua yang masih anak cucunya google.
12. Buat 1 hingga maksimal 5 posting yang ada di halaman utama (home page).
13. Jangan pernah beranggapan bahwa di setiap tempat mempunyai kecepatan akses dan loading seperti di rumah sendiri(tentu saja klo di tempat kamu lebih cepat dari setan).

Da... dah... dah...! Yang lain pikir sendiri !!! he ... he...he...!!!!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:



Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

Rollover Horizontal List

Jika pada Rollover List, kode css membentuk sebuah daftar secara vertical, melalui horizontal rollover list ini dapat dibuat sebuah gabungan list dalam bentuk horizontal dan vertical.

Horizontal List


Seperti bentuk list yang lain, horizontal list hanya berbeda karena list tersusun dalam deret horizontal, dimana dalam satu deret/baris bisa terdiri dari beberapa buah list. Anda bisa memanfaatkannya untuk memasang link, baik berupa lin menu ataupun link yang lain. Untuk menambah link, anda perlu membuat list baru mengikuti list yang sudah ada. Tambahkan tag "a" serta beberapa variable kelengkapannya agar lebih maksimal dalam penggunaan.

Rollover List

Rollover List merupakan sebuah variasi dari css list yang didesain untuk mendapatkan sebuah bentuk list dengan penampilan baru yang menjadi sangat berbeda dari list apa adanya yang menjadi bawaan sebuah template. Tentu saja penampilan baru ini sengaja diciptakan untuk memberi penampilan yang lebih "modis dan bergaya" sehingga penampilan blogpun akan semakin terlihat atraktif dan menarik. Cukup sederhana cara membuatnya tetapi mampu memberikan penampilan baru yang sungguh jauh berbeda.

Posting KODE HTML Menggunakan KODE pre

Posting KODE HTML akan lebih mudah dan lebih bagus apabila kita menggunakan bantuan fungsi <pre> . Melalui penambahan KODE CSS yang melibatkan fungsi KODE tersebut di atas maka penataan dan pengaturan spasi posting dalam KODE HTML juga dengan sangat mudah dapat kita atur. Contoh yang sederhana adalah apabila kita ingin mengatur beberapa KODE baik dalam CSS, script ataupun KODE html supaya lebih menjorok ke bagian dalam supaya pembaca blog lebih mudah memahami batas pembuka ataupun penutup dokumen seperti halnya tag <div> dan tag </div> ataupun misalnya tag <li> dengan tag </li> dan yang paling kita rasakan pentingnya adalah saat posting yang melibatkan syntax pada KODE CSS. Seperti misalnya :

body{
        background: #fff url(image.jpg);
        width:600px;
        font:12px;
        font-family:Arial;
        color: #000;
}

Dengan menampilkan kode dalam bentuk seperti di atas, maka pembaca blog dengan mudah akan dapat membaca dan memahami dimana sebuah awal dan akhir dokumen yang kita tuliskan. Akan sangat berbeda apabila dokumen HTML yang kita tuliskan semua dimulai dari tepi halaman, karena tidak akan terlihat pertanda dokumen dimulai dan kapan dokumen berakhir.
Coba bandingkan dengan yang si bawayh ibi dimana posting kode HTML tanpa menggunakan "pre":
body{
background: #fff url(image.jpg);
width:600px;
font:12px;
font-family:Arial;
color: #000;
}

Horizontal Sliding Menu - Simple Larva Menu

Horizontal Sliding Menu atau simple larva menu merupakan sebuah slide menu horizontal yang terbangun dari penggabungan kinerja CSS dan javascript. Untuk sebuah slide menu, dengan penggunaan kode css dan javascript sesederhana ini menjadi sangat menarik dan ditanggung tidak akan membebani loading blog. Penekanan akan loading blog menjadi sangat perlu karena akan menjadi sangat fatal pengaruhnya apabila blog menggunakan terlalu banyak KODE dengan muatan 'nggedabyah', maka semakin lama dengan intensifnya posting ditanggung beban yang harus ditanggung saat loading menjadi semakin bertambah besar yang menjadikan loading menjadi sangat lambat. Loading yang sangat lambat tentunya akan sangat berpengaruh terhadap intensitas pembaca blog untuk mampir menikmati sajian yang dengan susah payah sudah kita postingkan. Anda tinggal menyimpan KODE CSS dan javascript di bagian head dan merubah xHTML untuk slide menu sesuai kebutuhan posting blog kemudian menyimpannya di bagian body atau bisa dilakukan dengan menyimpannya di Edit HTML -> Elemen Laman -> Tambah Gadget -> HTML/Javascript. Mungkin anda tertarik untuk melihatnya terlebih dahulu sebelum menggunakan Horizontal Sliding Menu ini ? Silahkan KLIK DEMO untuk melihatnya! (maaf masih dibuat karena demo yang lama udah di banned).

D E M O

List Dua Kolom

List 2 (dua) kolom merupakan sebuah upaya untuk menciptakan effisiensi ruang, sehingga jika biasanya dalam satu ruang hanya ada satu kolom list, dengan metoda ini maka kita bisa memaksimalkan daya tampung sebuah ruang blog menjadi terbagi dalam 2 buah kolom. Tentu saja untuk memaksimalkan upaya ini teks setiap list haruslah dibuat sependek mungkin sesuai ruang yang tersedia. Bentuk List 2 kolom adalah seperti di bawah ini:

D E M O:

Scroll box with transparency effect

Scroll box dengan berbagai effect sebenarnya hanyalah sebuah gaya yang diciptakan untuk mempercantik blog yang diharapkan mampu menambah daya tarik sehingga orang ataupun pembaca blog akan merasa terkesan dan mungkin akan menumbuhkan sebuah rasa penasaran serta keinginan untuk mengetahui lebih dekat lagi blog yang saat itu sempat jadi persinggahannya ketika menelusuri padang belantara internet. Tidak akan merugikan blogger karena KODE yang dipergunakan tidaklah terlalu banyak sehingga loading blog relatif tidak terpengaruh. Bila kamu sudah membuat scroll box seperti posting sebelum ini, maka tinggal menambahkan beberapa KODE CSS untuk mendapatkan sebuah scroll box dengan efek transparansi. Kalau kamu penasaran bagaimana bentuk jadinya, silahkan lihat di bawah ini!

D E M O

Scroll box dengan berbagai effect sebenarnya hanyalah sebuah gaya yang diciptakan untuk mempercantik blog yang diharapkan mampu menambah daya tarik sehingga orang ataupun pembaca blog akan merasa terkesan dan mungkin akan menumbuhkan sebuah rasa penasaran serta keinginan untuk mengetahui lebih dekat lagi blog yang saat itu sempat jadi persinggahannya ketika menelusuri padang belantara internet. Tidak akan merugikan blogger karena KODE yang dipergunakan tidaklah terlalu banyak sehingga loading blog relatif tidak terpengaruh. Bila kamu sudah membuat scroll box seperti posting sebelum ini, maka tinggal menambahkan beberapa KODE CSS untuk mendapatkan sebuah scroll box dengan efek transparansi.
Scroll box dengan berbagai effect sebenarnya hanyalah sebuah gaya yang diciptakan untuk mempercantik blog yang diharapkan mampu menambah daya tarik sehingga orang ataupun pembaca blog akan merasa terkesan dan mungkin akan menumbuhkan sebuah rasa penasaran serta keinginan untuk mengetahui lebih dekat lagi blog yang saat itu sempat jadi persinggahannya ketika menelusuri padang belantara internet. Tidak akan merugikan blogger karena KODE yang dipergunakan tidaklah terlalu banyak sehingga loading blog relatif tidak terpengaruh. Bila kamu sudah membuat scroll box seperti posting sebelum ini, maka tinggal menambahkan beberapa KODE CSS untuk mendapatkan sebuah scroll box dengan efek transparansi.

Kode CSS :
.GRboksposting{
        width:410px; /* lebar boks luar dg background image*/
        height:400px; /* tinggi boks luar */
        padding:0; /* padding boks luar */
        border-radius:5px; /* sudut lengkung rounded corners/border-radius */
        border:2px solid #888; /* border */
        margin:20px 0; /* margin atas-bawah=20px, kanan-kiri=0 */
        background:url(https://lh4.googleusercontent.com/-KwLIFcTlcVg/T2kBa2f7XhI/AAAAAAAAAdo/pGlGx3KDWiI/h300/GRcantik-bgTransparentBox.jpg) top center no-repeat; /* gunakan background image sesuai dengan ukuran boks luar */
        background-size:410px auto; /* setting lebar background agar sama dengan lebar boks luar */
}
.GRtransparentbox{ 
        max-height:355px; /* ukuran tinggi bisa disesuaikan dengan height pada .GRboksposting */ 
        margin:5px; /* jarak antara boks dalam dan boks luar */
        background:rgba(0,0,0,0.7); /* background rgba untuk transparency effect */
        border:2px solid #333; /* tebal, jenis dan warna border*/
        overflow:scroll; /* IE */
        overflow:auto;
        font-size:11px; /* ukuran font */
        color:#eee; /* warna font */
        font-family:Verdana; /* jenis font */
        font-weight:500; /* atau bisa juga bold atau bolder */
        padding:15px 10px; /* atas/bawah=15px, kanan/kiri=10px */
}

xHTML :
<>
<>
Tuliskan teks/konten di sini!
</div>
</div>

Cara membuat scroll box dg transparency effect :
  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Kembali halaman baru akan terbuka, klik "Edit HTML".
  4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
    • Backup/Restore Template » berisi fitur untuk melakukan backup template.
      Lakukan Backup Template sebagai langkah preventif sebelum melakukan berbagai perubahan kode html melali penambahan ataupun pengurangan kode css, javascript dan xHTML.
    • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
    • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
  5. Cari kode ]]></b:skin> pada "Box Edit Template".
  6. Copy kode CSS dan letakkan di atas ]]></b:skin>
  7. Klik "Simpan Template (Save Template)".
  8. Gunakan xHTML saat posting. Anda juga bisa gunakan melalui "Add a Gadget (Tambah Gadget)".
Catatan/Keterangan :
  1. Gunakan background-image selebar boks luar (.GRboksposting).
  2. background-size:410px auto; » 410px = width boks luar
  3. Panduan backup template, cara mencari kode dan berbagai cara menyimpan kode di template dapat dibuka di Special Tutorials pada menu sebelah kiri.
  4. Untuk merubah background image, ganti :
    https://lh4.googleusercontent.com/-KwLIFcTlcVg/T2kBa2f7XhI/AAAAAAAAAdo/pGlGx3KDWiI/h300/GRcantik-bgTransparentBox.jpg
  5. Sesuaikan boks luar dengan lebar halaman posting.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «

Cara Membuat Scroll Box untuk posting

Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati posting dalam box dengan ukuran terbatas yang dimaksudkan untuk efisiensi atau penataan ruang blog. Penggunaan scroll box sedikit mempunyai nilai lebih karena dokumen yang dipostingkan di dalamnya dengan mudah dapat dilakukan beberapa perubahan seperti halnya jenis, warna dan ukuran font yang pada akhirnya akan lebih memudahkan bagi pembaca blog untuk memahami dokumen yang terposting. Selain dari hal tersebut, dalam scroll box dapat juga disertakan posting yang berupa image atau gambar. Scroll box dapat dibuat dalam bentuk yang paling sederhana hingga bentuk yang cukup kompleks dengan memadukan KODE HTML dan image hingga tercipta sebuah scroll box yang indah, dinamis dan atraktif. Dibawah ini salah satu contoh bentuk scroll box sederhana yang dapat dikembangkan menjadi bentuk yang lebih kompleks dengan menambahkan beberapa fungsi lain baik dengan menggunakan KODE CSS ataupun gambar.

D E M O Scroll Box dg Kode CSS :

Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan.
Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati posting dalam sebuah box dengan ukuran terbatas. Penggunaan scroll box sedikit mempunyai nilai lebih karena dokumen yang dipostingkan di dalamnya dengan mudah dapat dilakukan beberapa perubahan seperti halnya jenis, warna dan ukuran font yang pada akhirnya akan lebih memudahkan bagi pembaca blog untuk memahami dokumen yang terposting. Selain dari hal tersebut, dalam scroll box dapat juga disertakan posting yang berupa image atau gambar. Scroll box dapat dibuat dalam bentuk yang paling sederhana hingga bentuk yang cukup kompleks dengan memadukan KODE HTML dan image hingga tercipta sebuah scroll box yang indah, dinamis dan atraktif. Dibawah ini salah satu contoh bentuk scroll box sederhana yang dapat dikembangkan menjadi bentuk yang lebih kompleks dengan menambahkan beberapa fungsi lain baik dengan menggunakan KODE CSS ataupun gambar.

Gunakan KODE berikut saat melakukan posting :

Select All and Copy pada Textarea

Select All and copy dimaksudkan untuk lebih memudahkan dan mempercepat proses copy paste pada keseluruhan posting yang terwadahi dalam sebuah textarea. pembaca tinggal melakukan KLIK pada button yang disediakan untuk Select All kemudian dilanjutkan COPY, maka semua materi posting akan tercopy keseluruhannya. Untuk menciptakan fungsi seperti ini dibutuhkan paduan javascript dan KODE lain dalam bentuk KODE CSS atau hanya tambahan dokument HTML yang disertakan secara langsung saat posting dilakukan. Bentuk yang paling sederhana untuk menciptakan fungsi Select All and Copy adalah seperti di bawah ini :

Kode Select and Copy Textarea :
<form name="mypost">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All" type="button"/><br />
<textarea style="border:3px double #555;background:#ddd;color:#111;text-shadow:2px 2px 2px #888;border-radius:4px;padding:10px;" wrap="virtual" rows="8" cols="50" name="txt">
Select All and copy dimaksudkan untuk lebih memudahkan dan mempercepat proses copy paste pada keseluruhan posting yang terwadahi dalam sebuah textarea. pembaca tinggal melakukan KLIK pada button yang disediakan untuk Select All kemudian dilanjutkan COPY, maka semua materi posting akan tercopy keseluruhannya. Untuk menciptakan fungsi seperti ini dibutuhkan paduan javascript dan KODE lain dalam bentuk KODE CSS atau hanya tambahan dokument HTML yang disertakan secara langsung saat posting dilakukan.
</textarea>
</form>

Catatan/Keterangan :

- Gunakan kode di box posting atau bagian blog lain seperti pada "Add a Gadget".
- Lebar dan tinggi textarea bisa disesuaikan dengan kebutuhan, baik ruang posting ataupun besarnya materi posting dengan mengatur besaran rows (tinggi) dan cols (lebar).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «

Menggunakan Textarea untuk Posting

Posting menggunakan textarea berbeda dengan apabila posting menggunakan cara yang lain. Penggunaan textarea ini memungkinkan setiap materi posting tampilkan murni sebagai teks, sehingga pada saat melakukan posting dalam bentuk KODE HTML, kode-kode akan dibaca utuh sebagai sebuah teks. Kelebihan seperti inilah yang membuat posting tutorial yang berkaitan dengan KODE HTML banyak menggunakannya. Disamping mudah dan praktis dalam penggunaan KODE, textarea relatif membuat posting menjadi lebih mudah dan effisien.

Ada tiga (3) cara untuk membangun fungsi sebuah textarea :

Menuliskan KODE HTML dalam Posting

Menuliskan sebuah dokumen HTML memang berbeda dengan menulis teks biasa. Meskipun demikian sekalipun ada beberapa karakter yang harus dituliskan dalam bentuk khusus untuk mendapatkan penulisan karakter yang diharap, sebenarnya yang paling sering digunakan hanyalah dua buah entitas saja. Entitas tersebut adalah :
  • Karakter < (tanda lebih kecil) yang dituliskan dengan entitas &lt;
  • Karakter > (tanda lebih besar) yang dituliskan dengan entitas &gt;

Contoh Penggunaan:

Zoom Image

Zoom Image sangat bagus dan effektif untuk menciptakan effisiensi halaman blog. Dengan mengatur ukuran gambar, kita dapat memilih ukuran gambar yang ingin kita tampilkan di halaman blog hingga ukuran terkecil yang diinginkan. Sentuhan cursor pada gambar membuat gambar orisinil akan terpampangkan dihalaman blog sesuai dengan ukuran aslinya.

D E M O

Klik link demo di bawah ini untuk melihat bagaimana image zoom bekerja dan membuat posting bertambah cantik.


Kode CSS
.GRzoombox{
       position:relative;
       float:left;
       width:224px;
       height:174px;
       margin:5px 15px 5px 0;
}
.GRzoombox .GRzoom{
       position:absolute;
       left:0;
       top:0;
       padding:0;
       margin:0;
       border:12px ridge #663333;
       border-radius:8px;
       width:200px;
       height:150px;
}
.GRzoombox .GRzoom:hover{
       z-index:99999;
}

Javascript Auto Page Scroller

Seperti halnya scroll to top controll, page scroller juga berfungsi sebagai penggulung halaman web/blog. Kalau scroll to top controll hanya berfungsi menggulung halaman ke bagian atas, page scroller berguna untuk menggulung halaman ke atas dan ke bawah, sehinngga contoll auto scroll juga menggunakan 2 buah image yang disusun secara berurutan. Untuk menggulung halaman ke atas atau ke bawah dilakukan dengan cara meletakkan cursor di atas auto scroll controll.

Untuk menggunakan auto page scroller anda harus menambah xHTML dan javascript di atas tag penutup body (</body>).

D E M O

xHTML :
<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:80px 0 0 0;"><img src="https://lh5.googleusercontent.com/-f6o-2nvzN_s/T2h9Gz6J9qI/AAAAAAAAAc8/qSYxVe863rg/h120/green-circle-arrow-up-40x40.png.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:0 0 40px 0;"><img src="https://lh4.googleusercontent.com/-iOtX-VEfSPU/T2h9HeSOUoI/AAAAAAAAAdA/KzaDBjZxbZM/h120/green-circle-arrow-down-40x40.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
</div>

jQuery-CSS3 Scroll To Top Controll

jQuery Scroll to top Controll berfungsi sebagai sebuah penggulung halaman otomatis yang disertai pengaturan kecepatan menggulung (scroll). Kecepatan scroll bersifat dinamis, dimana semakin jauh jarak ke atas halaman maka kecepatan scroll akan semakin bertambah. Contoll back to top dapat dibuat dalam bentuk bentuk teks link dengan posisi berpindah-pindah dengan jumlah tak terbatas, namun dapat juga dibuat sebagai controll statis dengan posisi selalu terlihat di halaman blog. Posisi controll dapat diatur disudut kanan-bawah, kiri-bawah, kanan-atas, kiri-atas atau berbagai tempat yang lain dengan melakukan pengaturan pada javascript (offsetx:5, offsety:5). Berbeda dengan jQuery Scroll to top controll yang lain, pada scroll to top contoll yang akan kita buat ini telah menyertakan beberapa effek dari css3 serta penambahan kode css2 untuk menggantikan tips/tooltip default. Tentu saja perubahan ini membawa pengaruh yang sangat besar hingga memperlihatkan perubahan tampilan jauh berbeda.

D E M O

Cara Membuat :

 
GR | Edited by | gubhug reyot