This question is about Blogger Template manipulation. People developing/changing or manipulating Blogger templates in any way know its syntax hence can provide some input.
I write a development blog on Blogger and I've changed my blog template so posts display HTML head title differently (post name first) from default (blog name first).
But. Since I format my inline programming code words similarly to Stackoverflow (gray background mono-spaced font) and do the same when I use any of them in blog post title... I enclose such code words inside <code/> element and then I have CSS set for this particular element to add it gray background and set mono-spaced font on it. This formatting works on blog post titles and its content.
But the problem I'm having is that these <code/> tags I use are also displayed in the HTML head title (displayed in browser window title). What is even more importan is that these get displayed in web search results as well. That's even more annoying.
Default template uses <data:blog.pageTitle/> in title element, which strips out any tags, but displays all titles as Blog Name: Blog post title (Google search results are quite meaningless because blog post title gets cut off). That's why I'm using <data:blog.pageName/> instead to display just blog post title in the head, but it still has all tags and I should strip them out somehow.
Check this blog post example. Load it, and look at browser's window title bar that still has tags displayed. I want them gone.
How do I strip tags from the post title when adding it to head element?
UPDATED
ok, so far this is what i worked out:
under settings -> Title -> put a nice
use <data:blog.pageTitle/> as title;
under design -> edit html -> replace theese lines
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Intestazione)' type='Header'/>
</b:section>
with your custom header like
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
aSeptik Site</h1>
</div>
<div class="descriptionwrapper">
<p class="description">
<span>
</span>
</p>
</div>
</div>
</div>
</div>
<title> will result from:
jQuery <em>"scroll into view"</em> plugin (with an additional <code>":scrollable"</code> selector filter)
to
: jQuery "scroll into view" plugin (with an additional ":scrollable" selector filter)
hope this help, demo http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
try with a little bit of javascript in your <body> like this
<script type='text/javascript'>
document.title = document.title.replace(/(<([^>]+)>)/ig,'');
</script>
</body>
copy and past as is don't convert entities,
DEMO: http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
although, i'm not sure this is the
right solution for you since spiders
usually avoid js execution, and i
don't know how "html tags in the title"
affects the search results.
Related
Can I clarify that these 4 elements below actually do the same job by rendering the text in italic and there is no difference in using each of them except to differentiate the type of content?
<i>
<em>
<address>
<cite>
Yes, you can. Do this:
<html>
<body>
<i>italic text</i>
<em>italic text</em>
<address>italic text</address>
<cite>italic text</cite>
</body>
</html>
Put this into a file called <filename>.html and open it in a browser (e.g. Chrome). If the text looks the same, it looks the same!
As you can see, the <i> and <em> elements do not make a newline automatically, but otherwise there is no difference. If you'd like to change the styles yourself, you can create a css file.
You right, these 4 Elements basically renders all text or content as italic, the different off all these element just at the content.
The <i> tag defines a part of text in an alternate voice or mood.
The <em> tag is used to define emphasized text.
The <address> tag defines the contact information for the author/owner of a document or an article.
The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
Yes, they all have the same default style which sets the content to italic.
And yes, a particular tag will be chosen according to the content.
Reference: For more information refer to below links:
What is the difference between <cite>, <em>, and <i> tags of HTML?
What's the difference between <b> and <strong>, <i> and <em>?
I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.
I have came to know we can use the alt tag for better seo but iam confusing about the using of alt tag to my images.
I mean can we use - symbol between the keywords like facebook-tips-tricks or should i only use facebook tips tricks.
I have came to know google will also crawl images but how can we effectively implement in images in blogger posts.
There's no reason to use the - symbol. You need to simply put the alternate. Google will do it's work.
Example:
<html>
<body>
<img src="http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-7.jpg" alt="Smiley face" height="42" width="42"><!-- Will normally show the image, since path is valid -->
<img src="invalid path" alt="X" height="42" width="42"> <!-- Will show the alt, since there's no valid path. Will work without -'s. -->
</body>
</html>
As mentioned in the comments, you might want to read more about the purpouse of the alt attribute. You can do so here.
I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)
So i am using the open graph method to pull in content from a Wordpress site that can then be posted on facebook. However with google plus the content that is pulled in is distorted. It is pulling in the title twice and the content twice. So i opted to use Schema.org. Open graph has meta tags which are invisible on the site while Schema uses regular html tags as follows:
<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
Trailer
</div>
This displays on my site so i added an inline style of "display: hidden;" to the div. However this doesn't work. Has anyone gotten schema to work with Wordpress? Or a better question might be, has anyone gotten open graph/schema to work with google plus?
Thanks
display: hidden; does not exist. You're looking for display: none;
http://jsfiddle.net/wgLZL/