O-OM.COM | Tutorial Blog dan Inspirasi Digital |  |
| Rahasia Responsive Web Design (RWD) dengan HTML5 dan CSS3 Posted: 13 Sep 2013 06:42 AM PDT Responsive Web Design (RWD) semakin populer sekitar pertengahan 2010 lalu, ini berawal dari sebuah artikel Design Web Responsive yang ditulis oleh Ethan Marcotte pada website alistapart.com. Pada artikel tersebut dia mengusulkan bagaimana sebuah desain web bisa menyesuaikan sendiri ukuran tampilan pada perangkat Mobile dan Desktop secara Fleksibel tanpa harus membuat dua desain untuk perangkat |
| You are subscribed to email updates from Tutorial Blog dan Inspirasi Digital To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
O-OM.COM | Tutorial Blog dan Inspirasi Digital | |
| Menampilkan Screenshot Preview Responsive Web Design dengan Am I Responsive Posted: 06 Sep 2013 07:03 AM PDT Mungkin saat ini kalian sudah berjuang keras agar blog kalian bisa tampil Responsive dan tampil sempurna disemua resolusi layar. Nah biasanya jika sudah sukses yang dilakukan selanjutnya adalah tentu saja mengujinya sekaligus memamerkanya dalam bentuk Screenshot. Beberapa waktu lalu saya juga sempat bingung bagaimana saya membuat Screenshot Preview untuk Responsive Web Design dibeberapa perangkat |
| You are subscribed to email updates from Tutorial Blog dan Inspirasi Digital To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
O-OM.COM | Tutorial Blog dan Inspirasi Digital | |
| Perbaikan Asynchronous Javascript Loading untuk Tombol Like Sosial Media Posted: 26 Aug 2013 08:26 AM PDT Tutorial kali ini hanya untuk memperbaiki sekaligus mengganti ketidaksempurnaan metode Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook dan Google+ yang saya tulis sebelum ini dan terus terang kode tersebut tidak berjalan sebagaimana yang saya harapkan. Saat saya mencoba ngecek menggunakan PageSpeed Tool dari Google dan ternyata tool tersebut tetap memberi laporan bahwa blog |
| You are subscribed to email updates from Tutorial Blog dan Inspirasi Digital To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
O-OM.COM | Blogger Tutorial Plus Blogger Templates |  |
| Responsive Blog Design ala O-OM.COM Posted: 20 Aug 2013 04:58 AM PDT Setelah sekian lama bertahan dengan desain bog yang lama saya tergiur juga ingin melakukan redesign blog ini dengan gaya baru yang lebih fresh dan tentu saja juga menyematkan teknik Responsive Web Design yang sedang populer biar gak ketinggalan jaman hehehe dan inilah penampakan hasil desain blog yang baru saat ini:  Silahkan berimasukan untuk Responsive Blog Design ala O-OM.COM ini ya :) |
| You are subscribed to email updates from Blogger Tutorials To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
O-OM.COM | Blogger Tutorial Plus Blogger Templates | |
| Tools Gratis Untuk Blogger Pemula Posted: 20 Jul 2013 06:53 AM PDT Tools yang saya buat dibawah ini sangat berguna sekali bagi rekan blogger pemula atau yang sudah expert sekalipun untuk membantu memudahkan kegiatan Blogging-nya. Semua tools ini saya buat hanya dalam waktu seminggu jadi mungkin masih ada beberapa error dan bug yang belum saya temui. Semoga kedepannya akan hadir tools-tools lainnya yang lebih bagus lagi. Selamat Mencoba dan beri masukan berupa kritik dan saran yang membangun ya :). Silahkan langsung mencobanya semua tools disini Free Tools for Blogger Blogger Sitemap Generator ( XML Sitemap untuk Blogger) Tool ini saya buat khusus untuk memudahkan kalian membuat Sitemap xml pada Blogger dan hasil kode xml Sitemap dari tool ini bisa langsung dimasukan kedalam pengaturan Sitemap pada Blog kalian atau bisa juga digunakan pada Sitemap Google Webmaster Tools. Fungsi dari sitemap ini membantu mesin pencari melakukan index kesemua halaman lama kalian dan bukan hanya untuk posting terbaru saja.
Silahkan login pada Blogger kalian -> Setelan -> Preferensi Penelusuran -> robots.txt khusus -> Aktifkan -> lalu masukan saja hasil XML sitemap yang sudah kalian buat menggunakan alat diatas. Cara Pasang Sitemap di Google WebmasterTools: Silahkan login pada Google Webmaster Tools -> Perayapan -> Peta Situs -> Pilih Buttton Tambahkan/Uji Peta Situs -> lalu masukan Url XML Sitemap yang sudah dibuat satu-persatu. CSS Compression Tool (CSS Compressor) Cascading Style Sheets atau disingkat CSS adalah bahasa pemrograman Stylesheet yang digunakan untuk menggambarkan presenstasi dokumen yang ditulis dalam bahasa markup. Istilah mudahnya Css merupakan cara mudah untuk menata ulang desain pada tampilan halaman. Semakin kompleks suatu halaman biasanya menggunakan koding Css yang banyak pula, ini juga salah satu yang menyebabkan kerja pada sisi Web Browser menjadi semakin berat. Cara terbaik untuk mengurangi ukuran Css adalah dengan melakukan kompresi pada file tersebut agar load halaman menjadi semakin cepat. Silahkan gunakan CSS Compression Tool yang sudah saya buat untuk memudahkan kalian melakukan tugas tersebut.
Google PageRank (PR) Checker Google PageRank adalah peringkat halaman web yang diberikan oleh Google (antara 0 sampai 10). PageRank merupakan faktor penting pada mesin pencari untuk menilai suatu halaman, peringkat PageRank yang lebih tinggi akan mendapatkan SERP (halaman hasil mesin pencari) posisi yang lebih tinggi. PageRank biasanya tergantung pada jumlah backink yang mengarah pada suatu halaman. Disini saya juga sudah membuat tool sederhana untuk melihat seberapa bagus nilai Pagerank pada alamat blog kalian.
Get Favicon From Blog or Site Favicon adalah ikon kecil yang tampil dibrowser disamping judul halaman pada tab browser, atau di address bar sebelah URL-nya. Hal ini juga digunakan ketika kalian melakukan Bookmark pada halaman. Untuk memudahkan kalian melihat, mengambil atau sekaligus mencari favicon pada alamat blog atau website tertentu kalian bisa menggunakan tool sederhana yang sudah saya buat untuk memudahkan tugas tersebut. Jujur saja saya juga tidak tau persis alat ini berguna apa tidak, tapi jika kalian misalkan membuat blog Aggregator tentu favicon dari alamat situs tertentu sangat penting untuk ditampilkan.
Blogger Ad Code Converter Tool for AdSense, AdBrite and Chitika Alat konverter Iklan ini adalah yang paling penting bagi semua blogger dan membantu para blogger untuk mengubah kode iklan kemudian menempatkan iklan tersebut dalam posting Blogger. Alat ini bekerja secara otomatis untuk mengkonversi kode iklan dalam bahasa javascript ke dalam format yang benar sehingga kalian dapat menanamkan langsung pada halaman template html blog kalian. Alat ini sempurna untuk mengkonversi AdSense, AdBrite, Chitika atau kode javascript iklan lainnya yang mungkin kalian miliki.
Html Color Codes Generator (HTML Color Picker) HTML Color Picker adalah tool untuk memilih warna dalam heksadesimal, RGB, HSV dan nilai CMYK dan kalian dapat mengubah gaya apapun pada banyak aspek pada tampilan Blog atau Website! Cara mencari warna sesuai keinginan sangat gampang, tinggal pindahkan slider vertikal untuk memilih warna dan kemudian klik warna disebelah kiri untuk mendapatkan kode warna HTML untuk warna yang diinginkan.
Semoga tools yang saya buat diatas berguna ya, dan tunggu saja untuk tools-tools lainnya :) |
| You are subscribed to email updates from Blogger Tutorials To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
O-OM.COM | Blogger Tutorial Plus Blogger Templates | |
| Warna Latar Otomatis Berbeda Pada Setiap Postingan Posted: 13 Jul 2013 07:31 AM PDT Dulu saya tidak begitu tertarik untuk merubah warna Background disetiap halaman posting, selain kesannya aneh..mungkin juga terkesan rada Ndeso (kata orang jawa) hehehe Tapi itu dulu ya, selera tentu bisa berubah juga khan, ini tidak lain karena saya lagi senang ngedit template dengan tampilan nyerempet bergaya style Windows 8 ala Metro UI yang lebih berwarna-warni namun tidak sedikitpun menghilangkan kesan elegan pada tampilannya. Nah dari Style Windows 8 itulah saya mulai tertarik dan mencoba sekaligus ngajarin gimana caranya agar warna postingan blog kalian bisa berubah warna secara otomatis tanpa harus menggunakan banyak koding CSS apalagi harus menggunakan Conditional Tag yang bikin pusing kepala aja. Contoh penerapannya bisa kalian lihat pada Blog Gallery Templates milik saya di zoomtemplate.com  Langsung aja ya dan caranya sangat mudah sekali...silahkan cari kode </head> kemudian letakan kode Javascript dibawah ini tepat diatas kode </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/> Jika kalian hanya ingin merubah warna posting pada halaman utama saja kalian tinggal gunakan saja conditional tag seperti kode dibawah ini:<script type='text/javascript'> //<![CDATA[ function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.round(Math.random() * 14)]; } return color; } $(function() { $(".post").each(function() { $(this).css("background-color", get_random_color()); }); }); //]]> </script> <b:if cond='data:blog.url == data:blog.homepageUrl'> Menurut saya tampilan warna berbeda pada latar setiap posting mungkin lebih cocok hanya untuk Template dengan Style Gallery, kalau untuk Template biasa mungkin terlihat gimana gitu... namun tidak ada salahnya juga kalau ingin mencobanya. Bila kalian lebih jeli dan memiliki kemampuan Programming Javascript yang handal tentu bisa mengeditnya lebih bagus lagi sesuai kebutuhan.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.round(Math.random() * 14)]; } return color; } $(function() { $(".post").each(function() { $(this).css("background-color", get_random_color()); }); }); //]]> </script> </b:if> Oh iya jangan tanyakan lagi ya seperti "bikin berat loading ya om?" namanya juga ada penambahan koding, terlebih lagi javascript tentu saja nambah size halamanan..tapi itu bukan berarti bikin berat loading khan :) |
| You are subscribed to email updates from Blogger Tutorials To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
-Checker.png)
