Dilectio's Header

Helping out Aditya Nayak

Received a Twitter's message from Aditya telling me he got some problem with his blog.

In my reply I told him to shoot me an email and explained in details what was wrong with his blog? In an email he told me what's wrong with his blog's header. See image below;

Click image to enlarge

That problem was very easy to remedy, but I told him to give some times and I shall get back to him as soon as possible. It's just the matter of adjusting the header's margin. Here is what you've to do;

1. Login to your Blogger's account.

2. On your Dashboard, choose (if you've several blogs) which blog you're having problem with and then you click on the 'Layout' button.

3. On Page Elements, click on Edit HTML. On this page make it an habit to backup your template before we do any tweaking on the codes. If anything should go wrong after doing any major tweaking or upon hearing a hissing sound coming from your favourite Lappy or Desktop, you will thanks me for reminding you to take such a simple precaution's step, **wink**

4. Then search for the following string of codes (with or without check Expand Widget Templates);

#header-wrapper h1 {

font-size: 28px; line-height: 28px; letter-spacing: -1px; padding: 27px 5px 0px 100px; margin: 0px; font-weight: bold; color:$colortituloblog;

}

5. From the above string of codes, focus on the RED one. That's the only code you gonna tweak. As an experiment, when I change it to margin: -50px; see the result below;

From;

Click image to enlarge

It became;

Click image to enlarge

6. And when I changed it to margin: -20; the title of your blog became like so --> see image below;

Click image to enlarge

7. In conclusion, all you have to do is change the margin to any negative number to suit your blog. Voila! You've got a very nice header.

That it for now. Until we meet again for another tutorial. i hope you enjoy doing the experiments as much as I do. See ya' when I see ya'.

Technorati Tags: aditya nayak, backup blogger template, blogger html code, dilectio header, problem with dilectio template, solving blogger header, twitter,

How To Create Drop-Down Label?

Saving precious real estate

Lol, I'm not talking about rubber trees here. As I see it this Blog's Categories or Labels are getting longer as you can see on the right sidebar. I've published only four posts so far. Think how long it will be should I published post after post after this?

As you know, I've set my home page to show only one post per view. I'm afraid as time goes by and many posts published henceforth, it is possible the categories will become longer the the published post itself. We wouldn't want that to happen, would we?

One way to save some real estate is to make the Categories or Labels shorter. To make the Categories or Labels shorter, we've to tweak a few codes on the templates to create a Drop Down Menu. Unlike 'Archives', Blogger does not support Drop Down Menu for Categories. Categories are sorted by Frequency or Alphabetically in Link List only.

So, without further ado, here's what you've to do to create a Drop Down Menu;

1. Login to your Blogger's account.


2. On your Dashboard, choose (if you've several blogs) which blog you gonna create a Drop Down Menu and then you click on the 'Layout' button.


3. On Page Elements, click on Edit HTML. On this page make it an habit to backup your template before we do any tweaking on the codes. If anything should go wrong after doing any major tweaking or upon hearing a hissing sound coming from your favourite Lappy or Desktop, you will thanks me for reminding you to take such a simple precaution's step, **wink**


4. Check Expand Widget Templates and search for the following string of codes

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>


<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


And replaced the tag of codes in red with the following code;


<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>


After replacing the red codes, save your template and BRAVO, you've got yourself a Drop Down Menu for your Categories! Give yourself a pat. You've done well.

That's it for now. God's willing, we shall meet again for another session to enhance the look of Dilectio, the most beautiful of all Blogger templates.

See ya' when I see ya'.

Technorati Tags: blog categories, blogger label, blogger templates, creating drop down menu, expand blogger widget templates, saving precious real estate

Solving Recent Posts and Recent Comments Widget

Annoying blank feeds

At last I finally took the time to solve the little annoying problem with the Recent Posts and Recent Comments widget on Dilectio Blogger template.

For those Bloggers who using Dilectio template will get a blank “Configure Feed” window with no option either to remove nor edit the Recent Posts and Recent Comments widget.

I've even sent an email to David (the founder of eBlog Templates) asking him to solve the above problem, but I've yet to receive a reply from him.

Furthermore I was getting quite a few of his (David) readers sending me emails asking me to solve the problem. Therefore, I dedicate this post to Lucia, Wendy, Alex, ccgoal and the rest (most of them can be found on Dilectio's comment section). Thank you for the patience and the trust you've given me. Really appreciate it very much.

Without further ado, this is how I did it;

Part One:

1. As usual, back-up your template before you do any tweaking. I cannot stress it enough on how important to back-up your template. Any wrong footing could result in an explosion on your template and you've a back-up template to save the day. Did I say an explosion? Nah! Just kidding my friends.

2. Seriously, after signing in with your username and password to your Blogger account, you will be taken to your Dashboard. From there you click on Layout and you will be taken to your Page Elements.

3. Choose suitable location for your widget and click on 'Add a Gadget' and from the pop-up table choose 'Feed' coz you gonna add content from an RSS or Atom feed to your blog.

4. *Now this is important - For your 'Recent Posts' your feed URL gonna be http://YourBlogUrl.blogspot.com/feeds/posts/default and click 'Continue' for Blogger to retrieve your Recent Posts feed. After retrieving your blog's feed, it's advisable to change the title to 'Recent Posts' or whatever suit your fancy.

5. Repeat Step 3 and 4. Only this time it gonna be for your 'Recent Comments' widget. For your 'Recent Comments' your feed URL gonna be http://YourBlogUrl.blogspot.com/feeds/comments/default

Part Two:

1. After setting up both widgets, from 'Page Elements' click on 'Edit HTML' and click on the box 'Expand Widget Templates'. On this page (Edit HTML), there's gonna be four set of codes, two set of codes for the new Recent Posts and Recent Comments and the other two are for the nonfunctional widgets. Remember? At this stage after adding the two new widget, it's advisable to back-up your template again coz we are going to do some serious hacking on your template! Who knows your template might decide to dance around and you got your back-up to turn to?

2. K, first of all you gonna have to find the new widgets string of codes and that gonna be like so;

<b:widget id='Feed2' locked='false' title='Recent Comments' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId &quot;_feedItemListDisplay&quot;'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId &quot;_feedItemListDisplay&quot;'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Copy it all on your favourite Notepad and DELETE it from your template. By now I hope you'll notice the feed for Recent Posts will be Feed1 and Feed2 for Recent Comments. Remember that coz we gonna use it a little while later.

4. For some strange reasons, the feeds for the inoperable Recent Posts and Recent Comments widgets will be like Feed22 and Feed23. The complete string of codes will be like so;

<b:widget id='Feed22' locked='false' title='Recent Posts' type='Feed'>
<b:includable id='main'>
<b:if cond='data:title'/>
<div class='widget-content'>
<ul class='TabMenu'>
<li class='TabLink'><a href='#top' id='tab0' onclick='ShowTab(0)'><span>Recent Articles</span></a></li>
<li class='TabLink'><a href='#top' id='tab1' onclick='ShowTab(1)'><span>Recent Comments</span></a></li>
<li class='NavLinks' id='paging0'><div style='display:none'/></li>
<li class='NavLinks' id='paging1'><div style='display:none'/></li>
</ul>
<div class='TabContent' id='div0' style='display:none'>
<ul expr:id='data:widget.instanceId &quot;_feedItemListDisplay&quot;'>
<b:loop values='data:feedData.items' var='i'>
<li>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != &quot;&quot;'>
<span class='item-date'>
&#160;-&#160;<data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != &quot;&quot;'>
<span class='item-author'>
&#160;-&#160;<data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='Feed23' locked='false' title='Recent Comments' type='Feed'>
<b:includable id='main'>
<b:if cond='data:title'/>
<div class='widget-content'>
<div class='TabContent' id='div1' style='display:none'>
<ul expr:id='data:widget.instanceId &quot;_feedItemListDisplay&quot;'>
<b:loop values='data:feedData.items' var='i'>
<li>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != &quot;&quot;'>
<span class='item-date'>
&#160;-&#160;<data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != &quot;&quot;'>
<span class='item-author'>
&#160;-&#160;<data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>

5. Find the above string of codes and change Feed22 and Feed23 to Feed1 and Feed2.

6. Voila! Recent Posts and Recent Comments on Dilectio template is now operable beautifully as you can see on this blog.

That's it for now. Hope you enjoy reading it as much as I enjoy typing it.

Oh yeah, please leave a comment or two if you find this post helpful or in need of further help. I thank you in advance.

Technorati Tags: annoying blank configure feed, dilectio blogger template, recent comments, recent posts

The Dates Are Missing!

Only the first post shows the date

Today I received an email from Rizaro asking me why all the dates for his post were missing except for the first post as you can see on the image below;

Click image to enlarge

For his sake I did manage to squeeze the time to look upon his blog. After tweaking here and there with his HTML template that he had sent to me earlier, I realized that there was something wrong with his Dilectio's template.

Below is a list of recommendations to solve the problem of the missing date on his blog;

1. Download Dilectio blogger's template on eBlog Templates


2. For 'Read More' tweak, please refer to my other blog's posts, Summary Expandable Hack or Another Summary Expandable Tweak


3. To solve the comment form placement, it's advisable to read Comment Form Placement


4. Voila! All dates will be shown and I'm sure your Dilectio blogger's template has been improved.

That's it for now. Hopefully the above post will help Rizaro somehow. If you're in need of any help, lease tell me about it. God's willing, I shall find the answer for you. See you around my friend.

Greetings and lots of love from Kuale Kangsor, Malaysia.

Technorati Tags: another summary expandable tweak, comment embedded below post, comment form placement, dilectio blogger template, malaysia, missing date, peekaboo, read more tweak, rizaro, smart make money tips, summary expandable hack

Comments Embedded Below Post

Comment Form Placement

Yesterday's post was an effort to answer Ron's Question that was posted on eBlog Templates.

As I explained in that little history yesterday, I've decided to create a new blog using Dilectio's template. Improving Dilectio will specifically deals with Blogger or BlogSpot's user who are using Dilectio template.

Hopefully with Mr. David Cowgill's (the founder of eBlog Templates) endorsement, questions posted on his Dilectio Comments Section will be answered here. Also at the same time gadgets adding, codes hacking, tweaking will be done here too. In other words, Dilectio templates will be disassemble by taking out all her bolts and nuts and then we gonna patch her up again. Only this time we gonna load her with extra ammunition! I'm very sure in due course Dilectio will be the grandest template on BlogSpot and Blogger.

Wow! Looked like we have gone off mark. Okay, let us get back to the main topic.

As you have noticed, in yesterday post I've failed to get Ron's comment embedded below his post. As a last resort I've to choose 'Pop-up window' for his comment form placement. Well at least someone was able to leave a comment or two coz before these no one was able to leave a comment on his blog! It's very easy to change your comment form placement. Here's how;

After signing in to your Blogger account, you will be taken to your Dashboard --> Settings --> Comments where you clicked on Pop-up window in the comment form placement's section. That's it.

Anyhow, I was still not satisfied even after Ron thanking me for getting his comments back. Several months ago, I did published a post about inline comment during the early days when the Blogger team had a new toy (feature) in embedded comment form addresses. A must read back then for those who used too much edited or customized templates and for those who were having hard times placing their comments embedded below post. Here's the post, Comment Form Placement.

Read the above post on Blog Beginners.com carefully coz we gonna do the same as before. The only difference was that after finding;

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>

we gonna change it with these line of codes;

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a></b:if>
</p>

Voila! That's how Improving Dilectio got her comment embedded under the post!

Oh yeah, before you do anything to your template, by all means please back-up your template. Just in case anything goes wrongs or your xml codes suddenly decided to go on a riot, I'm sure your back-up will save you more in a thousand folds. Believe me, been there and all that...

That's it for now. See you later in another exciting post.

Greetings and lots of love from Kuale Kangsor, Malaysia.

Technorati Tags: blog beginners, comment embedded below post, comment form placement, david cowgill, dilectio, dilectio blogger template, dilectio blogspot template, dilectio comments section, dilectio template, eblog templates, improving dilectio, pop up window

Ron's Question

Leaving comment on Dilectio

Updates: Even after several tries, Comment Form Placement (the one that embedded below post) is not feasible. As a last resort, I've to make do with Pop-up window type of comment form placement. Well, at least someone can still manage to leave a comment or two on this blog as well as Ron's. It's really simple. After signing in to your account, from Dashboard --> Settings --> Comments and click on Pop-up windows for your Comment Form Placement.

Can someone try to comment on my blog?

It seems the post a comment link is not working.I already tried some of the advices written here but still it doesnt work.

Please kindly check it out and give me some advice.

My blog is here: Philippine Wedding Information

Thanks.

Above was Ron's questions on eBlog Templates, but before I proceed any further I would like to tell you a little bit of history first. David, the CEO of eBlog Templates has called me to help him out after reading one of my posts on BlogBeginners.com, Solving Dilectio Blogger Template.

I've to thanks David for giving me the chance to be on his team even on a very small scale. I was having the time of my life especially when I managed to solve some of the problems found on eBlog Templates.

That's why I created this new blog to help me to understand more about Dilectio template because none of my other blogs were using Dilectio. This blog will be used to improve Dilectio template via questions by Dilectio many user.

Okay, to answer Ron's question I would like Ron or anyone reading this post to leave a comment or two for this post. If anyone or Ron was able to leave a comment on this blog, I'm afraid Ron has to upload a new Dilectio template. By the way, I'm not changing anything yet. I'm leaving Dilectio as it is, for now.

That's all for now. Till we meet again on another post, for another question.

Greetings and lots of love from Malaysia.

Technorati Tags: comment embedded below post, comment form placement, david, dilectio comment section, eblog templates, improving dilectio, malaysia, philippine wedding information, pop up windows, problem with comment on blogger, ron, solving dilectio blogger template,