Bagas Blog: tutorial

Home » Posts filed under tutorial

Showing posts with label tutorial. Show all posts

Wednesday, April 13, 2016

Cara Terbaru Menyimpan Foto Instagram Melalui Komputer

<div style="text-align: justify;">
Sekarang hampir semua pengguna telepon genggam pasti punya akun instagram. Kalau sobat belum punya, bisa buat akun instagram terlebih dahulu di <a href="https://instagram.com/">instagram.com</a>. Sosial media ini memiliki fitur upload gambar, video dan sobat juga bisa chatting dengan pengguna lain. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dengan instagram sobat juga bisa berbagi lokasi sobat, yaitu dengan adanya fitur map. Jadi saat sobat akan upload foto atau video baru, sobat bisa memilih lokasi sobat menggunakan peta dan gps. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Instagram sendiri memiliki website yaitu di <a href="https://instagram.com/">instagram.com</a>. Dengan browser pc sobat bisa melihat-lihat foto dan video dari pengguna lain. Tetapi apabila sobat menggunakan browser, sobat tidak bisa melakukan upload foto maupun video. Untuk upload konten baru, sobat harus menggunakan aplikasi instagram. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk membuka instagram melalui web browser, sobat tinggal masuk ke instagram.com/nama-pengguna atau sobat dapat login terlebih dulu ke akun instagram pribadi sobat melalui link <a href="https://instagram.com/accounts/login">https://instagram.com/accounts/login</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLbDqbtMe32_VMaUo4zMlGOEMsLOUUXZnyUnFsDcHBEyCCeMFvJY1tb_QBSi9wK9Rn9kxTFpmmKYCmbgckt3j76JP4Hc-fJDDTZTPBAJSK-5pUkm8WzgIopz0hlJ0dmlMlzMB_w-lx-w_/s1600/instagram.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLbDqbtMe32_VMaUo4zMlGOEMsLOUUXZnyUnFsDcHBEyCCeMFvJY1tb_QBSi9wK9Rn9kxTFpmmKYCmbgckt3j76JP4Hc-fJDDTZTPBAJSK-5pUkm8WzgIopz0hlJ0dmlMlzMB_w-lx-w_/s320/instagram.png" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Kembali ke topik, yaitu Cara menyimpan foto instagram melalui komputer. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Apabila sobat membuka foto seseorang melalui instagram, tentu sobat tidak bisa menyimpan gambar tersebut secara langsung. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sobat tidak bisa menyimpan gambar dengan klik kanan -> save image as. Tentu ada cara tertentu yang perlu dilakukan agar sobat dapat menyimpan foto instagram. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dan berikut adalah cara yang perlu sobat lakukan untuk menyimpan foto instagram melalui komputer sobat. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1. Pertama, sobat buka link foto instagram. Misalnya sobat membuka akun milik instagram sendiri di <a href="https://instagram.com/instagram">instagram.com/instagram</a>. Lalu klik kanan di mana saja, dan pilih inspeksi elemen atau dengan menekan F12. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFfELxiV5XLkWivdAkSw1IjLtJZhZ-mfqn9SjWxF-cyWL1BAay5YxvQrBmrU1r9dR6rg4v_KSSHaTwpZuIGY8QOj3Nq-ydi-Hllm3PfZaPyeff7skVpxfuZK9fC94yVT9ydM1tq4VYG07/s1600/inspect+element.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="321" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFfELxiV5XLkWivdAkSw1IjLtJZhZ-mfqn9SjWxF-cyWL1BAay5YxvQrBmrU1r9dR6rg4v_KSSHaTwpZuIGY8QOj3Nq-ydi-Hllm3PfZaPyeff7skVpxfuZK9fC94yVT9ydM1tq4VYG07/s400/inspect+element.PNG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
2. Beralih ke tab console dan ketikkan </div>
<blockquote class="tr_bq" style="text-align: justify;">
$("article img"); </blockquote>
 dan tekan enter. Jika berhasil, tampilannya akan menjadi seperti ini<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNKymImtj26bX0M_L9aI003pqy3W-JR3fzu9Kuu3c0F_BLNA0FTxXZvf6RiGzNx4rXMsog0XGlhlqfX28i-eUceB-1bzQXRqrMblUJSzUtvcLXA8P7q9PL1KunOJC2WTv3n8FMjWTXlcHH/s1600/article+img.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="355" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNKymImtj26bX0M_L9aI003pqy3W-JR3fzu9Kuu3c0F_BLNA0FTxXZvf6RiGzNx4rXMsog0XGlhlqfX28i-eUceB-1bzQXRqrMblUJSzUtvcLXA8P7q9PL1KunOJC2WTv3n8FMjWTXlcHH/s400/article+img.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
3. Klik kanan pada salah satu link gambar yang ingin sobat pilih dan pilih open image in new tab. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
4. Setelah gambar terbuka, sobat dapat menyimpan gambar yang sobat peroleh dari instagram. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
5. Setelah berhasil, sobat perlu membagikan artikel bermanfaat ini agar orang lain juga mengetahui Cara Terbaru Menyimpan Foto Instagram Melalui Komputer. </div>
<br />
Semoga tutorial ini bisa bermanfaat bagi sobat semua :)

Sekarang hampir semua pengguna telepon genggam pasti punya akun instagram. Kalau sobat belum punya, bisa buat akun instagram terlebih dahul...

Menginstall Wordpress Offline Dengan Localhost Xampp

<div style="text-align: justify;">
Wordpress adalah salah satu platform untuk blogging seperti layaknya blogspot. Perbedaannya adalah wordpress berbasis php, sedangkan blogspot menggunakan xml. Secara penggunaan, wordpress juga berbeda dengan blogspot. Dengan wordpress, sobat dapat membuat berbagai jenis website, seperti website berita, tutorial, artikel, website pribadi dan lain sebagainya. Dan wordpress ini sangat menarik untuk dipelajari. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sobat dapat membuat sebuah blog berbasis wordpress di situs resmi wordpress yaitu <a href="https://wordpress.com/">wordpress.com</a> atau sobat juga bisa menggunakan wordpress secara offline dengan mengunduhnya dan meginstallnya pada pc sobat. Apabila sobat ingin menginstall wordpress secara offline, sobat membutuhkan aplikasi bernama Xampp yang dapat diunduh secara gratis juga. Untuk lebih jelasnya akan saya bahas pada artikel ini. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHF0H0GvE7j8Aof6lEMzw9ePiNt_GEP6NWwVKO0hRPYtUa_RggHl41C_BGKr030sPuz2_IRHgHsv-vctjlgYcwDBo4aJhcyAyH0z2PXDNXrr_GtcE2C9Kj4xQfet4ASfFueg6y4hK8-NA0/s1600/wordpress-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHF0H0GvE7j8Aof6lEMzw9ePiNt_GEP6NWwVKO0hRPYtUa_RggHl41C_BGKr030sPuz2_IRHgHsv-vctjlgYcwDBo4aJhcyAyH0z2PXDNXrr_GtcE2C9Kj4xQfet4ASfFueg6y4hK8-NA0/s400/wordpress-logo.png" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk dapat menginstall wordpress secara offline, yang perlu sobat persiapkan adalah :</div>
<div style="text-align: justify;">
</div>
<ul>
<li>Perangkat pc atau laptop</li>
<li>Aplikasi Xampp yang dapat diunduh secara gratis di <a href="https://www.apachefriends.org/download.html">www.apachefriends.org</a></li>
<li>Wordpress yang dapat diunduh secara gratis juga di <a href="https://wordpress.org/download/">wordpress.org</a></li>
</ul>
<div>
Langkah-langkah menginstall Wordpress secara offline adalah :</div>
<div>
<br /></div>
<div style="text-align: justify;">
Pertama, install aplikasi Xampp di local disk sobat. Apabila local disk sobat berada pada partisi C, maka aplikasi Xampp ini akan terinstall di C:\xampp.</div>
<div>
<br /></div>
<div style="text-align: justify;">
Setelah terinstall, buka aplikasi Xampp Control Panel yang baru saja terinstall tadi. Lalu klik start untuk Apache dan MySQL. Hal ini berfungsi untuk mengaktifkan database Apache dan MySQL. Tunggu sampai proses loading selesai. </div>
<div>
<br /></div>
<div style="text-align: justify;">
Lalu, buka browser dan ketik localhost/phpmyadmin dan tunggu sampai loading selesai. Buat sebuah database sederhana. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Buat sebuah folder baru di C:\Xampp:\htdocs, misal folder bernama wordpress. Ekstrak file wordpress yang sudah diunduh tadi ke C:\Xampp:\htdocs. Kembali beralih ke browser, masukkan alamat localhost/wordpress dan tunggu sampai proses loading selesai. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dan masukkan nama database, username dan password sesuai dengan database yang telah sobat buat. Setelah proses instalasi selesai, sobat dapat login melalui localhost/wordpress/wp-admin</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Demikian cara menginstall wordpress offline dengan localhost Xampp, semoga bermanfaat :)</div>

Wordpress adalah salah satu platform untuk blogging seperti layaknya blogspot. Perbedaannya adalah wordpress berbasis php, sedangkan blogsp...

Keuntungan Memanfaatkan Situs Social Bookmark

<div style="text-align: justify;">
Mungkin istilah social bookmark sudah tidak asing lagi bagi sobat. Menurut pengertian yang saya ambil dari wikipedia, Penanda sosial (Social Bookmarking) adalah sebuah metode bagi pengguna internet untuk mengorganisasi, menyimpan, mengelola, dan mencari sumber daya yang tersedia secara online. Dari pengertian itu, kita bisa ambil arti sosial bookmark secara singkat adalah situs untuk memberikan bookmark pada link halaman web kita. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Secara fungsinya, kita melakukan submit ke suatu situs social bookmark, dan kemudian situs tersebut akan menyimpan halaman web yang telah kita submit tadi. Dan ternyata menggunakan social bookmark memiliki pengaruh yang besar terhadap optimisasi mesin pencarian atau biasa disebut SEO (Search Engine Optimization). Dan pada artikel ini, saya akan membahas apa saja Keuntungan Memanfaatkan Situs Social Bookmark, tentunya untuk membantu agar web kita lebih SEO. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPU32QlLjGrAW96R56rqT7CyuGXIgRVU5lQ4-g2Ye1y8b3fqYczpIE9C75-TQfbTCQhq-GdeAiwrwU34wo7oaTMWn7m7bopo4fz3T8SGTdIv-SQN2m4L4TwFUFYWhTkGpsxtve81xpsBVZ/s1600/book-bookmark-icon.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPU32QlLjGrAW96R56rqT7CyuGXIgRVU5lQ4-g2Ye1y8b3fqYczpIE9C75-TQfbTCQhq-GdeAiwrwU34wo7oaTMWn7m7bopo4fz3T8SGTdIv-SQN2m4L4TwFUFYWhTkGpsxtve81xpsBVZ/s320/book-bookmark-icon.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">gambar dari <a href="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/book-bookmark-icon.png">iconarchive.com</a></td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Social bookmark memberikan backlink ke web sobat</b></div>
<div style="text-align: justify;">
Salah satu keuntungan memanfaatkan situs social bookmark adalah web kita akan mendapatkan backlink dari situs social bookmark tersebut. Dan tentunya situs social bookmark sudah sangat SEO. Dan hal ini menambah keuntungan lagi, yaitu kita mendapatkan backlink yang sangat berkualitas. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Menambah visitor</b></div>
<div style="text-align: justify;">
Situs social bookmark yang sudah sangat SEO, pasti memiliki visitor tetap yang sangat banyak. Dan kemungkinan besar, apabila kita melakukan submit konten web kita kesana, akan ada yang membaca. Apalagi kalau konten yang kita submit memiliki kualitas yang baik, tentu akan banyak pengunjung yang mengunjungi web kita. Dan tentuya real visitor. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Mendongkrak SEO</b></div>
<div style="text-align: justify;">
Dengan backllink yang berkualitas, dan real visitor atau pengunjung asli atau organik yang terus bertambah, tentu web kita akan lebih mudah ditemukan di mesin pencari. Dan hal ini akan menjadi keuntungan bagi kita. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sebenarnya ada lagi keuntungan lain yang dapat sobat peroleh apabila sobat memanfaatkan situs social bookmark. Tetapi belum tentu juga kalau sobat memanfaatkan situs social bookmark, maka web sobat akan langsung SEO. Semua itu butuh waktu, dan tentunya perlu konten yang berkualitas agar dapat menarik pembaca. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Situs social bookmark akan membantu pembaca menemukan situs web sobat. Jadi, sobat tetap harus membuat konten yang berkualitas, agar pembaca tertarik mengunjungi web sobat. </div>

Mungkin istilah social bookmark sudah tidak asing lagi bagi sobat. Menurut pengertian yang saya ambil dari wikipedia, Penanda sosial (Socia...

Mengganti kolom komentar dengan Disqus di blogspot

<div style="text-align: justify;">
Kalau sobat ingin mengganti kolom komentar pada blog sobat, maka sobat bisa mengganti kolom komentar sobat dengan Disqus. Kenapa Disqus? Karena Disqus adalah widget komentar yang paling sering digunakan sekarang. Selain itu, </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Disqus juga bersifat SEO dan tidak berat. Selain itu juga mudah untuk berkomentar di Disqus karena kita bisa login dengan berbagai sosial media. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Karena beberapa kelebihan di atas, maka banyak blogger yang mulai menggunakan Disqus. Contohnya adalah blog saya ini. Ya walaupun masih sangat jarang yang berkomentar, tapi setidaknya saya sudah memasang widget ini sehingga saya memudahkan pengunjung yang ingin berkomentar. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2C0Kr86wzLaKYcoWMYF6w_pLl-FyjJOQJiadop8TPUxlopzcBq0qdyRmddG2NcQyaaPT6VqHMVH9qbo2fH78VhkL7RAdRIiuQFsvTm_oTxsD5IR3P_ZgpFIVe3jy5NrchEMYH8JII8gOP/s1600/disqus+icon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2C0Kr86wzLaKYcoWMYF6w_pLl-FyjJOQJiadop8TPUxlopzcBq0qdyRmddG2NcQyaaPT6VqHMVH9qbo2fH78VhkL7RAdRIiuQFsvTm_oTxsD5IR3P_ZgpFIVe3jy5NrchEMYH8JII8gOP/s320/disqus+icon.jpg" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Lalu, bagaimana supaya blog yang kita gunakan bisa diinstal atau dipasang widget untuk berkomentar ini? </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langsung saja, saya akan menjelaskannya dengan mudah dan sederhana.<br />Yang pertama kali dilakukan adalah buka link Disqus di <a href="http://disqus.com/">disqus.com</a> dan login atau buat akun kalau sobat belum mempunyai akun Disqus. Untuk langkah-langkah membuat akun Disqus hampir sama seperti kebanyakan situs pada umumnya, jadi saya tidak perlu menjelaskannya. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Setelah sobat membuat akun dan berhasil login ke akun sobat, klik di sudut kanan dan pilih Add Disqus to Site. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAu0nEWBR9GLCR7IDhWBJb0WJ-hPSQKu67WEXygg1KTJFQOrHaEXWJ4IMeyhnvJPZz3CbmcEBkRBF9KCkS3TmXNx0DL9X7CmdCJTx6eox6r04dtF4KaUu0Kf3v7HSLofdfSnlaI_u4I8A/s1600/disqus+setting.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAu0nEWBR9GLCR7IDhWBJb0WJ-hPSQKu67WEXygg1KTJFQOrHaEXWJ4IMeyhnvJPZz3CbmcEBkRBF9KCkS3TmXNx0DL9X7CmdCJTx6eox6r04dtF4KaUu0Kf3v7HSLofdfSnlaI_u4I8A/s320/disqus+setting.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Setelah itu sobat akan diarahkan pada halaman untuk mengisi website sobat, link disqus, dan memilih kategori website sobat. Untuk lebih jelasnya sobat bisa melihat gambar di bawah ini.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKhnjxAS7266BF8zVRxOTuq3-VBDHLORUdITT4YME0YnPS1akruVARvJG3tNGzDWlbXqsaF3C0xTh0Hvgnf2g40AwR9j0VceNL1YYmR715b-dj5Nt-zxi-kNBv_XEBNjjxqXzQttRdwFT/s1600/setup+disqus.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKhnjxAS7266BF8zVRxOTuq3-VBDHLORUdITT4YME0YnPS1akruVARvJG3tNGzDWlbXqsaF3C0xTh0Hvgnf2g40AwR9j0VceNL1YYmR715b-dj5Nt-zxi-kNBv_XEBNjjxqXzQttRdwFT/s320/setup+disqus.PNG" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Selesai mengatur website yang akan digunakan, langkah selanjutnya adalah sobat memilih platform website sobat yang akan sobat pasang Disqus. Pada posting ini saya menggunakan platform Blogger.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhogWCUIJJLoMB4__Y5ygzjqlSeRqY8MvgWMOQ02gCcsdKsZS8nVjbsY_bp_owgK1nSycSLntiOi386gIDdx-iVydvBfTCrO0xhlPPzOm1TMK5UPEkqPJDl7bnZEbt9cvbn6IJkYQnExEYk/s1600/setting+up+disqus.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhogWCUIJJLoMB4__Y5ygzjqlSeRqY8MvgWMOQ02gCcsdKsZS8nVjbsY_bp_owgK1nSycSLntiOi386gIDdx-iVydvBfTCrO0xhlPPzOm1TMK5UPEkqPJDl7bnZEbt9cvbn6IJkYQnExEYk/s320/setting+up+disqus.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ikuti langkah-langkah sesuai dengan yang diarahkan Disqus. Setelah sobat mengikuti langkah tersebut, pasti blog sobat sudah terinstal widget komentar ini. Dan sobat tinggal menunggu pengunjung datang dan berkomentar di blog sobat. </div>
<div style="text-align: justify;">
<br /></div>

Kalau sobat ingin mengganti kolom komentar pada blog sobat, maka sobat bisa mengganti kolom komentar sobat dengan Disqus. Kenapa Disqus? Ka...

Membuat tampilan web menjadi responsive

<div style="text-align: justify;">
Seiring berkembangnya zaman, banyaknya pengunjung suatu halaman web akan semakin bertambah. Tidak hanya pengunjung yang menggunakan komputer, tetapi sekarang sebagian besar pengunjung halaman web adalah pengunjung yang menggunakan perangkat mobile atau hp. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tingkat pengalaman pengguna akan ditentukan dari apakah suatu halaman web yang dikunjungi tersebut dapat muat dan enak dilihat dalam berbagai perangkat. Misalnya, pengguna hp akan merasa senang apabila mereka tidak perlu melakukan 'zoom-in' dan 'zoom-out' saat membaca konten halaman web.<br />
<br />
Sekarang ini, halaman web yang banyak dikunjungi adalah halaman web yang sudah responsive, karena akan memberikan pengalaman berkunjung yang baik, terutama untuk pengunjung yang menggunakan perangkat mobile.<br />
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bYmW9-1w3AZvQd2ZhrcFDWRMKwVLssseSg5ZPJB9mFqCxmlBxn4toMFHQWqKtow8-17h_5xqH8s1nWtLoufhL6sPJvsjxG_MjCLCW68TnmniI4BTGBuxypbyhpjkZPu1F5IgXLR9ZK2S/s1600/responsive+web+page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="responsive web page" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bYmW9-1w3AZvQd2ZhrcFDWRMKwVLssseSg5ZPJB9mFqCxmlBxn4toMFHQWqKtow8-17h_5xqH8s1nWtLoufhL6sPJvsjxG_MjCLCW68TnmniI4BTGBuxypbyhpjkZPu1F5IgXLR9ZK2S/s400/responsive+web+page.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Dan berikut adalah beberapa langkah yang harus diikuti untuk membuat tampilan halaman web yang responsive. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Mengatur media screen </b><br />
Mengatur media screen, yaitu memberikan efek css yang berbeda untuk lebar layar yang berbeda.<br />
<br />
Terdapat 2 cara mengatur media screen, yaitu dengan membuat tampilan versi desktop terlebih dahulu, kemudian kita mengatur bagaimana media screen untuk tampilan versi mobilenya. Atau sebaliknya.<br />
<br />
Untuk cara pertama, yaitu kita membuat tampilan desktop terlebih dahulu<br />
Contohnya kita memiliki kode selektor id css sidebar.<br />
Kodenya adalah seperti ini<br />
<blockquote class="tr_bq" style="text-align: left;">
#sidebar{width:30%; float:right; padding:0.2em; background-color:transparent;}</blockquote>
Pada kode di atas, kita mengatur sebuah objek bernama sidebar, yang memiliki lebar sebesar 30 persen dari lebar layar dan posisinya berada di sebelah kanan.<br />
<br />
Pada umumnya pada tampilan mobile, semua objek berada pada lebar yang sama. Sehingga kode css untuk tampilan mobile dari selektor id sidebar di atas kurang lebih seperti ini<br />
<blockquote class="tr_bq" style="text-align: left;">
@media only screen and (max-width:768px) {#sidebar{float:none; width:100%; clear:both;}}</blockquote>
Pada kode css media screen tersebut, kita mengatur apabila lebar layar kurang dari atau sama dengan 768 piksel, maka objek bernama sidebar memiliki lebar 100% dan posisi objek tidak diatur, sehingga objek akan terletak sesuai dengan urutan objek dipanggil pada kode html.<br />
<br />
Untuk cara kedua, kita membuat tampilan mobile terlebih dahulu<br />
Dengan kode selektor yang hampir sama seperti di atas, tetapi dengan lebar yang berbeda.<br />
<blockquote class="tr_bq" style="text-align: left;">
#sidebar{float:none; width:100%; padding:0.2em; background-color:transparent; clear:both;}</blockquote>
Lalu kita lanjut dengan mengatur tampilan desktopnya<br />
<blockquote class="tr_bq">
@media only screen and (min-width:768px) {#sidebar{width:30%; float:right; clear:none;}}</blockquote>
Dengan mengatur media screen, kita dapat membuat tampilan berbeda untuk mobile dan desktop. Pengaturan media screen dapat diletakkan dimana saja, yang terpenting masih di dalam <style></style><br />
<br />
<b>Mengatur viewport</b><br />
Hal satu ini sangat penting bagi suatu tampilan halaman web. Terkadang halaman web sudah diatur supaya responsive, tetapi saat ditampilkan di perangkat hp tidak terlihat responsive. Hal itu dapat terjadi karena viewport belum diatur. Atau pengaturan viewport yang digunakan kurang sesuai.<br />
<br />
Untuk membuat sebuah halaman web yang responsive, selain mengatur media screen, kita juga harus mengatur viewport.<br />
<br />
Untuk menuliskan viewport, pada kode html, buat sebuah meta tag baru. Dan letakkan di bawah <head>. Kodenya seperti di bawah ini.<br />
<blockquote class="tr_bq">
<meta /></blockquote>
Kemudian atur apa isi dari meta tag tersebut. Berarti untuk membuat viewport, kita tuliskan name="viewport" di dalam tag meta yang sudah kita buat sebelumnya. Sehingga kodenya akan menjadi seperti ini.<br />
<blockquote class="tr_bq">
 <meta name="viewport" /></blockquote>
Kemudian, kita atur isi dari meta tag tersebut, agar meta tag yang kita buat dapat berfungsi dengan baik. Dan pada tutorial ini, admin hanya menggunakan satu konten viewport, yaitu device width. Caranya dengan menambahkan content="width=device-width" di dalam meta tag. Dan kodenya akan menjadi seperti ini.<br />
<blockquote class="tr_bq">
<meta name="viewport" content="width=device-width" /></blockquote>
Pada meta tag di atas, berarti kita mengatur bahwa halaman web yang kita buat akan menyesuaikan ukuran lebar dari perangkat yang akan mengakses halaman web tersebut. Misalnya  halaman web yang kita buat diakses layar dengan lebar 640 piksel, maka tampilan web yang muncul adalah tampilan web untuk layar kecil.<br />
<br />
Demikian 2 cara membuat tampilan web menjadi responsive. Apabila ada pertanyaan, dapat ditanyakan melalui kolom komentar di bawah. </div>

Seiring berkembangnya zaman, banyaknya pengunjung suatu halaman web akan semakin bertambah. Tidak hanya pengunjung yang menggunakan kompute...

Membuat footer blog

<div style="text-align: justify;">
Footer blog biasa terletak pada bagian bawah tampilan blog. Pada umumnya terdapat tulisan copyright, tahun pembuatan template dan nama blog. Fungsi dari footer ini adalah untuk memberitahu pengunjung copyright dari blog yang kita miliki. Sebenarnya footer ini bersifat opsional, tetapi alangkah baiknya untu menambahkan footer ini agar blog tampak lebih resmi dan meyakinkan pengunjung kalau blog kita bukan blog iseng-iseng.<br />
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Contoh tampilan footer adalah seperti gambar di bawah ini </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzZOE3sD4v7QsekTRuNKv_0inUd8eEbImfH3hDSSINwtP4BPapWq3_U9ygw-OY04p4kcZbra24uClcd6AXB64locIvWmginHzgbCgcRdr_suCxDdBZUC8bUKEMjC0dK0c7jutknzpMPhe1/s1600/footer.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzZOE3sD4v7QsekTRuNKv_0inUd8eEbImfH3hDSSINwtP4BPapWq3_U9ygw-OY04p4kcZbra24uClcd6AXB64locIvWmginHzgbCgcRdr_suCxDdBZUC8bUKEMjC0dK0c7jutknzpMPhe1/s400/footer.PNG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Lalu, bagaimana cara membuat footer blog seperti blog <a href="http://nbagas.blogspot.co.id/">All In Wish</a> ? Berikut adalah kode html dan css yang digunakan. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk kode html </div>
<blockquote class="tr_bq" style="text-align: justify;">
<br />
<footer id='footer-text'>&#169; 2015 <a href='/'><data:blog.title/></a></footer></blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Letakkan kode di atas di atas kode </body></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Kemudian untuk kode css yang diperlukan</div>
<blockquote class="tr_bq" style="text-align: justify;">
#footer-text{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>display:block;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow:hidden;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>text-align:center;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color:#212121;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>clear:both;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding:5px 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color:white; width:100%;<br />
}<br />
#footer-text a{color:white;}</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Letakkan kode di atas tepat di atas kode ]]></b:skin></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Simpan dan lihat perubahannya. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Kode &#169; adalah kode simbol copyright ©. <data:blog.title/> akan menampilkan nama blog anda. Sehingga anda tidak perlu lagi untuk melakukan pengeditan pada kode html di atas.<br />
<br />
Demikian cara membuat footer blog. Jika ada yang ingin ditanyakan, silahkan bertanya melalui kolom komentar di bawah.</div>

Footer blog biasa terletak pada bagian bawah tampilan blog. Pada umumnya terdapat tulisan copyright, tahun pembuatan template dan nama blog...

Membuat post artikel bersebelahan dengan widget sidebar

<div style="text-align: justify;">
Dalam membuat blog, kita perlu juga menempatkan posisi artikel di tempat yang tepat. Pada umumnya artikel bersebelahan dengan sidebar. Contoh dari artikel bersebelahan dengan widget sidebar adalah tampilan blog <a href="http://nbagas.blogspot.co.id/">All In Wish</a> ini. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgQEZ8NWjssY-vhKyccVxbnyaWACm54pf380is86IDw3FEoF4D3FnnXfbUkPq4hiBcXJm1I8v5dvVGV50ECd759bqMaBlRqusRA1JQp0_G5CXQOSI9R1cslzNwuhOT1dcAZ3dKbQFZF28/s1600/artikel+bersebelahan+sidebar.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgQEZ8NWjssY-vhKyccVxbnyaWACm54pf380is86IDw3FEoF4D3FnnXfbUkPq4hiBcXJm1I8v5dvVGV50ECd759bqMaBlRqusRA1JQp0_G5CXQOSI9R1cslzNwuhOT1dcAZ3dKbQFZF28/s400/artikel+bersebelahan+sidebar.PNG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jika anda sudah mengikuti tutorial pembuatan template dari awal, maka akan lebih mudah untuk melanjutkan tutorial berikut ini. Pada tutorial awal tentang <a href="http://nbagas.blogspot.co.id/2015/12/membuat-template-blog-sendiri.html">membuat template blog sendiri</a> telah ditulis kode html untuk tempat posting blog. Lalu pada tutorial ini akan dilanjutkan untuk meletakkan tag article, dan kode html posting blog dipindah ke dalam tag article tersebut. Lalu untuk sidebar digunakan tag aside. Daripada bingung, langsung saja berikut penjelasan cara membuatnya.<br />
<br />
Buat kode html untuk tempat posting blog seperti ini<br />
<blockquote class="tr_bq">
<article id='article-content'><br /><b:section class='main' id='main'><br />  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget><br /></b:section><br /></article></blockquote>
<br />
Lalu, di bawahnya buat kode html untuk tempat widget sidebar<br />
<blockquote class="tr_bq">
<aside id='sidebar-content'><br /><b:section id='sidebar' class='sidebar' showaddelement='yes' /><br /></aside></blockquote>
<br />
 Lalu untuk kode css untuk posting blog adalah seperti ini<br />
<blockquote class="tr_bq">
#article-content{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>width:69%;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>float:left;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>overflow:hidden;<br />}@media screen and (max-width:800px) {#article-content{width:100%; border-bottom:5px solid #E3F2FD; padding-bottom:20px;}}</blockquote>
<br />
Dan kode css untuk widget sidebar<br />
<blockquote class="tr_bq">
#sidebar-content{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>width:29%;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>float:right;<br />}@media screen and (max-width:800px) {#sidebar-content{width:100%; padding-top:20px; padding-bottom:20px;}}</blockquote>
<br />
 Letakkan kedua kode css di atas tepat berada di atas kode <span style="background-color: white; color: #424242; font-family: Helvetica;"><b:skin><![CDATA[</span><br />
<span style="background-color: white; color: #424242; font-family: Helvetica;">Lalu simpan dan lihat perubahan yang terjadi. </span><br />
<span style="background-color: white; color: #424242; font-family: Helvetica;"><br /></span>
<span style="background-color: white; color: #424242; font-family: Helvetica;">Demikian cara membuat post artikel bersebelahan dengan widget sidebar. Jika ada yang ingin ditanyakan dapat melalui kolom komentar di bawah.</span></div>

Dalam membuat blog, kita perlu juga menempatkan posisi artikel di tempat yang tepat. Pada umumnya artikel bersebelahan dengan sidebar. Cont...

Membuat form pencarian pada blog

<div style="text-align: justify;">
Form pencarian adalah komponen yang sangat penting pada blog. Karena dengan form pencarian, pengunjung dapat menjelajahi seluruh isi atau konten blog yang kita tulis. Form pencarian bisa diletakkan di dalam kode html blog, bisa juga dijadikan widget. Biasanya form pencarian ini diletakkan di sebelah dropdown menu, atau pada widget sidebar atau bisa juga diletakkan pada widget di bawah postingan. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tampilan form pencarian yang akan dibuat adalah seperti pada gambar di bawah ini </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tRk0XbixEGpjDU59Lqc8EM2qK96m45JhX9QM-c7qN3USUDOtTnvFDgcDymugxyeOBr4j-W11nspNT3U15GbR3KF-vnsN_nXr0c57HankNwZazLzWINjMoeosepzLvAFrCAwAoIE9xR0U/s1600/search+form.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tRk0XbixEGpjDU59Lqc8EM2qK96m45JhX9QM-c7qN3USUDOtTnvFDgcDymugxyeOBr4j-W11nspNT3U15GbR3KF-vnsN_nXr0c57HankNwZazLzWINjMoeosepzLvAFrCAwAoIE9xR0U/s1600/search+form.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Langsung saja, berikut adalah kode html dan css yang dibutuhkan untuk membuat form pencarian pada blog. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Kode html </div>
<blockquote class="tr_bq" style="clear: both; text-align: justify;">
<div id='menu-search'><br /><form action='/search' method='get'><br /><input name='q' placeholder=' Search' type='text'/><br /><button type='submit'><span>search</span></button><br /></form><br /></div></blockquote>
<div style="text-align: justify;">
Salin kode tersebut di mana saja, bisa dijadikan widget atau diletakkan pada kode html.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Kemudian untuk kode css yang diperlukan </div>
<blockquote class="tr_bq" style="text-align: justify;">
#menu-search{<br />top:5px;<br />position:relative;<br />}<br />#menu-search input{<br />height:32px;<br />border:none;<br />width:120px;<br />border:2px solid #424242;<br />float:left;<br />}<br />#menu-search button{<br />color:white;<br />cursor:pointer;<br />font-weight:bold;<br />height:32px;<br />width:52px;<br />border:0;<br />float:left;<br />background-color:#424242;<br />}</blockquote>
Salin kode css di atas di atas kode <span style="background-color: white; color: #424242; font-family: Helvetica; text-align: justify;"><b:skin><![CDATA[</span><br />
Kode css di atas dapat dikustomisasi, misal untuk mengganti ukuran lebar, tinggi, warna latar dan lain sebagainya.<br />
<br />
Demikian cara membuat form pencarian pada blog.

Form pencarian adalah komponen yang sangat penting pada blog. Karena dengan form pencarian, pengunjung dapat menjelajahi seluruh isi atau k...

Membuat dropdown menu responsive

<div style="text-align: justify;">
Setelah membuat navigation menu dan header, langkah selanjutnya adalah membuat dropdown menu. Dropdown menu adalah menu yang menunjukkan konten apa saja yang ada atau terdapat pada blog. Biasanya menu dropdown ini menunjuk terhadap postingan tertentu atau menunjuk label tertentu. Menu dropdown yang akan dibuat pada postingan ini adalah menu dropdown yang seperti <a href="http://nbagas.blogspot.co.id/">blog ini</a>. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhu3Gt25IpnB8CqWxi769ZrZ7OtZro5LKtQTTIEki0H5EgohaWk5FJPb7FBJwqaUXHTnqUHcs5tJcWGy3CI9UsmGKIOx3p8r3qZVdYspMiK521IbB7kr16e_dv3CcjAkSEcVZwS7NWxyZ/s1600/horizontal+dropdown.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhu3Gt25IpnB8CqWxi769ZrZ7OtZro5LKtQTTIEki0H5EgohaWk5FJPb7FBJwqaUXHTnqUHcs5tJcWGy3CI9UsmGKIOx3p8r3qZVdYspMiK521IbB7kr16e_dv3CcjAkSEcVZwS7NWxyZ/s640/horizontal+dropdown.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bentuknya seperti di atas. Yang dimaksud responsive adalah dapat menyesuaikan ukuran layar. Pada layar yang berukuran kecil seperti layar hp, tampilan menu ini akan berubah menjadi seperti ini</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Shu_yLS2ZStHU8TbwWBfbqP8K2Ykg6IVJzRCDr1daVWzdSxCwDmdwp25MaejPjTq6yOu2cNbH86ig_Kcx0-KFDK9IL3PFtWRqJEZ0rxE4OyvJqHN-3uGrevp8GauS-vr93vzj6W5Jzds/s1600/responsive+dropdown.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="54" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Shu_yLS2ZStHU8TbwWBfbqP8K2Ykg6IVJzRCDr1daVWzdSxCwDmdwp25MaejPjTq6yOu2cNbH86ig_Kcx0-KFDK9IL3PFtWRqJEZ0rxE4OyvJqHN-3uGrevp8GauS-vr93vzj6W5Jzds/s640/responsive+dropdown.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Konsep dari membuat menu dropdown seperti ini adalah membuat 2 buah tampilan menu. Dengan satu tampilan tidak ditampilkan pada kondisi tertentu. Biasanya menu dropdown ini diletakkan di bawah header yang telah dijelaskan pada postingan sebelumnya tentang <a href="http://nbagas.blogspot.co.id/2015/12/membuat-header-blog.html">membuat header blog</a>. Walaupun ada juga blog yang meletakkan dropdown menu ini di atas, bersebelahan dengan header yang kecil. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Langsung saja, di bawah ini dijelaskan cara membuat menu dropdown ini. </div>
<div class="separator" style="clear: both; text-align: justify;">
Untuk kode html, salin kode berikut dan letakkan di bawah kode header yang telah dibuat</div>
<blockquote class="tr_bq" style="clear: both; text-align: justify;">
<nav id='menu'><br /><input type='checkbox'/><label>&#8801;<span>menu</span></label><br /><ul><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href='#'>menu1</a></li><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href='#'>menu2</a></li><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href='#'>menu3 &#9660;</a> <br /><span class="Apple-tab-span" style="white-space: pre;">  </span><ul class='menus'>   <br /><span class="Apple-tab-span" style="white-space: pre;">   </span><li><a href='#'>submenu 1</a></li>   <br /><span class="Apple-tab-span" style="white-space: pre;">   </span><li><a href='#'>submenu 2</a></li>   <br /><span class="Apple-tab-span" style="white-space: pre;">   </span><li><a href='#'>submenu 3</a></li> <br /><span class="Apple-tab-span" style="white-space: pre;">  </span></ul><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></li><br /></ul><br /></nav></blockquote>
Kemudian untuk kode css dropdown menu ini<br />
<blockquote class="tr_bq">
#menu{<br />clear:both;<br />width:100%;<br />background-color:#424242;<br />color: #FFF;<br />height: 43px;<br />z-index:1;<br />}<br />#menu ul,#menu li{<br />margin:0 auto;<br />padding:0 0;<br />list-style:none;<br />}<br />#menu ul{<br />height:47px;<br />width:100%;<br />}<br />#menu li{<br />float:left;<br />display:inline;<br />position:relative;<br />font:bold Arial;<br />}<br />#menu a{<br />display: block;<br />line-height: 43px;<br />padding: 0px 14px;<br />text-decoration: none;<br />color: #FFF;<br />}<br />#menu li a:hover{<br />color: white;<br />-webkit-transition: all .1s ease-in-out;<br />-moz-transition: all .1s ease-in-out;<br />-ms-transition: all .1s ease-in-out;<br />-o-transition: all .1s ease-in-out;<br />transition: all .1s ease-in-out;<br />background: #5FC6EB;<br />}<br />#menu input{<br />display:none;<br />margin:0 0;<br />padding:0 0;<br />width:80px;<br />height:30px;<br />opacity:0;<br />cursor:pointer;<br />}<br />#menu label{<br />font:bold 30px Arial;<br />display:none;<br />width:35px;<br />height:36px;<br />line-height:36px;<br />text-align:center;<br />-webkit-transition: all .5s ease-in-out;<br />-moz-transition: all .5s ease-in-out;<br />-ms-transition: all .5s ease-in-out;<br />-o-transition: all .5s ease-in-out;<br />transition: all .5s ease-in-out;<br />}<br />#menu label span{<br />font-size:16px;<br />position:absolute;<br />left:35px;<br />}<br />#menu ul.menus{<br />height: auto;<br />overflow: hidden;<br />width: 170px;<br />background: #50B7DC;<br />position: absolute;<br />z-index: 99;<br />display: none;<br />}<br />#menu ul.menus li{<br />overflow:hidden;<br />display: block;<br />width: 100%;<br />font:normal 0.8em Arial;<br />text-transform: none;<br />text-shadow: none;<br />border-bottom: 1px dashed #31AFDB;<br />}<br />#menu ul.menus a{<br />color: #FFF;<br />line-height: 35px;<br />}<br />#menu li:hover ul.menus{<br />display:block;<br />}<br />#menu ul.menus a:hover{<br />background: #5FC6EB;<br />color: #FFF;<br />-webkit-transition: all .1s ease-in-out;<br />-moz-transition: all .1s ease-in-out;<br />-ms-transition: all .1s ease-in-out;<br />-o-transition: all .1s ease-in-out;<br />transition: all .1s ease-in-out;<br />}<br />@media screen and (max-width: 800px){<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>position:relative;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>width:100%;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>top:0px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>left:0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom:5px solid #f44336;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu ul{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>background:#2288cc;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>position:absolute;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>top:100%;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>right:0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>left:0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>z-index:3;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>height:auto;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>display:none;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu ul.menus{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>width:100%;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>position:static;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu li{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>display:inline;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>float:none;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>width:auto;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>font:normal Arial;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu li ul.menus{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>display:block;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu input,#menu label{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>position:absolute;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>top:0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>left:0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>display:block;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu input{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>z-index:4;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu input:checked + label{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>color:white;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#menu input:checked ~ ul,li{<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>display:block;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />}</blockquote>
 Letakkan kode css di atas di atas <span style="background-color: white; color: #424242; font-family: Helvetica; text-align: justify;"><b:skin><![CDATA[</span><br />
<br />
<div style="text-align: justify;">
<span style="color: #424242; font-family: Helvetica;"><span style="background-color: white;">Menu dropdown ini dapat dikustomisasi sesuai keinginan, misalnya letaknya dapat dirubah, atau ukurannya dirubah atau warnanya dirubah. Sesuai keinginan anda.</span></span></div>
<div style="text-align: justify;">
<span style="color: #424242; font-family: Helvetica;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #424242; font-family: Helvetica;"><span style="background-color: white;">Demikian cara membuat dropdown menu responsive. </span></span></div>

Setelah membuat navigation menu dan header, langkah selanjutnya adalah membuat dropdown menu. Dropdown menu adalah menu yang menunjukkan ko...

Membuat header blog

<div style="text-align: justify;">
Header blog berisi judul dan biasanya juga disertai deskripsi singkat dari blog yang anda buat. Header blog bentuknya bisa bermacam-macam, ada yang dibuat 2 kolom, kolom kiri untuk judul dan kolom kanan untuk iklan. Dan ada juga yang dibuat satu kolom, sehingga penuh untuk judul saja. Ada header yang dibuat statis atau dengan kata lain tidak dapat dirubah dan ada juga yang dibuat dinamis, yaitu dapat dirubah kontennya. Pembuatan header dinamis ini menggunakan widget blog. Biasanya terdapat 2 widget bersebelahan, yaitu widget kiri untuk judul dan widget kanan untuk iklan. Di bawah ini adalah contoh header dari blog All inWish</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyPUyn4B1Uu5WFY-0Tz5sRNwrM108EdxZHQROHZdjiAqNaQOlAEtTb15JEQmCfL68lT1HuuPAmjxu4wgRXgdW9xjCH-ssQcaYWu4FBImhzyAQ8zwCLNAUx5A_EFOmOtW4Cpcsg6VSnIv6p/s1600/header.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyPUyn4B1Uu5WFY-0Tz5sRNwrM108EdxZHQROHZdjiAqNaQOlAEtTb15JEQmCfL68lT1HuuPAmjxu4wgRXgdW9xjCH-ssQcaYWu4FBImhzyAQ8zwCLNAUx5A_EFOmOtW4Cpcsg6VSnIv6p/s400/header.PNG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pada postingan ini admin akan membahas membuat header dengan iklan, tetapi iklan ini opsional bisa ditambahkan dan bisa tidak. Kode yang dibutuhkan adalah kode html dan css.<br />
Sebelumnya buat tag header seperti berikut<br />
<blockquote class="tr_bq">
<header id='header-all'></header></blockquote>
Salin kode di bawah ini di dalam kode di atas kode </header> </div>
<blockquote class="tr_bq" style="font-family: monospace; text-align: left;">
<div class='clear'/><br />
<div id='judul'><br />
<b:section class='titling' id='titling' maxwidgets='1'/><br />
</div><br />
<div id='iklan'><br />
<b:section class='ads' id='ads' maxwidgets='1' showaddelement='yes'/><br />
</div></blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Setelah itu kita atur kode css yang diperlukan<br />
<blockquote class="tr_bq" style="text-align: left;">
#header-all{width:80%; margin:0 auto;}@media screen and (max-width:800px) {#header-all{width:100%;}}<br />
#judul{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top:5px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left:0.8em;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>float:left;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height:40px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width:25%;<br />
}@media screen and (max-width:800px) {#judul{margin:20px auto 0 auto; text-align:center; width:100%; clear:both;}}<br />
#iklan{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top:5px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>float:right;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width:728px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height:90px;<br />
}@media screen and (max-width:800px) {#iklan{width:100%; display:block;}}</blockquote>
Salin kode css tersebut di atas kode <span style="background-color: white; color: #424242; font-family: Helvetica;"><b:skin><![CDATA[</span><br />
<br />
Demikian cara membuat header blog. Jika ada yang ingin ditanyakan atau mengalami kebingungan pada saat mencobanya, dapat ditanyakan melalui kolom komentar di bawah. </div>

Header blog berisi judul dan biasanya juga disertai deskripsi singkat dari blog yang anda buat. Header blog bentuknya bisa bermacam-macam, ...

Membuat navigation menu responsive pada blog

<div style="text-align: justify;">
Membuat navigation menu pada blog. Navigasi menu berisi beberapa link, seperti about, sitemap, disclaimer dan lain sebagainya. Letaknya berada pada bagian paling atas template blog. Fungsi dari navigation menu ini adalah sebagai tempat untuk menampilkan berbagai informasi dari blog, seperti contohnya halaman about, contact dan lain sebagainya. Contoh dari navigation menu adalah seperti di bawah ini. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmHxu4vfz-DFxtsUiedfyUutuXyvoksG6JjHTANixP60SCvOsMGoCmUWO2iuQHHgU1h9apVaCdll1ObJ38rGC926zHVt-kQPvLdQMbfC8uKptqiRHGVnyUf6bYGjJagVu4_M3R5dEfn0N/s1600/navigation-menu.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmHxu4vfz-DFxtsUiedfyUutuXyvoksG6JjHTANixP60SCvOsMGoCmUWO2iuQHHgU1h9apVaCdll1ObJ38rGC926zHVt-kQPvLdQMbfC8uKptqiRHGVnyUf6bYGjJagVu4_M3R5dEfn0N/s400/navigation-menu.PNG" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk membuat navigation menu seperti pada blog ini membutuhkan kode css dan html. Pertama, tentukan nama selektor untuk navigasi menu ini. Misalnya pada tutorial ini akan menggunakan nama navigasi-menu. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk kode html nya, adalah seperti ini.<br />
<blockquote class="tr_bq">
<div style="text-align: left;">
<span style="color: #881280; font-family: monospace; text-align: start; white-space: pre-wrap;"><nav </span><span class="html-attribute-name" style="font-family: monospace; text-align: start; white-space: pre-wrap;">id</span><span style="color: #881280; font-family: monospace; text-align: start; white-space: pre-wrap;">='</span><span class="html-attribute-value" style="font-family: monospace; text-align: start; white-space: pre-wrap;">navigasi-menu</span><span style="color: #881280; font-family: monospace; text-align: start; white-space: pre-wrap;">'></span></div>
<div style="text-align: left;">
<span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><input <span class="html-attribute-name">type</span>='<span class="html-attribute-value">checkbox</span>'/></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><label></span><span style="font-family: monospace; text-align: start; white-space: pre-wrap;">&#8801;</span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></label></span></div>
<div style="text-align: left;">
<span style="color: #881280; font-family: monospace; text-align: start; white-space: pre-wrap;"><ul></span></div>
<div style="text-align: left;">
<span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><li></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><a <span class="html-attribute-name">href</span>=''></span><span style="font-family: monospace; text-align: start; white-space: pre-wrap;">About</span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></a></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></li></span></div>
<span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><li></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><a <span class="html-attribute-name">href</span>='#' <span class="html-attribute-name">target</span>='<span class="html-attribute-value">_BLANK</span>'></span><span style="font-family: monospace; text-align: start; white-space: pre-wrap;">Sitemap</span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></a></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></li></span><br />
<span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><li></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><a <span class="html-attribute-name">href</span>='#'></span><span style="font-family: monospace; text-align: start; white-space: pre-wrap;">Contact</span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></a></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></li></span><br />
<span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><li></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"><a <span class="html-attribute-name">href</span>='#'></span><span style="font-family: monospace; text-align: start; white-space: pre-wrap;">Disclaimer</span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></a></span><span class="html-tag" style="font-family: monospace; text-align: start; white-space: pre-wrap;"></li></span><br />
<span style="color: #881280; font-family: monospace; text-align: start; white-space: pre-wrap;"></ul></span><br />
<span style="color: #881280; font-family: monospace; text-align: start; white-space: pre-wrap;"></nav></span></blockquote>
Letakkan kode tersebut di atas kode </header><br />
<br />
Setelah itu, letakkan kode css berikut<br />
<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
<span style="font-family: monospace;">#navigasi-menu{height:30px; width:100%;background-color:#f5f5f5;}</span><span style="font-family: monospace;">#navigasi-menu li, #navigasi-menu ul{margin:0 auto;padding:0 0;list-style:none;}</span><span style="font-family: monospace;">#navigasi-menu li{display:inline;}</span><span style="font-family: monospace;">#navigasi-menu li a{padding:0.8em 1em;color:#424242;}</span><span style="font-family: monospace;">#navigasi-menu li a:hover{transition:0.4s ease;color:#2288cc;}</span><span style="font-family: monospace;">#navigasi-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center;-webkit-transition: all .5s ease-in-out;</span><span style="font-family: monospace;">-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}</span><span style="font-family: monospace;">#navigasi-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer;}</span><span style="font-family: monospace;">@media screen and (max-width: 800px){</span><span style="font-family: monospace;">#navigasi{height:40px;}</span><span style="font-family: monospace;">#navigasi-menu{top:5px;height:40px;}</span><span style="font-family: monospace;">#navigasi-menu ul{background:#424242;position:absolute;top:30px;right:0;left:0;z-index:3;height:auto;display:none;}</span><span style="font-family: monospace;">#navigasi-menu li{display:block;float:none;width:auto;font:normal Arial;}</span><span style="font-family: monospace;">#navigasi-menu li a{color:white;}</span><span style="font-family: monospace;">#navigasi-menu a{display: block;line-height: 25px;padding: 0px 14px;text-decoration: none;color: #FFF;}</span><span style="font-family: monospace;">#navigasi-menu li a:hover{color: white;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;background: #5FC6EB;}</span><span style="font-family: monospace;">#navigasi-menu input,#navigasi-menu label{position:absolute;top:0;left:0;display:block;}</span><span style="font-family: monospace;">#navigasi-menu input{z-index:4;}</span><span style="font-family: monospace;">#navigasi-menu input:checked ~ ul,li{display:block;}}</span></blockquote>
<br />
Dan letakkan di bawah kode <span style="background-color: white; color: #424242; font-family: Helvetica; text-align: justify;"><b:skin><![CDATA[</span><br />
<span style="background-color: white; color: #424242; font-family: Helvetica; text-align: justify;"><br /></span>
<span style="background-color: white; color: #424242; font-family: Helvetica; text-align: justify;">Simpan dan lihat perubahannya. </span><br />
<span style="background-color: white; color: #424242; font-family: Helvetica; text-align: justify;">Setelah membuat navigation, langkah selanjutnya adalah membuat header di bawahnya. Klik <a href="http://nbagas.blogspot.co.id/2015/12/membuat-header-blog.html">Membuat header blog</a> sebagai tutorial selanjutnya.</span></div>
</div>

Membuat navigation menu pada blog. Navigasi menu berisi beberapa link, seperti about, sitemap, disclaimer dan lain sebagainya. Letaknya ber...

Membuat template blog sendiri

<div style="text-align: justify;">
Membuat template blog secara mandiri. Beberapa blogger sudah ada yang membuat templatenya sendiri. Dan ada juga yang menggunakan template bawaan. Ada juga yang menggunakan template yang sudah jadi. Terkadang kita penasaran bagaimana cara membuat blog sendiri. Sebenarnya tidak terlalu rumit dalam membuat template sendiri. Dengan kemampuan html5 dan css3 kita sudah bisa membuat template sendiri. Pada umumnya komponen penyusun blog adalah sebagai berikut :</div>
<div style="text-align: justify;">
</div>
<ol>
<li>Navigation (berisi home, sitemap, disclaimer, privacy policy dan lain-lain)</li>
<li>Header (berisi judul blog)</li>
<li>Dropdown menu (berisi navigasi yang merujuk pada konten blog dan biasanya terdapat tombol pencarian)</li>
<li>Tempat artikel blog</li>
<li>Sidebar untuk widget</li>
<li>Widget di bawah postingan</li>
<li>Footer (biasanya berisi copyright)</li>
</ol>
<div>
Contoh dari template blog yang lengkap seperti di atas ada pada blog <a href="http://lengkapada.blogspot.co.id/">Lengkap Ada</a>. Screenshotnya ada di bawah ini</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_teDztbAIg97GrLxW7qOgP62ysGYwM0fnd3EQuH5cXbeAyXfw3yZaCxOlOGmhDAeHVMCQzrnIcLl3smdpUmownSZXre-GqNimiP1Kbwfj57cczHpZa37_2CD4lKHWknOE941b81GYa32L/s1600/template-lengkapada.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_teDztbAIg97GrLxW7qOgP62ysGYwM0fnd3EQuH5cXbeAyXfw3yZaCxOlOGmhDAeHVMCQzrnIcLl3smdpUmownSZXre-GqNimiP1Kbwfj57cczHpZa37_2CD4lKHWknOE941b81GYa32L/s320/template-lengkapada.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
Dan pembuatan template blog pada postingan ini tidak langsung membahas keseluruhan cara pembuatan secara langsung, tapi saya akan membahasnya sedikit demi sedikit. Yang akan saya bahas pada pembuatan template blog kali ini adalah untuk membuat template blog kosong. </div>
<div>
<br /></div>
<div>
Untuk melakukannya, anda dapat menghapus isi dari template bawaan blog anda, lalu salin kode di bawah ini<br />
<br />
<blockquote class="tr_bq">
<?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html><br /><HTML><br /><head><br />   <b:if cond='data:blog.isMobile'><br />      <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/><br />   <meta content='noindex,nofollow' name='robots'/><br />    </b:if><br /><b:include data='blog' name='all-head-content'/><br /><meta content='####################' name='google-site-verification'/><br /><meta content='####################' name='msvalidate.01'/><br /><meta content='####################' name='alexaVerifyID'/><br /><meta content='index, follow, noodp, noydir' name='robots'/><br /><meta content='id' name='geo.country'/><br /><meta content='Mas Yadi' name='author'/><br /><meta content='1 days' name='revisit-after'/><br /><meta content='Indonesia' name='geo.placename'/><br /><meta content='blogger' name='generator'/><br /><meta content='general' name='rating'/><br /><meta content='index, follow, snipet' name='googlebot'/><br /><b:if cond='data:blog.pageType == &quot;index&quot;'><br /> <meta expr:content='data:blog.canonicalUrl' property='og:url'/><br /> <meta content='website' property='og:type'/><br /> <meta expr:content='data:blog.title' property='og:site_name'/><br /> <meta content='id_id' property='og:locale'/><br /> <meta expr:content='data:blog.pageTitle' property='og:title'/><br /> <meta expr:content='data:blog.metaDescription' property='og:description'/><br /> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br /> <title><data:blog.pageTitle/></title><br /> <meta content='KEYWORD+BLOG_ANDA' name='keywords'/><br /></b:if><br /><b:if cond='data:blog.pageType != &quot;index&quot;'><br /> <meta expr:content='data:blog.canonicalUrl' property='og:url'/><br /> <meta content='article' property='og:type'/><br /> <meta expr:content='data:blog.title' property='og:site_name'/><br /> <meta content='id_id' property='og:locale'/><br /> <meta expr:content='data:blog.pageName' property='og:title'/><br /> <meta expr:content='data:blog.metaDescription' property='og:description'/><br /> <b:if cond='data:blog.postImageThumbnailUrl'><br />  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br /> </b:if><br /> <title><data:blog.pageName/> - <data:blog.title/></title><br /> <meta expr:content='data:blog.pageName' name='keywords'/><br /></b:if><br />*/<br />&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[<br />/*<br />Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro!<br />Blogger Template Style<br />Name       : Nama Template Anda<br />Date       : Tanggal Pembuatan Template Ini<br />Updated by : Nama<br />*/<br />#navbar-iframe{height:0;visibility:hidden;display:none;}<br />html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}<br />a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;}<br />a img{border-width:0;}<br />img{max-width:100%;vertical-align:middle;border:0;height:auto;}<br />.quickedit{display:none;}<br />.clear{clear:both;}<br />body{background:#e0e0e0;margin:0;padding:0;font-family: calibri;color:#424242;}<br />]]></b:skin><br /><style type='text/css'><br /></style><br /></head><br /><body><br /><b:section class='main' id='main'><br />  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget><br /></b:section><br /></body><br /></HTML></blockquote>
<br /></div>
Kode tersebut adalah kode html kosong yang saya dapatkan dari blognya <a href="http://www.masyadi.com/2014/06/cara-membuat-template-blog.html">masyadi</a>.<br />
<br />
Salin semua kode di atas pada bagian edit html anda, lalu simpan. Coba untuk melihat blog anda, dan apabila tidak terdapat apa-apa, maka anda sudah berhasil mengikuti langkah ini dengan baik.<br />
<br />
<br />
Langkah selanjutnya adalah membuat menu navigasi, dapat dilihat di <a href="http://nbagas.blogspot.co.id/2015/12/membuat-navigation-menu-responsive-pada.html">Membuat Navigation Menu Responsive</a>

Membuat template blog secara mandiri. Beberapa blogger sudah ada yang membuat templatenya sendiri. Dan ada juga yang menggunakan template b...

Labels