Design Responsive Blogger Templates

Design Responsive Blogger Templates - Step by Step Guide

15
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '2214227877644413667', 'body': 'i love this whole series to template responsive.x3cbr /x3eyour explanation style is amazing and i love it.x3cbr /x3ei learnt lots of things from this blog.x3cbr /x3eALLAH apko aur apke blog ko aur ziyzda balke sabse ziyada kamiyab banaey.', 'timestamp': '1441297499003', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441297499003#c2214227877644413667', 'author': 'name': 'sy. abuzar', 'avatarUrl': '//lh4.googleusercontent.com/-UNg5Cj1NxDg/AAAAAAAAAAI/AAAAAAAAACU/N1SHioWc7iY/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/09755960844885811494', 'displayTime': 'Sep 3, 2015, 9:24:00 PM', 'deleteclass': 'item-control blog-admin pid-1543129679', 'id': '8631635629390039712', 'body': 'Tutorial is really nice, thanks for share MBT', 'timestamp': '1441331815997', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441331815997#c8631635629390039712', 'author': 'name': 'Blogginglists .com', 'avatarUrl': '//lh3.googleusercontent.com/-nhPgIV5RHCE/AAAAAAAAAAI/AAAAAAAAAD0/zwtq1GDPCFE/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/08451610364022932733', 'displayTime': 'Sep 4, 2015, 6:56:00 AM', 'deleteclass': 'item-control blog-admin pid-1368724438', 'id': '255219124533180462', 'body': 'Hello Mohammad bro.x3cbr /x3eThanks for your hard work. I love blogspot platform as well blogger default template. I will able to make my template full responsive according to your guide. Thanks brox3cbr /x3eThanks a ton !!x3cbr /x3eYour regards x3cbr /x3ex3ca relx3dx22nofollowx22 hrefx3dx22http://www.techshoutme.comx22x3eSalekx3c/ax3e', 'timestamp': '1441446773510', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441446773510#c255219124533180462', 'author': 'name': 'Salek Ahmed', 'avatarUrl': '//lh6.googleusercontent.com/-HZKPLrjLUcQ/AAAAAAAAAAI/AAAAAAAABFM/ulw1YsVR4qA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/14655039649905987652', 'displayTime': 'Sep 5, 2015, 2:52:00 PM', 'deleteclass': 'item-control blog-admin pid-2130059859', 'id': '5874742159043223777', 'body': ' What!!!!!!!!!x3cbr /x3eSeries completed....x3cbr /x3eBut what for my request mohammad bhai...x3cbr /x3eI was request for responsive popup subscrition box for blogger blog and you assure that you provide this in your responsive series. So how can this series ended.. i thinkmy request 8s more useful for all bloggers. This is must need widget. Please do not finish the series.', 'timestamp': '1441559745257', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441559745257#c5874742159043223777', 'author': 'name': 'Sumit Kumar Gogawat', 'avatarUrl': '//lh5.googleusercontent.com/-4snKfA_34yU/AAAAAAAAAAI/AAAAAAAABsQ/AFXUkFz4S6U/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/17138058195183452291', 'displayTime': 'Sep 6, 2015, 10:15:00 PM', 'deleteclass': 'item-control blog-admin pid-805245956', 'id': '3685950956126776744', 'parentId': '2214227877644413667', 'body': 'Thank you dear abuzar, this feedback means a lot and we will continue sharing some more great tutorials in coming days :)', 'timestamp': '1441707773597', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441707773597#c3685950956126776744', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAJZA/Yfbvp1almlI/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Sep 8, 2015, 3:22:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '356519104452536963', 'parentId': '8631635629390039712', 'body': 'Always a pleasure buddy x3d)', 'timestamp': '1441707797025', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441707797025#c356519104452536963', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAJZA/Yfbvp1almlI/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Sep 8, 2015, 3:23:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '519061005191750180', 'parentId': '255219124533180462', 'body': 'I am so glad you tried the responsive guide and converted your static template into a responsive one. Wish you all the best buddy. x3d)', 'timestamp': '1441707842630', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441707842630#c519061005191750180', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAJZA/Yfbvp1almlI/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Sep 8, 2015, 3:24:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '5155382131170034184', 'parentId': '5874742159043223777', 'body': 'OMG! looks like I almost forget that! x3dd x3cbr /x3ex3cbr /x3eDonx26#39;t worry buddy, create a forum thread and ask me for any subscription box and I will convert it for you into a responsive one. This is the especial favor I can do for you. :)x3cbr /x3ex3cbr /x3ePost your question at ask.mybloggertricks.com and then email me at mohammad@mybloggertricks.com so that i may reply fast', 'timestamp': '1441708018090', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441708018090#c5155382131170034184', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAJZA/Yfbvp1almlI/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Sep 8, 2015, 3:26:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '5690771761333104205', 'body': 'Thank you very much Mohammad Bhai..x3cbr /x3ex3cbr /x3eThat why I like your site to visit.', 'timestamp': '1441800083946', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1441800083946#c5690771761333104205', 'author': 'name': 'Sumit Kumar Gogawat', 'avatarUrl': '//lh5.googleusercontent.com/-4snKfA_34yU/AAAAAAAAAAI/AAAAAAAABsQ/AFXUkFz4S6U/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/17138058195183452291', 'displayTime': 'Sep 9, 2015, 5:01:00 PM', 'deleteclass': 'item-control blog-admin pid-805245956', 'id': '3343177263991742659', 'body': 'Interesting article!x3cbr /x3eIx26#39;m new to blogger,though have read many ebooks and my understanding of blogger has improved.x3cbr /x3eBut right now Ix26#39;m facing a tough time with my blog not been responsive! x3cbr /x3eI browsed and was introduced to viewport and media queries, CSS!x3cbr /x3eThe problem is x26quot; Ix26#39;m unable to implement these tricks,x26quot; please help me out friends.x3cbr /x3ex3cbr /x3esometimes I had to click zoom to see the contents on my blogger blog!x3cbr /x3ex3cbr /x3eI will be happy to get positive feedbacks!', 'timestamp': '1451152708607', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1451152708607#c3343177263991742659', 'author': 'name': 'Baribefii Mbarikor', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/06640837366542355312', 'displayTime': 'Dec 26, 2015, 10:58:00 PM', 'deleteclass': 'item-control blog-admin pid-321534456', 'id': '4007729682446081889', 'body': 'heyy I have one problem.In responsive blogger template how to post by category means menu bar??plz reply soon.', 'timestamp': '1452613038069', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1452613038069#c4007729682446081889', 'author': 'name': 'Tollywood Dhamaka', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/06716444404639136467', 'displayTime': 'Jan 12, 2016, 8:37:00 PM', 'deleteclass': 'item-control blog-admin pid-765541611', 'id': '3803725119284739064', 'body': 'it not give any information', 'timestamp': '1472924225322', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1472924225322#c3803725119284739064', 'author': 'name': 'Fly for Freedom', 'avatarUrl': '//lh5.googleusercontent.com/-O2HsTi5m7l0/AAAAAAAAAAI/AAAAAAAAABo/7KFLq8O0TTY/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/02700912850041887689', 'displayTime': 'Sep 3, 2016, 10:37:00 PM', 'deleteclass': 'item-control blog-admin pid-46612697', 'id': '712615253974674990', 'parentId': '3803725119284739064', 'body': 'Because you are reading the summary and not the tutorial guide itself which can be find by x3ca hrefx3dx22http://www.mybloggertricks.com/2013/05/design-responsive-blogger-template.htmlx22 relx3dx22nofollowx22x3eclicking herex3c/ax3e :)', 'timestamp': '1473073086211', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1473073086211#c712615253974674990', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Sep 5, 2016, 3:58:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '5246111914943963357', 'body': 'Hello Mohammad.. I decided to write you after a few weeks of finally being able to make my website responsive. And would also like to inform you about some changes i found while making my site responsive.x3cbr /x3ex3cbr /x3ex3cbr /x3eThe sidebar wrapper did not work, so it seems blogger have replaced it with sidebar-right-1 or sidebar-left-1 depending on RHS or LHS.. x3cbr /x3ex3cbr /x3eThe main section did not also work so i had to replace it with .main-inner .column-center-inner .section . Should incase any one is facing such troubles, just use google inspect tool to see which one will work well for you.x3cbr /x3ex3cbr /x3eHave a nice day.x3cbr /x3ex3cbr /x3eblog url: www.obhiabablog.blogspot.com', 'timestamp': '1473320663702', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1473320663702#c5246111914943963357', 'author': 'name': 'Prince John Okosun', 'avatarUrl': '//lh3.googleusercontent.com/-c7AzYA2aDh8/AAAAAAAAAAI/AAAAAAAABic/wgYYWSvB-Ig/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12301775134217028139', 'displayTime': 'Sep 8, 2016, 12:44:00 PM', 'deleteclass': 'item-control blog-admin pid-605869752', 'id': '4717864620907403699', 'body': 'I donx26#39;t know how can i make a blog .Can you help me!x3cbr /x3e', 'timestamp': '1474543042795', 'permalink': 'https://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html?showCommentx3d1474543042795#c4717864620907403699', 'author': 'name': 'Anonymous', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': '', 'displayTime': 'Sep 22, 2016, 4:17:00 PM', 'deleteclass': 'item-control blog-admin pid-155727241'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '103251246277648930', 'feed': 'https://www.mybloggertricks.com/feeds/103251246277648930/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

sy. abuzarSep 3, 2015, 9:24:00 PM

i love this whole series to template responsive.
your explanation style is amazing and i love it.
i learnt lots of things from this blog.
ALLAH apko aur apke blog ko aur ziyzda balke sabse ziyada kamiyab banaey.

ReplyDelete
Replies

Blogginglists .comSep 4, 2015, 6:56:00 AM

Tutorial is really nice, thanks for share MBT

ReplyDelete
Replies

Salek AhmedSep 5, 2015, 2:52:00 PM

Hello Mohammad bro.
Thanks for your hard work. I love blogspot platform as well blogger default template. I will able to make my template full responsive according to your guide. Thanks bro
Thanks a ton !!
Your regards
Salek

ReplyDelete
Replies

Sumit Kumar GogawatSep 6, 2015, 10:15:00 PM

What!!!!!!!!!
Series completed....
But what for my request mohammad bhai...
I was request for responsive popup subscrition box for blogger blog and you assure that you provide this in your responsive series. So how can this series ended.. i thinkmy request 8s more useful for all bloggers. This is must need widget. Please do not finish the series.

ReplyDelete
Replies

Sumit Kumar GogawatSep 9, 2015, 5:01:00 PM

Thank you very much Mohammad Bhai..

That why I like your site to visit.

ReplyDelete

Baribefii MbarikorDec 26, 2015, 10:58:00 PM

Interesting article!
I'm new to blogger,though have read many ebooks and my understanding of blogger has improved.
But right now I'm facing a tough time with my blog not been responsive!
I browsed and was introduced to viewport and media queries, CSS!
The problem is " I'm unable to implement these tricks," please help me out friends.

sometimes I had to click zoom to see the contents on my blogger blog!

I will be happy to get positive feedbacks!

ReplyDelete

Tollywood DhamakaJan 12, 2016, 8:37:00 PM

heyy I have one problem.In responsive blogger template how to post by category means menu bar??plz reply soon.

ReplyDelete

Fly for FreedomSep 3, 2016, 10:37:00 PM

it not give any information

ReplyDelete
Replies

Prince John OkosunSep 8, 2016, 12:44:00 PM

Hello Mohammad.. I decided to write you after a few weeks of finally being able to make my website responsive. And would also like to inform you about some changes i found while making my site responsive.

The sidebar wrapper did not work, so it seems blogger have replaced it with sidebar-right-1 or sidebar-left-1 depending on RHS or LHS..

The main section did not also work so i had to replace it with .main-inner .column-center-inner .section . Should incase any one is facing such troubles, just use google inspect tool to see which one will work well for you.

Have a nice day.

blog url: www.obhiabablog.blogspot.com

ReplyDelete