Langsung ke konten utama

Rangkuman Desain Template Part 1

Rangkuman Desain Template Part 1
Pada awal kehadirannya Action Blog selalu memberikan suguhan berbagai macam tutorial seputar blogger dan sedikit keluh kesah admin selama menjalani aktivitas blogging nya dalam balutan konsep post unix yang sederhana. [ ttp ] Pada kesempatan kali ini saya mencoba untuk membuka ingatan sobat yang rutin atau pernah datang ke blog ini dari awal sampai hari ini tujuannya untuk memberikan referensi kecil bagi sobat yang sedang melakukan modifikasi pada blognya karena saat ini saya merasa para blogger lagi gencar-gencarnya melakukan modifikasi blognya dan tentu ketika masa modifikasi kita membutuhkan referensi nah dengan alasan itulah kenapa saya kembali membuka lembaran-lembaran artikel seputar trik dan tips blogging pada blog ini. Sebenarnya sih ini gara-gara gak ada postingan hehe 

Tapi sebelumnya saya ingatkan kembali bahwa kehadiran blog ini berawal dari " hobby tanpa ambisi " jadi kalau memang isi dari blog ini kurang bermanfaat , saya bermaaf karena blog ini hanya catatan pribadi saja.
Admin | Black Kofie Hobbies

Bagian pertama kita akan urut dari bagian atas struktur template yaitu [ HEADER ] , pada bagian ini saya fikir sangat penting karena header merupakan ciri untuk sebuah blog.

Modifikasi Untuk Bagian Header

  1. Modifikasi Header Dengan Menu 
  2. Modifikasi Logo Header Header Dengan Menu 
  3. Membuat Menu Fixed Bar Dengan Logo Hover
  4. Membuat Menu Responsive Dengan Logo
Itulah sebagian link untuk modifikasi bagian header , selanjutnya saya akan memberikan link untuk modifikasi bagian navigasi / menu yang tentunya bisa dikombinasikan dengan letak header.

 Aksesoris Bagian Sidebar

  1. Floating Sidebar Widget 
  2. Membuat Menu Navigation Sidebar 
  3. Alternative Floating Sidebar 
Sementara saya hanya memberikan link untuk modifikasi bagian header , menu dan sidebar , mungkin selanjutnya kita akan menyentuh element yang lain seperti main-wrapper dan Footer.
Label:

Komentar

  1. GupitanKamis, Maret 06, 2014

    Ngaronda Kang.....?
    Ngopi atuh yua ah...... :)

    BalasHapus
    Balasan
    1. Sopala MultapaKamis, Maret 06, 2014

      Hayo siap lah .. yeuh aya kang sekalian goreng pisang na

      Hapus
  2. UnknownKamis, Maret 06, 2014

    Wuih keren full Kang Ruly Rangkuman templatnya
    Saya sampe bingung mengartikulasikeun nana
    Soalna bahasa na rada pabeulit, soalna rada aneh
    Bahasa responsive semua yang ada di blog Kang Ruly
    Kasep pisan pokona mah nya Kang? :)

    BalasHapus
    Balasan
    1. Sopala MultapaKamis, Maret 06, 2014

      Haha ponakan SMP kang yang selalu nulis .. saya hanya memberikan materi tutorialnya saja .. makanya ketika beres saya evaluasi lg dan ternyata dia kocak nulisnya .. !! saya jarang punya waktu luang kang

      Hapus
  3. dedetea66Kamis, Maret 06, 2014

    Halau master kumaha damang ? yang selalu keren hehehe,,,hayang nyoibian Simple Blogger Responsive Menu ,tapi can sempet wae repot-ieung repot wae kang heuheuheu

    BalasHapus
  4. Adhy SuryadiKamis, Maret 06, 2014

    Yang jelas mah kang Ruly selalu banyak ide lah hehehehe :) sigana gara-gara kopi tah :)

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Maret 09, 2014

      hehe lumayan lier gening kang milarian ide teh .. beda sareng milarian kopi !!!

      Hapus
  5. MANG YONOKamis, Maret 06, 2014

    ternyata ada rangkumannya juga ya kang, kapan nih tes ulangannya hehehe .... makin mantab saja nih bloggnya

    BalasHapus
  6. Yahya DoankKamis, Maret 06, 2014

    Izin baca baca dulu deh... hehehe

    BalasHapus
  7. UnknownKamis, Maret 06, 2014

    Request Kang :)

    BalasHapus
  8. Staff AdministratorKamis, Maret 06, 2014

    wah...ganti tampilan lagi ya kang rul..hehehe :)

    BalasHapus
  9. AnonimJumat, Maret 07, 2014

    mantap mas Ruly, ditunggu ah postingan selanjutnya :)

    BalasHapus
  10. UnknownJumat, Maret 07, 2014

    wah bisa refrensi untuk buat template sendiri nih

    BalasHapus
  11. AdminJumat, Maret 07, 2014

    kalau postingan ini pasti sangat bermanfaat buat newbie seperti saya mas :-bd

    BalasHapus
  12. UnknownMinggu, Maret 09, 2014

    wah mantab gan rangkumannya , ditunggu rangkuman beriktnya

    BalasHapus
  13. UnknownSenin, Maret 10, 2014

    memodisikasi template memang menyenangkan terutama kalau berhasil hehe

    BalasHapus
  14. youSelasa, Maret 11, 2014

    Pastinya... hehe..

    BalasHapus
  15. abang ichalRabu, Maret 12, 2014

    sdh ganti tmpilan ternyata

    BalasHapus
  16. Rohis FacebookKamis, Maret 13, 2014

    lumayan panjang jg ya.., tp susah klo yg gk paham kode2-an, kayak sy ni.. *smile
    makasih pak!

    BalasHapus
  17. Ione NasitionKamis, Maret 13, 2014

    Alhamdulillah dapat juga modifikasi untuk header

    BalasHapus
  18. Rz BotKamis, April 03, 2014

    nambah ilmu lagi sama kang ruly :)

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya