Postingan ini merupakan lanjutan Artikel kemaren di Koleksi Google Font API untuk Blogger, Font Google pilihan dari Metro Personal Blog. Dan masih banyak lagi jenis font-font google yang support untuk Blogger, tapi inilah jenis font-font pilihan terbaik versi Metro Personal Blog :). Sebenarnya ribuan jenis font-font Google sih, tapi tidak semuanya Support untuk Blogger.
Note : Untuk penggabungan jenis font-font yang lain, silahkan gabung-gabungkan menurut selera anda, contohnya gabungan jenis font-font diatas (maksimal dua atau tiga jenis font).
Contoh gabungan dua jenis font --> http://fonts.googleapis.com/css?family=Oswald|Ubuntu
Untuk informasi lengkap silahkan kunjungi Google Font API Labsdisini dan Visit the Google Font Directorydisini atau di Google Webfontdisini.
Koleksi Google Font API untuk Blogger - Hi sobat blogger, berikut ini beberapa koleksi Google Font API, pilihan dari Metro Personal Blog, di gunakan untuk mempercantik style tulisan-tulisan blog anda. Silahkan pilih yang mana, sesuai kesukaan anda.
Berbagai macam jenis Font disediakan oleh Google Font API untuk membantu para Web Development dan Blogger untuk meningkatkan kualitas Blog. Font atau jenis Huruf Pilihan Metro Personal Blog di antaranya adalah :
Tangerine Amazing Metro Personal Blog
Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog
Tambahkan kode dibawah ini, simpan dibawah kode <head>
Kelebihan phpDesigner Editor 8 adalah PHP IDE dan PHP Editor fast built-in HTML5, CSS3 dan editor JavaScript. di tambah fitur menarik membantu dalam pembuatan website dan pembuatan template. Selain pengeditan PHP, phpDesigner 8 juga di lengkapi pengeditan HTML5, CSS3 dan JavaScript. Berikut fitur pendukung dari phpDesigner 8 :
- Fast, powerful and intuitive to use - PHP IDE and PHP editor - HTML5-, CSS3- and JavaScript editor - Code insight - Debug and profile PHP with Xdebug - PHP frameworks - JavaScript frameworks Integration with GIT and SVN - Work with files over FTP/SFTP
Syntax highlighters Code Insight helps you master PHP, HTML5, CSS3 and JavaScript on the fly.
HTML5 Built-in code completion for HTML5. It can even suggest you the missing tag.
PHP Debugging Analyze, evaluate, profile, find errors in your PHP code line by line with Xdebug.
PHP Frameworks Supports all frameworks for PHP e.g. Zend, CodeIgniter, Yii and Symfony.
JS Frameworks Supports libraries like jQuery, ExtJS, Yui, Dojo. MooTools and Prototype.
Themes Syntax themes are customizable and also comes in black variants.
Code Insight untuk PHP, HTML5, CSS3 dan JavaScript, termasuk kerangka JavaScript jQuery populer lainnya.
Intelligent syntax highlighting for PHP, HTML5, CSS3, and JavaScript Switch automatic between highlighters for PHP, HTML5, CSS3, and JavaScript dependant on your position in your code and dim the rest of the code so you can keep a focus on your code. You can even see syntax errors as you type.
Saya Paling suka phpDesigner 8 Editor ini daripada PHP Editor yang lain. Untuk informasi lengkap phpDesigner 8 silahkan kunjungi situs resminya disini
Cara Cloning Template - Berawal dari saya mencari di mbah google template Blogger Valid HTML5 + Responsive untuk mengganti template default bawaan dari blogger untuk Blog Sederhana saya ini, namun semuanya tidak sesuai dengan selera/keinginan saya hehehe :D Dalam pencarian Template Valid HTML5, saya di arahkan mbah google ke blog master om Agus Ramadhani dan Kang Ismet
Saya suka Tema Template kedua master Blog ini. Nah di sini muncul ide kreatif saya untuk meng-cloning template master blog ini. (Maaf ya om Agus dan Kang Ismet) hehehe Piss \m/_.._\m/ saya hanya sekedar mengembangkan kreatifitas saya, dan tidak akan share hasil Template clonengan buatan saya :).
Pertama kali saya clonng template Kang Ismet dan berhasil. Berikut screenshoot nya :
Waktu Pembuatan template clonengan hanya membutuhkan waktu dua jam, termasuk menyusun formulasi template, dan menemukan kode kode yang disembunyikan atau yang tidak ditampilkan, sampai proses upload template di blogger. Dalam pembuatan template, anda tidak perlu repot-repot mencari template yang mirip mirip template bawaan template orang yang anda akan di cloning. cukup copy source code templatenya saja.
Disini saya tidak akan share hasil Template clonengan blog master buatan saya, namun saya akan memberitahukan cara cloning template blog orang lain. Okay !! mari kita langsung aja caranya (simak baik-baik) :
Dalam Bahasan postingan ini, saya kasih contoh cloning template blog saya sendiri, hasil clonengan dari template Blog om master blog Agus Ramadhani atau biasa dikenal di sebut o-om.com
Pertama Hal pertama yang anda lakukan pilih salah satu postingan template target anda, terserah anda postingan apa aja!!. Setelah memilih salah satu postingan, lalu klik kanan di area bebas. Klik Kanan > Lihat Code Sumber Laman. Jika browser di kommputer anda berbahasa inggris kira-kira seperti ini: Right Click > See Source Code. (saya menggunakan Browser Firefox Berbahasa Indonesia). Lalu buat Notepad, dan copy semua Source code halaman postingan pilihan anda, Paste lalu beri Judul notepad anda "dplkt-halaman-postingan.txt" (tanpa tanda kutip). atau "dplkt-halaman-postingan.xml" (tanpa tanda kutip). Jangan Lupa Buat Folder Baru dan Beri judul "Duplikat Template" (Tanpa Tanda Kutip). Simpan Hasil Copian Sorce Code anda di folder tersebut, biar gampang di ingat.
Kedua Perlu di ketahui, susunan Template Blog umumnya seperti ini :
Header Wrapper terdiri dari Header Left dan Header Right. (pada Template duplikat saya, seperti ini Header Inner dan .blog-desc)
Outer Wrapper terdiri dari Main Wrapper dan Sidebar Wrapper.
Footer Wrapper terdiri dari Bottom Left, Bottom Center dan Bottom Right
Credit Wrapper.
Okay!! anda mulai dari bawah code HTML dulu, hasil dari copian sorce code tadi. Cari dan perhatikan baik-baik code pada bagian Footer Wrapper, misalnya seperti ini: <div id='footer-wrapper'>
Susunan code bagian Footer Wrapper dari template duplikat saya, terdiri dari :
<div id='footer-wrapper'> <div id='bottom'> ..... susunan dari Bottom terdiri dari : - left-bottom - center-bottom - right-bottom <div id='upper-footer'> dan <div class='credits'>
Perhatikan code yang berwarna merah. yang berwarna merah, Hapus saja.
Perhatikan code yang berwarna Hijau, code div ganti dengan b:section lalu tambahkan preferred='yes' di belakang code id='left-bottom', sehingga hasilnya seperti ini :
Note: Perhatikan dan teliti baik-baik code </div> sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code </div> tersebut.
Ketiga Lanjut pada bagian Outer Wrapper yang terdiri dari Main Wrapper dan Sidebar Wrapper.
Contoh susunan bagian Outer Wrapper :
<div id='main-wrapper'> <div id='main-wrapper-border'> <-- ini sekedar tambahan style border saja, sebelah kanan body postingan tebalnya 5px <div id='sidebar-wrapper'>
Pada bagian Outer Wrapper ini, sama seperti cara menyusun bagian Footer Wrapper, namun khusus pada bagian b:section Main, anda sisa meng-copy saja code template yang lama milik anda. Contohnya seperti ini :
<div id='outer-wrapper'> <div id='main-wrapper'> <div id='main-wrapper-border'> <b:section class='main' id='main' showaddelement='no'> <---(star copy) mulai copy semua code b:section Main, dari template blog anda yang lama sampai.... <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='main' var='top'> . . . <!-- bla bla bla bla bla --> . . . </b:includable> </b:widget> </b:section> <-- sampai dengan akhir dari code ini </div> <!-- end main wrapper border --> </div> <!-- end main wrapper -->
Note:
Yang berwarna biru mulai star peng-copian dari template blog lama anda sampai akhir dari </b:section>.
Khusus code </div> penutup untuk Outer Wrapper belum ditambahkan dari keterangan diatas, karena masih ada Sidebar Wrapper. Nantinya code </div> penutup untuk Outer Wrapper akan di sematkan tepat dibawah Sidebar Wrapper.
Dalam kasus ini, saya meng-copy isi code Main Wrapper dari template default bawaan blogger. mengingat masih lengkap, masih perawan, Karena belum ada pengurangan atau pengeditan yang saya lakukan dari template default bawaan blogger tersebut. (isi dari code Blog Post dan isi code Comments).
Selanjutnya, anda lanjut pada sub bagian Sidebar Wrapper. Lihat contoh di bawah ini :
Perhatikan code yang berwarna merah. yang berwarna merah, Hapus saja.
Perhatikan code yang berwarna Hijau, code div ganti dengan b:section lalu tambahkan preferred='yes' di belakang code id='inner-box', sehingga hasilnya seperti ini :
Dan sebagai penutup bahasan bagian Outer Wrapper, berikut Hasil Selngkap-lengkapnya :
<div id='outer-wrapper'> <div id='main-wrapper'> <div id='main-wrapper-border'> <b:section class='main' id='main' showaddelement='no'> <---(star copy) mulai copy semua code b:section Main, dari template blog anda yang lama sampai.... <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='main' var='top'> . . . <!-- bla bla bla bla bla --> . . . </b:includable> </b:widget> </b:section> <-- sampai dengan akhir dari code ini </div> <!-- end main wrapper border --> </div> <!-- end main wrapper --> <div id='sidebar-wrapper'> <b:section class='inner-box section' id='inner-box' preferred='yes'/> </div> <!-- end sidebar wrapper --> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> <!-- clear fix do not remove --> <br/> </div> <!-- end outer-wrapper --> </div> <!-- end outer wrapper line --> <div class='clear'/> <div class='backtotop'><a href='#'>Back to Top</a></div>
Note:
Perhatikan dan teliti baik-baik code </div> sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code </div> penutup tersebut.
Khusus untuk code penutup </div> <!-- end outer wrapper line --> ini, fungsinya sebagai code </div> penutup dari data vocabulary Review, gunanya untuk merating semua postingan anda, letak tepatnya, anda bisa lihat tepat dibawah code <body>
Keempat Selanjutnya, anda lanjut pada bagian Header Wrapper, sebagai akhir dari pembahasan code ini. Berikut Susunan code dari Header Wrapper :
Header Wrapper terdiri dari Blog Desc dan Header. Pada bagian Header Wrapper ini, sama seperti cara menyusun bagian Outer Wrapper, namun khusus pada bagian b:section Header, anda sisa meng-copy saja code template yang lama milik anda. Contohnya seperti ini :
<div id='branding'> <div id='head-inner'> <div id='header-wrapper'> <b:section class='blog-desc section' id='blog-desc' preferred='yes' showaddelement='yes'/> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <---(star copy) mulai copy semua code b:section Header, dari template blog anda yang lama sampai.... <b:widget id='Header1' locked='true' title='Metro Personal (Header)' type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> . . . <!-- bla bla bla bla bla --> . . . </b:includable> </b:widget> </b:section> <-- sampai dengan akhir dari code ini </div> <!-- end header wrapper --> </div> <!-- end head inner --> </div> <!-- end branding -->
Note:
Pada bagian blog-desc section, saya tambahkan showaddelement='yes' yang nantinya anda akan ganti menjadi 'no' setelah anda mengisi deskripsi tambahan agar supaya tidak ada penambahan widget lagi. Khusus deskripsi tambahan saja.
Yang berwarna biru mulai star peng-copian dari template blog lama anda sampai akhir dari </b:section>.
Perhatikan dan teliti baik-baik code </div> sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code </div> penutup tersebut.
Kelima (penutup) Rangkuman hasil Duplikat Template dari semua pembahasan code HTML diatas sebagai berikut :
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <meta charset='utf-8'/> <!-- Sisipkan Code META TAG disini --> ////////////////////////////////////////////// <!-- Sisipkan Code CSS disini --> ]]></b:skin> <!-- Sisipkan Code Javascript RELATED POST disini --> <!-- Sisipkan Code Javascript AUTO READ MORE disini --> <!-- Sisipkan Code Javascript MOBILE MENU disini --> </head> <body> <div><div itemscope='' itemtype='http://data-vocabulary.org/Review'> <div id='branding'> <!-- Sisipkan Code Social Facebook dll disini --> <!-- Sisipkan Code Search disini --> <div id='head-inner'> <div id='header-wrapper'> <b:section class='blog-desc section' id='blog-desc' preferred='yes' showaddelement='yes'/> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <---(star copy) mulai copy semua code b:section Header, dari template blog anda yang lama sampai.... <b:widget id='Header1' locked='true' title='Metro Personal (Header)' type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> . . . <!-- bla bla bla bla bla --> . . . </b:includable> </b:widget> </b:section> <-- sampai dengan akhir dari code ini. </div> <!-- end header wrapper --> </div> <!-- end head inner --> </div> <!-- end branding --> ////////////////////////////////////////////// <!-- Sisipkan Code Stripe Style disini --> <div id='outer-wrapper'> <!-- Sisipkan Code Javascript MOBILE MENU disini --> <!-- Sisipkan Code Menu Navigasi disini --> <div id='main-wrapper'> <div id='main-wrapper-border'> <b:section class='main' id='main' showaddelement='no'> <---(star copy) mulai copy semua code b:section Main, dari template blog anda yang lama sampai.... <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='main' var='top'> . . . <!-- bla bla bla bla bla --> . . . </b:includable> </b:widget> </b:section> <-- sampai dengan akhir dari code ini </div> <!-- end main wrapper border --> </div> <!-- end main wrapper -->
<!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> <!-- clear fix do not remove --> <br/> </div> <!-- end outer-wrapper --> </div> <!-- end outer wrapper line -->
Automatic Background Color different Every Post Blogger - Easy!! Find the code </head> then put the following Javascript code just above the </head>
<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>
If you just want to change the color of posts on the main page alone you stay just use conditional tags like the code below:
<b:if cond='data:blog.url == data:blog.homepageUrl'> <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>
Display different colors on the background of each posting may be ideal only for Templates with Style Gallery. But there is no harm if you want to try.
Using CSS/HTML to Make a Responsive Website - A website is responsive if it is able to adapt to the screen of the client. In this article, I�ll show you how to easily make a website responsive in three easy steps.
The layout When building a responsive website, or making responsive an existing site, the first element to look at is the layout. When I build responsive websites, I always start by creating a non-responsive layout, fixed at the default size. For example, CatsWhoCode.com default width is 1100px. When I�m pleased with the non-responsive version, I add media queries and slight changes to my code to make the code responsive. It�s way easier to focus on one task at a time.
When you�re done with your non-responsive website, the first thing to do is to paste the following lines within the <head> and </head> tags on your html page. This will set the view on all screens at a 1�1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching.
It�s now time to add some media queries. According to the W3C site, a media query consists of a media type and zero or more expressions that check for the conditions of particular media features. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. In other words, media queries allows your website to look good on all kinds of displays, from smartphones to big screens.
Media queries depends of your website layout, so it�s kinda difficult for me to provide you a ready to use code snippet. However, the code below is a good starting point for most websites. In this example, #primary is the main content area, and #secondary the sidebar.
By having a look at the code, you can see that I defined two sizes: The first have a maximum width of 1060px and is optimized for tablet landscape display. #primary occupies 67% of its parent container, and #secondary 30%, plus a 3% left margin.
The second size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphones screens, I decided to give #primary a 100% width. #secondary also have a 100% width, and will be displayed below #primary.
As I already said, you�ll probably have to adapt this code a bit to fit the specific needs of your website. Paste it on your site .css file.
Once done, let�s see how responsive your layout is. To do so, I use this awesome tool created by Matt Kersley.
Medias A responsive layout is the first step to a fully responsive website. Now, let�s focus on a very important aspect of a modern website: medias, such as videos or images.
The CSS code below will ensure that your images will never be bigger than their parent container. It�s super simple and it works for most websites. Please note that the max-width directive is not recognized by older browsers such as IE6. In order to work, this code snippet have to be inserted into your CSS stylesheet.
img { max-width: 100%; }
Although the technique above is efficient, sometimes you may need to have more control over images and display a different image according to the client display size.
Here is a technique developed by Nicolas Gallagher. Let�s start with the html:
As you can see, we used the data-* attribute to store replacement images urls. Now, let�s use the full power of CSS3 to replace the default image by one of the specified replacement images if the min-device-width condition is matched:
Impressive, isn�t it? Now let�s have a look to another very important media in today�s websites, videos.
As most websites are using videos from third parties sites such as YouTube or Vimeo, I decided to focus on the elastic video technique by Nick La. This technique allows you to make embedded videos responsive.
Once you applied this code to your website, embedded videos are now responsive.
Typography The last step of this tutorial is definitely important, but it is often neglected by developers when it comes to responsive websites: Typography.
Until now, most developers (including myself!) used pixels to define font sizes. While pixels are ok when your website has a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client.
The CSS3 specification included a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.
As rems are relative to the html element, don�t forget to reset html font size:
html { font-size:100%; }
Once done, you can define responsive font sizes as shown below:
@media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Please note that the rem unit is not recognized by older browers, so don�t forget to implement a fallback. That�s all for today � I hope you enjoyed this tutorial!
Postingan ini merupakan lanjutan Artikel kemaren di Koleksi Google Font API untuk Blogger, Font Google pilihan dari Metro Personal Blog. Dan masih banyak lagi jenis font-font google yang support untuk Blogger, tapi inilah jenis font-font pilihan terbaik versi Metro Personal Blog :). Sebenarnya ribuan jenis font-font Google sih, tapi tidak semuanya Support untuk Blogger.
Koleksi Google Font API untuk Blogger - Hi sobat blogger, berikut ini beberapa koleksi Google Font API, pilihan dari Metro Personal Blog, di gunakan untuk mempercantik style tulisan-tulisan blog anda. Silahkan pilih yang mana, sesuai kesukaan anda.
Kelebihan phpDesigner Editor 8 adalah PHP IDE dan PHP Editor fast built-in HTML5, CSS3 dan editor JavaScript. di tambah fitur menarik membantu dalam pembuatan website dan pembuatan template. Selain pengeditan PHP, phpDesigner 8 juga di lengkapi pengeditan HTML5, CSS3 dan JavaScript. Berikut fitur pendukung dari phpDesigner 8 :
- Fast, powerful and intuitive to use
Cara Cloning Template - Berawal dari saya mencari di mbah google template Blogger Valid HTML5 + Responsive untuk mengganti template default bawaan dari blogger untuk Blog Sederhana saya ini, namun semuanya tidak sesuai dengan selera/keinginan saya hehehe :D Dalam pencarian Template Valid HTML5, saya di arahkan mbah google ke blog master om 
Automatic Background Color different Every Post Blogger - Easy!! Find the code 
Using CSS/HTML to Make a Responsive Website - A website is responsive if it is able to adapt to the screen of the client. In this article, I�ll show you how to easily make a website responsive in three easy steps.