Desain Responsif Tanpa Media Query Pada CSS Yang Dipakai Dalam Template

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjInKcfpE7ygiRI5ZOv4UyynC8yMeB_lz-3rE61VXrRzOAtYqDVARFyr6pCykrrNfahJp5PjziKyrgUk4usxw0VslWb7Z0iSfKD8PDBWurmXz6WPhaSIv6GvqW6UJEVjEBI6Vjee4KLnf8/s1600-h/Screenshot%252520Tampilan%252520Laman%252520Eltelu%252520Blog%25255B9%25255D.png"><img alt="Ilustrasi Template Blog Responsif" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWuiHHGGqcHOMu3iYVReuR30o-SfyE7Fg_YFKV2zick3ydTxDXTvMHzPn4_le1KxpmuLTb2z8y1ShCnCZu03q9Tb84LWJtcMhs02kaXHqj_obvJfAabX43qsC_3-qyf5rKigHns1diJo/?imgmax=800" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; border-left: 0px; display: block; padding-right: 0px; margin-right: auto" title="Ilustrasi Template Blog Responsif" width="500"></a></p> <p align="justify">Pernah suatu ketika ada yang tidak percaya ketika saya membuat sebuah pernyataan di salah satu situs sosial media paling terkemuka saat ini yaitu Facebook, yang menerangkan bahwa sebenarnya membuat template dengan desain yang responsif dapat dilakukan tanpa memakai media query sama sekali pada CSS yang digunakan dalam template. Bahkan ada pula yang mencibir serta mentertawakan saya yang telah melontarkan pernyataan seperti itu karena dia menganggap bahwa pernyataan tersebut merupakan sebuah pernyataan yang sangat tidak logis, tidak masuk akal , dan dianggap sebagai sebuah pernyataan yang tidak berdasar dan tanpa bukti.</p> <p align="justify">Untuk membuat template dengan desain yang responsif , bisa jadi yang kita tahu selama ini hanya dapat dilakukan dengan memanfaatkan serta menggunakan fitur media query pada CSS yang terdapat dalam template. Sebagai contoh dari pemanfaatan dan penggunaan media query pada CSS di sini misalnya adalah <font color="#c0504d">@media only screen and (min-width : 241px) and (max-width : 600px) {.xyz{display: none;}</font> yang artinya yaitu bagian atau elemen dengan class <font color="#c0504d">xyz</font> tidak akan ditampilkan di layar apabila resolusi layarnya antara 241 piksel sampai dengan 600 piksel.</p> <a href="http://eltelu.blogspot.com/2014/05/desain-responsif-tanpa-media-query-pada.html#more">Baca selengkapnya »</a>

Desain Responsif Tanpa Media Query Pada CSS Yang Dipakai Dalam Template

Pernah suatu ketika ada yang tidak percaya ketika saya membuat sebuah pernyataan di salah satu situs sosial media paling terkemuka saat ini...

Baca selengkapnya »

Step By Step Cara Membuat Template Blog Sendiri - Belajar Tahap #5

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJJmorW0YELP9TEJL9sHeSUkBu4Lmu13w51C1S1l_BEyLhv3ffm1yLo274dfuceA5_opjXlJBjycMDF-LdHQUBqnGc08lZELzzd98tCZ9rxjTAEFcrxYbBLl51TNSrUcfzfX2p4EsBt4/s1600-h/Tampilan%252520Postingan%252520Artikel%252520Terbaru%252520Yang%252520Terdapat%252520Pada%252520Eltelu%252520Blog%25255B9%25255D.png"><img alt="Tampilan Postingan Artikel Terbaru Yang Terdapat Pada Eltelu Blog" border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4lPukE4FljFBep8FZDxFiap872UpYjm4rm9QIoiw5mei2A_CcmW0_ng2HsgCFHCMjRVf7jGLt4Erud9ZAVp2_Wdu98IlFyLrkOz_pGLqDak2ze4xASHXZr7FhVmcs_3WA-k75V9ggbMQ/?imgmax=800" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; border-left: 0px; display: block; padding-right: 0px; margin-right: auto" title="Tampilan Postingan Artikel Terbaru Yang Terdapat Pada Eltelu Blog" width="500"></a></p> <p align="justify">Anggap saja Anda baru saja selesai membangun dan mendirikan sebuah toko. Dalam hal ini sebagai contoh misalnya adalah sebuah toko yang akan Anda gunakan sebagai tempat untuk berjualan buku serta berbagai alat tulis kantor, sebuah bangunan toko yang Anda rencanakan sebagai tempat untuk berjualan handphone, atau sebuah toko yang akan dipakai sebagai tempat untuk berjualan jenis barang lainnya.</p> <p align="justify">Karena baru saja selesai dibangun dan didirikan, maka dapat diartikan bahwa kondisi toko tersebut masih dalam keadaan kosong. Sehingga sebelum toko benar-benar dapat digunakan untuk berjualan, maka ada beberapa hal lagi yang perlu dipersiapkan. Dalam hal ini sebagai contoh misalnya Anda masih harus mempersiapkan rak atau etalase terlebih dulu yang nantinya dapat Anda gunakan sebagai tempat untuk memajang barang dagangan.</p> <a href="http://eltelu.blogspot.com/2014/05/step-by-step-cara-membuat-template-blog.html#more">Baca selengkapnya »</a>

Step By Step Cara Membuat Template Blog Sendiri - Belajar Tahap #5

Anggap saja Anda baru saja selesai membangun dan mendirikan sebuah toko. Dalam hal ini sebagai contoh misalnya adalah sebuah toko yang akan...

Baca selengkapnya »

Ingin Sukses Dan Terkenal? Jadilah Anda Sebagai Seorang Pelopor! - Opini

<p align="justify"><strong><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdfok2Q2S0am4gmCT409tzUqGDQllSX61NN0RQsbX23WvsnGcMx0N2SV2duNrf3THRfwNFNUhHM7vdOPoq6yvGxKl9DrkP74aBQWKmMO0mGSoF5RI0NbRQ2KnQVUNPbhxVPxu6ODXUsY/s1600-h/Sukses13.png"><img alt="Sukses" border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaNeM4Y2LV7KJA-tE5OBJYkhsCEkpiqjls9QXEqXKTatVwukUc66WTDUrBbOu5nEYx3TjTKImWFvbVgbmyinf4LKR5EEWqe6RBqpskr1eHnIAztC-9A5s2cv8Ld7eOFNWlKgp2L5nSP9Q/?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Sukses" width="293"></a></strong></p> <p align="justify"><strong>Siapa sih di dunia ini yang tidak ingin menjadi orang sukses? Dan siapa pula di dunia ini yang tidak bangga apabila menjadi orang yang terkenal. Demikian pula dengan blogging, blogger mana coba yang tak ingin menggapai sukses serta ketenaran?</strong> Saya pikir adalah normal bagi kita bila menginginkan kedua hal tersebut, dan bisa jadi malah tidak wajar rasanya bila kita tidak ingin menggapai salah satu diantaranya dan atau bahkan keduanya sekaligus.</p> <p align="justify">Sedikit cerita tentang kesuksesan dan ketenaran, sebelum ini saya pernah melontarkan sebuah pertanyaan terkait dengan hal tersebut di beberapa group blogger yang terdapat di Facebook. Namun sayangnya respon untuk pertanyaan yang saya lontarkan itu sangatlah minim. Heran rasanya. Entah karena pertanyaan saya yang terlalu sulit, jawabannya yang terlalu rumit, atau entah karena malas untuk memberikan jawaban, namun seperti itulah kenyataannya. Hal ini bisa saja disebabkan karena visi, misi, dan tujuan dari masing-masing blogger dalam menekuni kegiatan blogging tidaklah sama.</p> <a href="http://eltelu.blogspot.com/2014/05/ingin-sukses-dan-terkenal-jadilah-anda.html#more">Baca selengkapnya »</a>

Ingin Sukses Dan Terkenal? Jadilah Anda Sebagai Seorang Pelopor! - Opini

Siapa sih di dunia ini yang tidak ingin menjadi orang sukses? Dan siapa pula di dunia ini yang tidak bangga apabila menjadi orang yang terk...

Baca selengkapnya »

Membuat Daftar Menu Untuk Mempermudah Pengunjung Atau Pembeli - Step #4

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVrjP4Pum-_DRqZlFM3_4KhtnUhtW-pdoOS_Yzt_F2PeZxYqcXAdPcu8tUsV2-NThc_a7pL6YRpVB5r8YHenZSgmBAxGJ3nH63S6WmUtXtndwNhfwS7RgnPE3_n6sWsHEPBsST9w_Lng/s1600-h/Tampilan-Daftar-Menu-Yang-Terdapat-P.png"><img alt="Tampilan Daftar Menu Yang Terdapat Pada Blog Eltelu" border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIfkrtqdhL36JWJd80awnt1vSVCZVEfil9maa_rB6KDATz1oQNZu3sqth03zbjunSOjGvL-Ds5BLJofLH-qmntKktr6JXmTsdbEDZMcQU93RvZtqwj_L-8vzPigtIGDDtJ_J-v2tMoyS4/?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Tampilan Daftar Menu Yang Terdapat Pada Blog Eltelu" width="500"></a></p> <p align="justify">Saat berada di sebuah restoran, warung makan, dan atau bahkan saat masuk sebuah warteg, satu hal yang selalu saya jumpai adalah adanya daftar menu, dan bisa jadi seperti itu pula lah yang Anda dapati ketika berada di beberapa tempat tersebut. Daftar menu makanan dan minuman yang tersedia serta dapat disajikan di sebuah restoran, warung makan, atau warteg seakan menjadi satu hal dan bagian yang wajib keberadaannya karena dengan tersedianya daftar menu tersebut maka dapat memberikan berbagai keuntungan bagi pengunjung maupun bagi pemilik restoran, warung makan, atau warteg itu sendiri.</p> <p align="justify">Keuntungan yang dimaksud di sini sebagai contoh misalnya yaitu dapat mempermudah pengunjung untuk mengetahui menu apa saja yang tersedia, sekaligus bisa mengetahui secara langsung harga untuk masing-masing makanan atau minuman yang disajikan dengan cara melihat daftar menu yang tersedia. Sementara itu di sisi lain sang pemilik restoran, warung makan, atau warteg pun mendapatkan keuntungan serta kemudahan dengan menyediakan daftar menu makanan serta minuman seperti itu karena dia tidak perlu lagi menyampaikan secara lisan kepada tiap pengunjung yang datang. </p> <a href="http://eltelu.blogspot.com/2014/05/membuat-daftar-menu-untuk-mempermudah.html#more">Baca selengkapnya »</a>

Membuat Daftar Menu Untuk Mempermudah Pengunjung Atau Pembeli - Step #4

Saat berada di sebuah restoran, warung makan, dan atau bahkan saat masuk sebuah warteg, satu hal yang selalu saya jumpai adalah adanya daft...

Baca selengkapnya »

Menampilkan Nama Dan Deskripsi Pada Header Sebagai Indentitas Situs - Step #3

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qaLkWOk37bHEbrecIR8BGLw8PrcRKiBdwJLg6I3aJAsulM5CNxQEQT3ErrcPywc_2SymxYbMBdqeWWHPjL-msbsoCWGDG1DVGIykRpmO8RehHDhWgKQ-M0v1uG51N0jy1XT3GGZOeeM/s1600-h/Screenshot-Tampilan-Laman-Eltelu-Blo.png"><img alt="Ilustrasi Tampilan Header Yang Terdapat Pada Blog Eltelu" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEdGL1muFO9SFjmn5i_qWGw2YQYpzT7GH6ozTikZF3iItiQcsSrJqGI0W_me_f88RAgp4oLafQDN7jPbG40sUDZM_64fPgcQssuTLGQvkc9fnl6O7scxHUD7L9xVZoDD3eYYSQE0Mtb3k/?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Ilustrasi Tampilan Header Yang Terdapat Pada Blog Eltelu" width="500"></a></p> <p align="justify">Apabila Anda mendirikan sebuah perusahaan yang bergerak dalam bidang jasa ataupun barang, maka salah satu hal yang sangat penting keberadaannya untuk perusahaan tersebut adalah identitas. Sebagai contoh ketika Anda mendirikan sebuah perusahaan yang bergerak dalam bidang jasa asuransi, maka perusahaan asuransi ini tentu saja harus memiliki identitas nama yang jelas, misalnya “PT. Asuransi Jiwa Aman Sentosa Dan Sejahtera”. Contoh lain misalnya ketika Anda mendrikan sebuah perseroan terbatas yang bergerak dalam bidang produksi barang tertentu, maka perseroan tersebut pun tentu saja juga harus memiliki identitas nama yang jelas pula, misalnya “PT. Maju Mundur Sukses Makmur”.</p> <p align="justify">Dalam skala yang lebih kecil misalnya ketika Anda medirikan sebuah toko, maka toko yang Anda dirikan tersebut mestinya juga memiliki identitas jelas yang mencakup nama serta deskripsinya, karena dengan adanya nama yang jelas maka pengunjung dapat dengan mudah mengingat toko Anda, dan dengan adanya deskripsi yang jelas maka pengunjung pun dapat lebih mudah dalam mengetahui barang apa saja yang tersedia di toko tersebut. Dalam hal ini sebagai contoh misalnya adalah “Toko Untung Rugi Pantang Bangkrut” yang melayani foto copy dan menyediakan berbagai alat tulis kantor dan sejenisnya.</p> <a href="http://eltelu.blogspot.com/2014/04/menampilkan-nama-dan-deskripsi-pada.html#more">Baca selengkapnya »</a>

Menampilkan Nama Dan Deskripsi Pada Header Sebagai Indentitas Situs - Step #3

Apabila Anda mendirikan sebuah perusahaan yang bergerak dalam bidang jasa ataupun barang, maka salah satu hal yang sangat penting keberadaa...

Baca selengkapnya »

Memasang Dan Menambahkan Navbar Baru Ke Dalam Rancangan Template - Step #2

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIx7Gdj2CvBAj4A9Z8_YvtljgOfTgfddyF2LbiyMT6NQT6E1isd1xJjP_d34JsZTArCIec2fiTv-mRjRYFXwtLZD5UAXGMM-jw3ytGC-GenF5cisEKTJH0fsl8TZIhVmTikTLEu9E7Do/s1600-h/Ilustrasi%252520Navbar%252520Standar%252520Pada%252520Blog%25255B10%25255D.png"><img alt="Ilustrasi Navbar Standar Pada Blog" border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0SEmkyPLVZLanZl1iEENNyAWVbShFy_jFa6w1yZGntiEdA8daDN3nRPqTzecnwF_PXuCys3ALWeFCsHXMpsab6usWEFoDcCalpsidCVtTpqzxVkyjKPmztX9cnOPeiSZr58nZmEITgY/?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Ilustrasi Navbar Standar Pada Blog" width="500"></a></p> <p align="justify">Ketika Anda membuat sebuah blog baru dengan memanfaatkan desain dari template standar yang telah disediakan oleh Blogger, maka bagian yang dapat dipastikan ada pada halaman yang dihasilkan oleh penggunaan template tersebut adalah navbar. Secara default navbar standar yang diberikan oleh Blogger berisikan beberapa fasilitas, diantaranya yaitu fasilitas untuk melakukan penelusuran, berbagi ke Google+, melihat blog lain yang terdaftar di Blogger, membuat entri atau blog baru, dan beberapa fasilitas penting lain seperti yang tampak pada gambar di atas.</p> <p align="justify">Melanjutkan ulasan dalam artikel sebelumnya tentang <a href="http://eltelu.blogspot.com/2014/04/cara-mudah-belajar-merancang-desain-dan.html" target="_blank">cara mudah belajar merancang desain dan membuat template blog sendiri</a>, maka dalam artikel ini akan saya ulas dan kita pelajari tentang cara memasang serta menambahkah navbar baru ke dalam rancangan template uji coba yang sebelumnya telah Anda buat.</p> <a href="http://eltelu.blogspot.com/2014/04/memasang-dan-menambahkan-navbar-baru-ke.html#more">Baca selengkapnya »</a>

Memasang Dan Menambahkan Navbar Baru Ke Dalam Rancangan Template - Step #2

Ketika Anda membuat sebuah blog baru dengan memanfaatkan desain dari template standar yang telah disediakan oleh Blogger, maka bagian yang ...

Baca selengkapnya »

Cara Mudah Belajar Merancang Desain Dan Membuat Template Blog Sendiri - Step #1

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaQHlCHHS6sMjEIdACP2nnuza3iGMOS0FjSGGXWVwSilAhX1TQAWHwM3UYFAlde-DJV5e-iwWOGhOQ1sE59115BUxjMMIeeF8QDcq4l37yYyltclUWjCn2BlTO-YoOtoEgj-vFoPyBq5k/s1600-h/Screenshot-Tampilan-Laman-Eltelu-Blo%25255B1%25255D.png"><img alt="Screenshot Tampilan Laman Eltelu Blog" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQCjf6vEQVjYWEsikPayLD-vGdFpgu-rxB47hN9vNKCXvwnijzlzwDNwMrJ1ade4tYeVYdWGBqteJDvdWmkonE8OCsMCDzTI3A7JiH4uMlO04x-7hAvbinWt78h7eEJV7iyjRNve3jMZ8/?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Screenshot Tampilan Laman Eltelu Blog" width="500"></a></p> <p align="justify"><strong>Blogger mana sih yang tak ingin memiliki blog dengan template yang menggunakan rancangan dan desain sesuai dengan keinginannya sendiri?</strong> <strong>Tentunya banyak diantara Anda yang menginginkan hal seperti itu bukan?</strong> Keinginan seperti itu sangat beralasan dan dapat dipahami karena begitu pula lah salah satu keinginan yang saya rasakan di awal mula terjun dan menekuni kegiatan blogging. </p> <p align="justify">Namun demikian yang terkadang menjadi kendala bagi seorang blogger ketika ingin merancang dan kemudian <a href="http://eltelu.blogspot.com/2013/05/cara-membuat-dan-mengubah-halaman-blog.html" target="_blank">membuat template dengan desain seperti layaknya tampilan web profesional</a> adalah minimnya pemahaman tentang template itu sendiri. Hal inilah yang selanjutnya menjadi hambatan dalam mewujudkan keinginannya tersebut, karena dia akan berpikir bahwa untuk merancang dan membuat template itu ternyata sangatlah sulit.</p> <p align="justify">Awalnya saya pun berpikir bahwa untuk merancang dan membuat template blog merupakan sebuah pekerjaan yang cukup rumit. Apalagi dengan minimnya penguasaan terhadap HTML, CSS, JavaScript, dan lain sejenisnya menjadikan pekerjaan tersebut terasa semakin sulit saja. Namun ternyata seiring waktu dengan belajar memahami beberapa hal yang berhubungan dengan template, merancang dan membuat template sendiri tidak lagi menjadi sebuah pekerjaan yang rumit ataupun sulit, akan tetapi malah menjadi sebuah pekerjaan yang terasa asik untuk dilakukan.</p> <a href="http://eltelu.blogspot.com/2014/04/cara-mudah-belajar-merancang-desain-dan.html#more">Baca selengkapnya »</a>

Cara Mudah Belajar Merancang Desain Dan Membuat Template Blog Sendiri - Step #1

Blogger mana sih yang tak ingin memiliki blog dengan template yang menggunakan rancangan dan desain sesuai dengan keinginannya sendiri? Te...

Baca selengkapnya »