Selamat siang menjelang sore, Aden dan Ajeng para penghuni forum Bersosial ini, Sekarang saya mau membagikan tutorial membuat template blog (Blogger) sendiri dengan framework Bootstrap. Kalo ada yang belum tau sama framework ini, silahkan cari dulu di gugle atau bagi yang males, saya jelasin aja deh disini, tapi cuman dikit doang ya , soalnya saya juga lagi belajar main sama Bootstrap ini jadi maklumilah jika ada kesalahan-kesalahan yang saya buat disini hhihihiiihi . Gimana sekarang udah paham kan sama yang namanya Bootstrap ? * Apa masih belum paham ?!*. Ya dipaham-pahamin ajalah saya aja masih belajar, mungkin ada salah satu member di Bersosial ini yang lebih paham dari saya jadi jangan cuman ngeliatin thread ini aja ya. Sebenarnya saya pengen bikin thread sekaligus dari tahap awal sampai akhir, namun saya rasa itu kurang greget aja kalau sekalian dibikin semuanya dalam satu thread, lagipula saya sudah bilang disini beberapa kali kan "Saya masih belajar". Jadi kalau saya bikin sekaligus semua tahap-tahapnya takutnya ada yang salah pengertian gitu, ntar malah dosa yang saya dapet karena ngasih info yang salah-salah. Yoosh !, di thread bagian pertama dalam edisi membuat template sendiri dengan bootstrap, dimulai dengan membuat kerangkanya dulu alias bikin pondasinya dulu. HTML: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta expr:content='data:blog.metaDescription' name='description'/> <b:skin><![CDATA[ /* Name: Tulis Nama Templatenya Author: Nama Kamu URL: Website/ blog Kamu */ ]]></b:skin> <!-- End Style --> </head> <body> <!-- Header --> <div class='bs-example'> <!-- Blog Navigation Start --> <nav class='navbar navbar-default'> <div class='container-fluid'> <!-- Brand and toggle get grouped for better mobile display --> <div class='navbar-header'> <button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'/> <span class='icon-bar'/> <span class='icon-bar'/> </button> <a class='navbar-brand' href='#'> <img alt='Brand' src='Logo kamu / atau bisa diganti dengan tulisan disini'/> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'> <ul class='nav navbar-nav'> <li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li> <li><a href='#'>Link</a></li> <li class='dropdown'> <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a> <ul class='dropdown-menu' role='menu'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </li> <li><a href='/?m=1'>Mobile View</a></li> </ul> <form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + "search"' role='search'> <div class='form-group'> <input class='form-control' name='q' placeholder='Search' type='text'/> </div> <button class='btn btn-default' type='submit'>Submit</button> </form> <ul class='nav navbar-nav navbar-right'> <li><a href='#'>Link</a></li> <li class='dropdown'> <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a> <ul class='dropdown-menu' role='menu'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!-- Blog Navigation End --> <div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start --> <div class='blog-header'> <!-- Blog Header Start --> <div class='container'> <b:section class='header' id='header1' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='(Header)' type='Header'/> </b:section> </div> </div> <div class='row'> <div class='col-md-8 blog-main'> <!-- Blog Main Wrapper Start --> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> </b:section> </div> <aside class='col-xs-4 blog-sidebar'> <!-- Blog Sidebar Wrapper Start --> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/> </b:section> </aside> <!-- Blog Sidebar Wrapper End --> </div> <!-- Blog Row End --> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'/> </div> <!-- Blog Content Wrapper End --> <footer class='blog-footer'> <!-- Blog Footer Start --> <p>Blog template built for <a href='http://getbootstrap.com'>Bootstrap</a> by <a href='https://twitter.com/AchmadMuharya'>@AchmadMuharya</a>.</p> <p> <a href='#'>Back to top</a> </p> </footer> <!-- Blog Footer End --> </body> <!-- End Body --> </HTML> Mungkin ada yang binung dengan kode "col-...". okelah, disini saya akan jelasin sedikit apa yang saya dapat di halaman resminya bootstrap: col-xs-... : Untuk "Ponsel yang ukurannya (<768px)" col-sm-... : Untuk "Tablet yang ukurannya (=768px)" col-md-... : Untuk "Desktop yang ukurannya (=992px)" col-lg-... : Untuk "Desktop yang ukurannya (=1200px)" Dan sesudah kode "col-..." itu pasti kamu akan melihat sebuah angka bukan ?. Nah angka itu sebenarnya yang menentukan lebar dari kolom yang nanti akan kamu buat. Ada beberapa angka yang bisa kamu gunakan, mulai dari angka 1 sampai dengan angka 12. Silahkan kamu atur lagi sesuai selera kamu. Dan hasilnya dari kerangka diatas nantinya akan jadi tempate yang memiliki dua kolom, kalau ada yang minta nambahin kolomnya silahkan langsung aja ke W3school atau ke Get Bootstrap, sebernanya sih dua situs ini sama aja ngejelasainnya tapi ya silahkan dipilih ajalah mana yang lebih mudah. Dan jangan lupa atur sendiri angkanya seperti yang sudah saya katakan diatas tadi. Gak ngeh (Ngerti) dengan penjelasan saya ? ........ yasudah lah kalo masih gak ngeh. Diatas tadi saya udah ngasih tautan ke halaman resmi silahkan di klik lihat penjelasannya yang lebih detil disana. Kalau ada yang mau lebar templatenya mengikuti ukuran browser alias full-width, kode yang kaya gini: HTML: <div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start --> Class container-nya bisa ditambahkan "-fluid". Yang nantinya jadi seperti ini: HTML: <div class='container-fluid outer-wrapper'> <!-- Blog Outer Wrapper Start --> Dan salah satu yang membuat saya jatuh cinta plus kesel sama framework ini adalah.....sistem gridnya yang super sekali . Jadi setiap grid itu punya lebar yang berbeda-beda, misalnya col-sm-4 (dari 1-12) punya lebar kurang lebih 290px (kalo gak salah). Jadi gak perlu lagi nentuin lebar elemen satu persatu alias manual. Semua serba dipermudah di Bootstrap ini. Kalaupun merasa kurang enak dengan ukuran yang sudah ditetapkan oleh Bootstrap, aden dan ajeng bisa kok masang kode css sendiri untuk menentukan ukuran yang sesuai, tapi masalahnya adalah.....nambah kerjaan lagi kalo gitu. Tapi kalo situ pinter mainin CSS dan keluarganya saya rasa ini bukan masalah besar hihihihi Oiya saya hampir lupa, jika aden dan ajeng lihat lihat di kerangka template diatas, bagian: HTML: <div class='col-md-8 blog-main'> <!-- Blog Main Wrapper Start --> Organ dalam blog. <div><!-- Blog Main Wrapper End --> Dan: HTML: <aside class='col-xs-4 blog-sidebar'> <!-- Blog Sidebar Wrapper Start --> Organ dalam sidebar. <div> <!-- Blog Sidebar Wrapper End --> Disitu kan biasanya terdapat banyak bingitzz kode macam: HTML: <b:includable id='main' var='top'> <b:includable id='backlinkDeleteIcon' var='backlink'> .... ........ ......... dan lain-lain disini Nah untuk mengisi organ-organ dalam yang penting di dalam template ini aden dan ajeng gak perlu bingung-bingung , caranya tinggal: Gimana setelah melihat thread yang panjang ini, apakah aden dan ajeng sudah mengerti ? masih belum paham juga ?!!............ Sama dong kalau begitu . Tapi gak apa-apa kok kalau masih belum paham, dipelajari sedikit-sedikit ntar lama-lama kan bisa juga hihihi Baiklah, untuk sementara segitu dulu ya yang saya bagikan disini. Dan untuk yang penasaran sama hasilnya sabar ya, ditunggu aja edisi membuat template lainnya di Bersosial ini . Dan kalau ada salah-salah tolong di koreksi alias CeMI-IuW (CMIIW) ya , siapa tau saya ada salah dalam menjelaskan disini dan biar kita bisa sama-sama belajar disini. *Fly Away * Thread lainnya tentang Bootstrap, masukan dari @KangAndre, siapa tau bermanfaat: Website Langsung Ngacirr dengan Bootstrap Framework Spoiler: Bagian Lainnya [Bagian 1] Bikin Template Blogger Sendiri Dengan Bootstrap <- Kamu lagi ada disini [Bagian 2] Memasang CDN Bootstrap di Template Blogger [Bagian 3] Mendesain Template Bootstrap [Bagian 3.1] Mengganti Tema Bootstrap Last edited: Mar 22, 2015 Achmad Muharya, Mar 18, 2015 #1 Heri Hartono likes this. Ardilas Super Level Joined: Feb 18, 2013 Messages: 4,243 Likes Received: 317 Trophy Points: 83 Google+: Author Saya kira pakai aplikasi tertentu. Lumayan paham deh Ardilas, Mar 18, 2015 #2 KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 Buat referensi tambahan saja: https://www.bersosial.com/threads/website-langsung-ngacirr-dengan-bootstrap-framework.12795/ KangAndre, Mar 18, 2015 #3 Hari Agustomo Nugroho Active Member Joined: Mar 13, 2015 Messages: 1,195 Likes Received: 78 Trophy Points: 48 Google+: Author Waduh itu sudah tingkat dewa,,, saya masih pemula Hari Agustomo Nugroho, Mar 18, 2015 #4 Achmad Muharya Member Joined: Apr 29, 2014 Messages: 427 Likes Received: 23 Trophy Points: 18 Mungkin diluar dari blogspot yang harus pakai aplikasi om Achmad Muharya, Mar 19, 2015 #5 Gesper Member Joined: Mar 1, 2015 Messages: 242 Likes Received: 9 Trophy Points: 18 Google+: Author Ini harus malam baca nya, biar konsen Gesper, Mar 19, 2015 #6 Achmad Muharya Member Joined: Apr 29, 2014 Messages: 427 Likes Received: 23 Trophy Points: 18 Sudah dimasukin ke dalam thread kang makasih sudah dikasih tau Achmad Muharya, Mar 19, 2015 #7 Achmad Muharya Member Joined: Apr 29, 2014 Messages: 427 Likes Received: 23 Trophy Points: 18 Gak haru jadi dewa kok om kalo mau bisa bikin template sediri Ntar malah loh ngantuk baca malam-malam Achmad Muharya, Mar 19, 2015 #8 lembing Active Member Joined: Aug 21, 2014 Messages: 1,182 Likes Received: 92 Trophy Points: 48 Terima jadinya gan lembing, Mar 19, 2015 #9 Achmad Muharya Member Joined: Apr 29, 2014 Messages: 427 Likes Received: 23 Trophy Points: 18 Silahkan , tapi musti nunggu beberapa bagian lagi yang sekarang masih belum saya tulis Achmad Muharya, Mar 19, 2015 #10 Hari Agustomo Nugroho Active Member Joined: Mar 13, 2015 Messages: 1,195 Likes Received: 78 Trophy Points: 48 Google+: Author Betul juga,,, Kalau niat dan mau belajar mungkin kita bisa,,, tapi kalau gak konsen susah juga, soalnya masih awam dengan kode semacam itu,,, Hari Agustomo Nugroho, Mar 19, 2015 #11 Achmad Muharya Member Joined: Apr 29, 2014 Messages: 427 Likes Received: 23 Trophy Points: 18 Awalnya saya juga gak konsen mau bikin yang kaya ginian, tapi ya dipaksain ajalah Achmad Muharya, Mar 19, 2015 #12 Heri Hartono likes this. Hari Agustomo Nugroho Active Member Joined: Mar 13, 2015 Messages: 1,195 Likes Received: 78 Trophy Points: 48 Google+: Author Memang harus dipaksa kalau pingin bisa Hari Agustomo Nugroho, Mar 19, 2015 #13 nawi667 Member Joined: Jul 5, 2013 Messages: 113 Likes Received: 6 Trophy Points: 18 Google+: Author Yah ... akan aku pelajari lagi secara lebih detil, enakan langsung praktek lah ...... Thanks atas pencerahannya nawi667, Apr 19, 2015 #14 rajautan Active Member Joined: Mar 21, 2015 Messages: 1,354 Likes Received: 57 Trophy Points: 48 Izin coba gan,,, ,, rajautan, Aug 3, 2015 #15 ys. herbi Well-Known Member Joined: Mar 6, 2016 Messages: 1,251 Likes Received: 190 Trophy Points: 63 Google+: Author Bookmark den... hehe ys. herbi, Jan 23, 2018 #16 Rswd Member Joined: Dec 11, 2017 Messages: 115 Likes Received: 4 Trophy Points: 18 Awam banget sama yg beginian, lumayan baca ini pala jadi cenut cenut hahaha Rswd, Feb 4, 2018 #17 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - [Bagian Bikin Template [Bagian 3.1] Mengganti Tema Bootstrap Achmad Muharya, Mar 22, 2015, in forum: HTML & Website Design Replies: 10 Views: 8,000 dewaz Jan 23, 2016 [Bagian 3] Mendesain Template Bootstrap Achmad Muharya, Mar 21, 2015, in forum: HTML & Website Design Replies: 12 Views: 3,619 Kang Jaka Jul 13, 2017 [Bagian 2] Memasang CDN Bootstrap di Template Blogger Achmad Muharya, Mar 19, 2015, in forum: HTML & Website Design Replies: 17 Views: 4,982 nawi667 Apr 19, 2015 Game Berbasis HTML yang Bikin Ketagihan Sampai Main 3 Jam Non-Stop Agni Astuti, Jun 19, 2023, in forum: HTML & Website Design Replies: 2 Views: 1,118 KangAndre Jun 22, 2023 [ASK] Maaf Mau Nanya , Kalo Bikin Draf Isi Otomatis Di Postingan Wordpress Gimana Ya Adang Hudayana, Mar 22, 2018, in forum: HTML & Website Design Replies: 13 Views: 5,147 Blackboo Dec 20, 2018 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
Buat referensi tambahan saja: https://www.bersosial.com/threads/website-langsung-ngacirr-dengan-bootstrap-framework.12795/
Gak haru jadi dewa kok om kalo mau bisa bikin template sediri Ntar malah loh ngantuk baca malam-malam
Betul juga,,, Kalau niat dan mau belajar mungkin kita bisa,,, tapi kalau gak konsen susah juga, soalnya masih awam dengan kode semacam itu,,,
Yah ... akan aku pelajari lagi secara lebih detil, enakan langsung praktek lah ...... Thanks atas pencerahannya