Langkah Mendesain Blog Blogger di Mobile atau Handphone - D-Copy Blog | Setiap hari saya berbagi tentang tutorial blogger, hmm ... Aku sangat lelah untuk membuat posting.
Tetapi saya harus melakukan itu karena aku seorang blogger, dan waktuku adalah uang. Jadi sekarang saya akan berbagi tentang bagaimana merancang blog blogger di mobile atau dandphone dan penjelasan tentang strukturtemplate seluler. Ok tanpa banyak kata, saya akan berbagi sekarang.
Langkah Mendesain Blog Blogger di Mobile atau Handphone :
- Buka akun blogger Anda
- Masuk ke menu edit HTML, jangan lupa centang expand template widget
- Cari kode dibawah ini :
<body>5. Ganti kode tersebut dengan kode dibawah ini :
<body expr:class='"loading" + data:blog.mobileClass'>
Untuk memanggil selector ponsel di blogger Anda perlu membuat seperti ini:
.mobile .class {property: value;}atau
.mobile #id {property: value;}untuk tag kondisional mobile seperti ini:
<b:if cond='data:blog.pageType == "data:blog.isMobile"'>
Cara Membuat Tata Letak Anda Responsif :
Untuk desain yang Anda perlu tahu CSS tentu saja, dan Anda perlu untuk mengetahui struktur template Anda.
Untuk gaya responsif, saya akan memberitahu Anda beberapa dasar untuk desain responsif.
Jika Anda ingin membuat wrapper Anda responsif, hal penting pertama adalah #outer-wrapper. Kemudian untuk membuat #outer-wrapper agar responsif, Anda dapat menggunakan seperti ini:
.mobile #outer-wrapper {max-width: 630px; width: auto;}atau
.mobile #outer-wrapper, .mobile #main-wrapper, .mobile #sidebar-wrapper {float: none; width: auto;}
Cara Mengedit Tata Letak HTML Melalui Ponsel
Tata letak HTML posting mobile di widget posting, jika Anda ingin mengedit tata letak, hanya mengedit seperti ini:
Hompage HTML di Ponsel:
<b:includable id='mobile-index-post' var='post'>Halaman Postingan di Ponsel:
<b:includable id='mobile-post' var='post'>
Cara Menampilkan Widget di Ponsel
Untuk menampilkan widget di ponsel, pada tag <b:widget>, hanya menambahkan atribut ini:
mobile='only'Untuk menampilkan widget di desktop dan mobile, pada tag <b:widget>, hanya menambahkan atribut ini:
mobile='yes'Langkah terakhir, save template Anda.
Terima kasih, semoga bermanfaat.
Maaf sobat saya OOT :)
ReplyDeleteIni dari mahasiswa Logika yah ?
Thanks Infonya ;)
ReplyDeleteperlu bimbingan tuk prakteknya
ReplyDeleteiwaw...
ReplyDeleteini yang ane cari gan...
kebetulan blog ane lumayan banyak visitor yang datang dengan persi mobile...
karna da tutorial modipikasi tampialn handphone nya...maka tak heran jika banyak nya visitor di versi mobile...
thank kang Odhi tutorial nya...
Yupss, good luck. :)
Deletewahhh keren bgt dach tuchh
ReplyDeletesukses ajh dach gan
nice artikel gan
ReplyDelete