Showing posts with label responsive. Show all posts
Showing posts with label responsive. Show all posts
Thursday, April 27, 2017
How to Create Responsive Website or Blogger Template
How to Create Responsive Website or Blogger Template
As the time goes, browsing websites from desktop computers decreasing and using Laptops, Tablets and Mobile devices increasing day by day. So why not to create our website design custom for each types of devices, that fits and looks more attractive for those devices to acquire the visitors entered from those devices.
Responsive web design is the approach that suggests in which design and development should respond user behavior and environment based on the size of the browser screen, platform and orientation.
Responsive web design includes the use of flexible layouts, images and intelligent use of media queries. You can make your blogger template responsive by using special tags in CSS. Media queries (@media) are such tags, which helps to make your CSS for every device screen size. You can make many media queries on CSS that matches for each screen size and you can put custom CSS codes for each media queries.
Here I have explained some steps for creating your blog responsive.
Step1: Add meta tags for responsiveness
Add the following meta tags on your blogger template using the following steps.
- Go to blogger dashboard and click on template
- Backup your template for the risk while editing template codes.
- Paste the following codes between and <head> and </head> tags.
- Save your blogger template.
Add the following codes to size the contents of blog equal to the device width.
<meta name="viewport" content="width=device-width/">
Add the following codes to size the contents of blog equal to the device width and device height.
<meta name="viewport" content="width=device-width, height=device-height/">
Add the following codes to size the contents of blog equal to the device width and initial zoom size.
<meta name="viewport" content="width=device-width, initial-scale=2"/>
Add the following codes to size the contents of blog equal to the device width, initial zoom size and maximum zoom size.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1/">
Instead or writing meta tags, you can do the same with the following codes in CSS.
@-moz-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
height:device-height;
}
@-moz-viewport {
width: device-width;
initial-scale:2;
}
@-moz-viewport {
width: device-width;
initial-scale:1;
maximum-scale:1;
}
This works only for Mozilla browser, for other browsers you can use -o-, -webkit- and -ms- as prefixed properties.
Step2:Add media queries for each screen size
Add the following media queries between <![CDATA[*/ and ]]> tags.
@media screen and (max-width:320px){
/*For Small Screen Moblies*/
}
@media screen and (max-width:480px){
/*For Smart Phones and iPhones*/
}
@media screen and (max-width:768px){
/*For Small Tables*/
}
@media screen and (max-width:1024px){
/*For Notebooks*/
}
You can add more media queries according to your need for different screen sizes and orientations and can also use min-width: to specify minimum width of screen.
To specify the screen orientations landscape or portrait use
@media screen and (max-width:480px) and (orientation:landscape) { }
Step3: Write custom CSS code for media queries
Now, you have to add custom CSS codes for each media queries. The default CSS properties written are replaced by the properties written within these media queries. Here is the sample CSS code written for mobile devices, you can add these codes for media screen with max-width 320 and 480 px.
#wrapper {
width:85%;
}
#content{
width:100%;
}
#sidebar-left{
width:100%;
clear:both;
}
#sidebar-right{
width: 100%;
clear:both;
} Alternate method for adding CSS code with media queries
For the alternate method, you can write media queries with custom CSS codes on a single .css file and link it on header part of your blog or website as below.
<link rel="stylesheet" media="screen" href="screen.css"/>
You have to give the full path for "screen.css", where the file is placed.
You can also link different style sheet files for different screen sizes as below.
<link rel="stylesheet" media="screen and (max-width:1280px)" href="large.css"/>
<link rel="stylesheet" media="screen and (max-width:480px)" href="small.css"/>
Related Posts:
- How to Create Simple Blogger Template Easily?
- How To Make Simple CSS Stylesheet for a Website ?
- How To Create Simple Menu Using CSS ?
- How to validate required field in a form using javascript
- How to Display Date Format in JavaScript?
- How to Create a Digital Clock in JavaScript?
- What are the Different Ways to Redirect Page in JavaScript?
- How to Detect Visitors Browser Using JavaScript?
- Image Slideshow with Navigation Buttons Using Javascript
- How to Create Simple JavaScript Fade Effect Animation?
- Simple JavaScript Fade Effect Animation Using Jquery
Go to link Download
Wednesday, March 1, 2017
Free Download Enfold Responsive Multipurpose Theme V3 2 1
Free Download Enfold Responsive Multipurpose Theme V3 2 1
 |
| Enfold Responsive Multipurpose Theme V3.2.1 |
Enfold Responsive Multipurpose Theme V3.2.1 adalah salah satu template wordpress terbaik, karena selain mudah mengaturnya, tampilan yang dinamis simple tapi berkelas, template ini juga responsive dan SEO tentunya tidak heran theme ini dibandrol dengan harga $58..seperti namanya Enfold Responsive Multipurpose Theme.:: About This Theme ::
Enfold is a clean, super flexible and fully responsive WordPress Theme (try resizing your browser), suited for business websites, shop websites, and users who want to showcase their work on a neat portfolio site. The Theme is built on top of the fabulous Avia Framework and offers support for the WPML MULTI LANGUAGE plugin, just in case you need it ;)It comes with a plethora of options so you can modify layout, styling, colors and fonts directly from within the backend. Build your own clean skin or use one of 18 predefined skins right out from your WordPress Admin Panel. Font, background and color options as well as the dynamic template builder will help you create the Website you need in no time. In addition to the global options you can set unique styling options for each entry as seen in the theme demo.
Read More; Key Features Enfold Responsive Multipurpose Theme, ScreenShot and any More at ThemeForest: Click Here
:: Changelog ::
2015 June 19th – Version 3.2.1- improved: the visual site preloader works faster and more reliable now
- fixed: an image size problem with portfolio gallery thumbnails
- fixed: Vimeo API was updated to fix vimeo video autoplay
- added: rel=‘nofollow’ to comment links
Download Enfold Responsive Multipurpose Theme Terbaru V3.2.1 Gratis:
DEMO | DOWNLOAD
Go to link Download
Friday, December 2, 2016
GoFrenzy Blogger Template Free Responsive 2016
GoFrenzy Blogger Template Free Responsive 2016
Pada kesempatan kali ini BLOGGINGPASURUAN akan berbagi template gratis yang saya beri nama GoFrenzy Responsive Tamplate, Ok langsung saja !
Template ini Saya bagikan khusus untuk Anda semua pengunjung BLOGGINGPASURUAN yang menginginkan sebuah template dengan loading yang cepat, ringan, serta dipadukan dengan tampilan yang menarik. Template ini pun sudah mendukung beberapa fitur penting seperti responsive, seo friendly, validasi pada HTML5 dan CSS3, high CTR, dynamic heading dan masih banyak lagi. Anda bisa lihat tabel dibawah ini :
| No | Features | Availability |
|---|---|---|
| 1 | Responsive | Cek |
| 2 | SEO Friendly | Cek |
| 3 | Google Testing Tool Validator | Cek |
| 4 | Mobile Friendly | Cek |
| 5 | Two Columns | true |
| 6 | Social share button | true |
| 7 | Dynamic Heading | true |
| 8 | Responsive Droopdown Menu | true |
| 9 | Custom Subscribe box Responsive | true |
| 10 | Search box Responsive | true |
| 11 | Author Box Responsive | true |
| 12 | Breadcrumbs | true |
Mohon untuk tidak menghapus link credit, jika Anda menginginkan template tanpa link credit Anda bisa membeli template dengan cara pesan ( kontak Admin ).
Go to link Download
Subscribe to:
Posts (Atom)