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>
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.
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.