Is it possible to make a custom blogger template only for mobile?


#1

I mean that I will have 2 different custom templates. One for PC desktop and and a different one for mobile devices like iPad , iPhone and Samsung

How to create these two different custom views


#2

@Mohammad, I also want to ask that question from you.

Can We Upload a template’s html in a server and run it only on mobile devices?


#3

@lighter @Shivansh Why do you need two? you can use one template. Make it responsive and you only need to use CSS for each screen size :smile:

1. Add Meta Viewport just below <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

2. Use CSS3 Media Queries
(Example: If screen size less than 480px, put this code)
@media screen and (max-width : 480px) { Make your CSS here }

if not understand, please visit the following MBT posts: Design a Responsive Blogger Template - Tutorial


Have you a theme of blog, which can open in android smartphone?
#5

Tx for your answer. I will tell you why.

My current template has very good ctr for adsnse and I want to keep that way. In other hand, in 21 in April, Google is going to update it’s algorithm for non mobile site and I want some how not to loose traffic in mobile searches.

If I will do the changes you are suggesting, will Google see my moblie view as mobile fit or not? thats the real question…


#6

Yes it’s possible, just put this code on your template:

<b:if cond='data:blog.isMobile'>
<style type='text/css'>

Write your CSS for mobile view here

</style>
</b:if>

You just need to design it by your self, and it’s gonna be long code here :scream_cat:

I give you a best example for it:

<b:if cond='data:blog.isMobile'> 
<style type='text/css'> 
   #header-wrapper {
    margin:5px 5px 0 5px;
    padding:0;
    overflow:hidden;
    background:transparent;
    max-width:728px;
    min-height:initial;
}
#Header1 {
    min-height:initial;
}
#header-inner {
    position:relative;
}
#header {
    float:left;
    min-width:257px;
    padding:0;
    background:transparent;
    height:100%;
    min-height:initial;
    padding:0;
}
#header h1, #header p {
    font-size:200%;
    color:#333;
}
#header a {
    color:#333;
}
#header a:hover {
    color:#f56954;
}
#header .description {
    color:#666;
    line-height:normal;
}
.header img {
    display:block;
}
.header-right {
    float:right;
    padding:0;
    overflow:hidden;
    margin:0 auto;
    width:100%;
    max-width:728px;
}
.header-right img {
    display:block;
}
nav {
    display:block;
    margin:0 5px;
    font-size:0;
}
.menu li a {
    text-transform:none;
    font-size:12px;
}
.menu ul li a {
    font-size:11px;
}
.mobile #outer-wrapper {
    float:none;
    width:auto;
    max-width:728px;
    padding:0 8px;
}
.mobile .navigation-menu, .mobile .header, .mobile #content-wrapper, .mobile #post-wrapper, .mobile #sidebar-wrapper, .mobile #footer-wrapper, .mobile .header-right {
    float:none;
    width:auto;
    max-width:728px;
    width:100%;
    padding:0 3px;
    margin:0 0 0 0;
}
.mobile #content-wrapper {
    padding-top:5px!important;
}
.mobile .post-container, .mobile .sidebar-container, .mobile .header {
    padding:8px 0 !important;
}
.mobile .post-body, .mobile #blog-pager, .mobile .header .description, .mobile-index-contents .post-body {
    font-size:13px;
}
.mobile .post-body {
    line-height:1.5;
}
.mobile .post-info {
    margin:0 0 0;
}
.mobile .mobile-date-outer {
    border-bottom:3px solid #f0f0f0;
    margin:0 0 8px;
    padding:0 0 8px;
}
.mobile h3.mobile-index-title, .mobile h3.mobile-post-title {
    font:normal bold 14px Arial, sans-serif;
    width:auto;
    max-width:728px;
}
.mobile span.label-thumb-title {
    font:normal bold 14px Arial, sans-serif;
    text-transform:none;
}
.mobile .mobile-index-thumbnail {
    width:48px;
    height:48px;
    float:left;
    margin:0 8px 3px 0 !important;
}
.mobile .mobile-index-thumbnail img {
    width:48px!important;
    height:48px!important;
}
.mobile img, .mobile iframe {
    max-width:100%;
}
.mobile .header img {
    width:auto;
    max-width:140px;
}
#footx1, #footx2, #footx3 {
    float:none!important;
    width:100%!important;
}
.mobile ul.label-with-thumbs li {
    min-height:48px!important;
    padding:0 0 8px!important;
}
.mobile .label-thumb {
    margin:0 8px 0 0!important;
    height:48px!important;
    width:48px!important;
}
.mobile .label-thumb img {
    height:48px!important;
    width:48px!important;
}
.mobile #footer-widgetfix, .banner .widget, .banner2 .widget {
    padding:8px!important;
}
.mobile #footx1 .widget, .mobile #footx2 .widget, .mobile #footx3 .widget {
    margin:0 0 8px 0 !important;
}
.mobile #blog-pager {
    margin:0 0 0 0!important;
    padding:0!important;
}
.mobile .blog-pager-older-link, .mobile .home-link, .mobile .blog-pager-newer-link {
    width:auto;
}
.mobile a.home-link {
    line-height:20px!important;
}
.mobile .mobile-desktop-link {
    display:none;
}
.mobile .sidebar .widget {
    padding:0 0 8px !important;
}
.mobile #comments {
    max-width:728px;
}
.mobile #comments h3 {
    line-height:normal;
    text-transform:uppercase;
    color:#333;
    font-weight:bold;
    margin:0 0 20px 0;
    font-size:14px;
    padding:0 0 0 0;
    border:none;
}
.mobile #comment-editor {
    display:block!important;
}
.mobile .comments .avatar-image-container, .mobile #comments h3:before {
    display:none;
}
.mobile #comments .comment-holder, .mobile #comments .comment_reply {
    margin-left:10px!important;
}
.mobile .PopularPosts .item-thumbnail {
    margin:0px 6px 0px 0px;
    display:inline;
    float:left;
}
.mobile .PopularPosts .item-thumbnail a img {
    display:block;
    margin:0px;
    padding:0px;
    height:48px;
    width:48px;
}
.mobile #related-posts-mobile {
    text-align:left;
    margin:10px 0;
    padding:0;
}
.mobile #related-posts-mobile ol {
    list-style-type:none;
    margin:0 0 0 0!important;
}
.mobile #related-posts-mobile ol li {
    padding:3px;
    border-bottom:1px dotted #ddd;
}
.mobile #related-posts-mobile ol li:last-child {
    border-bottom:none!important
}
.mobile #related-posts-mobile h3 {
    color:#333;
    font-weight:bold;
    padding:0 0 6px 0;
    margin:0;
    font-size:15px;
}
#share-buttons-mobile {
    margin:15px 0 5px;
    padding:0;
}
#share-buttons-mobile p {
    float:left;
    display:block;
    padding:3px 0px !important;
    margin:0 3px 3px 0;
}
#share-buttons-mobile a {
    position:relative;
    float:left;
    display:block;
    color:#fafafa;
    padding:3px 8px;
    margin:0 3px 3px;
}
#share-buttons-mobile a:hover {
    text-decoration:underline;
}
#BackToTop {
    padding:5px 10px;
    font-size:24px;
}
#BackToTop:hover {
    background:#333;
    color:#fff;
}
</style>

If this to hard for you, you can follow MBT post on @fadlybiluping post.

NOTE: code above it’s just an example, so dont put it in your template. For result you can see this template Demo on mobile view, or see this DEMO on desktop (http://www.revoltify.co.vu/?m=1)


#7

Thank you very much for your answer!

In my template there is adsense ad below the title. Does this code for the mobile you gave, will show it as well?


#8

Hi, Can you please answer it? It is very important for me…


#9

It’s just an examples from template I download. It have a different structure…

You need to do it by yourself.


#10

Tx mad. I understand it but I just need to know if it is possible to show adsense ad below the title in this mobile view? is it possible?


#11

Well… maybe yes, it’s possible. You just need some conditional tag for mobile to do it.


#12

Ok. tx. I will work on it.

BTW, Where do I need to paste that code? in the head section?


#13

I think, You paste it on both, Head section or on Body Section.


#14

Do you mean on both of them or only in 1 of them?


#15

you can put it on both only 1 time. I mean, If you want to put it on header section then don’t put it on body. And if you decided to put it on body section, when don’t put it on head section.


#16

OK. TX.

What about the settings? what do i need to choose in the template setting in blooger? which option do i need to choose?


#17

you have to disable mobile template from template tab from Blogger Dashboard. Then the mobile css will startt working fine


#18

TX!

I think I got all the information I need…

TX


#19

To make your question more simple, you are actually looking for a Responsive Blogger Template. You can surely have a template which will load different stylesheets on different screen sizes and you can surely control the display of all your widgets and HTML elements using the responsive stylesheet.

I did described in detail in one of my earlier posts on how to design responsive views. Read the following post.

If you are really looking on how to convert your blogger template into a responsive one then you may kindly wait for my tutorials which I am launching soon.

Blogger’s default mobile view makes it difficult to manage widgets and their locations. That is why it is best to keep the default mobile view OFF and instead create a custom Mobile/Responsive view for your blog


#20

Hi Mad,

I try it and it didn’t change anything. i checked it in my mobile in different browser but the template hasn’t change at all…

Can you think of a reason?


#21

i think it is because so have not disabled blogger template from blogger dashboard.