Shizenku Blog

Informasi unik, populer dan menarik lainnya

Cara membuat blog menjadi full responsive 100% work

Jika ingin blog kalian menjadi full responsive seperti blog Shizenku Blogspot ini, jangan meninggalkan halaman artikel ini sebelum selesai membaca tulisan yang ada di postingan Cara membuat blog jadi responsive ini. Sebelum saya mulai membahas cara agar blog jadi responsive kalian cek terlebih dahulu url blog ini http://shizenku.blogspot.com sudah responsive apa belum dengan cara mengecilkan ukuran lebar browser, bisa juga dengan mengganti resolusi layar pc kalian menjadi resolusi yang lebih kecil atau di bawah resolusi asli monitor pc kalian. Cek juga menggunakan handphone atau perangkat mobile seperti : smartphone, tablet, atau hp dengan resolusi kecil.
Bagaimana sobat sudah dicek belum. Ini cuma sebagai bukti saja, bahwa trik yang akan saya bagikan ini sudah saya terapkan pada blog ini yang alhamdulillah sekarang sudah responsive.

Ok, kita lanjut posting.
Kalau ditanya susah atau gampang membuat blog jadi responsive jawabannya adalah sangat mudah kawan asalkan kalian sudah paham tentang pemasangan kode-kode css.
Inilah beberapa hal yang harus diperhatikan untuk membuat blog kalian jadi responsive :
  • Lebar kolom atau Column
  • Gambar atau Image
  • Font atau Teks

1. Lebar Kolom

Pertama kita akan membahas tentang lebar kolom. Kenapa blog tidak responsive itu karena lebar kolom melebihi lebar layar perangkat hardware yang digunakan. sebagai contoh jika lebar outer-wrapper blog kalian berukuran 900px. ketika kita membuka blog tersebut menggunakan hp yang mempunyai lebar hanya 320px, 176px, atau lebih kecil lagi maka kalian pasti sudah tahukan apa yang terjadi. ya yang terjadi adalah blog kalian tidak sepenuhnya terlihat dan yang terlihat hanya beberapa bagian saja yang sebelah kiri, sedangkan jika kita ingin melihat bagian lainnya yang sebelah kanan maka kita harus menggeser scroll bagian bawah layar. inilah yang dinamakan blog tidak responsive sedangkan blog responsive adalah blog yang bisa menyesuaikan lebar secara otomatis mengikuti lebar perangkat yang digunakan, dan blog responsive tidak mempunyai scroll bagian bawah.
Supaya kolom blog jadi responsive kalian bisa menggunakan bantuan media-query untuk mengatur kolom header, main, footer, atau sidebar.
Caranya :
tambahkan kode di bawah ini dan taruh di atasnya kode ]]></b:skin> atau </style>
@media screen and (max-width:1024px) {
kode css
}
@media screen and (max-width:940px) {
kode css
}
@media screen and (max-width:820px) {
kode css
}
@media screen and (max-width:370px){
kode css
}
Kode media-query di atas bisa ditambah atau dikurangi. Kode berwarna merah bisa diganti sesuka kalian.
Cara pengaturan media-query :
kalian ganti teks "kode css" yang berwarna merah di atas dengan kode css.
Contohnya :
#outer-wrapper {width:900px;}
#main-wrapper, #sidebar-wrapper {width:510px;margin:0 10px 0 0;float:left;}
@media screen and (max-width:330px){
#outer-wrapper {width:95%;}
#main-wrapper, #sidebar-wrapper {width:100%;margin:0 auto;float:none;}
}
</style>
Kode di atas dibaca :
"Jika di resolusi layar di bawah 330px maka outer-wrapper mempunyai lebar 95% dari ukuran layar perangkat hardware. sedangkan jika di atas 330px outer-wrapper mempunyai lebar 900px."
"Jika di resolusi layar di bawah 330px maka main dan sidebar mempunyai lebar 100% atau memenuhi outer-wrapper, margin:0 auto, float:none. sedangkan jika di atas 330px main dan sidebar mempunyai lebar 510px, margin:0 10px 0 0, float:left."
"Mungkin ada yang masih bingung di resolusi pas 330px ukuran lebar outer-wrapper nya 900px atau 95%. Jawabannya adalah 900px. karena media-query mengatur resolusi di bawah 330px.

kode margin:0 auto;float:none; digunakan di resolusi kecil supaya menjadi satu kolom. Sedangkan di resolusi besar seperti 800px tidak perlu dipakai.
yang di atas hanya contoh untuk outer, main, sidebar wrapper sedangkan untuk pengaturan yang lainnya seperti header, menu navigasi, post, comment, footer, dll. Kalian atur sendiri sesuai template masing-masing.

Agar di resolusi kecil bisa menyesuaikan lebar kolom otomatis. Gunakan pengaturan width: menggunakan % bukan px. Sedangkan untuk resolusi besar gunakan px saja soalnya kalau menggunakan % takutnya nanti tampilan blog jadi berantakan. Jadi % sangat cocok digunakan untuk single column.

2. Gambar

Perbedaan gambar responsive dan tidak responsive :
Gambar tidak responsive :
image tidak responsive
Shizenku.blogspot.com

Dari gambar di atas terlihat bahwa gambar melewati batas outer-wrapper sehingga muncul scroll di bagian bawah.
Gambar responsive :
image responsive
Shizenku.blogspot.com

Dari gambar di atas terlihat bahwa gambar tidak melewati batas outer-wrapper dan tidak muncul scroll di bagian bawah. dan ketika lebar browser dikecilkan ataupun dibesarkan, gambar bisa menyesuaikan lebar secara otomatis.

Supaya gambar atau image bisa jadi responsive, tambahkan kode di bawah ini kedalam kode css :
img,object,embed{border:none;vertical-align:middle;margin:0 auto;max-width:100%;width:auto;height:auto;}
kode css di atas fungsinya supaya img atau gambar postingan menjadi responsive.
sedangkan gambar iklan dan iframe tidak bisa responsive, maka dari itu di resolusi kecil gambar iklan dan iframe tidak perlu ditampilkan.
Caranya : kalian harus tahu dulu kode div id htmlnya.
ketika kalian menambahkan iklan di sidebar cari kodenya di edit html bagian sidebar.
Contoh kode div di iklan-nya seperti ini :
<b:widget id='HTML1' locked='false' title='Advertisement' type='HTML'>
Maka supaya tidak tampil di resolusi 320px kalian setting media-querynya menjadi seperti ini :
@media screen and (max-width:330px){
#html1 {display:none;}
}
Kalau hanya memakai kode css saja gambar tidak akan bisa responsive karena ada faktor lain yang menyebabkan gambar tidak responsive yaitu di dalam kode html artikel. maka dari itu kalian juga harus melakukan edit artikel yang ada gambarnya dalam mode html. biasanya kode image itu seperti ini :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5Y8vpr-YD3bV0E_RT5XAyQynDzTT10g7T0ArRIPcDI9eZmsKF8aHtt_HdpPEuUG9rCwHd70vzJNKHXld1CY6VkR6iMT2Kf6QmW5zF0vGXor6TzttCH5IqEWz4iNcW0o8DNb-uvU1NvM/s1600/image+tidak+responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5Y8vpr-YD3bV0E_RT5XAyQynDzTT10g7T0ArRIPcDI9eZmsKF8aHtt_HdpPEuUG9rCwHd70vzJNKHXld1CY6VkR6iMT2Kf6QmW5zF0vGXor6TzttCH5IqEWz4iNcW0o8DNb-uvU1NvM/s320/image+tidak+responsive.jpg" width="277" /></a></div>
Kalian hapus saja kode yang berwarna merah. Sehingga hasilnya seperti berikut ini :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5Y8vpr-YD3bV0E_RT5XAyQynDzTT10g7T0ArRIPcDI9eZmsKF8aHtt_HdpPEuUG9rCwHd70vzJNKHXld1CY6VkR6iMT2Kf6QmW5zF0vGXor6TzttCH5IqEWz4iNcW0o8DNb-uvU1NvM/s1600/image+tidak+responsive.jpg"><img height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5Y8vpr-YD3bV0E_RT5XAyQynDzTT10g7T0ArRIPcDI9eZmsKF8aHtt_HdpPEuUG9rCwHd70vzJNKHXld1CY6VkR6iMT2Kf6QmW5zF0vGXor6TzttCH5IqEWz4iNcW0o8DNb-uvU1NvM/s320/image+tidak+responsive.jpg" width="277" /></a></div>
Setelah kalian menerapkan tips di atas saya jamin gambar postingan akan menjadi responsive. fungsi menghapus kode di atas selain agar bisa responsive keuntungan lainnya agar gambar jadi valid html5 kalian hanya perlu menambahkan title dan alt-nya.

3. Font

Inilah gambar teks yang tidak responsive :

font tidak responsive
Shizenku.blogspot.com

Dari gambar di atas terlihat ada teks yang panjang dan tanpa spasi sehingga teks tersebut melewati batas outer-wrapper sehingga muncul scroll di bawahnya.
Supaya font atau text menjadi responsive kalian harus menambahkan kode css di bawah ini ke dalam kode css tepatnya satu grup dengan kode font-family.
Ini dia kode css-nya :
word-wrap:break-word;
Jadi ketika berada dalam mode edit html template tekan ctrl + f lalu cari kode font-family lalu tambahkan kode word-wrap di belakang kode font-family.
Contoh kode css di bagian header :
#header {font-family:Arial, san-serief;}
Setelah ditambahkan kode word-wrap sekarang menjadi seperti ini :
#header {font-family:Arial, san-serief;word-wrap:break-word;}
Jadi jika di blog kalian ada banyak kode font-family maka semakin banyak juga kalian harus menambahkan kode word-wrapnya.
Jika menggunakan kode word-wrap : Maka jika ada teks yang panjangnya melebihi lebar outer-wrapper dan tanpa spasi maka teks tersebut tidak akan melewati batas kolom post sehingga kelebihan teks yang panjang akan terpotong dan akan berada di bawahnya dan hasilnya responsive.
Seperti gambar di bawah ini :

font responsive
Shizenku.blogspot.com

UPDATE : kalian hanya perlu menambahkan kode word-wrap:break-word; sekali saja di bagian body.
contoh : body {word-wrap:break-word;}

Sekarang kita menuju tahap akhir.
Tips dan trik di atas digunakan agar responsive di dekstop. Sekarang kita akan membahas supaya blog bisa responsive di mobile version.
Walaupun kalian sudah memasang media-query. Saya yakin blog kalian belum responsive di mobile version. Itu karena saat kita membuka salah satu postingan di dekstop dengan url : "http://shizenku.blogspot.com/2013/11/cara-uninstall-driver-vga-amd-radeon.html"
Maka jika kita buka melalui perangkat mobile. Url tersebut akan mendapat tambahan kode ?m=1 di belakang url-nya sehingga menjadi seperti ini : "http://shizenku.blogspot.com/2013/11/cara-uninstall-driver-vga-amd-radeon.html?m=1"
Supaya blog bisa responsive di mobile version ikuti panduannya di bawah ini :
1. Login ke Blogger lalu pilih Template lalu klik tombol pengaturan template seluler.

Klik tombol pengaturan
Shizenku.blogspot.com

Ubahlah pengaturan template mobile version kalian yang semula berada di Default sekarang kalian ubah menjadi Khusus.
pilih pengaturan khusus
Shizenku.blogspot.com

2. Kalian harus menambahkan kode di bawah ini dan taruh di bawahnya kode ]]></b:skin> atau </style>. berikut ini kodenya :
@media screen and (max-width:370px){
kode css
}
</style>
<b:if cond='data:blog.isMobile'>
<style type='text/css'>

#header h1, #header p, #header h1 a:link, #header h1 a:visited, #comments h4, #comments-block .comment-footer, #comments-block .comment-author, #comments h5, #footer h6, #comments-block .comment-body, .owner-Body, #nav ul li {font-size:100%;}
#nav ul li a:link, #nav ul li a:visited {padding:2px 4px;}
#main, #sidebar {width:100%;margin:0 auto;float:none;}
.post blockquote, .post-body blockquote {margin:0 auto;font-size:90%;}
.post, .post-body, #comments {font-size:100%;padding:5px;}
.comment-timestamp {font-size:65%;}
#sidebar {display:none;}

</style>
</b:if>
Kode berwarna merah adalah kode yang harus ditambahkan. sedangkan kode berwarna orange adalah kode pengaturan css yang saya gunakan pada blog shizenku ini di versi mobile. jadi untuk kode yang berwarna orange ini hanya sebagai contoh saja dan kalian harus mengaturnya sendiri.
Untuk cara pengaturannya sama saja dengan mengatur media-query, saya rekomendasikan agar disamakan saja dengan media-query resolusi 330px atau resolusi di bawahnya.

Supaya responsive di Internet Explorer tambahkan script di bawah ini :
<!--[if IE]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
Semoga artikel ini membawa manfaat. Amin.
Selesai.

290 komentar : Cara membuat blog menjadi full responsive 100% work

«Terlama 1 – 200 dari 290 Terbaru»
Diposting oleh 

Thanks infonya,jadi bertambah lagi ilmu tentang seluk-beluk blog.

Diposting oleh 

Gelar Tikar gan, mau ane terapin cara ini.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

@nandosempai : Ok gan, .nanti saya follback..

Diposting oleh 

bagus banget

Diposting oleh 

@Wita Pradita : Ok gan, .makasih atas kunjungannya.. .

Gimana masangnya,.,saya gk bisa
sudah ku atik-atik tapi tidak ada perubahan

ada cara yang lain tdk?

Diposting oleh 

@Crusader 12 : gx bisanya pas apa gan, untuk newbie kayaknya emang susah karena belum mengerti tentang kode2 css. yg sudah di utak-atik bagian apa gan ?

nggx ada cara lain gan :D

Diposting oleh 

mau nanya nih gan, kalau mau menampilkan iklan adsense di template mobile yang responsive tu gimana cara masangnya ea. kalau pake template defaul dari google kan tinggal aktifkan melalui edit posting dan centang tampilkan iklan diantara posting maka secara otomatis iklan akan tampil. tapi kl make template custom cara tu kok gk bisa . mohon bantuanya gan.

Diposting oleh 

@Ahmad fankah : untuk nampilin iklan di mobile saya gx pake cara yg agan sebutin seperti di edit posting, kalo pake cara itu saya malah gx bisa, ketika klik simpan malah muncul error. kalo aku sih untuk nampilin iklan di mobile yg penting template mobile diaktifin trus di menu penghasilan tampilkan iklan pilih ya dan tampilkan iklannya di samping.

Diposting oleh 

maaf gan tolong cek blog baru saya cara-juara.blogspot, dari hp kok nama blognya kepotong?
gimana caranya supaya kayak blog ini, nama blognya ditengah dan kalo buka dari hp itu responsive? makasih..
tolong pencerahannya

Diposting oleh 

@Ade Muhammad Fauzi : saya sdah cek blognya :D
untuk mengatasi judul kepotong dan supaya judul berada di tengah ganti kode #isihead{overflow:hidden} yg ada di template agan dan ganti dengan kode #isihead p{text-align:center;word-wrap:break-word;}
jika tidak ingin judul blog berada di tengah hilangkan kode text-align:center;

~ selamat mencoba sobat ~
mohon maaf saya belum bisa komen balik karena internet lagi lelet karena musim hujan ^_^

Diposting oleh 

Kalo jenis huruf judul blognya diganti, dan warnaanya itu gimana ya?
sebelumnya makasih gan udah bantu,

Diposting oleh 

kalo dari hp sih udah bener pake cara tersebut, tapi gan kenapa ya jadi aneh tampilannya kalo buka dari laptop, itu salah dimana nya ya?
bisa tolong cek lagi mungkin

Diposting oleh 

@Ade Muhammad Fauzi : untuk mengganti font atau jenis tulisan tambahkan kode font-family:Arial, San-serif;, ganti kode Arial dengan jenis font lain seperti Verdana, Helvetica, dan lain-lain.
untuk mengganti warna tambahkn kode color:#000000;, kode #000000 adalah warna hitam sedanmgkan putih kodenya #ffffff . silahkan agan cari di google tentang warna kode html.

jadi tambahkan 2 kode di atas di kode sebelumnya dan hasilnya seperti di bawah ini :
#isihead p{font-family:Arial, San-serif;color:#666666;text-align:center;word-wrap:break-word;}

Diposting oleh 

@Ade Muhammad Fauzi : cara mengatasinya tambahkan kode (<)div style='clear:both;'/> dan sebelum kode (<)nav id='nav'>. nanti hasilnya seperti dibawah ini :

(<)/div>
(<)div style='clear:both;'/>
(<)nav id='nav'>

karena komentar blog tidak mendukung semua penulisan kode html, maka silahkan agan hapus semua tanda buka dan tutup kurung diatas. hanya buka dan tutup kurungnya saja ya, sedangkan isi yg ada di dalam tanda buka dan tutup kurung jangan dihapus.
jika tidak berhasil silahkan berkomentar lagi, nanti saya cek lagi blognya :D

Diposting oleh 

udah bisa gan makasih banyak.
tinggal background nya pake gambar, nah kalo cara mengetahui ukuran header pada blog saya gimana ya? supaya pas, soalnya mau bikin gambarnya tapi gak tau ukurannya. terus kalo udah ada gambarnya gimana cara pasangnya?, apakah kalo buka dari hp tetep keliatan backgroun-nya/tetep polos seperti bawaannya? makasih

Diposting oleh 

@Ade Muhammad Fauzi : ukuran header punya blog gan kayaknya berukuran 990px. cara gantinya tinggal ganti kode background-color:white; yang ada di kode css #header-wrapper{margin:15px auto 0;padding:0;color:white;background-color:white;border-top:3px solid #0F83A0;position:relative} ganti dengan kode background:url(http://3.bp.blogspot.com/-qQA-__KiZOA/UpErZOUXRNI/AAAAAAAABd4/1PJGN3siCXs/s1600/body.png); ganti kode miring atau italic dengan link gambar.

kalo gambarnya belum diupload, diupload dulu gan di blogger. kalo ane biasanya bikin postingan baru yg kosong trus upload gambar setelah itu copy url gambar. trus yg postingan tadi tidak perlu di publikasikan tetapi bisa disimpan di draft. setelah itu hapus postingan tadi yg ada di draft.

Diposting oleh 

maaf gan apakah ada yang salah sama kode ini : #isihead p{font-family:Calibri, San-serif;color:#1581e5;word-wrap:break-word;} untuk font dan warnanya gak berubah, kirain kemarin bisa ternyata pake font sama warna yang lain kok gak bisa. makasih

Diposting oleh 

@Ade Muhammad Fauzi : gx ada yg salah dengan kode yg agan sebutin :D

Diposting oleh 

maksud 990px itu gimana ya? saya mau buat gambarnya di photoshop, pas ngatur image size, ada dua kolom yang harus diatur yaitu Width:...(pixels) ?
dan Height:...(pixels) ? apa semuanya di isi 990 atau gimana? maklum masih tahap belajar nih jadi jadi banyak gak tau nya :)

Diposting oleh 

@Ade Muhammad Fauzi : 990px itu lebarnya ( width ) gan sedangkan tingginya ( heigh ) atur sendiri terserah agan, untuk tinggi ane saranin disetting 60-90px aja gan :D

Diposting oleh 

ia gan tapi kok tetep aja font dan warnanya kaya bawaannya, gak bisa diganti kenapa ya ?

Diposting oleh 

@Ade Muhammad Fauzi : jika tidak berubah berarti itu masalah penempatan kodenya gan yg salah. kode fon dan color kalo diletakkan di dalam kode #header-wrapper jika tidak berhasil coba diletakkan didalam #isihead p jika masih belum berhasil juga berarti agan harus meletakkan kodenya di dalam kode yg lain. udah sore gan ane males mo ngecek blog agan kodenya banyak banget besok aja ya gan. . :sorry ^_^

Diposting oleh 

oh siap gan makasih banget

Diposting oleh 

@Ade Muhammad Fauzi : Ok gan, Sama-sama ^_^

Diposting oleh 

pusing saya sob di bagian kode css nya ><

Diposting oleh 

@Yori Angelic : kalo buat newbie kayaknya emang susah banget buat utak-atik kode css ^_^

Diposting oleh 

klo menu header sama komentar blog nya gk responsive, itu gmana ngatasin nya? :v

Diposting oleh 

@Yori Angelic : mohon maaf gan, sebenarnya saya bisa bantu agan tetapi saat ini internet lagi down karena musim hujan jadi insyaallah kalo musim hujan udah berhenti dan koneksi internet sudah bagus lagi, nanti akan saya bantu ^_^

Diposting oleh 

oke gan, di tunggu ya :D
soalnya nanya di blog" lain gk ada tanggapan :)

saya mah sukanya terima jadi dari para master template aja. :D

Diposting oleh 

@Yori Angelic : Sip, . ditunggu aja gan ? nanti ane komen di blog agan :D

@Andreyan D. : ya itu terserah agan ^_^ , kalo bikin template sendiri kan bisa buat belajar juga.
kalo pake template bikinan orang, ilmu pengetahuan kita tentang template blog tidak akan berkembang. pengalaman sendiri itu penting lho .. he he ^_^

mantap braayyy.. responsive itu kayak kresek bisa di lipet lipet wkwk

Diposting oleh 

@ade rizky tri prasojo : bener banget tuh gan, kayak karpet bisa digulung :D

Diposting oleh 

makasih infonya gan ^^

Diposting oleh 

@Deni Saputra : ok gan makasih atas kunjungannya :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

@Yanuar : tutorial untuk mobile version udah ada tuh di artikel diatas bagian bawah ^_^
setelah saya cek blog agan di versi mobile, gx perlu diutak-atik gan. template bawaan blogger versi mobile yang agan pake udah responsive kok :D

Diposting oleh 

wah lengkap nih penjelasannya, saya coba ah meresponsivein template blog baru gue, kalo ada kesulitan nanti boleh nanya disini kan gan?^^

Diposting oleh 

@miftah riza : jika ada kesulitan, silahkan ditanyakan disini he he . . ^_^

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

tanks infonya gan, salam kenal...

Diposting oleh 

@Theo Ardiansah : bingung ane ama pertanyaannya he he, gx ada masalah tuh gan.
maksudnya gimana ? footernya gx mepet bawah gitu ? or gimana ?

itu bukan background melebihi footer tapi itu karena panjang halaman gx nyampe layar bawah.
bukannya memang seperti itu kalo panjang tinggi halaman nggak nyampe bawah layar. kalo tinggi halaman sangat panjang nanti biasanya footernya bisa mepet layar bawah kok. coba buka postingan yang panjang, nanti footernya mepet bawah kok. :D

@Dafiin Defandaky : Ok gan salam kenal juga :Peace: ^_^

Maaf gan agak menyimpang sedikit, Tapi masih berhubungan dengan Responsive. Saya mau nanya gimana cara pasang iklan adsense responsive di dalam postingan dan di bawah postingan seperti yang ada di blog agan. Kalau pakai iklan yang tidak responsive saya takut melanggar tos. Mohn bantuannya ya gan.. :)

Diposting oleh 

iklan adsense di blog ini tidak saya bikin responsive tetapi secara otomatis beberapa bagian dari iklan akan disembunyikan ketika melebihi batas kolom,..
ada efek samping ketika kita menggunakan iklan responsive dari adsense,.. yaitu mengurangi space iklan untuk website kita,..
kenapa begitu ?.. maaf saya tidak bisa menjelaskannya di sini,. tapi di halaman google ada kok,. silahkan dicari sendiri.. :D

tutorial cara bikin iklan adsense responsive ada di blog inside adsense,.. saya lupa link-nya... he he ^_^

Oh gitu ya gan, jadi bagaimana cara pasang iklan adsense menggunakan metode agan di blog responsive? kelihatannya metodenya lebih menarik, soalnya iklan responsive suka ga terkontrol ukurannya,,,

Nah utk yang pengaturan mobile, saya sudah pernah atur ke khusus, tapi iklan pada ga tampil. Kemudian saya coba tidak tampilkan di seluler. Hasilnya template di seluller tampilnya jadi lebih OK.

Diposting oleh 

@irpan sah : saya pake overflow hidden agar bagian iklan menjadi tersembunyi. sedangkan kalo pake overflow auto maka akan tampil scroll-nya.. :D
caranya : jika iklan ditaruh di header, maka tambahkan kode css overflow:hidden; di dalam kode css header...

Bisa di bantu gan budy codenya, saya sudah coba seharian kemarin, alhamdulillah gagal.. :(

kode iklan yang di awal postingan itu gimana gan, saya cek blog agan di hp yang kecil iklannya ga muncul terus pas di hape yang gedean dikit baru muncul.. mohon bantuannya gan.. :)

Diposting oleh 

@irpan sah : alhamdulillah kok gagal.,. ha ha ha :D

begini caranya :
1. cari kode dibawah ini di blog agan :
#header-wrapper{width:100%;color:#555;margin:0 auto;padding:0;position:relative}

2. lalu tambahkan kode overflow:hidden; sehingga hasilnya akan seperti di bawah ini
#header-wrapper{overflow:hidden;width:100%;color:#555;margin:0 auto;padding:0;position:relative}

Diposting oleh 

@irpan sah : kalo boleh tahu HP-nya resolusi berapa ?
settingan template blog ini tidak saya bikin khusus tetapi saya bikin default dari blogger...
kalo agan buka blog ini dari operamini biasanya memang tidak akan muncul iklannya,.. dari dulu juga gitu, operamini tidak bisa menampilkan iklan adsense di hp dengan resolusi kecil... ^_^

itu untuk iklan di header atau yang di pangkal postingan gan, saya pengennya yang di pangkal postingan. :)

Saya ga pakai hape beneran gan, tapi pakai virtua di website, jadi bisa liat tampilannya untuk semua tipe screen.

Diposting oleh 

@irpan sah : yang ane contohkan tadi untuk yang header,.. he he :D
kalo untuk postingan, lihat dibawah ini :
1. cari kode css dibawah ini :
.post-body{padding-top:10px;font:16px 'PT Sans Narrow';margin:1.0em 0 .75em;line-height:1.6em}

2. tambahkan kode css overflow:hidden; dan hasilnya seperti dibawah ini :
.post-body{overflow:hidden;padding-top:10px;font:16px 'PT Sans Narrow';margin:1.0em 0 .75em;line-height:1.6em}

iklan di blog ini bagian dalam postingan di resolusi 330px ke bawah sengaja tidak saya tampilkan,.. biar rapi, caranya dengan menggunakan kode css display:none;

Nah itu yang saya cari gan.. buat nambahin display non nya gimana.

e.g : .post-body{display:none;overflow:hidden;padding-top:10px;font:16px 'PT Sans Narrow';margin:1.0em 0 .75em;line-height:1.6em}

gitu ya jadinya setelah ditambahin display none ?

Diposting oleh 

@irpan sah : ya nggak lah,. kalo .post-body dikasih display:none; yang ada ntar .post-body nya hilang atau kagak keliatan,.. :capedeh

udah ngerti media query belum,. ?
karena kode iklan di dalam postingan saya taruh dan apit dengan kode < div id='iklan2'> jadi saya tambahkan kode display:none; di dalam kode css media query...
@media screen and (max-width:330px){
#iklan2{display:none;}
}

kwakwkakwa.. malah jadi hilang ya,.. :D

Kalau saya sok2 tau ntar susah nya di saya juga jadi saya akuin aja sudah pernah denger media query tapi saya ga faham media query..:) nah kalau liat kodenya kayanya saya pernah lihat di dalam template ada kumpulan kode itu.. hhi

Tak coba dulu ya gan.. oh iya, makasih ya kemarin buat kunjungannya.. :)

Diposting oleh 

@irpan sah : iye gan,.. sama-sama.. he he :D

wah alhamdulillah sukses gan.. sesuai yang diharapkan... hhe, makasih banyak ya gan budiyanto buat bantuannya.. :) salut buat agan udah mau direpotin.. salam hormat pokoknya.. :)

Diposting oleh 

@irpan sah : alhamdulillah deh kalo berhasil,. sip.. he he,.. ok gan,.. ^_^

Gan, kalau script khusus di atas yang buat IE apakah bisa digunakan di blog yang sudah responsive tapi belum mendukung responsive di IE ?
Terimakasih Gan

Diposting oleh 

@hengki kristianto : Internet Explorer tidak mendukung media query,. jadi script diatas dibutuhkan agar media query bisa di gunakan di IE .. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

@Maulana Akhsan : ukuran bagian mana yah,..?? :bingungs
semua ukuran lebar elemen di blog ini tidak ada patokannya dalam pixel gan,.. alias saya setting dengan persen contoh width:100%; sehingga tampilan blog bener bener full screen memenuhi layar,.. ^_^

Diposting oleh 

sebenarnya artikelnya bagus,,, dan saya butuhkan... tapi semua penambahan kodenya ga semuanya di jelasin di taruhnya diman dan saya pikir sudah kita tinggal kopi dan masukin ke template aja , masih pagi merubah angka besar kecil nya ini yang sulit dan akirnya orang mungkin males mraktekin nya, pak, maksih

Diposting oleh 

@mahadewa pulsa : semua kode yang ada di tutorial diatas hanyalah contoh,. bukan untuk di copy ke template masing2,. :)
jika anda termasuk orang yang belum mengerti tentang kode2 css memang susah mas,.. ^_^
btw, ane masih muda loh,. jangan manggil pak. :D

Diposting oleh 

mayan ribet .. tapi numpang cemilan dulu .. bacanya lama neh :D

Diposting oleh 
 · Admin mengatakan...

@Zippien Andrian : ha ha ,.. oke silahkan dibaca,. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 
 · Admin mengatakan...

@Widianto Hendro : Ok gan, silahkan.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 
 · Admin mengatakan...

@Makinudin : susah gan,.. n lama... :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 
 · Admin mengatakan...

@Muhammad Tasbillah : iya deh gak apa-apa,... ^_^

Diposting oleh 

komplit banget pembahasannya gan ane jadi kepingin peraktikan hehehe,, salam blogger gan :D

Diposting oleh 
 · Admin mengatakan...

oke gan, silahkan di praktekkan,... :Peace

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

ya dicoba dulu gan,.. cocok kok untuk semua jenis blog.. :cool:

Diposting oleh 

Trims Gan. Artikelnya menarik dan bermanfaat

Diposting oleh 
 · Admin mengatakan...

sama sama om... he he :D

Diposting oleh 

Template resposive ternyata juga berpengaruh buat kenyamanan pengunjung ya mas. Makasih mas sudah posting artikel menarik ini :)

Diposting oleh 

iya betul.. sangat membantu kenyamanan pengunjung,. terutama untuk pengunjung yang online pake mobile.. ^_^

Diposting oleh 

thhks ya gan infonya

Diposting oleh 

sama-sama,.... :)

Diposting oleh 

maksud dari ini apa gan, Kode berwarna merah adalah kode yang harus ditambahkan.
di artikel responsive mobile

Diposting oleh 

kode apa yang harus di tambahkannya, maaf saya baru terjun di dunia blogger

Diposting oleh 

jika anda sangat newbie tentang blogging,..
saran saya untuk responsive versi mobile biarkan Default saja, sudah responsive kok.... gx perlu diubah jadi settingan Khusus.

mulai dari kata-kata "Sekarang kita menuju tahap akhir" sampai kata terkhir silahkan diabaikan saja,..
silahkan ikuti kata-kata yg di atasnya.. :)

Diposting oleh 

coba cek punya ane gan...

sama kayak diatas newbie :ngakak:
tapi gue yakin :shutup:

Diposting oleh 
 · Admin mengatakan...

url nya mana gan,... :D

okta ga ngerti deh....
kan sebelumnya kita udah buat kode css, nah kita buat lagi ga sih kode cssnya trus di tambahain ini @media screen and (max-width:1024px) {
kode css
}
@media screen and (max-width:940px) {
kode css
}
@media screen and (max-width:820px) {
kode css
}
@media screen and (max-width:370px){
kode css
}

kita harus buat kode css lagi atau engga ?

Diposting oleh 

aduh emang susah jelasinnya... :(
begini bray seumpama udah ada kode css .content{width:1000px;height:auto;}
kode css diatas adalah kode default disemua resolusi...
untuk mengatur di resolusi tertentu, kita bisa menggunakan media query...
contoh :
ini adalah kode css default .content{width:1000px;height:auto;} "hanya contoh yah, masing2 template berbeda".
terus jika kita ingin mengaturnya supaya berbeda di resolusi 370px, gunakan media query..
pada kode css default diatas dibagian .content mempunyai width/lebar 1000px, jadi agar di resolusi 370px .content mempunyai 300px kita gunakan media query...
@media screen and (max-width:370px){
.content{width:300px;}
}

hhmm... jadi buat dua kali kan ? yaudah iya okta udah ngerti,,,, makasih :Peace

Diposting oleh 

sama-sama sis... :genit:

Diposting oleh 

Mantap. thanks gan bener2 berhasil ^_^

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

alhamdulillah kalo gitu... :)

Diposting oleh 

keren gan.. gue udah lama nyari artikel kaya gini buat dipraktekin diblog gue. thanks infonya.. langsung mau nyobain nih..

Diposting oleh 
 · Admin mengatakan...

oke gan,.. silahkan di praktekkan.. :cool:

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

ane masih bocah om,.. masak dipanggil Pak :ngakak:
untuk menerapkan desain responsif tinggal edit kode css aja om... :)

Diposting oleh 

saya nongol di sini lagi gan :D mau baca" lagi..
skrg lg ngebuild blog baru... pengen pake template sndiri :D

ada saran gak template polos/ kerangka template yg enak edit nya buat jadiin responsive? :D

Diposting oleh 

pake template thesis by blogjuragan aja.. gampang ngeditnya... :D

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

iklan apa om.. ?? :bingung:

pengen banget belajar bisa otak atik blog, apalagi bikin template responsive, tapi waktunya masih belum bisa ngebagi .....=D

Diposting oleh 

bikin template responsive gak susah kok sebenarnya,.. cuma butuh ketelitian aja om,. :D

Diposting oleh 

Gan,,,,
Ane pake Template Newe Johny Wuss,,
Sebenernya sudah responsif,,
tapi belakangan saya tambah Top Menu Horizontal,,
skrg ketika di melalui hp,,
top Menunya aja yg tidak responsif,,
Kira2 ada solusinya gak Gan?
Thanks sebelumnya.

Diposting oleh 

di setting pake kode css gan,.. :D

:bingung: gan,

Diposting oleh 

belajar biar gak bingung.. :D

ijin nyoba Gan

Diposting oleh 

silahkan gan,... :kiss:

Diposting oleh 

kalo supaya widget tidak tampil di resolusi tertentu, caranya ditambah kode apa ya?

mas sedikit masukan, blog ini, kalo dibaca di resolusi gede postingannya kelebaran, jadi bacanya cepet cape. :) kepalanya harus sering geleng-geleng,
:) pis just saran :D

Diposting oleh 

pake kode css gan, tapi harus tahu dulu nama elemen ID dari widget tersebut,.. contoh untuk widget arsip biasanya default-nya adalah #BlogArchive1
trus kalo tidak ingin menampilkan di resolusi tertentu, di resolusi 400px kebawah misalnya..
tambahkan kode @media screen and (max-width:400px) { #BlogArchive1{display:none} }


he he he,.. ane udah ngerasa begitu, di reso full hd 1080p lebar area postingan udah terlalu lebar, apalagi kalo direso diatas full hd.. gak kebayang dah :ngakak:
rata2 orang makenya monitor reso full HD kebawah sih.. kayak reso 720p atau 768p..
oke, insyaallah ntar kalo ada waktu pasti ane betulin deh... :D

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

kalo masalah pengaturan kode css itu pemilik blog lah yg harusnya mengatur sendiri,. karena perubahan dalam kode css membuat tampilan blog jadi berubah.... kalo agan sering ngedit css di html blog, nanti pasti akan mengerti... berbeda halnya kalo agan belum pernah mengatur kode css sama sekali.. alhasil bakalan terasa sulit atau susah, padahal kalo udah pengalaman ngedit kode css pasti mudah.. :)

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

waduh,.. ane sibuk kuliah nih, jadi sibuk banget...
coba kirimkan email dan password ke pembela.allah@gmail.com nanti aku editin templatenya biar responsive kalo ane lagi gak sibuk.. :)

Diposting oleh 

ngomong-ngomong tentang responsive, blog agan udah responsive belom hahah :ngakak: :nohope:

Diposting oleh 

udah tuh,.. coba dicek :(

Diposting oleh 

Terima Kasih atas infonya gan bermanfaat banget buat Blog saya yang belom resposive

Diposting oleh 

sama-sama... :D

malam tadi saya berkunjung kesini dengan android, dan templatenya responsive. Hanya saja ketika saya kunjungi lewat laptop saya sayangkan widget blog anda diberi transparansi. Tapi desain sih masing-masing sesuai selera hehe. saya coba gan..

Diposting oleh 

Makasih, Tutornya sangant bermanfaat :thumbup

wah masih bingung gan hahaha itu elemen cssnya apa aja ya gan??

Diposting oleh 

ha ha ha,.. ane suka yg transparan gan.. :Peace:

Diposting oleh 

oke om sip... :)

Diposting oleh 

agan menambahkan sendiri kode css nya.. kode css kan fungsinya untuk mengatur tampilan blog.
jadi agan harus ngerti dulu cara mengedit kode css.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

jangan pusing dong... :ngakak:

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Kemungkinan gambarnya blom responsive.... coba tambahin kode css di bawah ini :
img,object,embed{border:none;vertical-align:middle;max-width:98%;width:auto;height:auto;}

Diposting oleh 

Sumpah gan saya binggung padahal pengen banget blog saya jadi responsive.

Diposting oleh 

pertama yang harus di perhatikan pada saat penerapan metode ini apa gan ?
tolong pencerahaannya

Diposting oleh 

yg pertama dilakuin tuh,. harus mengerti tentang kode-kode css dan sudah pengalaman mengatur kode-kode css dalam html..
percuma kalo belum mengerti kode css trus baca postingan diatas.. ane jamin gak bakalan paham.. :ngakak:
jadi musti paham dulu tntang kode2 css.. kalo dah paham pasti ngerti dengan yg ane omongin di postingan diatas.. :D

Pengen bgt nyoba, tp ane masih awam bgt ma namanya blog! yang dimaksud kode css tu apa si gan?
ane udah punya blog tp gak full screen, bisa gak gan dibantu?

Diposting oleh 

waduh,.. belajar css dulu gan.. biar paham.. :ngakak:
kode css fungsinya untuk mengatur tampilan blog/website.. contoh : body{margin:0 auto;padding:0;background:#FFF;} dan lain-lain.. :D
ane sih bisa bantu cuman ane lagi sibuk banget.. :(

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

kalo berantakan ya di benerin dong gan pake kode css,.. :ngakak:
jadi musti paham dengan semua kode css dan fungsinya yg ada di blog agan.. :D

Diposting oleh 

masang kode cssnya itu di blogger > template > sesuaikan > tingkat lanjut > tambahkan kode css . disitu ya?

Diposting oleh 

kalo pake cara itu terlalu ribet..
cara lainnya tinggal menuju Blogger > Template > edit HTML ... disitu pasti ada kode css-nya.. tinggal diatur aja..
saran ane pake template custom, bukan template bawaan blogger supaya ngedit kode css-nya gampang...

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Insyaallah q komen balik vroh... :(

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

blog agan dah responsive.. mantaps. :thumbup
he he.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

maksud dari pertanyaannya gmana yah.. ? ane gagal paham.. :ngakak:
dah q cek di tampilan mobile menu-nya gak kepotong tuh,. udah responsive... :bingung:

Diposting oleh 

mantap gan... coba coba dulu. Makasih sebelumnya....


#yannabi

Diposting oleh 

sama-sama gan,.. he he he... :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

belajar css dulu gan,. biar gak bingung.. :ngakak:

Diposting oleh 

@Felix Young :
Ok, gan . ..makasih dah berkunjung

Diposting oleh 

@Daniel Erick :
Silahkan diterapin gan supaya blog agan responsive he he ..,

Diposting oleh 

@Fahrur Rozi :
Ok gan , nanti ane follow. .

Diposting oleh 

@Alberto Cello Sibarani :
semua tutorial di atas cocok buat semua template. .,
blog agan udah responsive tuh. cuma di beberapa resolusi saja belum responsive tapi gx parah kok.

Diposting oleh 

@Softandtrik : caranya pake kode css .... :D
contoh :
#sidebar {display:none;}
beberapa template nama sidebarnya adalah sidebar-wrapper

makasih infonya gan....

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

sama-sama gan,.. he he he.. :D

Diposting oleh 

bagus deh kalo work 100%.. oke ntar ane kunjungi kok.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

sama-sama gan... semoga berhasil nerapinnya di blog agan.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

ea sob,.. sama-sama he he he... :D

Diposting oleh 

Terima kasih gan, artikelnya sangat dibutuhkan terutama utk kami yang masih pemula ini.

Tapi artikel juragan masih kurang greget karena masih ada yang blm agan share, smg agan share dilain kesempatan.

kalau ada waktu beri saran blog kami ya gan.
oh ya kami juga tertarik dengan menu di atas header agan, gmn ya cara membuatnya.
terima kasih ...

Diposting oleh 

terimakasih atas komentarnya.. saya memang jarang posting dikarenakan suatu hal.. :(
untuk blog agan ashabulkahfi16 ane rasa sudah bagus.. :)
sedangkan untuk menu header di blog ini hanya menggunakan sedikit kode html sebagai struktur dan sedikit kode css untuk tampilannya.. tanpa javascript

wah bagus banget lagi nyari yang begini, ketemu disini, makasih gan..

Diposting oleh 

oke gan,..sama-sama.. trimakasih kunjungannya... :)

Diposting oleh 

ane mau coba mumpung ada project baru. resolusi gambarnya ga bisa responsif...kalo sempetin kasih tau ya Bro..terima kasih

Diposting oleh 

Insyaallah kalo ada waktu pasti ane bantu.. :D
btw, gambarnya gak responsive di dalam area postingan atau di luar area postingan.. :bingung:

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

sama-sama,... semangat terus.. :)

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

mat pagi gan... knapa ya tampilan blog saya pada mobile ketutup ama kotak iklan...tolong kritikannya gan pada blog saya... apa yang salah..??
salam sukses selalu..

@muhammad isra : iya itu ketutup karena 2 iklan sticky di samping kanan dan kiri body blog..
solusinya : kedua iklan tersebut tidak ditampilkan di resolusi rendah..
caranya..
- tambahkan kode dibawah ini kedalam kode css, lalu simpan template..

@media screen and (max-width:768px) { #HTML12{display:none;} }

Diposting oleh 

silahkan mencoba bray... :D

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

jangan berkomentar spam please... :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Infonya keren gan :)
Izin share aja ya
blogobattasik

@Risti Amalia : jgn naruh link dikomentar... :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Ini yang sedang saya cari-cari.
Thank Gan infonya sangat membantu :thumbup

@Grosir Obat Jelly Gamat Gold G : ini jg.. sama aja, nyepam mulu.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

spammer everywhere,,.. di situ kadang saya merasa di zolimi :(

Diposting oleh 

susah juga ya......

Diposting oleh 

emang terasa susah buat yang belum paham... :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

mas saya sudah coba di blog ane tapi kok gakresponsive ya please desasilimabanua

@Gybson Zhea : settingan css nya kurang mas...di rapiin lagi :D

matur nuwun banget kang infonya,

Diposting oleh 

sama-sama kang.. he he he..... :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

iya.. salam kenal juga.. :(

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

jangan nyepam dong.... :(

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

belum responsive om... :)

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

sama-sama sista... ^_^

Blog ane sudah responsive, silahkan cek di hafid-it.blogspot.com

Diposting oleh 

iya sudah responsive.. :)

‹Lebih tua 1 – 200 dari 290 Lebih baru›

Posting Komentar : Cara membuat blog menjadi full responsive 100% work

Baca dulu Peraturan Berkomentar di Blog Ini ! Supaya komentar anda tak sia-sia. Admin sangat senang jika tidak ada komentar yang mengandung spam :)

.::Peraturan Berkomentar::.

• Gunakan bahasa dan kata-kata yang sopan dan tidak menyinggung semua pihak manapun, baik ketika dilihat anak kecil maupun orang dewasa.
• Usahakan untuk tidak menggunakan kata-kata yang menyinggung RAS, SARA, dan berbau P*RNO.
• Dilarang menaruh link Aktif di dalam kotak komentar.
• Berkomentar Out Of Topic atau Oot saya perbolehkan apabila komentar tersebut berupa pertanyaan penting, asalkan tidak berlebihan dan tidak berbau SPAM!

Komentar akan dibalas paling lambat 3 hari kemudian. Terimakasih atas perhatiannya.
Widgets
Lisensi Creative Commons
Copyright © 2012 . Simo Responsive Template Design oleh . Publisher oleh Shizenku Blog.
Powered by Blogger and AMP ⚡ HTML