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


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


#22

I disable it.

My mobile mode in blogger template setting in the dashboard is off.


#23

Hi mad, Can you think of a reason why it didn’t work?


#24

The above code will not work if mobile view is turned OFF. So this mobile conditional statement is not effective in Custom Responsive templates


#25

worked like a charm, thank u very much brother