Membuat Template Lebih Responsive

Di masa lalu sebagian besar situs telah dikembangkan berdasarkan layout tetap, dan layar lebar 1024px umum telah dianggap sebagai ukuran yang relatif aman untuk digunakan  website/blog, Metode tradisional untuk menghadapi ini telah menciptakan dua sifat yang terpisah, di mana satu pengalaman yang dioptimalkan untuk mobile dan yang lainnya untuk desktop - namun ini berarti bahwa dua website harus dipertahankan, meningkatkan biaya pengembangan dan pemeliharaan. Hal ini juga mengabaikan banyak perangkat yang sekarang duduk antara mobile dan desktop - misalnya iPad.

Desain Responsif, di sisi lain, adalah suatu pendekatan  web desainer dan pengembang yang diperlukan untuk menyesuaikan tata letak situs untuk mengaktifkan perangkat layar kecil dan besar untuk berbagi basis kode yang sama dan konten, tanpa perlu sifat situs web yang terpisah. Melalui desain responsif Anda hanya perlu mengembangkan satu basis kode untuk semua pengguna, tidak peduli apa perangkat yang mereka gunakan.

Atas dasar hal tersebut diatas maka Kolom Tutorial™ merasa perlu untuk memposting sebuah kode yang memungkinkan sebuah blog/website akan tampak lebih responsive, kode tersebut insya allah akan sedikit mengubah blog atau website sobat menjadi lebih responsive, dan penerapannya pun cukup mudah.

Tutorial Penerapan kode :-

1. Login ke Akun Blogger sobat
2. Klik Template >>> Klik Edit HTML
3. Klik kode '►' di sebelah nomor seperti pada gambar dibawah :
Membuat Template Lebih Responsive, css 
4. Cari kode ]]></b:skin>  ( Tekan Ctrl + F untuk mempercepat pencarian ) setelah ketemu letakan kode dibawah ini tepat diatas kode ]]></b:skin> 
UNTUK KODE CSS NYA

@media screen and (max-width:1230px){#header{float:none;  max-width:none;  text-align:center}
#header-inner{margin-bottom:0px}
#header h1{margin-right:0px}
#header p.description{margin:0}
#header-right{position:relative;  right:0;  text-align:center;  margin:0 !important}
.header-right-inner{margin:0 30px ! important}
.main-nav-top{clear:both; float:none}
.main-nav-main{margin:10px 0 0 0}
#nav-search{float:none;  margin:0}
}
@media screen and (max-width:960px){.sidebar-wrapper{position:relative; top:auto;  right:auto;  clear:both;  left:auto;  width:auto;  margin:0 -15px;  background:none}
.subscribe_outer{margin:0 -20px}
.main-wrapper{margin-right:0;  width:100%;  min-height:0px}
.ct-wrapper{padding:0 15px}
#content{padding:5px;  clear:both;  border-radius:0}
.sidebar-wrapper .sidebar{margin:15px}
.sidebar-wrapper .widget{border:none;  margin:0px auto 10px auto;  padding:10px 20px}
}
@media screen and (max-width:768px){.header-wrapper{margin-right:0;  min-height:0;  width:100%}
#header{text-align:center;  width:100%; max-width:none}
#header-inner{margin:30px 0 0}
#header h1{font-size:35px}
.main-nav-top, .main-nav-main,
.main-nav-top ul, .main-nav-main ul{text-align:center}
.related-post{width:auto}
#comment-editor{margin:10px}
.footer{margin:15px;  width:auto}
.footer-credits .attribution{display:none}
}
@media screen and (max-width:500px){#header img{width:100%}
}
@media screen and (max-width:420px){#header h1{font-size:30px;  margin:10px}
.main-nav-main ul li{margin:4px 10px; float:none}
.comments .comments-content .datetime{display:block;  float:none}
.comments .comments-content .comment-header{height:70px}
}
@media screen and (max-width:320px){.ct-wrapper{padding:0}
.footer .footer-inner{padding:45px 10px 10px 10px}
.comments .comments-content .comment-replies{margin-left:0}

Demikian artikel ini semoga bermanfaat untuk sobat Blogger semuanya, dan jika sobat ingin mengecek Sudah Responsive atau tidaknya blog sobat silakan klik link dibawah kemudian masukan Url blog Sobat dan Klik GO. Terimakasih .

 

61 Responses to "Membuat Template Lebih Responsive"

  1. mantap sobat, ijin pake ilmu nya, ow ya saya nitip dong, bagaimana cara buat reply/balas di kotak komentar, blog saya tidak bisa buat reply/balas komentar, saya bingung cara nya gimana, yang versi editor html baru nih

    ReplyDelete
    Replies
    1. Cari kode ini : <dd class='comment-footer'> gunakan Ctrl F untuk mempermudah proses pencarian. Jika kode tersebut tidak ditemukan Anda bisa mencari kode alternatif seperti ini: <b:include data='comment' name='commentDeleteIcon'/> ;
      kemudian tambahkan kode dibawah ini dibawah salah satu kode di atas.
      <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukan Blog ID Anda Disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='http://4.bp.blogspot.com/_mWrR0-gomZ0/TIIfWolwWgI/AAAAAAAAARE/nwiHJLeqSVw/s1600/reply.gif'/></a>

      Jangan Lupa Masukan Blog ID Anda.

      Delete
    2. Jika cara di atas gagal coba cara ini,
      Cari kode :
      <b:include data='post' name='comments'/>
      Kemudian dibawahnya lihat apa kodenya sama dengan kode dibawah ini, jika tidak sama silakan ganti dengan kode dibawah.
      <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
      </b:if>

      Untuk menghindari kegagalan silakn backup dulu templatenya.

      Delete
    3. wuih memang mantap master yang satu ini,langsung merespon pertanyaan,,salut bro,,,

      Delete
  2. wah makasi bgt ya masbro, tak coba sek. maaf merepotkan

    ReplyDelete
  3. tutorial yang mantap mas brow ...

    ReplyDelete
    Replies
    1. Terimakasih mas atas support serta kunjungannya.

      Delete
  4. Wah makasih mas infonya supaya template lebih responsive, sudah saya coba berhasil, sukses selalu mas :)

    ReplyDelete
  5. wah....selalu terbaru klw masuk blognya mas juned. Asli fresh banget. tak cobain ke blog saya dulu ya mas. biar keren kyk blog ini :D

    ReplyDelete
    Replies
    1. ok mis, terimakasih banyak atas kunjungannya.

      Delete
  6. wah gda salahnya di coba yah kang mudah-mudahan lencerrrrrrrr,,,,, hehehehe oh ya di kopian heula kang :D

    ReplyDelete
    Replies
    1. hahhahha monggo mas, sippp pasti mas, ngeblog tanpa kopi kurang pas.

      Delete
  7. asyik nih mas......perlu di coba juga nih...biar keren juga kya blognya mas alex... :)

    ReplyDelete
    Replies
    1. silakan mas, terimakasih banyak kuknjungannya.

      Delete
    2. bener banget banget mas Budi,wajib dicoba tuh hehe

      Delete
  8. kode ini membuat loading blog menjadi berat atau tidak sob?

    ReplyDelete
    Replies
    1. silakan di coba aja dulu, kalau nambah berat kan bisa di hapus lagi, atau rasakan efeknya di blog ini mas.

      Delete
  9. mantepp nih mas, terimakasih sudah berbagi ilmu mas.. terus berkarya ya mas, saling sharing n happy blogging.. enjoy :D

    ReplyDelete
    Replies
    1. terimakasih banyak atas support serta kunjungannya, sippp mas.

      Delete
  10. wah, artikel yang sangat menarik dan bermanfaat...
    oiya sob, kalo untuk mengetahui responsif atau tidaknya blog apa tidak lebih mudah dengan mengetik CTRL+Shift+M ??? memang sepertinya hanya work pada firefox 15 keatas, dan ga tau kalo menggunakan browser lain...

    ReplyDelete
    Replies
    1. betul banget mis, itu lebih simle. thank kunjungannya mis.

      Delete
  11. ane kok pusing ya gan liat script di atas ? O.O, coba dulu dah

    ReplyDelete
  12. mau pake ini.... kodenya terlalu banyak takut nambah load yang semakin mengkisut :D
    ehh iya, bisa bantu edit slide gak.

    ReplyDelete
    Replies
    1. takut gemuk nih ceritanya, hehhehh
      thank mis atas kunjungannya

      Delete
  13. wah bikin aku pengen ngrubah template

    tapi kodenya sangat wowww

    ReplyDelete
    Replies
    1. Woow kenapa nih..........???

      Thank atas kunjungannya.

      Delete
    2. trus saya juga harus bilang waw geetoo hihi

      Delete
    3. kkkkkkkkkkkkkkk bisa aja ni mas dede

      Delete
  14. tapi aku masih belum ngerti toh mas

    ReplyDelete
    Replies
    1. intinya sobat tinggal kopas aja kode css di atas ke blog sobat tujuannya ya agar lebih responsive aja tampilan blognya.

      Delete
  15. waduh..berarti template blog-ku termasuk tidak responsive,
    harus cepat berganti ke yang responsive nich..terimakasih sobat sudah berbagi ilmu :-)

    ReplyDelete
    Replies
    1. silakan di cek aja mas, sama2 mas, terimakasih juga atas kunjungannya.

      Delete
  16. Naahhh sekarang bisa masuk,kemaren beberapa kali gakbisa masuk Mas Bro,BTW nice info nih,,,,

    ReplyDelete
    Replies
    1. iya mas, kemaren ada sedikit masalah, jadi sementara ditutp dulu dari publik, sambil beneri kesalahannya, terimakasih banyak mas kunjungannya.

      Delete
  17. kunjungan pagi dan disuguhi kopi plus tutor yang keren nih kang .. thx atas cemilan nya hehe

    ReplyDelete
  18. wah terimakasih nih mas alex joss banget deh, hehe punya saya udah terlanjur acak2an mas templatenya. jadi kebetulan banget nih kalo di suguhin tips diatas

    ReplyDelete
    Replies
    1. bisa aja si mas, terimakasih banyak atas kunjungannya mas

      Delete
  19. Tutorialnya sangat membantu dan berguna sekali sobat
    Terima kasih banyak atas ilmunya kawan

    ReplyDelete
    Replies
    1. sama2 mas terimakasih kembali atas kunjungannya. \o/

      Delete
  20. Selamat pagi selalamat berliburia kawan

    ReplyDelete
    Replies
    1. terimakasih banyak mas kunjungan serta ucapannnya \o/

      Delete
  21. nice tips buat pengguna blogspot..

    ReplyDelete
    Replies
    1. terimakasih banyak mas thank kunjungannya \o/

      Delete
  22. jika teman2 pencinta togel bila ingin merasakan kemenangan di dalam bermain togel hub MBAH DJEPATI di: 082-3331-77799 atau klik=> http://togelsingapu.blogspot.com/ kami sudah 5X terbukti.

    ReplyDelete
  23. ciao buona domenica dal'italia

    ReplyDelete
    Replies
    1. Grazie mille per aver visitato amici per il mio blog, Saluti

      Delete
  24. terimakasih sob ilmunya .. salam kenal

    ReplyDelete
  25. mengapa tidak bekerja di blog saya T.T, mohon pencerahannya

    ReplyDelete
  26. saya menggunakan template bawaan blogspot, templatenya tipe sederhana

    ReplyDelete
    Replies
    1. contoh diatas hanya sebagai perumpamaan gan jadi kode2 di ats silakan agan ganti dengan kode css utama yang terdapat dalam template agan dijamin ada perubahan

      Delete
  27. Saya ijin BM dulu, untuk fitur responsif peletakannya belakangan aja setelah semua elemen tampilan sudah enak dipandang...soalnya masih dalam tahap editing, thanks infonya mas

    ReplyDelete
  28. di coba dlu sob, lg pngen bljr responsive.in template

    ReplyDelete
  29. punya saya gagal terus, tolong pencerahannya

    ReplyDelete
    Replies
    1. contoh diatas hanya sebagai perumpamaan gan jadi kode2 di ats silakan agan ganti dengan kode css utama yang terdapat dalam template agan dijamin ada perubahan

      Delete
  30. Izin share ka, terimakasih :)
    http://goo.gl/21T1Mx
    http://goo.gl/mgBCnM
    http://goo.gl/zxbefd

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat