negrionta tutorial: Juli 2011

Selasa, 26 Juli 2011

Cara Membuat Box Slide Image

Cara Membuat Box Slide Image (gambar)
Image slider tidak harus menggunakan javascript. Dengan CSS3 sebuah image slider dengan transisi gambar yang menarik melalui durasi waktu dan effek blur (opacity effects) bisa diciptakan. CSS3 Image Slider akan bekerja secara sempurna di Opera atau di safari. Meskipun demikian, sekalipun tidak seoptimal di browser tersebut, slider dapat menampilkan beberapa efek CSS3 di Mozilla. Untuk membuatnya teramat gampang karena seluruh kode CSS dan kode HTML bisa disimpan melalui penambahan widget. Apabila akan disimpan di template sobat tinggal menyimpannya kode CSS di atas kode ]]></skin>

Untuk langkah sebagai berikut:

1. "Login".Blogger

2. Setelah masuk di Halaman Dasboard (Dasbord) cari dan KLIK link "Design (Rancangan)".

3. Ketika "Page Elements (Elemen Laman)" sudah terlihat, KLIK Add Gadget (Tambah Gadget)" yang berada dalam garis terputus-putus.

4. KLIK "HTML/Javascript" kemudian tunggu beberapa saat hingga box penambahan widget terlihat.

5. Copy-Paste Kode CSS dan Kode HTML dalam box penambahan widget.
KLIK SAVE (Simpan) dan lanjutkan dengan membuka blog untuk melihat hasilnya.

Copy Paste Kode CSS dan Kode HTML Di bawah ini:

Kode CSS3

.putramakkah_boxSlider{

background:#333 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x;

padding:6px;

border:2px solid #555;

float:left;

border-radius:13px;

-moz-border-radius:13px;

-webkit-border-radius:13px;

box-shadow:4px 6px 4px #888;

-moz-box-shadow:4px 6px 4px #888;

-webkit-box-shadow:4px 6px 4px #888;

}

.putramakkah_boxSlider:hover{

background:#990000 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x;

box-shadow:4px 6px 4px #555;

-moz-box-shadow:4px 6px 4px #555;

-webkit-box-shadow:4px 6px 4px #555;

}

#sliders {

width: 222px;

height: 222px;

overflow: hidden;

position: relative;

margin:0 0 10px 0;

}

#sliders img {

border:8px solid white;

padding:3px;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

width: 200px;

height: 200px;

position: absolute;

top: 0;

left: -222px;

z-index: 1;

opacity: 0;

transition: 1.5s;

-o-transition: 1.5s;

-moz-transition-duration: 1.5s;

-webkit-transition-duration: 1.5s;

}

#sliders img:target {

left: 0;

z-index: 9;

opacity: 1;

}

#sliders img:first-child {

left: 0;

opacity: 1.0;

}

#tap{

background:#FFFFFF url(http://i26.tinypic.com/vy6yox/bgsGR/bgSlider.jpg) top center repeat-x;

border:1px solid #777;

margin:-3px 0px 4px;

padding:5px 0px;

opacity: 1.0;

-moz-opacity:1.0;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

#tap a {

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

opacity: 0.7;

-moz-opacity:0.7;

filter:alpha(opacity=70);

text-decoration: none;

background:#ddd;

border: 2px solid #666633;

padding: 0px 10px;

color: #222;

}

#tap a:hover {

background: #00CC33;

opacity: 1.0;

}

</style>

</div>

</div>

http://www.negrionta.co.tv

Keterangan:

Untuk merubah tinggi slider, ganti ukuran width dan/atau height pada :

#sliders {
   width: 222px; => Lebar Slider
   height: 222px; => Tinggi Slider

dan

#sliders img {
   border:8px solid white;
   padding:3px;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   width: 200px; => Lebar Gambar/Image
   height: 200px; => Tinggi Gambar/Image
   position: absolute;
   top: 0;
   left: -222px; => Samakan dengan Lebar Gambar + 22px (penambahan width pada box).

Selamat Mencoba...!!
Semoga bermanfaat...

Senin, 25 Juli 2011

Cara membuat scroll box

Cara membuat scroll box untuk menu,Demo bisa lihat di blog ini di kiri atas..

Copy Paste Kode HTML Javascript di bawah ini :

<div class="Schroll Menu">
<div style="
width: 208px;
border: 2px solid red;
padding:0px;
height: 310px;
background:url(http://i1125.photobucket.com/albums/l587/negrionta/gaktahan.gif);">

<div class="menu"><div style="
border:2px solid #0000FF;
width:188px;
padding:4px;
height:25px; text-align: center;
margin:4px;
font:17px Timees New Roman;
color:#0000FF;
text-shadow: 2px 2px 6px #7FFF00;
font-weight:bolder;
background-image:url(http://i36.tinypic.com/ou9xjb.gif)
;"> <a href="Link-1" title="Tutorial Blogger">Tutorial Blogger</a>
</div></div>
<div class="widget-content"><div style="
border:2px solid #4B0082;
overflow:auto;
width:193px;
padding:2px;
height: 252px;
text-align:left;
text-shadow: 1px 1px 6px #7FFF00;
margin:4px;
font:15px Times New Roman;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5BR4rcQAyHJ-rBB9wXHjKHLxCfYRuYIN0S-qUfkcXAcKx_IbrIgcGYtmg9hdd4-ZOsDctBjlf6oDIByz3UfAR6dD0SAZ01vY9tahWFEkdysbwXP3uIcws97WRHYuwuUobPK6aKPQVQNi_/s1600/kelelawar.gif);
color:yellow;">

LETAKKAN ISI BOX DI SINI !!!

</div>

Keterangan: width: 208px; untuk lebar dan height: 310px; untuk tinggi box ,bisa di ganti sesuai keinginan sobat !!
Silahkan di coba !!

Semoga Bermanfaat...

Kamis, 21 Juli 2011

Cara Membuat Tabel Kolom Di Blog

Cara Membuat Tabel Kolom Di Blog
Cara Membuat Tabel Kolom dengan contoh yang sangat sederhana,bisa langsung lihat contoh di bawah ini:
dengan menggunakan script kode: HTML

Nama tabel

satu kolom

Script di bawah ini:

<tr>

<td scope="col"><div align="center">Nama tabel</div></td>

</tr>

<tr>

<td><div align="center">satu kolom</div></td>

</tr>

</table>

Kolom 1

Kolom 2

Script di bawah ini:

<tr>

<td scope="col"><div align="center">Kolom 1</div></td>

<td scope="col"><div align="center">Kolom 2</div></td>

</tr>

</table>

AB	CD
EF	GH

Script di bawah ini:

<tr>

</tr>

<tr>

</tr>

</table>

ABCD
A 1	A 2	A 3
A 4	A 5	A 6
A 7	A B	C D

Script di bawah ini:

Keterangan: width="220" untuk nilai lebar bisa sobat ganti sesuai keinginan
Semoga bermanfaat:...

Selasa, 19 Juli 2011

Cara membuat menu collapsing site navigation dengan jQuery

Cara membuat menu Collapsing Site Navigation dengan jQuery
adalah menu yang berisi bar navigasi vertikal dan slide out di area konten. melayang dan seperti jatuh , gambar slide turun dari atas ke bawah dan submenu slide dari bawah.jika sobat Mengklik pada salah satu item submenu itu maka menu tersebut akan bergerak keseluruhan nya,menu akan nampak seperti setumpuk kartu...menu ini bisa di bilang keseluruhan nya mengunakan efek hover dan shadow.masih seperti biasa menu nya masih bewarnan hijo..~_~..kowkowkokw...tapi klw sobat gak suka warna hijo..sobat bisa ganti dengan warna yg laen ato sobat bisa juga menggunakan image untuk background nya...silahkan lihat demo dari Collapsing Site Navigation dengan jQuery seperti yang ada di blog ini:

UNTUK MEMBUATNYA IKUTI LANGKAH-LANGKAH DIBAWAH INI:

Login blogger
Tata Letak/Layout - Edit HTML
Klik pada Expand Template Widget.
Selanjutnya cari kode: ]]></b:skin>

Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode: ]]></b:skin> tersebut:
Copy Paste kode di bawah ini dan letakkan tepat di atasnya:

.cc_menu{
    width:700px; /*140px * 5*/
    height:600px;
    position:relative;
    font-size:14px;
    text-transform:uppercase;
    color:#fff;
}
.cc_item{
    text-align:center;
    width:140px;
    height:600px;
    float:left;
    background:-moz-linear-gradient(top, #000, #000,#37c700);
    border-bottom:1px solid lime;
    position:relative;
        -moz-box-shadow: 1px -1px 3px lime;

}
span.cc_title{
    color:#fff;
    font-size:16px;
        text-shadow: 1px 1px 4px #000;
    top:200px;
    left:5px;
    position:absolute;
    padding:3px 0px;
    background:lime;
        border: 1px solid #fff;
        -moz-box-shadow: 1px 1px 20px lime;
    width:130px;
    display:block;
    z-index:11;

}
.cc_submenu ul{
    list-style:none;
    width:140px;
    margin:0;
    padding:0;
    height:0px; /*increase to 200px to slide up*/
    overflow:hidden;
    text-align:left;
    background:-moz-linear-gradient(top, lime, #002200,#001100);
        -moz-box-shadow: 1px 1px 10px lime;
    position:absolute;
    left:0px;
    bottom:0px;
    opacity:0.7;
    z-index:13;
}
.cc_submenu ul li{
font-family:Helvetica;
color:#fff;
font-size:12px;
        text-shadow: 1px 1px 4px #000;
    cursor:pointer;
    padding:10px;
}
.cc_item img{
    position:absolute;
    width:140px;
    height:600px;
    top:-600px;
    left:0px;
}
.cc_content{
    width:600px;
    height:600px;
    border-bottom:1px solid lime;
    position:absolute;
    left:-700px;
    background:-moz-linear-gradient(top, #000, #000,#37c700);
        -moz-box-shadow: 1px -1px 3px lime;
    overflow:hidden;

}
.cc_content div{
    display:none;
    margin:20px;
}
.cc_content p{
    background:lime;
        -moz-box-shadow: 1px 1px 20px lime;
    padding:20px;
    opacity:0.7;
}
span.cc_back{
    position:absolute;
    bottom:10px;
    right:10px;
    cursor:pointer;
        font-family:Georgia;
        color:#00ff00;
        font-size:20px;
        text-shadow: 0 0 4px lime, 0 -5px 4px #008800, 2px -10px 6px #006600,
        -2px -15px 11px #004400, 2px -18px 18px #002200;
}

Dan Cari Kode: </head>
Letakkan Kode di bawah ini Tepat di atas kode: </head>

Seandainya kode di atas gk bisa di atas kode </head>
coba di letak'an di atas kode:</body>

Dan ini kode Html,sobat bisa memasukan di Edit HTML/ tambah gadget:

</div>

<ul>

<li class="cc_content_1">Winter 2010</li>

<li class="cc_content_2">Spring 2011</li>

</ul>

</div>

<span class="cc_title">Stores</span>

<ul>

<li class="cc_content_3">Milano</li>

<li class="cc_content_4">Paris</li>

<li class="cc_content_6">Miami</li>

</ul>

</div>

<span class="cc_title">About</span>

<ul>

<li class="cc_content_7">About us</li>

<li class="cc_content_8">Our Philosophy</li>

</ul>

</div>

<span class="cc_title">Events</span>

<ul>

<li class="cc_content_9">Bacardi Summer Party</li>

<li class="cc_content_10">Lonestyle Auction</li>

</ul>

</div>

<span class="cc_title">Contact</span>

<ul>

<li class="cc_content_11">Custom Orders</li>

<li class="cc_content_12">Get in touch</li>

</ul>

</div>

<h1>

Winter 2010</h1>

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</div>

<h1>

Spring 2011</h1>

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</div>

<h1>

Milano</h1>

She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek</div>

<h1>

Paris</h1>

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. </div>

<h1>

New York</h1>

It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</div>

<h1>

Miami</h1>

</div>

<h1>

About us</h1>

It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</div>

<h1>

Our Philosophy</h1>

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</div>

<h1>

Bacardi Summer Party</h1>

I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth</div>

<h1>

Lonestyle Auction</h1>

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire</div>

<h1>

Custom Orders</h1>

Winter collection</div>

<h1>

Get in touch</h1>

Winter collection</div>

</div>

<div>

</span></div>

Semoga bermanfaat...

post by: putramakkah

Show Hidden Content

CSS3 Show Hidden Content

Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!

negrionta tutorial

My Blog List

NegriOnta

NegriOnta Community

Selasa, 26 Juli 2011

Cara Membuat Box Slide Image

Kode CSS3

Senin, 25 Juli 2011

Cara membuat scroll box

Kamis, 21 Juli 2011

Cara Membuat Tabel Kolom Di Blog

Selasa, 19 Juli 2011

Cara membuat menu collapsing site navigation dengan jQuery

Blog Archive

Show Hidden Content

CSS3 Show Hidden Content

New Post

No Image and Script

Tutorial

New Post