sponsor

sponsor

Slider

Materi dan Tutorial Khusus Untuk Membuat Situs Web Dan Blog Bagi Pemula Hingga Tingkat Mahir. Gambar tema oleh kelvinjay. Diberdayakan oleh Blogger.

Posts

Recent Tube

Business

Technology

Life & style

Games

Sports

Fashion

Baru: Membuat Pure CSS3 Vertical Accordion Menu (Tanpa Javascript Atau jQuery)

Membuat Pure CSS3 Vertical Accordion Menu (Tanpa Javascript Atau jQuery)


Masih Lanjutan dari postingan sebelumnya, kali ini saya masih akan ngajak anda untuk membuat "Accordion Menu" dengan Pure CSS3, cuma klo sebelumnya kan yang kita buat versi Horizontalnya tuh, nha kali ini saya mau ngajak anda untuk membuat versi Verticalnya hhe... Dan klo anda belum baca postingan yang Horizontal mending anda baca dulu deh biar nyambung sama postingan yang ini.

Ocre, bentuknya kaya gambar diatas, atau klo mau liat langsung silahkan menuju Link Demo dibawah ini:


Terus gimana cara membuatnya?

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

/*------------------------------------*\
ACCORDION
\*------------------------------------*/
.accordion{
width:940px;
overflow:hidden;
list-style:none;
margin-bottom:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.25);
}
.accordion li{
float:left;
width:20%;
overflow:hidden;
height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
.accordion li:first-of-type{
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.accordion div{
padding:10px;
}
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:60%;
}
.slide-01 { background:red; color:white; }
.slide-02 { background:orange; color:white; }
.slide-03 { background:yellow; color:#333; text-shadow:none; }
.slide-04 { background:green; color:white; }
.slide-05 { background:blue; color:white; }
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:60%;
}

6. Coba perhatikan kode CSS diatas, koQ bentuk dan variabel yang saya buat sama aja ya sama yang sebelumnya? aneh gak sih? terus jadinya Horizontal lagi donk? nha saya cuma mau nunjukkin ke anda bahwa Kode CSS diatas itu Kode CSS dasar yang saya gunakan dan secara default yang kebentuk ya si Accordion Horizontal, untuk itu silahkan lanjutkan dengan menambahkan Kode CSS berikut dibawah kode CSS diatas:

/*------------------------------------*\
VERTICAL
\*------------------------------------*/
#vertical{
height:300px;
}
#vertical li{
float:none;
height:20%;
width:100%;
-moz-transition:height 0.2s ease-out;
-webkit-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
-o-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#vertical:hover li{
height:10%;
width:100%;
}
#vertical li:hover{
height:60%;
width:100%;
}


7. Klo udah silahkan beralih, dan seperti yang biasa saya tanyakan, mending pikir dulu deh mau taro dimana hhe... saya mau nyruput kopi lagi ya haha...

8. Udah? klo menurut anda Accordion ini lebih tepat jadi Widget Silahkan letakkan HTML yang akan saya berikan setelah ini di Edit Laman > Add Gadget atau klo anda lebih minat meletakkannya ditempat yang suka-suka anda dibawah postingan, diatas postingan atau bahkan pengganti postingan hha.... silahkan Cari kode <body>, dan letakkan HTML dibawah ini setelah Kode <body> tersebut atau tepat dibawahnya:

<ul class="accordion" id="vertical">

<li class="slide-01">

<div>

<h2>Slide one</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-02">

<div>

<h2>Slide two</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-03">

<div>

<h2>Slide three</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-04">

<div>

<h2>Slide four</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-05">

<div>

<h2>Slide five</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

</ul>


9. Sekarang Silahkan ubah kalimat diatas dengan widget atau apapun yang anda inginkan

10. Save Template anda dan lihat hasilnya...

Selamat Mencoba...

Keterangan: Untuk ng'ganti lebarnya silahkan ganti angka di Width yang saya kasih warna merah, dan klo gak suka dengan warna Background yang saya hadirkan silahkan ganti warna yang udah saya bikin warna-warni diatas dengan warna yang anda inginkan atau klo mau lebih spesifik pake aja Kode Warna Hexa.

Anda membuat sebuah website diperlukan sedikitnya 4 langkah


Web Design Minimalis
Memilih desain terbaik untuk web perusahaan anda sangatlah penting, kecuali jika anda hanya ingin membangun sebuah web berbasis bisnis, mungkin anda tidak terlalu memikirkan bagaimana desainnya melainkan bagaimana sistem bisnis pada web tersebut berjalan optimal. Membangun sebuah website memerlukan proses dan waktu yang tidak cepat.
Untuk membantu Anda membuat sebuah website diperlukan sedikitnya 4 langkah, yaitu :

1. Memastikan tujuan pembuatan website

Sebelum anda mencari perusahaan jasa pembuatan website, alangkah baiknya jika anda mendifinisikan garis besar isi dan tujuan dari web yang ingin anda buat. Buatlah beberapa pertanyaan yang dapat menunjang dalam suksesnya pembuatan web anda, seperti dibawah ini :
- Apa tujuan anda membuat website?
- Apakah web tersebut menjual atau hanya sekedar company profile?
- Apakah anda memiliki katalog produk?
- Siapa saja target pasar anda?
- Apakah sudah punya merk?
- Siapa saja kompetitor anda?
- Apakah mereka sudah mempunyai website? Jika iya, seperti apa website mereka?
- Seberapa cepat anda ingin web anda langsung jadi?
- Apa yang terjadi jika anda tidak membuat website tersebut?

Mungkin untuk menjawab pertanyaan diatas agak memakan waktu, namun jika anda mempunyai waktu luang anda dapat menulis jawabannya di selembar kertas. Karena pertanyaan tersebut biasanya akan ditanyakan terlebih dahulu oleh setiap perusahaan jasa web design sebelum mereka membuat web perusahaan anda. Jika anda sudah mendapatkan semua jawaban diatas, anda akan mempunyai beberapa kriteria untuk memilih desain terbaik untuk website anda. Misal jika anda ingin membuat web toko online, maka sebaiknya anda mencari perusahaan yang sudah berpengalaman membuat toko online, selain dari kualitasnya yang baik, mereka juga akan lebih cepat menyelesaikan proses pembuatan website anda, karena pengalaman yang mereka miliki untuk membuat web sejenis.

2. Tentukan biayanya

Berapa biaya yang anda targetkan untuk website tersebut. Jika anda masih awam tentang harga web design, ada baiknya anda melakukan survey harga dulu ke beberapa Perusahaan jasa web design, yang kemudian dari hasil survey tersebut anda dapat mengira2 berapa budget yang diperlukan. dengan demikian ketika anda bernegosiasi dengan perusahaan pembuat web, anda sudah mempunyai data yang lengkap.

3. Menentukan Desain Web

Step ke-3 ini sangatlah penting bagi website anda, karena desain dari sebuah website mempunyai nilai jual tersendiri di mata konsumen. Usahakan desain yang anda inginkan sudah ada sebelum anda melakukan deal dengan perusahaan jasa web tersebut. Dengan demikian, anda dapat menanyakan langsung berapa lama untuk proses pembuatan web design tersebut. Jika anda memiliki gambar produk atau logo perusahaan, alangkah baiknya jika anda menyertakan foto produk dan logo perusahaan anda, sehingga perusahaan jasa pembuatan web dapat memberikan masukan dan ide untuk desain web anda.

4. Memilih Web Hosting dan domain

Jika anda masih awam tentang web hosting dan nama domain, lebih baik anda serahkan proses ini kepada yang lebih berpengalaman yaitu itu sendiri, karena biasanya mereka akan menawarkan dengan paket-paket hosting dan domain yang sudah siap pake. Namun jika anda ingin menentukan hosting dana domain sendiri, ada baiknya anda melakukan riset pasar terlebih dahulu. Misal, jika target pasar anda adalah dalam negeri, maka akan lebih baik jika nama domain anda menggunakan bahasa indonesia, dan hosting yang akan digunakan menggunakan server IIX server indonesia (bukan server luar). Untuk penjelasan terperinci proses ini akan saya bahas di lain kesempatan.

Mengetahui Posisi Seseorang Lewat No Hp

Mengetahui Posisi Seseorang Lewat No Hp

Mengetahui Posisi Seseorang Lewat No Hp - Bagi sobat yang ingin mengetahui letak seseorang yang sobat kenal namun tidak mengetahui dia berada dimana, jangan khawatir, sobat hanya perlu mengikuti langkah-langkah cara Mengetahui Posisi Seseorang Lewat No Hp dan nikmati hasilnya.

Mengetahui Posisi Seseorang Lewat No Hp:

1. Buka web Ceebydith

2. Masukan no hp dikolom MSISDN

Tempat mengetahui posisi seseorang

3. Kemudian tekan tombol

Cara Mudah Memasang Widget Lagu Di Blog

Cara Mudah Memasang Widget Lagu Di Blog

Cara Mudah Memasang Widget Lagu Di Blog - Walau widget ini termaksud Widget Yang Sebaiknya Tidak Ada Di Blog, namun setelah saya pikir-pikir widget ini berguna jika blog tersebut mempublikasikan artikel tentang sebuah band (ex: blog mengenai band avenged sevenfold, masukanlah lagu avenged sevenfold dari album pertama sampai yang terbaru).

Music! My Life


Cara Mudah Memasang Widget Lagu Di Blog:

1. Silahkan sobat kunjungi SCM Music Player

2. Pilih tampilan mana yang akan sobat pasang di blog lalu tekan tombol


Membuat music 1
Keterangan: Kolom merah untuk mengatur tampilannya


3. Masukkan:
  1. Nama Band
  2. Judul lagu
  3. Link URL: Bisa dari: Soundcloud atau Youtube (Jika dari youtube, saya sarankan ambil link-nya dari official music video karena terkadang url di youtube ada yang ga keluar suaranya).
Membuat music 2

4. Atur sesuai keinginan sobat (Auto Play harus sobat centang) lalu tekan tombol

Membuat music 3
Keterangan:
  • Auto Play: Agar lagunya bisa dimainkan (mulai dengan otomatis)
  • Shuffle Playback: Memutar lagu secara acak
  • Default Volume: Volume suara
  • Repeat Mode: Terbagi 3:
- Play Playlist Once: Hanya memutar 1 lagu
- Repeat Playlist: Mengulang lagu
- Repeat Item: Mengulang lagu setelah semua lagu selesai dimainkan
  • Placement of Player Bar: Posisi scmplayer
  • Show Playlist by Default: Menampilkan daftar lagu di samping kanan

5. Copy kode tulisan yang block warna biru

Membuat music 4

6. Lalu sobat pergi ke:

  • Blogger sobat => Template => Edit HTML
  • Cari kode <body> atau <body (Tekan CTRL+F agar mudah)
  • Paste tulisan yang diblock warna biru tadi (yang dapat di scmplayer) lalu pasang DIBAWAH <body> atau <body
  • Prantijau terlebih dahulu. Jika tidak error, simpan
7. Selesai

Cara Baru Menambah Widget Di Atas Header Blog

Menambah Widget Di Atas Header Blog

Menambah Widget Di Atas Header Blog - Menambah kolom widget diatas header banyak manfaatnya, seperti: bisa memasang menu drop down, widget lainnya atau mungkin sobat pengguna template bawaan blog yang ingin mempercantik tampilan judul blognya seperti blog ini. Bagaimana sob? Tertarik? Silahkan di simak artikel Membuat Header Blog Ber-link. Dan silahkan di simak artikel yang bejudul cara Menambah Widget Di Atas Header Blog.

Widget Blog

Menambah Widget Di Atas Header Blog:

1. Login ke Blogger --> Template --> Edit HTML

2. Cari kode seperti kode di bawah ini (gunakan CTRL+F supaya mudah):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

3. Setelah ketemu, lihat kode yang berwarna:
  • maxwidgets=’1’ ganti menjadi maxwidgets='2’ 
  • showaddelement='no'> ganti menjadi showaddelement='yes'>
4. Selesai

Mudah bukan caranya? Begitulah cara Menambah Widget Di Atas Header Blog yang bisa saya berikan tutorialnya untuk sobat.

Cara Membuat Satu Kolom Widget Diatas Header

Cara Membuat Satu Kolom Widget Diatas Header

Cara Membuat Satu Kolom Widget Diatas Header seperti yang terlihat pada gambar dibawah (panah merah) telah saya buat khusus untuk anda dengan cara yang mudah, anda bisa membuat satu kolom widget diatas header blog anda dengan mengikuti panduan cara membuat satu kolom widget diatas header. Dengan adanya tambahan satu kolom widget diatas header akan memberikan tambahan ruang dalam blog anda yang nantinya bisa anda gunakan untuk memasukkan konten-konten diluar topik blog anda atau dari dalam topik blog anda sendiri. Apalagi jika di area header blog ditambahkan lagi dua kolom atau tiga kolom widget maka anda akan lebih leluasa dalam memasukkan atau memasang konten-konten yang anda sukai.

Cara Membuat Satu Kolom Widget Diatas Header

Berikut Cara Membuat Satu Kolom Widget Diatas Header
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari Kode ]]></b:skin>
  4. Letakkan kode berikut diatas kode ]]></b:skin>
    #oneupperheader{margin:10px 0;padding:1%;width:100%;}
  5. Cari kode berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
  6. Letakkan kode berikut ini tepat dibawah <div id='header-wrapper'>
    <b:section class='header' id='oneupperheader' preferred='yes'/>
    Sehingga hasilnya seperti berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='oneupperheader' preferred='yes'/>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada ide lain dalam membuat satu kolom widget diatas header, mari kita diskusikan bersama dengan meninggalkan komentar di artikel ini Cara Membuat Satu Kolom Widget Diatas Header