Southern Listeners

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

Saturday, December 24, 2011

Blogger Dynamic View Picture Menu

 
Two weeks ago, I showed a simple way to use pictures as your tab menu, instead of using the conventional plain old text. But I used HTML to go about it, and as it is widely known, Blogger does not allow HTML modification in Dynamic View. So here it is, the same tweak adapted to serve Dynamic View users, using CSS alone...

One important note before you start. If you have a drop-down pages menu in your Dynamic Views, this tweak isn't gonna be useful. I'm not saying it can't be done, just that I didn't bother to cover it as I figured having pictures in a drop-down menu is not gonna be that pretty. Also, it won't work on IE8 and earlier versions of IE (will work on IE9).

Note: It goes without saying that you MUST have pages links in your pages gadget before attempting this tutorial. This tutorial replaces your pages gadget from text-based links to picture-based menu. Make sure you can see your pages links (text-based) in your header-bar before attempting this tutorial.

Step 1:


First thing first. Get your pictures ready. I'm not gonna show you how to create/design your buttons. But I'll share a cool website that lets you create image buttons easily. Click the link below, and get your buttons created:

CoolText

Once you've created your image, click on Download Image and save it to your computer.

Step 2:

Next, upload your image somewhere and get its direct link. Click here if you're not sure how to do this.

This is the direct link that I have gotten for my image:
http://1.bp.blogspot.com/-j-oI_zmXUbs/TvWAhw1nwDI/AAAAAAAAEhA/-xfZHNFVS-8/s100/google-plus-logo-640.jpg
Get the direct links for all the images that you want to insert into your tab. We're going to insert the addresses of these images into the code in the next step. In this example, I'm going to use 3 images.

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#pages.tabs ul{
margin-left: 5px !important;
}
 
#header .tabs li {
display: inline-block;
height: auto;
line-height: auto;
margin: 0px;
}

#pages.tabs ul li:nth-child(1) a:link{
background: url('http://1.bp.blogspot.com/-j-oI_zmXUbs/TvWAhw1nwDI/AAAAAAAAEhA/-xfZHNFVS-8/s100/google-plus-logo-640.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

#pages.tabs ul li:nth-child(2) a:link{
background: url('http://2.bp.blogspot.com/-MFnUdKtV9sk/TvV_MFcrNFI/AAAAAAAAEgg/yVPu_An9dcA/s100/twitter_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}
 
#pages.tabs ul li:nth-child(3) a:link{
background: url('http://1.bp.blogspot.com/-hBOzFbkILkA/TvV8p4Zzc0I/AAAAAAAAEgE/eqmopszplsA/s105/facebook_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

Step 4:

Replace the addresses in lines 13, 22 and 31 above, with those of your images. Also, you may need to change the width of each one of your images to fit your menu better. You can do this by changing the width attribute in lines 16, 23 and 30.

Extra:

If you have more than 4 images, simply add the template below for your additional images. You need to enter the sequence of the picture in line 1. For example, if this is the 4th picture, then replace 'PICTURE_NUMBER' with '4'.
#pages.tabs ul li:nth-child(PICTURE_NUMBER) a{
background: url('IMAGE_ADDRESS') center no-repeat !important;
font-size: 0px;
display: block;
width: 100px !important;
}

May this Christmas be joyous and cheerful, and may the New Year be the best year yet for you. Wishing you lots of love, joy and happiness. Merry Christmas and Happy 2012!

122 comments:

  1. Simply genius! Thanks so much!

    ReplyDelete
  2. Yoboy thanks for the tutorial but it doesn't work in Internet Explorer 9.

    ReplyDelete
  3. Merry Christmas!

    I need some help, and I know has nothing to do with this post, if you can help me, I'd be very thankful.
    I need a code to embed a live tv in my blog, I already have that live tv, but has ads and I want that ads off.

    The channel you can see here : http://tv.economico.pt/

    How can I embed that channel in my blog with htlm code?

    All the best
    Luis

    ReplyDelete
  4. @Alexandros: Thanks for noticing. I've fixed the code above :) Cheers and God bless.

    @Luis Miguel Sousa "Mike": Merry Christmas too you mate, and Happy holidays. I've seen that link that you gave me, but I'm not sure where to go to the embed code (since it is written in Spanish or something). If you have the media embedded in your page already, gimme its link, and I'll see if it is possible to remove the ads.

    Cheers and God bless :)

    ReplyDelete
  5. @Alexandros: No problem at all :) Happy Holidays..

    ReplyDelete
  6. Thanks for your reply.

    Here is my page blog with that channel,
    http://lusitanaehabilitas.blogspot.com/p/extra-videos-and-live-tv-from-portugal.html

    You can see there the code, I got that code from a webpage with lot of channels. I thought it was possible to go to the original channel webpage and get the code from there.

    all the best
    luis

    ReplyDelete
  7. @Luis Miguel Sousa "Mike": Looks like the advertisements are embedded in an iframe element. We can't edit iframe elements. I still cant tell for sure. Tell you what. Go to the site below, and paste your embed code in there, and give me the link. I'll see if I can do anything..

    http://pastebin.com/

    Cheers.

    ReplyDelete
  8. Hi again! Sorry for bothering again but I am having problems here. In my blog I disabled dynamic view options on the sidebar using

    #Classic.ss, #views ul li:first-child ,
    #Flipcard.ss, #views ul li:nth-child(2),
    #Magazine.ss, #views ul li:nth-child(3),
    #Mosaic.ss, #views ul li:nth-child(4),
    #Sidebar.ss, #views ul li:nth-child(5)
    {
    display: none !important;
    }

    And right now i was triying to put 2 images on it with this code below

    #pages.tabs ul{
    margin-left: 5px !important;
    }

    #header .tabs li {
    display: inline-block;
    height: auto;
    line-height: auto;
    margin: 0px;
    }

    #pages.tabs ul li:nth-child(1) a:link{
    background: url('
    http://3.bp.blogspot.com/-xMbjSnCOYWs/TwJ8NItuvmI/AAAAAAAAHvs/11ohSywOpSI/s1600/RF%2BWeb.jpg') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 100px !important;
    }

    #pages.tabs ul li:nth-child(2) a:link{
    background: url('http://2.bp.blogspot.com/-XSZilako_pw/TwJ8NalARaI/AAAAAAAAHv0/1W5ZzruDhM0/s1600/ATP.jpg') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 100px !important;
    }

    The links are for my current images but it doesn't work, am i skipping something? or when I disable all dynamic options from the bar I was unable to do it.

    And is there any way to attach a link to the image I am uploading using this method??

    Thanks so much for the help

    ReplyDelete
  9. Correction the code I used to disable all the dynamic views was

    #Classic.ss, #views ul li:first-child , 
    #Flipcard.ss, #views ul li:nth-child(2),
    #Magazine.ss, #views ul li:nth-child(3),  
    #Mosaic.ss, #views ul li:nth-child(4), 
    #Sidebar.ss, #views ul li:nth-child(5),
    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }

    ReplyDelete
  10. @Dr. Jon Anderson: Your code is fine. The problem is because there is a line break in the address line in the following section:

    #pages.tabs ul li:nth-child(1) a:link{
    background: url('
    http://3.bp.blogspot.com/-xMbjSnCOYWs/TwJ8NItuvmI/AAAAAAAAHvs/11ohSywOpSI/s1600/RF%2BWeb.jpg') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 100px !important;
    }

    Delete the line break and things should work fine.

    #pages.tabs ul li:nth-child(1) a:link{
    background: url('http://3.bp.blogspot.com/-xMbjSnCOYWs/TwJ8NItuvmI/AAAAAAAAHvs/11ohSywOpSI/s1600/RF%2BWeb.jpg') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 100px !important;
    }

    Cheers.

    ReplyDelete
  11. Hi! thanks for the quick answer, i tried what u said , but still got no results. I maybe taking out some dynamic options screwed up things.

    ReplyDelete
  12. @Dr. Jon: Let's see what else you have in your CSS. Go to your CSS box, and copy everything in there. Next go to www.pastebin.com and paste your contents there, and get back to me with its link so that I can see what you have in your CSS box.

    Cheers.

    ReplyDelete
  13. http://pastebin.com/Henh8uiX

    here it is, thanks for your help again!

    ReplyDelete
  14. Sorry last one contain some mistakes this one is the actuall

    http://pastebin.com/3AVPZFFq

    ReplyDelete
  15. @Dr. Jon: Could you remove all your CSS for awhile and allow me to see your blog in its original untempered form? The problem isn't from the tweak that you've added. I need to verify this. You could re-add them once we figure out what the problem is.

    ReplyDelete
  16. Hi I have removed all the css codes, take a look

    http://fed-x-press.blogspot.com/

    thanks again =)

    ReplyDelete
  17. @Dr. Jon: Your pages links are not showing. Go to Dashboard - Pages - Show Pages as - Top tabs. Only attempt the tweak once your links are visible :) Good luck!

    ReplyDelete
  18. It worked perfectly! Sorry for bothering you so much this time, you really saved me =).

    If my blog works its because of you, thanks so much!

    ReplyDelete
  19. @Dr. Jon Anderson: No problem at all :) Glad it is showing the way you want it to be.. Cheers and God bless..

    ReplyDelete
  20. I did that, but it messes up my other pages and shoves them together, so it doesn't really work.

    ReplyDelete
  21. let's forget this tv embed code. I have contacted the tv owner, because copyright issues, and they do not reply to me.

    If you could help me with other issue. I am searching for sometime how to have a link list in my blog with dynamic view. I think that only creating a page for that, but I can't find html code or a widget for that. I prefer to have a frame with more than 30 links, any ideas?

    thank you, very, very much!

    bye
    Luis

    ReplyDelete
  22. @Vickie Ramage: Of course it works. As I've written above, you need to change the width of your buttons from 100px to something smaller, if you have plenty of links. Placing 100px buttons next to each other for 7 different pages will require 700px, and it makes sense why everything is squeezed down.

    @Luis Miguel Sousa "Mike": You can use the Pages gadget to add links. Moreover, you can't use any other gadget in Dynamic View. Go to Dashboard - Pages - New Page - Web Address.

    ReplyDelete
  23. This one is great, thanks! However, they have just added an "RSS" button to the dynamic views menu, which shifted all of my tabs into a drop down menu. Is there anyway to target this RSS button and remove it from the bar??

    Cheers, E

    ReplyDelete
    Replies
    1. You could hide the RSS button using the following CSS:
      .header-drawer a.feed-link{
      display: none !important;
      }

      But as the other buttons are set as static, it's not gonna help much. If you have many links, consider using smaller images and decrease the width in the code above from 100px to something smaller.

      Happy experimenting :)

      Delete
  24. thanks for the post...thinking now to implement this in my blog. keep up the good work.

    Regards,
    Suroor Wijdan

    ReplyDelete
    Replies
    1. You're welcome. And thanks for the feedback :) Happy blogging!

      Delete
  25. Hi Yogaratnam N.

    First of all thank you for this blog! It has helped me so much!
    Really Great!

    I am also having the same issue as Dr. Jon Anderson. On my blog I have disabled the dynamic view options on the sidebar using:

    #Classic.ss, #views ul li:first-child ,
    #Flipcard.ss, #views ul li:nth-child(2),
    #Magazine.ss, #views ul li:nth-child(3),
    #Mosaic.ss, #views ul li:nth-child(4),
    #Sidebar.ss, #views ul li:nth-child(5),
    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }




    and have


    #pages.tabs ul{
    margin-left: 5px !important;
    }

    #header .tabs li {
    display: inline-block;
    height: auto;
    line-height: auto;
    margin: 0px;
    }

    #pages.tabs ul li:nth-child(1) a:link{
    background: url('http://1.bp.blogspot.com/-1k_sgjPjn3U/TxrA0h-A1hI/AAAAAAAAQ1c/NpKPNgkKHWY/s100/triangle1.jpg') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 100px !important;
    }

    and the image will not show. Could you possibly help me out?


    Thank you,
    Carolina

    ReplyDelete
    Replies
    1. Hi Carolina,

      You need to have actual text links before attempting this tweak. Undo the steps given in this tutorial, and see if you can actually see any pages link - text based. If you can't, go to Dashboard - Pages and add some pages/external addresses first.

      Happy experimenting!

      Delete
  26. thank you so much for this blog! it has helped me to figure out how to change my dynamic settings!

    i was wondering if you know how to add a "follow this blog" thing on my dynamic layout? i see that there is a little grey subscribe via rss button on the top right but when i push it a page with a bunch of html codes show up... please help!!!

    123mallorylane.blogspot.com

    ReplyDelete
    Replies
    1. Hey Mallory. Unfortunately, we can only make cosmetic changes as of now, with CSS. Very limited, I know. Adding a gadget, or changing a link, would require access to the template. We don't have access to the template. So, all we can do now is wait - as Blogger has announced that this features are coming soon :)

      Delete
  27. Hi Yogaratnam N.,

    thanks for your amazing work! With your help I've managed to customize my blog, following your awesome guides and without any knowledge of CSS.

    Unfortunately I have a little problem, my images in the menu align left without any margin and i would like to align it with the blog's title.

    Check it out at:
    http://devilleart.blogspot.com/

    Since i modified the blog following your tutorials, maybe I've messed up somewhere, but don't have the knowledge to correct it myself, here is the link to the code:

    http://pastebin.com/jG4yYxg6

    Thanks for the help, past and future,

    Paulo Capdeville

    ReplyDelete
    Replies
    1. Easy peasy. Let's introduce some left padding, that should take care of it. Here, add this to your css:

      .header-drawer #pages{
      padding-left: 18px;
      }

      Cheers!
      Yoga

      Delete
    2. Hi Yoga,

      thanks for the quick reply.
      Everything is as it should, thanks!

      Paulo

      Delete
  28. Hi there. whenever I add some of your code to the CSS it works (thanks). If i add additional code to the CSS, the previously added code disappears and stops functioning on the site.

    Do I need to store it in word or somewhere and paste it all back in each time?

    Hope this makes sense (as you can tell I know nothing about code!)

    Your site is a great help by the way.

    ReplyDelete
    Replies
    1. You only have to add your code once to your template. In Dynamic View templates (like the one you're using), the code should stay there forever, unless if you choose to manually delete it. But there are cases where the browser fails to send this 'request' to blogger, and your code end up getting discarded. In my experience, I've seen Internet Explorer browser does this many times. Try changing your browser (Google Chrome and Firefox are good). It is not normal for CSS codes to disappear from your 'Add CSS' box in Dynamic View templates.

      Delete
  29. Hi here is my code. I am trying to do this however its not working. Can you please tell me what I have wrong?
    Thanks so much for your help


    #Flipcard.ss, #views ul li:nth-child(2),

    #Mosaic.ss, #views ul li:nth-child(4),
    #Sidebar.ss, #views ul li:nth-child(5),
    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }

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

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

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

    #header-container {
    height: 205px;
    }

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;}

    #header-container #header.header .header-bar span.title{
    background: url(http://1.bp.blogspot.com/-RP33zcb_0ac/Tz2jVN3954I/AAAAAAAACPY/23F0f68srXI/s1400/mm1.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 150px;
    }

    #header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
    top: 0px !important;
    margin-top: 0px !important;
    position: relative !important;
    }

    body.sidebar #main.hfeed #sidebar{
    position: absolute !important;
    }

    body.sidebar #main.hfeed #sidebar .item{
    background: #EEEEEE;
    }

    img{
    box-shadow: none !important;
    padding: 0px !important;
    border: 0px !important;
    }

    #pages.tabs ul{
    margin-left: 5px !important;
    }

    #header .tabs li {
    display: inline-block;
    height: auto;
    line-height: auto;
    margin: 0px;
    }

    #pages.tabs ul li:nth-child(1) a{
    background: url('http://s594.photobucket.com/albums/tt24/v4nd06/Website/?action=view&current=twitter.png') center no-repeat !important;
    font-size: 0px;
    display: block;
    width: 100px !important;
    }

    ReplyDelete
    Replies
    1. Hi Randall,

      It goes without saying that you MUST have pages links in your pages gadget before attempting this tutorial. This tutorial replaces your pages gadget from text-based links to picture-based menu. You don't seem to have any pages links in your header bar.

      Delete
  30. i was looking for it and found it here XD
    thx

    ReplyDelete
  31. Hi there!

    I tried it a few times, but I think I have more questions than before I started.

    look at my Blog:
    http://roadtoeverest202x.blogspot.com/


    I want to have my twitter and facebook buttons at the place of facebook and twitter pages. But I cannot adjust buttons where it has to be placed.
    Now both pictures are on the left side. But my pages are on the right side??

    Is it necessary to build the buttons with the exact pixel size for the blog? Or is there any automatic fitting possible.


    Here is my code:


    #pages.tabs ul{
    margin-left: 5px !important;
    }

    #header .tabs li {
    display: inline-block;
    height: auto;
    line-height: auto;
    margin: 0px;
    }

    #pages.tabs ul li:nth-child(1) a:link{
    background: url('http://www.freeware-download.com/blog/wp-content/uploads/2011/04/facebook_logo.jpg') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 50px !important;
    }

    #pages.tabs ul li:nth-child(2) a:link{
    background: url('http://web83.s1.udvp.de/tl_files/Theme_1/twitter-button.png') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 50px !important;
    }

    Thank's a lot

    Matthias

    ReplyDelete
    Replies
    1. Hi Matthias,

      Looks like you've got the placing right, but yeah, you still need to scale down your image. If you've uploaded your image to blogger, convenient scaling is possible.

      For example, here's an example of an image uploaded to Blogger:
      http://1.bp.blogspot.com/-j-oI_zmXUbs/TvWAhw1nwDI/AAAAAAAAEhA/-xfZHNFVS-8/s100/google-plus-logo-640.jpg

      I could increase or decrease the size of the image, by just changing the 's100' tag in the address above. Cool uh?

      Delete
    2. Thank you both so much!!!
      It didn't work for me but your question helped me to :)

      YOGA your'e the BEST!!!

      Delete
    3. Glad I could (indirectly) be at help :P

      Cheers!

      Delete
  32. Thanks a lot!!!! Now it works!!! Iam looking forward to the next Dynamic news of this blog

    ReplyDelete
  33. Question,
    you know the travel design option that shows black transparency over a top photo image, and the transparency is also for the columns the two or one column, I want to make my blog www.everythingbeautynyc.blogspot.com to have the pink part transparnt which is in front of the background photo, and its also the main body of the page, and i want to make the two columns which that part i know how to do, but how would you make the columns also transparent with a color of your choice? To still show the background and keep the forground middle post color semi transparent similar to the travel one, but the travel template is only a black transparency and columns are also black transparent which is cool but what if you want to do that with the pink color or any color can you tell me how thats done, i am new at this blog thing. So i dont have everything 100% the way i want it to be. You can feel free to email me also at gmail same sn with no spaces. Thank you!

    ReplyDelete
    Replies
    1. Hi EB NYC,

      Looks like you've managed to place a black transparent image on your homepage. If you wanna change the color of that transparency, you need to use a transparent image of other colors. Image designing isn't exactly my strong suit, but I'm pretty sure you'd need some kinda photo editing software to get such image.

      Another option is to use RGB color. But it wont work with Internet Explorer, coz Internet Explorer sucks. This is the CSS code that you need:
      .content-inner{
      background: rgb(228, 120, 156);
      background: rgba(228, 120, 156, 0.4);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99#E4789C, endColorstr=#99#E4789C);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99#E4789C, endColorstr=#99#E4789C)";
      }
      See this link for an explanation of the code above.

      As for the comment, there isn't a way to show your comments on your homepage with the default Blogger comment system. If it is a must to show comments on the front page, then you need to opt for a third party comment system, like Disqus.

      Delete
  34. oh i forgot to mention and ive been looking everywhere i have a problem with getting comments on the main page also they only show up if someone happens to realize that you can click on 0 comments to make a comment, in the posts by themselves the comment box shows up, but within the scrolling of all the posts on the main page there is no comment box there at the end of the main page or on each post that is scolled down on you can you put a comment box in the body of the home page and how do you do this, cause ive tried many different ways and it doesnt work out.

    ReplyDelete
  35. Aloha! Question from Hawaii nei... I want to do exactly what this post suggest (which is using an image instead of text for the page links), but I ONLY want to do it for the LAST page option (and continue using the same text for the other pages).. The site I'm working on is rodelcasio.com, which looks as good as it does BECAUSE OF YOU! You're amazing.. but I want the "Facebook" text to be a simple Facebook square.. how do I do that for JUST the last page?

    ReplyDelete
    Replies
    1. Hi Timber,

      You're gonna need this:

      #pages.tabs ul{
      margin-left: 5px !important;
      }

      #header .tabs li {
      display: inline-block;
      height: auto;
      line-height: auto;
      margin: 0px;
      }

      #pages.tabs ul li:nth-child(7) a:link{
      background: url('http://1.bp.blogspot.com/-hBOzFbkILkA/TvV8p4Zzc0I/AAAAAAAAEgE/eqmopszplsA/s85/facebook_logo.jpg') center no-repeat !important;
      font-size: 1%;
      color: transparent !important;
      display: block;
      width: 100px !important;
      height: 25px;
      }

      Have fun :)

      Delete
    2. Thank you so much, man.. when I used the code you provided, it did exactly what I was looking for it to do, but it scrunched up the spacing between all the other page titles (I really like how spaced out they are right now). When I tried playing around with the width pixels, it, of course, only affected the Facebook image, not the other page titles. Is there any way to keep them as spaced as they are right now and have the Facebook image show up, or would i have to create an image for each one of the seven pages to avoid the scrunched-up thing that's happening?

      Delete
    3. How about this one:

      #pages.tabs ul{
      margin-left: 5px !important;
      }

      #header .tabs li {
      display: inline-block;
      height: auto;
      line-height: auto;
      }

      #pages.tabs ul li:nth-child(7) a:link{
      background: url('http://1.bp.blogspot.com/-hBOzFbkILkA/TvV8p4Zzc0I/AAAAAAAAEgE/eqmopszplsA/s85/facebook_logo.jpg') center no-repeat !important;
      font-size: 1%;
      color: transparent !important;
      display: block;
      width: 100px !important;
      height: 25px;
      }

      Cheers :)

      Delete
    4. You're an absolute genius, brother. A most deep and heartfelt bow of gratitude from Honolulu, Hawaii. Aloha!

      Delete
    5. Thanks Timber. You have fun and happy Blogging :)

      Cheers and God bless.

      Delete
  36. Hi !

    I tried to add some images in my menu, but I have a little problem. They extend below the bar, and it's not really beautiful.
    (You can check it here : http://tinyurl.com/czvs59j)

    What's wrong ?
    Thank you !

    ReplyDelete
    Replies
    1. Hi Ugo,

      I've updated the code above. The new code should work fine :)

      Delete
  37. Works like a charm ! You are definitely amazing ! Thank you :).

    Cheers,
    Ugo.

    ReplyDelete
  38. I've added the images to the menu and worked fine. However, now the header is "sticky" (i'm not sure if call it like this) again...
    I was not having problems with that until I added these images. How can I fix it??

    Thanks =)

    ReplyDelete
    Replies
    1. Hi Sabri,

      I'm not quite sure what you meant by sticky. What were you expecting to see?

      Delete
  39. I'm sorry, I read this post: "Non-Floating Header in Blogger Dynamic View", and it worked fine. But once I've added images (such as Twitter, Tumblr..) it stopped working. Now the header "follows" me when I'm scrolling down.

    Do you want me to show you the whole code of my blog in order to discover what is not working??

    Thanks =)

    ReplyDelete
    Replies
    1. Oh, right, that. Well actually what happened was Google decided to add a new attribute to the header that made it extra-sticky. So the old code that you had became somewhat useless. I have since updated the code in the "Non-floating Header Image" tutorial. It was a co-incident that it happened around the same time when you tried the code in this tutorial.

      Anyways, add this to your CSS, and your header will be non-sticky again:

      #header{
      position: relative !important;
      }

      Cheers! :)

      Delete
    2. Thanks a lot =) it worked.

      Delete
  40. Hi! Such a great service you do here! I am using Dynamic Views as a membership directory for my association. I want to be able to have site visitors re-organize all the members' photos two ways:
    1. By industry
    2. By chapter in my organization

    I used labels to organize them by industry. Great. However, if I add more than one label to a post (member page!) then the template randomly chooses to organize them by industry or chapter. That makes for a mess!

    How can I get the template to also organize the posts by chapter? It would seem that the Author sort function would be ideal for it, if that could be changed.

    If that cannot be done, then I have a work around idea: Creating a separate email address for each chapter and uploading the posts using each chapter as a separate "Author". This alternate solution requires changing "Label" to "Industry" and changing "Author" to "Chapter" in the nav bar. Can this be done in Dynamic Views"?

    Thanks so much!


    Linda
    http://naemembers.blogspot.com

    ReplyDelete
    Replies
    1. Hi Linda,

      Using a different email seems to be the only way to categorically group your posts, apart from using labels. And here's how you can rename Label and Author. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #groups li{
      font-size: 0px;
      }

      #groups>li:nth-of-type(1):after{
      content: "Recent";
      font-size: 14px;
      }

      #groups>li:nth-of-type(2):after{
      content: "Date";
      font-size: 14px;
      }

      #groups>li:nth-of-type(3):after{
      content: "Industry";
      font-size: 14px;
      }

      #groups>li:nth-of-type(4):after{
      content: "Chapter";
      font-size: 14px;
      }

      All the best! :)

      Delete
  41. can you help me about the images size is too big in menu bar, how to make it smaller
    because if i change the height from 50 px to 20 px the image is like cropped

    apit-testbot.blospot.com

    ReplyDelete
    Replies
    1. Hi achmad,

      In your template designed, go to Advanced - Add CSS - and paste the following code at the END (the bottom) of the box:

      #pages.tabs ul li:nth-child(1) a:link {
      width: 40px !important;
      height: 27px !important;
      margin-left: 15px !important;
      }
      #pages.tabs ul li:nth-child(2) a:link {
      background: url("http://3.bp.blogspot.com/-73hyMFagxqU/T8Lmg-PZqtI/AAAAAAAAASg/ViwEet8SoV0/s90/fb.png") no-repeat scroll center center transparent !important;
      height: 28px !important;
      width: 100px !important;
      }
      #pages.tabs ul li:nth-child(3) a:link {
      background: url("http://4.bp.blogspot.com/-ud8jw1hNapI/T8LmiUT6RQI/AAAAAAAAASs/R1Fif5qKr1A/s80/twi.png") no-repeat scroll center center transparent !important;
      height: 28px !important;
      width: 77px !important;
      }

      Cheers!

      Delete
  42. On the you'r Picture, how to hide the date contained in the upper left (Nov 25)???
    Thanks....

    ReplyDelete
    Replies
    1. Hi there,

      Add this to your CSS:

      .ribbon{
      display: none !important;
      }

      Cheers :)

      Delete
  43. I've just recently shifted to dynamic views. I want to stick to a magazine view, which i've done (thanks toy you :) ) but I DO want a menu like I what I had previously using links. I also want a few gadgets in the sidebar. Is this possible?

    ReplyDelete
    Replies
    1. Hi Ananyaa,

      Yes it is possible. You can add a menu bar by going to Dashboard - Pages - Show Pages as - Top tabs.. To add gadgets, go to Dashboard - Layout - Add a Gadget.. You can only add a certain range of gadgets to Dynamic View at the moment.

      Cheers :)

      Delete
  44. Hi. Big thanks for the tips in your page, these are very useful! I have a question about picture menu in dynamic views. Is it possible to put hover text to tab menu picture links and hover effects to picture links? I like icons instead text.

    Greetings

    ReplyDelete
    Replies
    1. Hi Sirli,

      I don't see a way to add hover text. To add hover picture, you gotta add the following:

      #pages.tabs ul li:nth-child(1) a:hover{
      background: url('http://1.bp.blogspot.com/-hBOzFbkILkA/TvV8p4Zzc0I/AAAAAAAAEgE/eqmopszplsA/s105/facebook_logo.jpg') center no-repeat !important;
      color: transparent !important;
      display: block;
      width: 100px !important;
      height: 25px;
      }

      See the '(1)' in line 1? That means this is for the first icon. You need to add similar lines of codes for subsequent icons. Hope you get the idea. And don't forget to change the URL in the code above.

      All the best :)

      Delete
  45. I'm beyond grateful to have come across this blog. Your tutorials have been superb!!! Beyond helpful! I can't begin to express my gratitude...well I think I can! I'll start by saying thank you!!!

    I tried this and it worked phenomenally. My icons are loaded beautifully. However, the text for each page following the icons have come together very closely. How can I add more space between the other pages listed in the page bar?

    ReplyDelete
    Replies
    1. Thanks for your kind words Marley. And nice work you've done with your blog :)

      Here's what you can do to widen the gap between your text links. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #pages.tabs ul li:nth-child(9) a:link, #pages.tabs ul li:nth-child(10) a:link, #pages.tabs ul li:nth-child(11) a:link, #pages.tabs ul li:nth-child(12) a:link, #pages.tabs ul li:nth-child(13) a:link{
      margin-left: 10px;
      }

      All the best! :)

      Delete
  46. For some reason, I'm getting a border around my images. I can't tell if the images in your screenshot are bordered at the sides, but the Facebook logo in particular seems to stretch right from the top to the bottom of the menu bar. This is what I have: http://aintnosanantonio.blogspot.co.uk/

    I can change the image dimensions to make it stretch DOWN further, but I'm still left with the blue gap at the top. This is the exact code I'm using:

    #header .tabs li {
    display: inline-block;
    height: auto;
    line-height: auto;
    }

    #pages.tabs ul li:nth-child(1) a:link{
    background: url('http://3.bp.blogspot.com/-tNi-WS57b8Q/UBfiJqBngjI/AAAAAAAAAHw/oziE6nrbR6Q/s400/newsnow_ab.gif') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 100px !important;
    height: 25px !important;
    }

    Any ideas? Is it something to do with the fact I still have text buttons?

    ReplyDelete
    Replies
    1. Hi Adam,

      This is what I'm seeing:

      Screrenshot

      Can't see any border around your menu button(s). But in any case, add an extra line to the code above to force any borders from being rendered.. I've highlighted the line in the code below:

      #pages.tabs ul li:nth-child(1) a:link{
      background: url('http://3.bp.blogspot.com/-tNi-WS57b8Q/UBfiJqBngjI/AAAAAAAAAHw/oziE6nrbR6Q/s400/newsnow_ab.gif') center no-repeat !important;
      font-size: 1%;
      color: transparent !important;
      display: block;
      width: 100px !important;
      height: 25px !important;
      border: 0px !important;
      }

      Cheers! :)

      Delete
  47. Hi. I've one question/problem =(. I wanna to do sth like that, but only for last two pages. It was very simple, but I want to make these two images were on the right side.

    Is it even possible to have normal (text) menu on the left, and the picture on the right? :(

    ReplyDelete
    Replies
    1. Hi Dawid,

      Yes, it is possible. In the code above, I've defined a group of code for 3 of my links.. Each of them are numbered [eg: li:nth-child(2)]... If you have 5 links, for example, you only need to define a picture menu for child 4 and 5..

      Hope it helps :)
      Cheers!

      Delete
    2. Yes man. I know that, how to change the last two. With this I have no problem.

      I want to do something like this on this screenshot: https://lh6.googleusercontent.com/-8BX4xomRUAQ/UFo4q2V0YbI/AAAAAAAACKM/797kU8Uylwo/s757/1348090025109.png

      My last picture menu want to align to the right. Is this possible? I tried to change a bit css code but nothing succeeded. Im a nup!

      Delete
    3. It may be possible, with a small amount of tweaks. Tell you what, get both text and picture forms of menu in your header bar, and let it be aligned to the left by default. Once you've got this sorted, get back to me with the address of your blog, and I'll work on a code to try to make the picture menu to go to the right..

      Cheers :)

      Delete
    4. I would like this same option as well if possible Yoga. At the moment it looks like this: http://www.thescriptguide.blogspot.com

      I could add some transparent images with dead links in between the contact button and Twitter, but if the last two links could just be right justified, it would look a lot smarter. Also, is there a way to have them side by side without a space in between?

      I can't recommend this blog highly enough to people using Blogger.

      Delete
    5. Hi Alan,

      Took me awhile, but I've managed to cook something for you.
      #pages, #pages ul{
      width: 100% !important;
      max-width: 100% !important;
      }
      #pages.tabs ul li:nth-child(9) a:link{
      position: fixed !important;
      right: 40px !important;
      margin-top: -17px !important;
      }
      #pages.tabs ul li:nth-child(10) a:link{
      position: fixed !important;
      right: 10px !important;
      margin-top: -17px !important;
      }

      Let me know how it goes. Cheers :)

      Delete
    6. Hi Yoga,

      I put an invisible image in between the "Contacts" and "Twitter" links and was able to manipulate the space that way. Even when I try to change things around and enter your code, it messes the design up. So for now I'll just stick with what I have managed.

      From time to time, after I edit a few things, the external links for Twitter and Facebook change to "javascript". Do you know the reason for this? I often have to remove all the code and the links, input them again under a different name and hope for the best!

      Delete
    7. Hi Alan,

      There's a bug within the Pages gadget that's pointing the links to a null-pointer. The blogger team has been notified of the issue and they are currently working on it, though, I must say, it's taking forever..

      Delete
    8. Not having problems now, though I am making sure to avoid editing anything for fear of losing them again.

      One small problem I am having is with the mobile view. I applied the custom settings so it appears the same as my main website view. When I then went to the preview page, I have problems with the "Pages" bar. If in the "Blog" section of the site and trying to select to go to another page, the bar suddenly jumps and I am unable to select any links. I hope this is just a problem with preview rather than my blog.

      Also, I know this has been mentioned before regarding Dynamic views, but I will give it another shot. I want to add copyright on every page of the site, but read before that footers are not possible. Is this still the case? If so, any suggestions on how else I would add this element to the site?

      Delete
    9. Try adding this to your Add CSS box:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 138px !important;
      }

      Also, not sure if you've realised this, when I tried to view your page source, I noticed that your code is repeating itself like 16 times. You might wanna take care of it.

      As for the footer, I couldn't find a feasible way to add a div element to Dynamic templates for the footer to stay visible. Your best bet might be to add it to each post.

      Delete
    10. Hi Yoga,

      Adding this CSS makes my pages links hide. This only usually happens when I am reading posts further down in the blog (a function I like), but should be on show otherwise. My header is locked to scroll with the text, do you think this could be the problem?

      I do not know how to remedy the code showing 16 times. I looked at my CSS there. How do you think this could have happened? I WOULD delete all data from CSS, apply, put it back in and reapply, but I'm paranoid it would all go to pot.

      You've been a great help so far. I think the site would be perfect if I could just sort the iPad date ribbon solution, the mobile view pages error and adding copyright somewhere (thinking maybe on the banner so it is visible on every page).

      Delete
    11. Hi Alan,

      Adding this CSS makes my pages links hide

      That's odd, but having 16 sets of handlers with varying attributes in your definition could cause attribute values to interfere with each other - which is why it is bad.

      I have no idea how it happened, but this isn't the first time I'm seeing this. I've seen similar madness in few other blogs in the past few weeks. Something must be causing this - browser, browser's add-on, some software in your computer.. I just can't put my finger on it..

      But you need to take care of it though.. Not only having many definitions for the same handlers could coz value interference, but your blog's load speed could also be affected.. I'd just backup the code, and find and delete any duplicate lines, keeping only one instance of each code..

      As for the iPad problem, you could post the issue in Blogger Help Forum. Hopefully someone that owns an ipad could help you out.

      Delete
  48. how to get the facebook share on the page menu?

    ReplyDelete
    Replies
    1. Hi Pratik,

      You can add links to your menu by going to Dashboard - Page - New Page - Web Address..

      Good luck :)

      Delete
  49. can i use this with your code that center the blog pages to the center?

    ReplyDelete
    Replies
    1. To the best of my knowledge, they have different CSS handlers, which means they wont interfere with each other. So yeap you're good to go :)

      Delete
  50. Hey Yoga, I've got links 8, 9 and 10 set as images, but they are below the header bar instead of following on from the previous links. How do I get them back into alignment?

    Code: http://pastebin.com/uT6k45rA
    Blog: http://janellebaker.blogspot.com/

    Thanks,
    Janelle

    ReplyDelete
    Replies
    1. Hi Janelle,

      Looks like the 10th link is missing. In any case, use the following code for your pictures instead:

      #pages.tabs ul li:nth-child(8) a:link{
      background: url('http://i188.photobucket.com/albums/z149/crossrhythm/Tumbmini.png') center no-repeat !important;
      font-size: 1%;
      color: transparent !important;
      display: inline-block;
      width: 16px !important;
      height: 16px;
      position: relative !important;
      top: 5px !important;
      }

      #pages.tabs ul li:nth-child(9) a:link{
      background: url('http://i188.photobucket.com/albums/z149/crossrhythm/DAmini.png') center no-repeat !important;
      font-size: 1%;
      color: transparent !important;
      display: inline-block;
      width: 16px !important;
      height: 16px;
      position: relative !important;
      top: 5px !important;
      }

      #pages.tabs ul li:nth-child(10) a:link{
      background: url('http://i188.photobucket.com/albums/z149/crossrhythm/RSS16.png') center no-repeat !important;
      font-size: 1%;
      color: transparent !important;
      display: inline-block;
      width: 16px !important;
      height: 16px;
      position: relative !important;
      top: 5px !important;
      }

      Cheers :)

      Delete
  51. thank a lot for the all tutorial !
    your great

    ReplyDelete
  52. How To Put 3rd party ads on dynamic blogger template?
    like smowtion , chitika , infolinks.
    plz tell ..

    ReplyDelete
    Replies
    1. There isnt a way to do so, at least not that I know of.

      Delete
  53. love your blog (so helpful) but I'm getting the same issue a lot of people have. I've upload the css code and i'm not seeing the images (I can still click on the spot where there should be an image in the header bar and it takes me to the that page) but nothing, including text, is being shown for the pages that I want images for. Here is my css currently:

    .header-bar {
    display: none !important;
    }

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

    .header-bar span.title a h1, .ss, #header .title a:hover{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    }

    #Classic.ss, #views ul li:first-child ,
    #Magazine.ss, #views ul li:nth-child(3),
    #Sidebar.ss, #views ul li:nth-child(5)
    {
    display: none !important;
    }

    #pages.tabs ul{
    margin-left: 5px !important;
    }

    #header .tabs li {
    display: inline-block;
    height: auto;
    line-height: auto;
    margin: 0px;
    }

    #pages.tabs ul li:nth-child(3) a:link{
    background: url('http://tinypic.com/r/2z65pvo/6') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 125px !important;
    height: 30px;
    }

    #pages.tabs ul li:nth-child(4) a:link{
    background: url('http://tinypic.com/r/66xdug/6') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 125px !important;
    height: 30px;
    }

    #pages.tabs ul li:nth-child(5) a:link{
    background: url('http://tinypic.com/r/30cltnc/6') center no-repeat !important;
    font-size: 1%;
    color: transparent !important;
    display: block;
    width: 125px !important;
    height: 30px;
    }

    #pages.tabs ul li:nth-child(6) a{
    background: url('http://tinypic.com/r/250o7th/6') center no-repeat !important;
    color: transparent !important;
    font-size: 0px;
    display: block;
    width: 125px !important;
    height: 30px;
    }

    #pages.tabs ul li:nth-child(7) a{
    background: url('http://tinypic.com/r/r94l91/6') center no-repeat !important;
    color: transparent !important;
    font-size: 0px;
    display: block;
    width: 100px !important;
    height: 30px;
    }

    here is the blog website to see: www.womeninbioinformatics.blogspot.com

    ReplyDelete
    Replies
    1. Hi Shelby,

      I can see your icons fine: http://img580.imageshack.us/img580/2287/20130406010725capture.png

      What am I missing?

      Delete
    2. a litte bit after I got it! but now my css code deleted spontaneously and i'm trying to figure out what i had to do to make it work! but thank you for looking!!

      Delete
    3. Looks like you've added HTML to your CSS:

      link href='[https://lh6.googleusercontent.com/-juYIVboYgwg/UVPaDuWCR0I/AAAAAAAAAqc/86yaW9IKaXk/s101/Icon2.png]' rel='shortcut icon'

      This is comparable to adding a Mentos to a bottle of Diet Coke. You might wanna get it fixed asap. Also, a bunch of your CSS lines are repeating itself - creating duplicating of themselves as they go down your page. You wanna get this cleaned up as well..

      Delete
  54. ok I've deleted all HTML changes (I was trying to insert a floating thumbnail picture) and this is the only css code I have (now only edits from your code) and I still can't get the pictures to appear anymore :/

    #gadget-dock, .ss{
    top: 400px !important;
    }

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

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

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

    #header-container {
    height: 305px;
    }

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

    #header-container #header.header .header-bar span.title{
    background: url(http://3.bp.blogspot.com/-DebsL4bfOIA/UW252YSJbmI/AAAAAAAAAx4/zxA439TCWlA/s1600/new_header_5.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 265px;
    }

    #header.header .title a h1, #header.header .title h3{
    display: none;
    }

    .gadget-icons, .gadget-title, .gadget-content, .ss {
    background: #6B006B !important;
    color: white !important;
    }

    #gadget-dock{
    position: fixed !important;
    left: 0px !important;
    }

    .header-bar span.title a h1, .ss, #header .title a:hover{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: transparent !important;
    text-shadow: 0px 0px 0px transparent !important;
    }


    ReplyDelete
  55. I figured it out!!!!! As stupid as this is going to sound my url links needed to use " not ' in order to work. Thanks for everything!

    ReplyDelete
  56. Thanks for your help I had a go at it here: http://www.roystuart.biz and am pleased with the result, sadly though since explorer and chrome both fail to read the links in the header bar they'll only be seen about 5% of the time but never mind.

    ReplyDelete
    Replies
    1. Let's hope Blogger will come up with a fix for that. But for now, it doesn't look like anything is going to be done about it, sadly..

      Delete
  57. hi yoga, i got a problem:( i got 9 header topic on my header bar and i just wanna skip some of them say till number 6 then start using this "trick" is that possible? i tried and i change the child to 7,8,9 but it dint work:( thanks
    here is the blog http://londonlingo-avustralya.blogspot.com.au/ thanks again

    ReplyDelete
    Replies
    1. Hi Ozgur,

      Technically, it should work. Something else must have been broken. I tried looking into your blog to see what's wrong with your code but the code isn't there anymore. Give it another whirl, and if it still doesn't work, leave the code there as it is and leave me a nudge.

      Cheers..

      Delete
  58. Thanks for wonderful article. This website is really helpful to the bloggers.

    ReplyDelete
  59. I finally got this to work by changing swapping the order of the last two CSS entries.... bizarre. Love your site btw.

    ReplyDelete
    Replies
    1. Hello Robert,

      Glad you got it sorted out! :D

      Delete

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