Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, March 3, 2012

Adjust Gadget's Vertical Position in Blogger Dynamic View

Before
After
There, the title sounds straight-forward enough. So, Google decided to bring in the gadget feature to Blogger's Dynamic View. Finally! At the moment, it stays at one place. If you've added a custom header to your Dynamic View template, your gadget dock might be too close to your header. In this tutorial, I'mma show you how to bring the gadget dock down/up the page. This is a response to blog reader Marky Marc.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
#gadget-dock, .ss{
top: 300px !important;
}
Adjust the value '300px' accordingly. BTW, I've realised that the template designer's Live Preview function isn't working properly anymore after the last update. What does that mean? When you make changes, it is not instantaneously shown. What I'd do is, I'd click on 'Apply to Blog', and load the actual page to see if anything has changed. Troublesome, I know.

86 comments:

  1. Very great tip! It was bugging me. Glad they suggested this to be done. It's ironic, I had just asked you about the follower widget then the next day or two they release this new box lol.

    ReplyDelete
    Replies
    1. It bugged the hell out of me as well. But what do you know, life goes on :)

      Delete
  2. Sore more tweaks I disoverd, although I am not using dynamic views yet:

    It is possible to have the widget undocked by adding this css code:

    #gadget-dock
    {
    right: 0;
    }

    And you can use this code to change the background colors:

    .gadget-icons
    {
    background-color: red;
    }

    .gadget-title
    {
    background-color: red;
    }
    .gadget-selected .gadget-icons
    {
    background-color: yellow;
    }


    and this to change the icon color:

    .gadget-content a
    {
    color: green;
    }

    ReplyDelete
    Replies
    1. I've been working on some tweaks myself to change the colors. Will publish it some time next week :)

      Delete
    2. Gadget-content a changes the colour of the text in the gadget, not the icon colour...

      The only thing I have left that I want to change now is the icon colour... got all the backgrounds and text how i want them, but the icon colour seems elusive...

      Delete
    3. Yo Hannah,

      The icons are image files. Changing the color of image files isn't as easy as changing a CSS value. The only possible way I can see as of now is:

      1) Download the icon to your computer
      2) Change its color, using an image editing software. You need to make sure the edited icon must have transparent background.
      3) Upload the edited icon somewhere online, and get its direct address
      4) If you've gotten this far, I'll help you to do the rest. The idea is to disable the existing icon, and use the new edited icon that you have.

      Delete
    4. Gadget-dock does nothing for me. I would rather the gadgets not disappear when the page loads.. I would like them to be more visible and to say out. Is there a way to do this?

      Delete
    5. Hi Shepherd,

      If you want your gadgets to remain unhidden, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #gadget-dock, .ss{
      position: fixed !important;
      right: 0px !important;
      }

      Cheers.

      Delete
    6. That did the trick! Thanks.

      Delete
  3. I want to thank you so much for all of your great and easy instruction - you have helped our site soooo much. Not only are you extremely talented with computers but you have a great gift of being able to explain things well.... thanks again!

    ReplyDelete
    Replies
    1. You're most welcome Moore. Nice blog you got it going there. Keep up the good work :)

      Delete
    2. I know you have posted this in comments somewhere - I remember seeing it - but I cannot find it now
      How can I change the gray color on the back of flip card - I would like white. Also - if I change it to white will I need a code to change the title on the flipcard? Thanks in advance...BTW - I will tip you in your jar later this week - you should be getting paid for this

      Delete
    3. Going through the comments one by one, not knowing which post to look in, can be a laborious task. I know I posted it somewhere, but it's just much easier to re-invent the code. Here:

      .flipcard .back{
      background: white !important;
      }

      .flipcard .back .overlay .title{
      color: black !important;
      }

      .flipcard .back .overlay .date{
      color: red !important;
      }

      The first code should change the background of your flipcard from grey to white. The second code should change the title in your flipcard from white to black. And the third code should change the date text from light grey to red.

      Happy experimenting :)

      Delete
  4. Am working on the icons for each of my blogs - Noticed there is a selected and unselected picture so creating the two colours for my blog and whatnot...

    When I have each icon, what format should I save them in? Using photoshop CS5 so what format and (if relevant) settings when saving so that they work?

    Also, if anyone else wants icons, email me at hschacko13@gmail.com. Include hex code or rgb code and I'll email you the icons when I have them. :)

    ReplyDelete
    Replies
    1. It doesn't matter what format you save them in, but it has to be of transparent background. PNG or GIF will be ideal for transparent backgrounds.

      Yeah I noticed the selected and unselected ones. Their placements in the script look sloppy I'd say.

      Delete
    2. Cool - will get back to you when I have them sorted... Had to zoom on the page to get decent images and then will reduce size again once I've edited them.... when they were normal size there were annoying pixel issues, while now I have biiiig pics, no annoying middle pixels :p

      Delete
  5. Another quick question - it seems after after making a few tweaks on the blog that now I have to click on the flipcard 2 and 3 times to get it to pop up to full screen - is this something I did by accident? Is there something I can do? Or is this a Blogger issue that only they can fix? BTW you are a god send -

    ReplyDelete
    Replies
    1. Just tested idatedthatdouche.com, and your flipcards appear to be absolutely fine. But I might have an idea of what happened. When you had to click your flipcard 2-3 times, how many side gadgets were you seeing (you have 4 gadgets installed)? And does it happen all the time or just every now and then?

      Delete
    2. I found that as well.. then it fixed itself a while... then it went again. Since I played with the gadgets code (keeping undocked and loads of colours) it's fine: http://hschackophotos.blogspot.com

      Delete
    3. I know for a fact that the gadget script has been unstable, at least in Firefox it is. If I keep Template Designer open, 3 out 5 times my test blog won't load its CSS properly. I'll have to hard refresh the page by pressing Ctrl+F5. Sometimes, it'll only work when I close my Template Designer. Not to mention, the Live Preview function in Template Designer is messed up as well.

      Delete
    4. Yeah.... on IE (I view my blog on all browsers to be safe) it needs a refresh for it to display right... FF is hit and miss - sometimes first time, sometimes needs a refresh... Chrome is fine thus far

      Delete
  6. I don't suppose you know how to change the font colour for the profile text on the gadgets, do you? I can change all the other text except the profile info...

    ReplyDelete
    Replies
    1. Hi Hannah,

      Here:

      .profile-aboutme{
      color: white !important;
      }

      And this for the location text:

      .profile-location{
      color: white !important;
      }

      Cheers!

      Delete
  7. This is an EXCELLENT tip! Thanks a ton for these handy tutorials. I have just one concern. I'm now applying the finishing touches onto my blog http://blog.infamousboutique.com and I am having difficulty centering the tabs on the header-bar. Everything else is perfectly aligned. If you could explain how to center the header-bar options, I'd greatly appreciate it!

    Thanks,

    ReplyDelete
    Replies
    1. Hi Infamous,

      It looks centered now. Have you fixed it?

      Delete
    2. I read a comment in the "Centering Blog Title" post and applied the code to the blog, but the code only seems to work for wide computers (15 inch, 17 inch, etc.) On my 13" laptop, it isn't centered. It's more so right-aligned. Any suggestions?

      Delete
    3. Right. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .tabs{
      width: 100% !important;
      text-align: center !important;
      }

      Cheers.

      Delete
    4. The code condensed everything down under one tab called "Pages" in the header-tab. It didn't center the options. Take a look >>> http://blog.infamousboutique.com

      Delete
    5. Keep bringing the number (100) down till you see your links again. Try like 85% or so.

      Delete
    6. EXCELLENT! Thanks a lot.

      Delete
  8. Thank you very much it's exactly what I needed :-)

    ReplyDelete
  9. Hi Thanks for all your help. I was wondering how can I add pages to my menu-bar ..

    Right now it's only "Magazine" & "Home" .. I know this is the code to makes them apear;
    #header.header .header-drawer #pages.tabs ul li{
    margin: 100000px;
    }

    But how can I add like "About", "Followers", "BlogLovin", "Facebook FanPage", "Twitter" in the menu-bar?

    www.Taggingfashion.blogspot.com

    Thnx

    ReplyDelete
    Replies
    1. Hi Aram

      Looks like you've got this figured, yeah?

      Delete
  10. Thanks for all the tutorials on making Dynamic Views more appealing, they are easy to understand and work great.

    I have one question. When I use your code to fix the position of the gadget

    #gadget-dock, .ss{
    position: fixed !important;
    right: 0px !important;
    }

    so that it's always visible, I have trouble with the Sidebar layout (my blog: www.abouthappybooks.com ). The gadget and the post text overlap when the screen size is not wide enough. I don't have this issue with the classic or flipcard layouts. Is there a way to fix it?

    ReplyDelete
    Replies
    1. Hi Sabrina

      I get what you mean. Let's add a padding to your text area so that the gadgets will never overlap on it. Add this to your CSS:

      .sidebar #content .article{
      margin-right: 40px !important;
      }

      Cheers.

      Delete
    2. Thanks! That is exactly what I was looking for.

      Delete
  11. i'm sorry to post this in an article not related to this topic - I couldn't find an article where it was already covered - but you do seem like an expert in Blogger's Dynamic Template...

    What are peole saying about how the dynamic templates views on mobile phones? My initial experience of trying to read my blog on my iphone (now i've switched to dynamic templates - magazine) is pretty poor. I probably wouldn't even try to read a dynamic template blog on my phone as its such hard work to scroll through / read the article. I think more and more people are viewing blogs on their phones these days so this is a real problem for me.

    Also, there are certain things i love about the way dynamic templates looks and the continuous flow of articles with a thumbnail visual. However, I worry about the readers experience. How are readers responding to the experience of dynamic templates overall? Is the pop up window to read an article annoying to them?

    ReplyDelete
    Replies
    1. I'll answer this based on what I've been seeing in the forum (I'm one of the Google-appointed TCs in Blogger Help Forum)

      People love Dynamic Views. I don't think the pop up box is an in annoyance for anyone. So far I've not seen any complaints about the box. People think using Dynamic Views is a huge win. It's just so shiny and awesome. And much work is being put into it to increase its awesomeness. I can't tell if people prefer a non-dynamic view template over a dynamic view template coz it all boils down to personal preferences. But we've been getting positive reviews from lots of users for Dynamic Views.

      Now, for mobile. To be honest, the development of mobile features hasn't been much, and there isn't much happening in this field. Luckily, there's an option in Blogger to switch to mobile-friendly templates when a blog is being viewed with a mobile. See if you find this helpful. Go to Dashboard - Template - You'll see two previews, click the 'Gear' icon below the second preview box - Then choose 'Yes, show mobile templates in mobile devices'. Hope you find this option useful.

      Cheers and God bless.

      Delete
  12. you're a doll. thanks so much. it's not perfect - but 80% better than it was! hopefully blogger will put some work into mobile as i think its becoming more and more important. This is a good article. Even though mobile browsing only represented 7% of all browsing (aug '11) that is a 1000% increase from 2009 and data is also showing how sites optimized for mobile are increasing traffic per user on their regular site (increasing engagement) - just food for thought... http://blog.kissmetrics.com/mobile-mania/

    ReplyDelete
    Replies
    1. Make your voice heard. Leave suggestions/feedbacks to the Blogger team here. :)

      Delete
  13. Excellent blog and comments, very helpful, keep going and thanks a lot.

    ReplyDelete
  14. Hey Yoboy! Thanks for the shout out :)
    Here's a couple more for you.

    Is there a way to change the font color on the classic and mosaic views (the body not the title)? -I want to keep red on the pop up pages but red is not very clear on those two views. I am thinking white.

    Also I noticed that now there is a Google +1 button at the bottom of the pop up pages, is there a way to remove the top Google +1 button only and leave the one on the bottom? Would look alot cleaner to me!

    Thanks always for your help! What would we do without you :)
    -Marky Marc

    ReplyDelete
    Replies
    1. Yo Marky,

      Here. For white font in Mosaic and Classic:
      .mosaic .article .article-content,
      .classic .article .article-content {
      color: white !important;
      }

      And to get rid of the top +1 button:
      .overview-header .share-controls {
      display: none !important;
      }

      Cheers!

      Delete
    2. As usual your codes work perfectly! Thanks again!

      Cheers!

      Marky

      Delete
  15. hey yoga! amazing tips!
    i couldnt manage to fix this header
    http://4.bp.blogspot.com/_r1Zr2DUiQTg/TORCqGgtl4I/AAAAAAAAAe4/XBS-YD6iu-M/S968-R/Untitled.jpg
    could you help me, please? or even give some tips? i got lost with lines numbering.
    cheers

    ReplyDelete
    Replies
    1. Hi datokakava,

      Here, use this :)

      #header .header-drawer.sticky, #header .header-drawer {
      top: 103px;
      }

      #header .header-bar{
      height: 134px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 134px;
      }

      #header-container {
      height: 174px;
      }

      .viewitem-panel .viewitem-inner {
      top: 69px;
      padding-bottom: 89px !important;
      height: auto !important;
      }

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/_r1Zr2DUiQTg/TORCqGgtl4I/AAAAAAAAAe4/XBS-YD6iu-M/S968-R/Untitled.jpg)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 134px;
      }

      Cheers!

      Delete
  16. Your blog has helped me immensely! Thanks so much for taking the time to post all of this!

    ReplyDelete
    Replies
    1. Glad you find the tutorials helpful. Appreciate it, thanks! :)

      Delete
  17. Your blog is fantastic! I go to it for help ALL the time. Sorry to comment on this so much later than it was posted, but I am having trouble keeping the gadgets from overlapping with themselves. (My blog: http://elementalcarbon.blogspot.com/) I have a few ads on my blog and the top 1/4 inch or so of the lower ads overlap on the top ad and I can't seem to fix it. In the "Layout" part of Blogger, they look overlapped as well but I can't get it to not look that way. Any ideas on how to fix that?

    Thanks!

    ReplyDelete
    Replies
    1. Hi Alyssa,

      It sure does sound fixable, but I'm having a hard time finding the overlapping ads that you're describing. I could see some ads under 'Lovely Sponsors' but they all look fine to me. Could you help me pin-pointing the exact part where the overlapping is happening? An annotated screenshot could be extremely useful here.

      Cheers :)

      Delete
  18. Site: www.toysaleboat.com

    Hi, I tried asking this question on Google's Blogger forum, but it doesn't seem like there's much help to be found there. I need to adjust the space between gadgets on my page, but when I enter this code

    #HTML6{
    margin-bottom: -30px !important;
    }

    not only does it move the gadgets, it also moves the edit buttons on my layout edit page, making it impossible to click the edit pencil icon!

    This is especially annoying since I can't get the quick edit buttons to reappear on my page.

    ReplyDelete
    Replies
    1. Hi Paul,

      Sorry for the late reply. I looked into your blog and I could only see one gadget. What am I missing?

      Delete
  19. Hey! I wrote to you a question before and I got to move the gadgets down so they wont "climb" the header but now not all of the gadgets are visable and when I scroll down they aren't visable either... Can you help me?? Thanks ALOT!
    http://asecrettokeepblog.blogspot.gr/

    ReplyDelete
    Replies
    1. Hi Daniella,

      Sorry for the late reply. This is what I'm seeing in my browser:
      http://i.imgur.com/MoIZDAH.png

      Are you seeing something similar? What are the gadgets that aren't working?

      Delete
  20. Hi Yoga, your site & you helped me tweak a couple of things last year when I started my blog...I couldn't get an answer to whatever I was trying to do with it next so I've sort of made do & now I'm trying to get back to fixing my blog up. BUT first it seems Blogger may have changed how things work as what I learned from you about positioning gadgets doesn't seem to fit what I am now seeing in my HTML codes - and all the CSS I put in before is gone. I did click on the new little black arrows to unfold the HTML but the codes for right/left/top/bottom aren't there. One of my gadgets has moved to the top and is covering up one of my page tabs. On the template view it is on the right, but not on the website view. I found where the image code is in HTML and it says:


    I hope you will help me again - I really want to learn the secret of repositioning my gadgets/widgets and keeping them in their place!
    Also, and I can't find anything about this when I search, I know have a mysterious white bar stretching horizontally across my blog site. The bar stays in place near the bottom of the screen while the blog will scroll behind it. Can you tell me where that came from and how to get rid of it? Sorry to add a different issue to this thread.
    My blog is www.GottaStampWithSuzanne.com
    How will I know if you reply, BTW? do I keep checking here? I am going to subscribe by email too, in case that helps.

    ReplyDelete
    Replies
    1. Hi Suzanne,

      Sorry for my ridiculously late reply. Yeap, clicking on the 'Subscribe by email' should notify you when there is a new reply. But it sounds like we need to take this to the forum. It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  21. Hi there! Thank you for your amazing website. It has helped me turn my newest blog into something I can be proud about. Every fix I have implemented has worked wonderfully, but I can't get the gadget to go lower down the page. I have tried entering different values, but nothing is working. I would appreciate it if you could look at my blog and see if you can help. Thank you so much!
    http://happymomcrochet.blogspot.ca/

    ReplyDelete
    Replies
    1. Hello there,

      I see you've managed to lower your gadget's position. Have you got this sorted?

      Delete
  22. hello i was wondering if i can have a navigation bar including my gadgets
    here's an example : http://v1.realmofmetal.org/
    http://astralforest.blogspot.com/ here's my blogspot i prefer to put them on that black sidebar under the header if possible , thanks in advance .

    ReplyDelete
    Replies
    1. Hi Red,

      Not quite sure what you meant by navigation bar, but if it is what I think it is, you should be able to get it done with Pages gadget. Have you looked into it?

      Delete
  23. I just like to say how much your blog has been a big help to me since applying my deaf blog to this template. I have been following advice you have shared here in your blog to make the necessary changes I needed. The latest tweaking of it what you have shared in this post, so now my gadget bar is lower down and in a perfect place. I would not have got the look of my blog to how I wanted it, if it wasn't for the helpful advice posts in your blog. I have recommended your blog to a friend of mine who is using the same template, so if she decides to take the courage an d change hers to her liking, then I am sure she will find it valuable as me.

    ReplyDelete
    Replies
    1. Hello Liz,

      I really appreciate you taking the time to leave a comment here. Do know that your feedback made my day - and it means a lot to me. Glad I could be of help :) Thanks!

      Delete
  24. hi yogarathinam! i would like to know how to adjust the length of the side bar gadgets. i have posted abt me to the side bar gadget and it has taken the entire length of the page! i want to add view my complete profile link after few lines. how do i do that??

    ReplyDelete
    Replies
    1. Hello Rifaya,

      Sorry for the delayed reply. The gadgets' heights are dynamically set - there is not constant height to set to. But that doesn't mean you cant (though it is best to leave it dynamic). It'll be easier for me to suggest a fix if I could have a look into the blog you're working with. Mind pointing me to an URL?

      Delete
    2. thanks a lot for the reply! this is my url
      http://letssweatitout.blogspot.in/
      if u see the about me in the side bar you will understand wat am telling. thankyou!

      Delete
    3. Hello Rifaya,

      I get what you mean. What you want to do is replace your Text gadget (that has the profile content) with an HTML/Javascript gadget. We can then add a link to 'View Full Profile' from there.

      Here's a guide. Let me know if you have any questions.

      Delete
  25. thanks yogarathinam for the reply,, i did change the gadget to HTML/ Javascript. but how to proceed after than. please let me know

    ReplyDelete
    Replies
    1. Sorry for the latey. I meant to include a link in my previous reply - just noticed it got missed out. Here's a guide to help you configure your HTML gadget to work as a customisable Profile gadget.

      http://www.southernspeakers.net/2011/01/blogger-custom-profile.html

      Delete
    2. i tried doing what you said. i have a problem.i can add the about me link but i cannot link it to a new page, if you see my profile you will understand. http://letssweatitout.blogspot.in/

      Delete
    3. Have you got this sorted? I can see a working link to http://letssweatitout.blogspot.in/p/about-me.html from your profile gadget.

      Delete
  26. hey yogarathinam... thanks for the reply... hope you had a wonderful diwali celebration!!
    no i haven't got it sorted out.. if i remove the about me page from top gadget and have only in the side gadget what i have to do?

    ReplyDelete
    Replies
    1. Hope you've had a blasting celebration as well!

      That's easy. Go edit your Pages gadget by going to Dashboard - Layout - Pages - Edit and unmark your 'About Me' page. That should remove the link from your pages gadget (top gadget/menu).

      Delete
  27. How to make my header image fit to my blog width?

    ReplyDelete
    Replies
    1. First, you need to determine what is your blog's width. Next, you need to come up with a header the same size. After that it is all about adjusting and re positioning your image. What's your blog's address btw?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.