How to Change Label Pages Message-Box Into Floating Message-Box?


#1

Howdy Bloggers!

I think, I have not shared any trick/tip for many days in this forum. So today, here is!

Today, I am going to tell you about how to change the look of label pages and turn them into eye-catching pages.

From the decades, (I don’t know when Blogger was started) Bloggers (pro-bloggers like @Mohammad or @denharsh or @ankit1) have changed almost 90% of Blogging. They changed the way of blogging, changed the way of designing and created awesome widget that we have almost loved. (like Shortcode for Blogger). In this changing, then changing, all bloggers forgot ‘Search/Label’ pages. Now are you thinking what is there for change? Then, let me tell you that there is a Message Box in each and every Search/Label page. And today, I am going to tell you, how to transform that message box into a spaceship (floating message-box).

Here are the easy steps:

  1. Firstly, Go to Blogger Dashboard > Template > Edit HTML

  2. Now, search for </head> and above it, paste this combination of CSS and conditional tags:

    <b:if cond=‘data:blog.pageType != “error_page” and data:blog.isMobileRequest == “false”’>

    .status-msg-body a {color: #444!important;}.status-msg-body{position:fixed;text-align:inherit;width:749px;background:-webkit-gradient(linear,center top,center bottom,from(rgba(255,255,255,1)),to(rgba(254,189,23,1)));z-index:2;margin-left:-.9%;padding-left:3%;box-shadow:0 0 4px 2px #818181,2px 2px 8px -1px #000;margin-top:3%;padding-right:3%;bottom:0;margin-bottom:2px}#blog-pager-newer-link a,#blog-pager-older-link a{text-decoration:none;color:#FFF;padding:11px;border:1px solid #000;text-shadow:1px 1px 2px #000;background:#444}

    </b:if>

  3. Now, save your template and see the changes. :smile:

Note:- The changes will not appear if your visitor is seeing your blog through mobile.

A little CSS can done a big thing.

Thank You. I hope you liked that.


#2

Nice Customization Tip brother! CSS is really great computer technology. :relieved:. Liked it :thumbsup:


#3

Here is how i customized it


#4

good!! Hassan brother :smiley: I saw your post on it


#5

Thanks for appreciating my work @Nafees

Thanks Again


#6

You can use any other font and any other color also because black color on dark background looking weird. Its just a tip to make that better. :smile:


#7

What are you talking about? I have already added white color in the dark background theme.