How to have your Sidebar Gadgets Stay Open in Dynamic Views | CutieCoding

Estimated Reading Time:
Turns out that calling a Blogger tips series 'Slog That Blog' might not be as "cute" as my nerdy brain thinks it is. Which means that after some good ol' fashioned thinking, 'Slog That Blog' is now called 'CutieCoding'.



See, see -- Cutie (points to self) and coding (points to your screen) -- Zerefore, CutieCoding!

BACK TO THE TOPIC
In today's episode, we are coming back to working on dynamic views templates in Blogger (yes, I know. I don't seem to shut up about it). We are going to learn how to allow the sidebar gadget dock to pull out smoothly and stay open.

HOW TO HAVE SIDEBAR GADGETS TRANSITION OPEN AND STAY THERE IN BLOGGER'S DYNAMIC VIEWS TEMPLATE


THE TL;DR Version
  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. The one that uses a dynamic views template.
  3. Go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
  4. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  5. Paste the code below at the end of any other CSS code you might have there.
  6. Press ‘Apply to Blog’.
  7. Done-ald Trump!

/* ADJUST THE POSITION OF THE SIDEBAR GADGET DOCK AND ANIMATE IT */
#gadget-dock {
  width: 3em;   /* Chrome, Safari, Opera */
  -webkit-animation-name: move;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 5s;
  -webkit-animation-fill-mode: forwards;

  /* Standard syntax */
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes move {
  0%    {left:99%;}
  25%   {left:98%;}
  50%  {left:97%;}
  75%  {left:96%;}
  100% {left:95%;}
  }

@keyframes move {
  0%   {left: 99%;}
  100% {left: 95%;}
  }


The Lengthy Version

This time, we are going to tackle something that happens only with Blogger's dynamic views templates. If you like using the dynamic views template from Blogger, you have a choice of views to explore: Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot, and Timeslide.

 This is where I usually go to get a reminder of what the default views that Dynamic Views template offer.

One thing that all of the dynamic views have in common is a sidebar gadget dock that stays hidden or tucked in on the side until you move your mouse over it to open out an icon box for the widgets you've added. And then, you can click further to continue the action meant for that widget.

For example, on this page, if you click on the second sidebar gadget from the top, which is a labels gadget, you will need to first hover your mouse over the sidebar gadget dock, click on the relevant icon, and then click again to go to the blogpost URL.

Though I like the sidebar gadget dock (a lot!), there are too many clicks involved to be relevant. To reduce one of those clicks and the mouseover drama, I like keeping the sidebar gadget dock open and pulled out at all times (wait, did I just make a crude joke?).

Of course, the simple answer to doing that is using the following piece of CSS code:
  #gadget-dock { width: 3em; /* this is a custom width - feel free to change it */ right: 3em; /* and this too */ }
But, I like the way it pulls out smoothly. I just want it to stay open once it's done transitioning (whiny voice, anyone?)

 Answer is to override the template's transition property with animation-fill-mode and mark that as 'forwards', meaning, it moves from one place to another and continues to stay there. We are also going to define how much time it takes to animate fully and where it should be on the page as it animates. I also wanted it to animate 5 seconds after the page has loaded so feel free to ignore that line, if you want.

Hmm... what else? Oh yeah! I have a custom width of 3em set for the icon box because I wanted larger icons for it but if you're keeping it at the default setting, it's 50px. That's pretty much it!

 Back to the future disclaimer: The instructions here worked as intended at the time of writing this article. But, Google keeps updating Blogger templates, especially dynamic views. So, if the CSS mentioned above does not work anymore, please feel free to add in a comment below.
 

Comments

Popular Posts