I want to add pages to a blog (in Blogger - https://www.blogger.com/home), but I want a different format and style for each of the pages on the blog.
I tried going to [Blog Name] -> Pages -> New page but the pages that are made uses the template of the main page, including the sidebar and header. Honesty, it looked no different from a blog post.
Can I create a completely blank page and add in all the HTML myself? Or is this not possible with Blogger?
Thanks!!
It is possible, but does require you to go into the editor and do some work.
Blogger uses xml, so you can write conditional tags. So above all of your content you could put the conditional tag, write up all of your HTML and then wrap the whole blog within the else statement.
Within the specific markup you'll need to include the whole tags for the content, like:
<!-- page title -->
<h1><a class='post-link' expr:href='data:i.link'><data:i.title/></a></h1>
<!-- page content -->
<data:i.body/>
otherwise you won't see whatever content you added within the page editor.
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/yourpageurl.html"'>
<!-- specific site markup -->
<b:else/>
<!-- All of the normal markup -->
</b:if>
Related
Hello I need to add some SEO text to one of my Webpage Menu Category.
The problem is that the ''Category'' is not a real category it is and URL Meny Type used for ''offers'' (All the products which includes a discount).
On these page I have no text nor info banner. Just products with discounts.
is there any way I could add at least a box so I can type a well structures SEO text?
Looking forward for you answwer
One way of crudely doing it, (if the page uses the category.tpl file) would be, open the category.tpl file within your theme directory, add a little smarty if statement to check the current category id? or category name, if it matches the desired page, your on.... then show a div with the required SEO text content, obviously not ideal & not dynamic!.. add style code to your css/global.css or css/category.css
to check if the page is using the category files: check the source code body tag!..
ie: body id="category" class="category category-227"
{if $category->id==YOURCATEGORY || $category->name==YOURCATEGORYNAME}
<div id="seoContent">
<p>SEO content!</p>
</div>
{else}
<!-- not required page -->
{/if}
So I've just published a website for the first time and I've come up with a problem. It looks like that the _Layout.cshtml page and the views conflicts with each other, because it doesn't load all of the CSS and JS. I get a few errors in the console tab which says:
"
HTML1503: Unexpected start tag,
HTML1512: Unmatched end tag,
HTML1506: Unexpected token.
"
When I go to the source of the page where the error occurs, the layout and the view page are combined together, it gives the error at the seconds head tags. The first first head tag is the one from the Layout page and the second head tags is from the view page. Thus having 2 head tags in 1 page and it conflicts.
Is there something I missed before publishing? Because on localhost it runs fine without these conflicts.
Hope someone can help me, thanks in advance! :)
I recommend you read through this MSDN article on Layout pages using Razor.
It sounds like you're repeating your header information.
From the article,
Many websites have content that's displayed on every page, like a
header and footer, or a box that tells users that they're logged in.
ASP.NET lets you create a separate file with a content block that can
contain text, markup, and code, just like a regular web page. You can
then insert the content block in other pages on the site where you
want the information to appear. That way you don't have to copy and
paste the same content into every page.
In other words, the layout page has all of the markup that you want repeated on every page. This way, you don't have to repeat it manually.
A content page can have multiple sections, which is useful if you want
to use layouts that have multiple areas with replaceable content. In
the content page, you give each section a unique name. (The default
section is left unnamed.) In the layout page, you add a RenderBody
method to specify where the unnamed (default) section should appear.
You then add separate RenderSection methods in order to render named
sections individually.
Since each page is likely to have multiple sections, you can use the RenderSection method to differentiate them in your layout.
Here's an example from the article:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
#RenderSection("header", required: false)
</div>
<div id="main">
#RenderBody()
</div>
</body>
</html>
As you can see, any header information will be loaded using the RenderSection method. On your view, you would define that section using code similar to this:
#section header {
<div>
This content will only repeat on the page that it is declared in.
</div>
}
So, when you run it, you'll get:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
<div>
This content will only repeat on the page that it is declared in.
</div>
</div>
<div id="main">
...
</div>
</body>
</html>
The required:false part of #RenderSection("header", required: false) means that you do not have to include the Section "header" in every view that uses the layout. It is optional. If you do not have required set to false, it will be required that you declare it on every page that uses the layout.
On a side note, make sure you only declare your css and javascript that in only one of these locations, preferably the layout page if it is going to be repeated. This does not mean, however, that you cannot have css and javascript in both. For example, if you are using bootstrap in your project, you would include that in your layout page so that you do not repeat the inclusion throughout your views. But, you may, for example, include a view specific javascript file in only your view and not the layout.
Im trying to add a link to the infobig2.jpg image in my gallery section. I would also like to add another slide once you enter the gallery. My website is www.24kdesignz.com in the infographic section I want the pic to link to http://vs0022.businesscatalyst.com/
<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->
<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>
<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >
<p>Infographics – An Infographic is a visual representation of data and information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>
</div>
</article><!--End Project Item -->
After inspecting your site it looks like you have a lot of plugins. The portfolio project section from your site's theme is injected using a jQuery library called "Masonry." Inside of your projects assets >> javascript folder there's also a file called "scripts.js" - this is where the theme author injects the images into the portfolio project items.
Solution: Images can't be links. You have to wrap it in an anchor tag. In your specific case, you're going to have to do it using jQuery.
Assuming your HTML markup looks something like this, add a unique id selector to the image you want to become a link:
<li id ="image2">
<img id ="uniqueId" src="/assets/images/infobig2.png">
</li>
Then use jQuery to grab it and wrap it in an anchor tag:
$("#uniqueId").wrap($('<a>', {
href: '/assets/png/' + data.uniqueId
}));
The other solution here would be to just add a link under the image using plain html if you don't feel comfortable editing your theme's jQuery code.
Background
I am trying to add a Facebook Comment box into my Mediaskin php file, but when I use the code below the box appears on every page.
Code
<!-- /debughtml -->
</div>
<br />
<center><div class="fb-comments" data-width="800" data-num-posts="100" data-colorscheme="dark"></div></center>
<!-- /bodyContent -->
Question
How can I make the facebook comments appear only on read pages (pages with index.php?title= in the URL, but without &action=edit at the end of the URL?
In a Jumi script, I'm generating the following HTML:
<h3>Header title</h3>
When I view the page, Firebug indicates that the element has turned into this:
<h3>
<a _moz-rs-heading="" name="header-title">Header title</a>
</h3>
This does not appear in the page source, so it has been changed dynamically somehow. However, even if JavaScript is disabled, this will happen.
So why would I want to suppress this useful feature? Well, I reload the page content with AJAX every ten seconds or so. Content introduced by jQuery('#my_container').html(...) does not have its header tags rewritten. Thus, after ten seconds, the header tags will turn from blue to black.
My questions are:
What part of the Joomla source code is responsible for these header tag rewrites?
How can I create header tags that opt out of such rewrites?
Joomla builds header in this file:
/libraries/joomla/document/html/renderer/head.php
You can skip Joomla headers by removing following line from your template's index.php file:
<jdoc:include type="head" />