Southern Listeners

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

Sunday, August 26, 2012

Adding Author Name Below Post Title in Blogger Dynamic View

Before
After
By default, author names appear at the bottom of your posts.. It says something like 'Posted 3 weeks ago by Yoga'. Given Dynamic View template's stylish design, it'd be more classy if the author name appears at top, below the post title. Everyone is entitled to his/her own opinion of course, but if you want your author name to appear below your post title, and remove the author name from the 'Posted 3 weeks ago' part, this post is just for you. This is a respond to Blog Reader Berk Efe Altinal.

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.
.article .article-header h1.title:after, .ss{
content:"by Yoga";
display: block;
padding-top: 10px;
font-size: 14px !important;
color: grey !important;
}
Replace the word 'Yoga' in Line 2 with your name. Note that since we're adding a static attribute to the author name, this tweak will not work if you have more than one author.. You can only set 1 author name per blog.

Extra: Remove author name from the bottom of your post

To remove the original author name from the line that says 'Posted 3 weeks ago by blabla' (to avoid name duplicates), add the following code to your Add CSS box.
.publish-info{
font-size: 0px;
}
.publish-info .time{
font-size: 14px !important;
}
.publish-info .time:before, .ss{
content: "Posted ";
color: #808080;
font-size: 14px !important;
}

121 comments:

  1. Hi Yoga! Very nice trick! Totally agree, it gives a more pro look.

    Have you noticed yet that it's possible to edit HTML in blogger dynamic views?

    Best regards,
    Tina

    ReplyDelete
    Replies
    1. Hi Tina,

      Oh yes, the option is available.. But it's a trap, don't fall for it.. There is literally nothing to edit in there, since DV doesn't use the HTML to run itself :P

      Delete
    2. haha, just a trick to stop DV-users complaining about no HTML editor available? can't help swearing!

      Delete
    3. Exactly!! It's like you own an iPhone, and Apple gives you free flash-based apps, when in fact, iPhone doesn't support flash! Okay, I'm bad with analogies.. But you get the idea :P

      Delete
  2. Hi yoga! Nice tricks that you got here for dynamic view templates.

    Just one question for you: How can i block the "clicking images" on my blog ? i just don't want that people click on the image and open it..i want lock the images to the posts.

    PS: i already took out the lightbox option.

    My blog: ruicbalmeida.blogspot.pt

    I appreciate the help,thanks :)

    ReplyDelete
    Replies
    1. Hi Rui Almeida,

      It's easy.. Edit one of your posts, and view your post in Compose mode (as opposed to HTML mode).. You'll see lots of icons in your editor's toolbar.. One of the icon says 'Link' on it.. All you have to do is click on one of your images, and click on the 'Link' icon.. That would 'de-link' your image, and it won't be clickable anymore.. You'd have to do it one by one to all your images..

      All the best :)

      Delete
  3. Hey, Yoga! Can I ask you something?
    How can I change the font in the post body? I would like to make my posts written in Calibri font, bur it's not in the default post-writing menu. Can you tell me which code I can use to make all my posts written in Calibri font? Thank you! :D

    ReplyDelete
    Replies
    1. Hi Jelena,

      Sorry for the late reply.. Before I suggest the manual way, have you tried the Template Designer to change your blog's default font? Go to Dashboard - Template - Customize - Advanced - Page Text?

      Cheers :)

      Delete
    2. I have tried it, but it wouldn't work that way - it doesn't change the post body font - and manually I don't have that font. :(

      Delete
    3. Try adding this to your CSS.. I've tested the code and the font does change.. But I'm very bad in differentiating fonts, can't tell for sure if it is working.. Let me know how it goes..

      .post-body.entry-content, .post-body.entry-content div{
      font-family: Calibri !important;
      }

      Cheers!

      Delete
  4. Hey Yoga, I'm so sorry for asking a question here, I was having a tough time navigating through the link at the other page.

    I have two blogs, of which one has a dynamic view, I'm trying to make my second blog have a dynamic template as well, but the option of choosing a dynamic view seems to be missing.

    I also tried to make a completely new account and see, but it doesn't show the dynamic view option. Any ideas about this problem?

    ReplyDelete
    Replies
    1. Hi Anon,

      What's the address of the blog that you're referring to? Is it a private blog?

      Delete
    2. I have a feeling the dynamic views are currently unavailable, but I'm unsure. And yes, right now that blog is private because it's a new one I made and it's not ready yet.

      Can I contact you through email perhaps to give you further details?

      Delete
    3. You can't use Dynamic View templates on private blogs, that could have been an issue.. Feel free to send me an email. There's a link to do so via my Google Plus page :)

      Delete
    4. Thank you so much! You're too too kind!

      Delete
  5. Hello Yoga.

    I was wondering if I could change the size of my sidebar border (it's currently 1px and I would like to increase it) with a CSS code. And a separate code to change the size of my post border as well. My site: http://tcpctestsite4.blogspot.com/

    Many thanks!

    ReplyDelete
    Replies
    1. Hey Anon,

      Use this :

      .sidebar .widget{
      border: 3px black solid !important;
      }
      #main .widget{
      border: 3px black solid !important;
      }
      #Blog1.widget{
      border: 0px !important;
      }

      Cheers :)

      Delete
    2. Hmm, didn't seem to work Yoga. Mind taking a closer look man?

      Delete
    3. I've tested the code before giving to you, and I've tested again - nothing is wrong with it. Here's a render of the code in place --> http://i.imgur.com/3bnKc.png

      I don't mind taking a look, but I don' see the code anywhere in your blog.

      Delete
  6. Sorry to as a question a bit off subject by my website http://www.game-modo.com is using the magazine view. Is there any way to show only 10 articles on screen at once and a show more button bellow it?

    ReplyDelete
    Replies
    1. Hi Richard,

      Unfortunately, we can't limit the number of posts that show in Dynamic View templates, as they load dynamically..

      Cheers :)

      Delete
  7. hi yogo , I would like to know if it is possible to have another blooger page as the blooger home page
    For example when I but my website address, the page * about * s display on it
    another question, I would like to know how do you give the proportion width: 1020px; height: 1025px; with mosaic mode
    www.taziamine.com

    I appreciate what you're doing
    thank you in advance

    ReplyDelete
    Replies
    1. Hi Tazi,

      You can set a default landing page in your blog by going to Dashboard - Settings - Basic - Search preferences - Custom redirects - the rest is self explanatory :)

      As for the width and height, I strongly advice you not yo fix these attributes, as you could end up breaking your blog.. Not only you'll be crippling the dynamic nature of your template, but users with smaller screens will not have any means to view some of the parts in your blog when your width/height is fixed..

      All the best mate :)

      Delete
  8. here nothing problem but one problem iam faced first time which is I am not able to Save Layout Setting http://3.bp.blogspot.com/-LIKZ8P2weCg/UEMGq7THiWI/AAAAAAAAAnw/Bj-Hh4Wix9M/s1600/not+save.jpg see this image i'm trying to save but not saving

    ReplyDelete
    Replies
    1. Hi Jiban,

      Probably a browser related problem.. Try using a different browser and see how it goes.. Good luck :)

      Delete
  9. You have an amazingly helpful site! Quick question: is there any way to make the "By Yoga" part a link? I want to have a sicky link in all my posts header and I figured manipulating this author tweak would be the best way.

    Thanks!

    ReplyDelete
    Replies
    1. Hi Matt,

      It isn't possible in Dynamic Views, nope. CSS doesn't have the ability to anchor in a link. Since Dynamic View customizations rely heavily on CSS tweaks, it is not possible to introduce a link anywhere in our page..

      Sorry bout that.. Cheers :)

      Delete
  10. hi yoga, my blog have multiple author. how can i make each author name under each of their post title.

    ReplyDelete
    Replies
    1. Hi Aira,

      Since we're adding a static attribute to the author name, this tweak will not work if you have more than one author.. You can only set 1 author name per blog.

      Delete
    2. i wanna disable author name (only second script) for multple author blog. Author names are replaced by tags - it works great in dynamic view to see all posts by author. But your script doesnt work for my case. any ideas?
      The same in other blog with only one author worked great! thx

      Delete
    3. Are you not able to disable author names from your posts? Let's have a look at your blog. What's your blog's address?

      Delete
    4. sorry, it worked with your css code, maybe at the begining there was a problem with cache. THX

      Delete
  11. How to link the name to the Google plus profile! It appears static Yoga :)

    ReplyDelete
    Replies
    1. Hi Karthik,

      It isn't possible. CSS doesn't allow the inclusion of links in plain text. I'm sorry I couldn't be much more of a help.

      Cheers :)

      Delete
  12. Thans for the brilliant post, the only problem I seem to have is that this works perfectly in Firefox but in Safari it still shows some broken part of Author name, this is the blog I am talking about:
    http://occasionallife.blogspot.co.uk/
    Sorry that language is not in English but I believe you can get the idea of what I mean. First I thought it might be because of the language but then I saw the firefox version has no probelm.
    Do you have any idea what this happens and how can I fix it?

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for my ridiculously late reply. Your blog in Safari looks just like in Firefox.. Here's what I'm seeing --> http://i.imgur.com/dkePu.png

      What am I missing?

      Cheers.

      Delete
  13. Thanks for your reply, really appreciate it.

    It is weird, what I see in Safari is http://i.imgur.com/0Ow9X.png
    Something wrong with my setting? I already reset Safari and all the other blogs I usually check look ok.

    ReplyDelete
    Replies
    1. Weird indeed. Have you tried clearing your cache/cookies?

      Delete
  14. Thanks a lot for your reply,
    Yes I have, cleared everything, but I suppose as long as others see it correctly it should be fine, then I have time to find out what is the reason for this weirdness :)

    Thanks again
    cheers

    ReplyDelete
  15. did not work for me

    http://ptetech.blogspot.com/

    ReplyDelete
  16. Very nice! Can I ask you something: How do I remove the "Labels" under each post also? I want to show only the sharing controls.

    Thx and cheers
    Christoph

    ReplyDelete
    Replies
    1. That depends. What's your blog's address? And have you tried disabling the label option from your post footer by going to Dashboard - Layout - Blog Posts - Edit?

      Cheers..

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

      Delete
    3. Hi Yoga! Thx for your reply. Yes I've already tried disabeling the label option, but nothing happen.
      The blog is: http://christophhubrich.blogspot.co.uk/

      Cheers!

      Delete
    4. Right.. 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.

      .labels{
      display: none !important;
      }

      Let me know how it goes. Cheers :)

      Delete
    5. Hey, thanks!

      To hide the labels and posted by author name (not the sharing controls) I use this code:

      .labels{
      display: none !important;
      }

      .publish-info{
      display: none !important;
      }

      .publish-info .time{
      display: none !important;
      }

      .publish-info .time:before, .ss{
      display: none !important;
      }

      It works! Thank you so much.

      Delete
  17. Hi,

    I tried this code, it won't work :(

    alternativepinoy.com

    ReplyDelete
    Replies
    1. Working fine. Here's a screenshot of your blog --> http://i.imgur.com/KB4BG.png

      Delete
  18. Hi..my blog has 2 authors. Is there a way to make it recognize who the author is and post the name below the title accordingly?

    ReplyDelete
    Replies
    1. Hi JB,

      Unfortunately, we can't dynamically choose which author to go for which post, since the placing of the author name below post titles is a static one.

      Cheers..

      Delete
  19. Hello yoga. Be able to change "View comments" with "vedi commenti"
    thanks :)

    ReplyDelete
  20. Hi Yoga, great post! Just applied it to my blog. :)

    Wanted to ask one thing, can we change the font of author name?

    Sarah
    PrettyGloss - makeup, beauty & a lil gibberish

    ReplyDelete
    Replies
    1. Shouldn't be a problem. But are you referring to the default author name at the end of your posts, or the newer one added by the tweak in the post above? Also, what font would you like to use (different font = different code)?

      Delete
    2. I removed the author name from the end of my blog posts to the top, the way you mentioned. Can we make the font as 'poor richard'? Is it possible to have a totally different color for this?

      You have a superb blog! Thanks for sharing these tips. I hope you'll keep adding new stuff. My blog looks so adorable already. :):):)

      Sarah

      Delete
    3. Hi Sarah,

      Yes we can change the color, but 'Poor Richard' is not one of the supported fonts. We can only add fonts that are supported in Google Web Fonts (search for 'Google Web Fonts' to see the list of supported fonts).

      Cheers :)

      Delete
  21. Really Nice Article About Adding Author And I am Try This Code And that Code's Is Working Thank You For Share This Article But There Have So many About Author code And Stylish Also this is Normal Code Please Put Stylish Code's For More Information About Me Click on my name For Visit my Profile Thank You

    Nice Blog or Template

    ReplyDelete
    Replies
    1. No, all posts in this blog is original - especially the Dynamic Views ones... Wonder where did you see 'so many' of these tutorials?

      Delete
  22. Cara, suas dicas são sensacionais. Apliquei várias delas no meu blog www.meugadget.net e está ficando muito bom mesmo. Obrigado.

    ReplyDelete
  23. Thanks so much for this trick. :) I have one problem, My Blog template is not even showing author's name by default on posts. Don't know why...temporarily i have added a profile link below the <'body'> section..but it looks awkward! Any Solution sir?

    Blog - techsiddharth.com

    ReplyDelete
    Replies
    1. Hi Siddharth,

      It looks like you're using a third party template that doesn't have the profile link by default - the author made it that way, intentionally, by design. Here's a demo of your template, and the demo doesn't have the profile link either --> http://www.premiumbloggertemplates.com/2012/11/newszone-premium-blogger-template.html/demo/

      Which means, your template is fine, just that it is designed that way. I could have helped if this was a Blogger template. Unfortunately, I'm not familiar with the structure of your template. That said, I think your best bet is to contact the author of this template. He/she might have an easy way to re-add the profile link to your post footer.

      All the best. Cheers :)

      Delete
  24. Hi Yoga,
    Great article!!

    I have a question:
    How can i disable or change the 'link' in the "Posted By xyz" section while keeping the author name at the bottom?

    ReplyDelete
    Replies
    1. Hi Amit,

      Try this:

      .url.fn{
      display: none;
      }
      .publish-info:after{
      content:"Amit Jayant";
      }

      Cheers :)

      Delete
    2. Thanks a lot :)

      Delete
  25. hey, i want to post the "posted 4 hours ago" thing at the top of the post, or just below the post title.. is it possible ??

    ReplyDelete
    Replies
    1. Nope, not possible. Unless you can make all your posts to be off the same height, then perhaps we can fix it's position. But that isn't something feasible, as it is ridiculous to ensure all posts to be of the same height.

      Delete
  26. nice trick dear... i will try on my website www.naveedawan.net

    ReplyDelete
  27. Hi Yoga, I keep coming back to your tutorials. I usually find all my answers without asking you, however I seem to have met a wall today. So here's my question. How do I put a background image for the post footer.

    My blog: www.backbenchtalk.blogpost.com

    ReplyDelete
    Replies
    1. Hi Akki,

      I see you've added an image to your post footer. Have you got it figured?

      Delete
    2. Yes. Thank you. I could not do it in HTML. So I tried CSS and it worked. I pasted the following code

      .post-footer
      {
      background: transparent url(url of the image)!important;
      shadow: none !important;
      }

      Cheers.

      Delete
  28. Is there any way this can be disabled for pages?

    ReplyDelete
    Replies
    1. Yeap, use this instead:

      .article .article-header h1.title:after, .ss{
      content:"by Yoga";
      display: block;
      padding-top: 10px;
      font-size: 14px !important;
      color: grey !important;
      }
      .viewitem-inner .viewitem-content .article .article-header h1.title:after, .ss{
      display: none !important;
      }

      Cheers :)

      Delete
  29. can you post the author's name on the Magazine view?

    ReplyDelete
    Replies
    1. Yes, but only on your post pages.. Not on the main magazine layout itself..

      Delete
  30. Hey Yoga, I want my photo with the snippet in search results(authorship markup). I don't know what the problem is. At the richsnippet tool I'm getting error that the name on page and g+ profile don't match, What should I do?? I've linked my google+ page(not profile) link to rel=author. I suppose you understand what I'm talking about here.

    ReplyDelete
    Replies
    1. Hi Deepak,

      I'm sorry I'm not equipped with the knowledge to assist you on this one. The structural design of the comment system is not really my cup of tea. SOrry again.

      Delete
  31. Hi Yoga,

    I think I removed the author name a while back, and now I can't get it back. I've checked the 'Posted by' in my Layout but it still does not appear. Can you help?

    blog: www.boutiquelaboheme.com

    ReplyDelete
    Replies
    1. Hi Angela,

      Sorry for my ridiculously late reply. I can see the author's name in your posts name. Have you got it sorted?

      Delete
  32. Does it work on a regular template as well (not the dynamic view). I switched from DV to a customized one because of some issues, like tabs not loading, etc. In my new template however, I'm unable to see the author name. Help!

    http://pepesamson.blogspot.com

    ReplyDelete
    Replies
    1. Hi Pepe,

      I can see author name under your post title. Have you got it sorted?

      Delete
  33. Hello! Please tell me how to remove this line: 'Posted 3 weeks ago by Yoga' in General? I set the font size to 0 px but left the empty space between the post and the social networking buttons
    http://beautiful7girls.blogspot.com/

    ReplyDelete
    Replies
    1. Hi there. Have you got this sorted?

      Delete
    2. How to delete a row:"Posted 3 weeks ago........"?

      Delete
    3. This should work for you. Add it to your Add CSS box:

      .publish-info{
      display: none !important;
      }

      Delete
    4. Thank you very much! Is there a way to insert a dynamic template in your banner?

      Delete
    5. I'm afraid that wont be possible..

      Delete
    6. Thank you very much! Is there a way to make it so that the image size increased or decreased depending on the resolution of your monitor? At a resolution of 1280 x 1024 is the image:
      http://beautiful7girls.blogspot.com/2013/11/beautiful-girl-0113.html goes beyond the browser window vertically. How do I get it to automatically fit in the browser window?

      Delete
    7. I wish that too is possible, but it's not, unfortunately.

      Delete
    8. Thank you very much!

      Delete
    9. Hello! Asking for your help. On my site
      http://www.beautiful-girls.biz/ never disclosed the top left image

      Delete
    10. Hi Michael,

      I'm not quite following. What top left image?

      Delete
  34. Many of ur tutorials helps me a lot. please tell me how to remove time from appearing at all in dynamic view template?

    ReplyDelete
    Replies
    1. Is there a particular Dynamic template that you want the time removed?

      Delete
  35. thanks for sharing such a helpful post. it works nice...!!

    ReplyDelete
  36. Yoga. You Sir are a legend. Thank you so much for all your well written described info. I booked marked your page and added to you to top favourites. Keep up the good work.

    Bueka

    ReplyDelete
  37. Hi! Can you help me? My name (and my friend's name) under post title doesn't show properly. It should be with Pingkan but the "n" is at "at" from the time.

    I don't use dynamic view, anyway. What should I do? I've done revert widget templates but nothing happens too.

    ReplyDelete
  38. Add this to your CSS and you should be good:

    .post-author{
    margin-right: 10px !important;
    }

    ReplyDelete
  39. Do you know if it's possible to ADD something to the footer of each post in the template? IE non-adsense advertisements or disclaimer text? Without adding to each post. thanks!

    ReplyDelete
    Replies
    1. It depends. Chances of getting it done in DV templates are minimal (as usual). As for non-dynamic template, we might be able to pull it off, but the location of the text might not be ideal. What's your blog's address?

      Delete
    2. I'll give it a try, but chances are it can only be done in post pages (the page that pops up when you click on a post). What exactly are you trying to add anyway?

      Delete
    3. I was thinking disclaimer, and was thinking of selling ad space so was wondering about the feasibility of adding a banner ad to every page in a dynamic template. Thanks!

      Delete
    4. I can think of a way to add text - this will serve nicely for your disclaimer as this text will be the same throughout the posts. Images will be tricky, unfortunately. Gimme a sample text (preferably with the same number of words as your disclaimer), I'll give it a try.

      Delete
    5. Just wanted to say something like "Copyright urbanARCHnow.com 2014". I also wanted to add a banner ad, I have found online a way to insert an image (such as this: http://www.codeitpretty.com/2013/01/automatic-post-signatures-for-blogger.html) but it's not possible to use that method for an image link. Would also be nice to be able to add text links. Any ideas? Thanks for your help!

      Delete
    6. This should work:

      .comments:before{
      content:"Copyright urbanARCHnow.com 2014";
      display: block;
      text-align: center;
      color: grey;
      margin-bottom: 10px;
      }

      Ads and links are impossible. You're looking at tutorials meant for non-dynamic templates. Not useful I'm afraid.

      Delete
    7. Hmm...hopefully more features will be available eventually :S thanks for your help tho!

      Delete
  40. Thanks for your valuable piece of code

    ReplyDelete
  41. Very nice trick... i see your blog first time... and i like this blog...actually first impression is the last impression... & your blog follow this... cheak my blog plz..

    ReplyDelete

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