Langsung ke konten utama

Cara Design Template Blog Untuk Mobile




Template Mobile Hack4rt

Hai sahabat Hack4rt, sekian lama saya Noval Bintang tidak mengepost dengan tangan saya sendiri (tidak copas) di blog Hack4rt.us yang baru beberapa minggu ini. Tutorial malam ini yaitu bagaimana cara untuk memodifikasi template untuk sesuai dengan mobile. Nah, tutorial ini berawal dari source code template Super Faster V.3 yang dibuat oleh Mas Sugeng yang sudah tersesuai dengan versi mobile. Oke, langsung aja ke tutorialnya. 
Kita main di EDIT HTML yaaa di Template. Ingat Itu! hehe
Langkah pertama yang agan lakukan adalah mengganti tag <body> dengan
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Langkah Kedua yaitu copy code berikut tepat di bawah kode </b:skin>

<b:if cond='data:blog.isMobile'>
<style type='text/css'>

ISI TEXT CSS DESIGN ANDA DISINI


/* MEDIA QUERY */
@media (min-device-width: 100px) and (max-device-width: 2600px) {.mobile #admob{display:block;}}@media (min-device-width:100px) and (max-device-width:129px){.mobile #admob{width:114px;}.mobile img{max-width:110px !important;
}}@media (min-device-width:130px) and (max-device-width:161px){
.mobile #admob {width:144px;}.mobile img{max-width:140px !important;}}@media (min-device-width: 162px) and (max-device-width: 177px) {.mobile #admob {width:164px;}.mobile img{max-width:140px !important;}}@media (min-device-width:178px) and (max-device-width:209px) {
.mobile #admob {width:194px;}.mobile img{max-width:170px !important;}}@media (min-device-width:210px) and (max-device-width:221px) {.mobile #admob{width:206px;}.mobile img{max-width:190px !important;}}@media (min-device-width:222px) and (max-device-width:241px) {.mobile #admob{width:220px;}.mobile img{ max-width:210px !important;}}@media (min-device-width:242px) and (max-device-width:321px) {.mobile #admob{width:298px;}.mobile img{max-width:280px !important;}}@media (min-device-width:322px) and (max-device-width:361px) {.mobile img{max-width:300px !important;}}@media (min-device-width:362px) and (max-device-width:401px) {.mobile img{max-width:300px !important;}}@media (min-device-width:402px) and (max-device-width:481px) {.mobile img{max-width:300px !important;}}@media (min-device-width:482px) and (max-device-width:2500px) {
.mobile img{max-width:300px !important;}}

</style>
</b:if>
Nah, setelah itu agan bisa edit text "ISI TEXT CSS ANDA DISINI" dengan code CSS yang anda inginkan. sedikit CSS yang akan saya berikan untuk mobile CSS yaitu
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Resident Evil: Operation Raccoon City

Resident Evil: Operation Raccoon City delivers a true third person team based shooter experience set within the dark and sinister Resident Evil universe and a reinterpretation of the events depicted in Resident Evil 2 and Resident Evil 3. Zombies and Bio-Organic Weapons (B.O.W's) add to the mix as players not only compete against an opposing squad but also tackle this third unpredictable element, creating a brand new style of gameplay and breaking the conventions of traditional team based shooters. It is September 1998 and the action centers once more on the ill-fated Raccoon City and the horrific consequences of the deadly T-virus outbreak from the Umbrella facility. With a cover up required, Umbrella orders an elite team into Raccoon City to destroy all evidence of the outbreak and eliminate any survivors. Hearing of this plan, the US Government dispatches its own special forces to uncover any evidence that exposes the cause of the viral infection and Umbre...
Posting Komentar
Baca selengkapnya

Halaman Blog Versi Mobile Dengan Warna Hitam Putih

Melanjutkan artikel sebelumnya yang berjudul “ ELTELU BLUE – Kode CSS Untuk Desain Tema Tampilan Halaman Blog Versi Seluler ”, berikut ini adalah rangkaian kode CSS baru yang dapat digunakan untuk mengubah desain tema tampilan halaman blog versi seluler dengan kombinasi warna seperti yang tampak pada gambar di atas (klik pada gambar untuk memperbesar tampilan). Maksud dan tujuan dari diterbitkannya artikel ini adalah guna memberikan lebih banyak ragam pilihan tema kepada Anda yang telah dan atau akan melakukan kustomisasi template untuk tampilan halaman versi mobile dengan mengacu pada teknik yang diuraikan dalam artikel dengan judul “ Cara Mengedit Template Untuk Sumber: http://eltelu.blogspot.com/2012/10/rangkaian-kode-css-untuk-tema-tampilan.html#ixzz2WJAtE1bq
Posting Komentar
Baca selengkapnya