Langsung ke konten utama

FlatMag Responsive Template

FlatMag Responsive Template - Responsive design , berarti harus memenuhi aksesibilitas dari berbagai perangkat yang tentu dapat menampilkan fitur diberbagai perangkat. Memang belakangan di amerika sekitar 29% para pengguna website telah beralih dari desktop ke mobile phone dalam browsing , dan sebagian besar blog/website telah menggunakan responsive template. Mungkin dengan beralihnya pengguna desktop pada mobile phone menjadi alasan para kreator menciptakan template blog dengan fitur responsive , tak terkecuali designer Syed Faizan Ali yang belakangan meluncurkan FlatMag Responsive Template. Sebuah template yang patut brada coba .Untuk lebih jelasnya berikut beberapa fitur didalamnya.

Featured 

  • Breadcrumbs
  • Responsive Design
  • Sticky Header With Dropdown Menu
  • Author Bio Widget
  • Featured Labels Post

Kustomisasi Sticky Menu 

<div class='span-24'>
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a href='http://flatmag.blogspot.com/'>Home</a></li>
<li><a href='#'>Blog</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Tutor</a></li>
</ul>
</div>
</div>

Kustomisasi Featured Content Area

<script type='text/javascript'>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script>
<scriptsrc='/feeds/posts/default/-/Tech?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/></script>
Catatan :
Tulisan Tech ganti dengan label brada . 

Komentar

  1. Keren nic sob,,,,
    izin Repost he,,

    BalasHapus
  2. saya liat demonya dulu deh. ^_^

    BalasHapus
  3. Wah keren tuh mas, tampilan elegan, responsive pula

    BalasHapus
  4. Lagi anget2 nya dan lagi IN.. ya kang...template resfonsive sekarang...hehe :)

    BalasHapus
  5. Lagi anget2 nya dan lagi IN.. ya kang...template resfonsive sekarang...hehe :)

    BalasHapus
  6. super jos gandos kang templatenya.. warnanya juga cucoookkk booo

    BalasHapus
  7. asik.. aku ikutan download ya kang.... mantap dan elegan tampilan templatenya .... :)

    BalasHapus
    Balasan
    1. monggo silahkan .. spesial buat org karawang

      Hapus
    2. Lagi musim apa an ya kang di Krawang :)

      Hapus
    3. Penontoooonnn ... keep smile teng tororeng ..tororeng

      Hapus
    4. Sy justru kuatir ma kang Eka...nih yang kebanyakan goyang..hehe :)

      Hapus
    5. iya dan dampaknya dia tidak bisa online sampe 10 hari katanya mas .. mungkin terlalu banyak bergoyang hehe

      Hapus
  8. save ah ,,,,
    koleksi ,,, hehehe

    BalasHapus
  9. mantap kang,izin donlot untuk nambah koleksi :D

    BalasHapus
  10. jd pingin ganti tempate lg nih. previewnya keren banget

    BalasHapus
  11. keren pokonya......
    maksihh banyak ni mas udah bagi-bagi.........

    BalasHapus
  12. weyeh dapet lg template responsive, dl ah :)

    BalasHapus
  13. Keren Sob Artikel Template Responsive,. lagi marak2 nikh Kang RULY
    tapi sudah valid HTM5-CSS3 yah Kang..? memang kalau semua nya
    Sudah memenuhi standar template blogger itu pasti idaman semua
    Blogging,. apa lagi kalau lebih komplit nya, jadi Template Responsive-
    SEO Friendly + Valid HTML5 juga CSS3..pasti ini lebih yang di damba, kan
    Semua sobat Blogging..salam sukses Kang semangt terus berkarya..

    BalasHapus
  14. bagus juga kang Ruly saya cocok dengan template ini nih, keren...

    BalasHapus
    Balasan
    1. kalau cocok dipasang aja sob ... emng keren nih template

      Hapus
    2. iya kang nanti lagi mikir-mikir mau bikin blog baru, cuman belum ada ide :)

      Hapus
    3. jgn banyak berfikir ntar malah khawatir !!

      Hapus
  15. udah lama banget ini ga bw kesini :p
    previewnya ga bisa di buka.

    BalasHapus
    Balasan
    1. emng gi sibuk apa sih ?? bisa ko dibuka miz ...

      Hapus
  16. udah saya pasang template nya sob hihihi :D

    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

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

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: