Southern Listeners

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

Saturday, April 28, 2012

Rename 'Pages' in Blogger Dynamic Views Drop-down Menu

Before
After
When you have more static page links than what your header-bar can fit, all your pages will be forced to go on a drop-down menu. This drop-down menu will be titled 'Pages', by default. Here's how you can change it to other text of your likings.

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 span:first-child{
font-size: 0px !important;
}
#pages .menu-heading:before, .ss{
content: "Contents";
font-size: 15px !important;
}
In this example, I've changed 'Pages' to 'Contents'. Feel free to personalise it by changing Line 5.

73 comments:

  1. Wow, good tutorial ! Keep it up bro.. :)

    ReplyDelete
  2. Is there a way to have some drop downs and not others ie

    Locations About us Facebook Twitter
    (drops down to)
    Cornwall
    Devon
    Pembrokeshire

    Hope that makes sense!

    ReplyDelete
    Replies
    1. I get what you mean, but it isn't possible. It's either all or nothing. We can't have some inside the drop-down and some outside.

      Delete
  3. I have some questions to this tutorial :) I have only links to change the view of my template. They are organized horizontally, not in drop-down menu, and I don't know how to do that. Also I don't know how add additional links (already searched your blog but could not find how to do this). And can I change the names of links like "classic" on some other?

    ReplyDelete
    Replies
    1. Hi Phoe,

      Sorry for my late reply. I see you've added pages to your blog. As for renaming the Dynamic Views, I can think of a way. But this will only change the names on the drop down menu, not the selected link. For example, say you change 'Flipcard' to 'Thumbnails'. Once selected, though in the dropdown it'll show as 'Thumbnail', it'll still read 'Flipcard' on the main blog. Do you wanna proceed?

      Delete
    2. Yes, I would like that :)

      Delete
    3. Hi Phoe,

      Here you go:

      #views.menu ul li a, .menu-heading{
      font-size: 0px !important;
      }

      .menu-heading:before{
      content: "Views";
      font-size: 15px !important;
      }

      #views.menu ul li.Classic a:before{
      content: "Rename1";
      font-size: 15px !important;
      }

      #views.menu ul li.Flipcard a:before{
      content: "Rename2";
      font-size: 15px !important;
      }

      #views.menu ul li.Sidebar a:before{
      content: "Rename3";
      font-size: 15px !important;
      }

      #views.menu ul li.Timeslide a:before{
      content: "Rename4";
      font-size: 15px !important;
      }

      Change Rename1, Rename2, Rename3 and Rename4 accordingly. Cheers!

      Delete
  4. Hi, i was translating all these dynamic views. But i couldn't do that last 2 types. Snapshop, timeslide. They were seen invisible.
    Help me guys, look at here: successwithub.blogspot.com

    ReplyDelete
    Replies
    1. Hi UB BU,

      I can see the last two links fine. Have you got it sorted? In any case, try clearing your browser's cache/cookies.

      Delete
  5. Hi,

    I am using the snapshot view on my blog but I wanted to create a new page which will allow me to have individual posts rather than one post for the page. The whole idea is to have a gallery of snapshots on a new page. Is there anyway this can be done?

    ReplyDelete
    Replies
    1. Hi Anon,

      You can't publish posts in a page.. However, you can categorically combine a group of posts, and have them shown as a gallery of snapshots..

      The steps:
      1) Publish posts like how you normally would
      2) Give a unique label to posts that you're grouping (the posts that you'd like to see in the gallery)
      3) Get the label's direct link.. It should look something like this: http://yoboy-12.blogspot.com/search/label/update
      4) Go to Dashboard - Page - New Page - Web Address - Add the link to your unique label there..

      You should now have a link in your menu bar that shows a group of your posts in snapshot view..

      All the best :)

      Delete
  6. Is there a way to rename "Sidebar" to something else?

    ReplyDelete
    Replies
    1. Hi Zandia,

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

      #views.menu ul li a, .menu-heading{
      font-size: 0px !important;
      }

      .menu-heading:before{
      content: "Views";
      font-size: 15px !important;
      }

      #views.menu ul li.Sidebar a:before{
      content: "Sidebar";
      font-size: 15px !important;
      }


      Rename 'Sidebar' in the code above to something else, as you wish :)

      Delete
    2. Thanks Yoga.
      The only view I'm showing is 'sidebar' and I tried renaming it 'videos' with the code above and it's not working for me for some reason.
      http://zwow-warriorz.blogspot.com

      Delete
    3. Hi Zandia,

      Sorry bout the earlier code. Here, this one should work:

      #views ul .Sidebar a{
      font-size: 0px !important;
      }

      #views ul .Sidebar a:after{
      content: "Videos";
      font-size: 14px !important;
      }

      Cheers :)

      Delete
  7. That worked perfectly! Thank you!!!

    ReplyDelete
  8. hi thanks so much for all of your brilliant tutorials!
    i was wondering if there is any way to limit the posts shown on my home page?
    I am able to do that on other pages through your label trick as listed above, but can't figure it out for 'home'.
    any suggestions?
    thanks very much
    emily

    ReplyDelete
    Replies
    1. Hi Emily,

      If you're referring to your Dynamic View homepage, I'm afraid we can't control the number of posts shown on the main page. Note that in Dynamic View, posts are loaded dynamically. There's no way to define a static attribute for this. I'm sorry I couldn't be much more of a help..

      Delete
    2. Emily, I was able to accomplish this trick by using a custom label (promo) and a home-page redirect based on a search for that label.

      Now only posts that have the promo label will appear. I can change the post dates to rearrange the order I want them to appear.

      Note my 'home page shows up as "http://www.robbmontgomery.com/search/label/promo."

      You make the home page redirect change in Search settings. Yoga talks about that elsewhere on this site.



      Robb

      Delete
  9. hi Yoga,

    is there a way by which the posts in blog appear in reverse chronological order?

    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Anon,

      Unfortunately, there isn't a feasible way to get this done, except to manually change the date of each post (use a newer date for older post)..

      Delete
  10. Hi,

    I've been struggling to setup an online gallery and thought of using the Dynamic view "Flipcard". I went through your tutorial and another one and have customized the page. The page link are search links to the Labels that will be on the page.

    Here is my problem: Once I click on the "Page" link.... the bar looses all my page links and puts in the different views. I've pasted the code to remove the view but I'd like to have the Pages link!

    I hope that I am not confusing you. I have added a few posts for testing.

    Thanks in advance

    ReplyDelete
  11. I'm also trying to get the Label i.e. the Page name to be displayed so that people don't feel lost.

    Thanks a lot

    ReplyDelete
    Replies
    1. Hi Barney,

      Sorry for the late reply. I'm gonna have to take a look at your blog, to really understand what's going on - before I can suggest something useful. What's your blog's address?

      Cheers :)

      Delete
  12. I just realized that I didn't put in the link. Here it is: barneyjosephgallery.blogspot.in

    Sorry for looking like a spammer!

    ReplyDelete
  13. Hi,

    Its barneyjosephgallery.blogspot.in

    ReplyDelete
    Replies
    1. Hi Barney,

      Sorry for my ridiculously late reply. I've seen your blog, and this is what I've gathered.

      1) Your current default view is Flipcard. If you'd like your labels to show in flipcard view as well, simply use the following format for your label links:

      http://barneyjosephgallery.blogspot.com/search/label/Digital

      2) If you want your label page to load in a non-default view (classic for example), then use the following link:

      http://barneyjosephgallery.blogspot.com/search/label/Digital?view=classic

      Let me know how it goes :)
      Cheers and God bless..

      Delete
    2. Hi,

      I want the links to open in flipcard view. I've saved the links as such:

      http://barneyjosephgallery.blogspot.com/view/flipcard/search/label/Digital

      So this way the page also loads in flipcard view and all the posts related to the tag can be shown in one page. But once the new page is opened, my links are gone. To see the entire gallery I'll have to click the "header"(if that's what it is called). Plus there is no way of telling the user by way of a page title or something that they are looking at all posts under a certain label. This is what I am trying.

      Any hope? Thanks a lot in advance :)

      Delete
    3. Hi Barney,

      Have you seen my previous reply. I've provided two possible fixes. Have you given them a try?

      To cap what I've said in my previous reply:

      1) This isn't gonna work:
      http://barneyjosephgallery.blogspot.com/view/flipcard/search/label/Digital

      2) Use one of the followings:
      http://barneyjosephgallery.blogspot.com/search/label/Digital
      http://barneyjosephgallery.blogspot.com/search/label/Digital?view=flipcard


      And nope, there isn't a way to tell your readers that they are looking at a particular label page.

      Delete
    4. Hi,

      Thanks for your help... the links worked! I had the wrong format for the links I guess. The old link format seemed to work in terms of search but somehow wiped out my links in the new page.

      You linking method works and "I am eternally grateful". Do check my blog in a few days and I shall have it all ready :)

      Delete
    5. I looked into your other blog when I was searching for your blog's address previously, and saw that awesome Batman DIY figure. It's cool. You did a good job there! :)

      Delete
  14. hye Yoga,

    im currently working on my online shopping blog using Dynamic View template. almariannisa.blogspot.com I dont know whether its suitable or not cos i never find any online shopping using this template.Anyway I just tried.

    OK.My problem is i did follow your tutorial on how to post publish post in pages.it works but when viewed in classic you can still view the same post and its kindda duplicate. is there anyway to delete/hide it? then i want the default view in snapshot but when on mobile the blog still appear in classic view.how to set this?

    i would like to follow like homeofkhalifah.blogspot.com but he has a post in pages with a drop down (vertically) but i want to make it horizontally like you can see in my blog. please help yoga. thanks!

    ReplyDelete
    Replies
    1. Hi Annisa,

      Dynamic View templates are shiny and eye-catching. If you've successfully set up your online shopping blog (with no noticeable issues) with a Dynamic View blog, you could just stay on it and see how it fares.

      Now, as for publishing posts to pages. It's true that your posts will appear twice - one under the homepage, and one under the pages gadget. Unfortunately, in Dynamic View templates, there isn't anything we can do about it. But in a non-dynamic template, there is a tweak that will allow you to hide your posts from appearing in your homepage: http://www.southernspeakers.net/2011/08/hide-certain-posts-from-blogger.html

      As for settings Snapshot in your mobile view, try this. Go to Dashboard - Templates - Click the 'Gear Icon' under the mobile preview - Choose mobile template - Custom. Note that in order for this to work, your current default view in web-mode needs to be set to Snapshot as well.

      In homeofkhalifah.blogspot.com, the links in his drop down menu are of static pages, not posts (no trick involved). He has just created usual pages by going to Dashboard - Pages - New page - Blank page. As for letting it appear horizontally, I'm afraid this isn't something that we can control. The links will automatically resort to a drop-down mode if the viewer's screen isn't wide enough to accommodate all of the links. In other words, you might see a horizontal link lists in your pages gadget, but someone with a smaller device (iPad, Samsung Tab, etc) will still see a drop-down menu.

      Hope these answers help. Cheers and God bless :)

      Delete
  15. How about to changes the name of views menu like as (1)flipcard, (2)sidebar to be (1)File, (2)Forum. Thanks to attention before and please help me as soon as possible to solved this problem I hope it can be done :D

    ReplyDelete
    Replies
    1. Hi Deby,

      Use this:


      #views.menu ul li a, .menu-heading{
      font-size: 0px !important;
      }

      .menu-heading:before{
      content: "Views";
      font-size: 15px !important;
      }

      #views.menu ul li.Flipcard a:before{
      content: "File";
      font-size: 15px !important;
      }

      #views.menu ul li.Sidebar a:before{
      content: "Forum";
      font-size: 15px !important;
      }

      Cheers :)

      Delete
    2. Thank you so much .. I'm so very delighted now it's so very helpful for me thx Yoga.

      Delete
    3. Hi Deby,

      Don't mention it :)

      Cheers..

      Delete
  16. Sorry if I ask too much of you but it is equally important to maximize the functions of my Blogger. The question is how to protect a page or a post with a password on dynamic views ?


    Thx .. :D

    ReplyDelete
    Replies
    1. Hi Deby,

      I'm not sure if such thing is even possible. Are you referring to password-protecting right-clicks? In any case, it looks like it's gonna involved some sort of serious scripting. I'm afraid I'm not that good in advanced scripting..

      Delete
  17. Oh so yeah I see so well. So Is this template provided in the hosting and domain services are paid generally to integrated of auto installer services such as Softaculous existing on cpnel?

    I'd love to have this template with full permissions if it is possible to allow me the give a protection with a password of any page or post I want that is highly privacy.

    ReplyDelete
    Replies
    1. Hi Deby,

      To be honest I haven't got the slightest clue. Is that what they're claiming to offer? You could try shooting your question at Blogger's Help Forum, to see if there are any other users who have tried these services you're referring to. You might find some helpful reply there (at times).

      Cheers..

      Delete
    2. Okey Yoga, so I'll tray first. Thx!

      Delete
  18. Sorry I talk a lot. But anyway How can I make on each page appear directly on the scroll that I specify ?

    ReplyDelete
    Replies
    1. Hi Deby,

      I'm afraid I'm not following. What do you mean by placing page on scroll?

      Delete
    2. I am so confused to explain it, hehe .. sorry my english is not so good, I am from Indonesia. How if you do not mind and then so you can see my blog at debyferdian.blogspot.com ^_^"

      Delete
    3. Hi Deby,

      See if this is what you're looking for.

      http://www.southernspeakers.net/2012/09/scrollbar-for-sidebar-posts-in-blogger.html

      Or, you could use a screenshot to explain your issue better, that could speed things up.

      Cheers :)

      Delete
    4. It's might with these screenshot I hope can be the explain it. Check it out : http://3.bp.blogspot.com/-oj3xt1hE2zs/UQO1I_byeDI/AAAAAAAAAKU/sFease-qLkg/s1600/trouble.jpg

      Delete
    5. Hi Deby,

      I'm not sure if we can lock the scroll bar at a default position upon loading a page. Even if it is possible, it sure will be challenging in Dynamic View templates. As for the Facebook widget questions, I'm afraid this is something that you need to run by the Facebook developers. There's nothing much we can do at Blogger's end.

      Cheers.

      Delete
    6. Hehe .. Thanks Yoga I see but I think I doing good today because I found the scripts similar like was I mean but one more time still have a problem more such as :

      1. The page of pages always following the post pages.
      2. How do I integrate the footer area as "Posted" and "Labels" and give the margin top or separator an above of publish info ?
      3. How to add a profile avatar of the author next to the information publishers?

      If you are not heavy to check again my page.

      Delete
    7. 4. How to sticky the tittle of article like as a header bar position so then it can't be scroll ?
      5. How to changes the function of "feed back" to be "comment" with go to bottom function ?
      6. How to add the button control "next & previous page" on the fix position bottom left ?

      Sorry I so lot ask question continously to you but please help me .. :D

      Delete
    8. I could releasing my question of number (1) I had resolved that by these like code :

      .article.hentry.html_code{
      margin-top: 80px;
      }

      beforely I using these code :

      .article{
      margin-top: 80px;
      }

      Delete
    9. Hi Deby,

      Please use Blogger's Help Forum if you need quick answers for all these queries. Not that I don't want to help you, I seriously find myself incapable of following several questions at once. Not to mention, since each question is unique, and not entirely clear, more time is needed to be spent for each one of them. For now, let's focus at one question at a time.

      Seems like you've already got your first question sorted.

      As for your next question, I'm not quite following. Do you mind elaborating or include a graphical screenshot to explain it better?

      Delete
  19. Hi Buddy,

    Nice tutorial amongst the nicest one's around... Got know that I can do this as well!!

    Woa just going crazy after knowing that I can also do this on my Blogger :-)

    This my blog: http://ultimatewebdevelopmenttutorial.blogspot.in/

    Thanks a lot for this.

    ReplyDelete
    Replies
    1. Glad to be of help Sumesh, have fun around!

      Cheers :)

      Delete
  20. hi, can I ask..?
    why all my 'page' not shown on dynamic views?
    just some of them, the rest is go to linkbar on the side..

    hope you understand my bad english

    ReplyDelete
    Replies
    1. Hi there,

      I'm not quite sure what the problem is, but you can always edit your Pages gadget and manually add these links. To do so, go to Dashboard - Layout - Pages - Edit.

      Cheers :)

      Delete
  21. This comment has been removed by the author.

    ReplyDelete
  22. Hello, your tutorials are amazing! Thanks!
    I was wondering if you could help me. I'm using the Snapshot Dynamic View, but so far I have been unable to add Pages to my Header Bar. I have the Pages gadget present in Layout. However, when I click "Show pages as: Top tabs" it keeps reverting back to "Side links"... and the pages don't even show on my blog in any case. I don't understand what the problem is and am stumped! I have switched between dynamic views to see if this changes, but to no avail.
    Do you know what the problem is? Thanks for your time :)

    ReplyDelete
    Replies
    1. It has always been a hit-and-miss thing, in my experience. Anyways, may I have a look at your blog, in its dynamic mode? You could create a test blog to replicate the issue there, if you don't want to work on your actual blog.

      Delete
  23. I have my own customized menu, how can I add drop down menu to required menu option.
    http://ourptc-sites.blogspot.in

    ReplyDelete
    Replies
    1. This is the closest you can get to a drop down menu in Dynamic Views. You can't customize it:

      http://www.southernspeakers.net/2011/11/drop-down-pages-gadget-menu-in-blogger.html

      Delete
  24. Hi i have a different problem with dynamic views i would like to change the order of the pages but the page gadget doesnt work any ideas ???

    ReplyDelete
    Replies
    1. Hello there.

      Have you tried going to Dashboard - Layout - Pages - Edit?

      Delete
  25. Can u say us on how to remove dropdown page list from mobile in blogger....
    plz reply us on my email id...
    thanks...

    ReplyDelete
    Replies
    1. The mobile template is not editable, unfortunately.

      Delete
  26. how to create drop down menu in blogger without java script?

    ReplyDelete
    Replies
    1. To be honest, I do not know. This is out of my area of expertise. Have you tried searching for one of these tutorials?

      Delete
  27. how do i get to show my blog pages in header-bar?
    i already removed all the View options from the header as you taught us in a previous post but i dont get to show the blog pages instead

    ReplyDelete
    Replies
    1. Have you added your Pages gadget? You need the pages gadget to show your static pages.

      Delete

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