Show Label Specific Icons Below Post Titles

-
In this Blogger tutorial, you will learn to display icons or any text/image specific for any label/category under the post titles in your blog.


For example, if these are the four main topics/categories of your blog: Music, Dating tips, Finance and Books reviews/Literature then for posts on book reviews you can show this icon below their post-titles:


Similarly for posts on music, finance tips you can show these icons:
Music icon Stats icon 
Instructions to implement this hack in to your blog.

STEP 1:
Log in to Blogger, go to Layout -> Edit HTML and tick the tick-box "Expand Widget Templates"


STEP 2:
Find (CTRL+F) this code in the template:
<div class='post-header-line-1'/>

and immediately BELOW/AFTER it, paste this code:
<!--LABEL-SPC-ICON-STARTS-->
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#1&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
</b:loop>
<!--LABEL-SPC-ICON-STOPS-http://bloggerstop.net-->

If you want to display these icons for four labels (as in the above example), then use this code:
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#1&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#2&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#3&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#4&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
</b:loop>

Replace the code in RED with the exact names of your labels/categories (including space " " between two words). And replace the text in GREEN with the link to the icon you want to use. For ex.: To use the music icon displayed above, replace that text in green with this code:


http://files.softicons.com/download/application-icons/oropax-icon-set-by-878952/png/512/Music.png

Finally save the template.


If you feel this is helpful or you like it, Please share this using share buttons available on page.

Comments

Post a Comment

Popular posts from this blog

Auto Scroll in Common Controls

-
This example shows, how to programatically autoscroll WinForm controls TextBox, ListBox, ListView, TreeView and DataGridView. Autoscroll to the end of box or view is useful. For example, in situations when you use one of these components as the output log window. Usually you add the items to the box or view and you want to be sure that the recently added item is visible without the necessary to do it manually. Though it is not difficult to solve this problem, .NET doesn't provide any unified way how to do it. TextBox autoscroll Code: textBox1.SelectionStart = textBox1.Text.Length; textBox1.ScrollToCaret(); ListBox autoscroll Code: listBox1.SelectedIndex = listBox1.Items.Count - 1; listBox1.SelectedIndex = -1; ListView autoscroll Code: listView1.EnsureVisible(listView1.Items.Count - 1); TreeView autoscroll Code: treeView1.Nodes[treeView1.Nodes.Count - 1].EnsureVisible(); DataGridView autoscroll Code: dataGridView1.FirstDisplayedCell = ...
Read more

Convert typed library (.tlb) to .net assembly?

-
Sometimes we have to use the legacy code(C, C++) in .Net projects which is provided by third party vendors. Most of the times these guys will provide, equivalent .net framework typed library (.tlb) of that legacy code. Then, how to refer those in our .net projects and make use of functionality provided by it?   Follow the below steps, Keep ".tlb" file which is nothing but legacy typed library Open windows command prompt Go to directory, " C:\Program Files (x86)\Microsoft Visual Studio 8\SDK\v2.0\Bin " or     "C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin". It depends on which version of visual studio you had. Enter the following and execute, TlbImp.exe "E\MyLibrary.tlb" . Here, replace "E:\MyLibrary.tlb" with path to your tlb file. It will import the .net framework type library to assembly.i.e, .dll and it can be found at path "C:\Program Files (x86)\Microsoft Visual Studio 8\SDK\v2.0\Bin" with name ...
Read more

Disable close button on form - C#

-
In one of my projects, I had to implement a form with Close[X] button Hide, so that the user cannot leave the form until it finishes the data processing. From the form designer window in VS.Net 2005, it is possible to hide the Minimize box and Maximize box. But there is no property called Close or CloseBox. Then I had tried with by setting form property ControlBox = false . With this i am able to achieve hiding the Close/Minimize/Maximize buttons. But at the same time there is a side effect.i.e., Form icon(which is generally displayed on form title bar)  also hidden.  So after little bit investigation came up with the following hack to get,  i)  disable the close button  ii) displaying the form icon To achieve this, we have to override CreateParams property of Form base class as follows, Code: private const int CP_DISABLE_CLOSE_BUTTON = 0x200; protected override CreateParams CreateParams { get ...
Read more