Design + Coding > Adding Custom Content ANYWHERE
IMPORTANT: When these custom content areas are injected, the SQ "Edit" buttons will appear next to them. However you should not use them, since they won't work properly. In effect, only edit these special custom content areas on your special Virtual Database journal page. If you don't want your clients clicking these unusable "Edit" buttons, you can use CSS to hide them. Below is the CSS code to hide the "Edit" buttons within the custom .journal-entry-footer created above.
.journal-entry-footer .adminLinkTableWrapper { display: none !important; }
Nollind Whachell
EXAMPLE: Add Ad Content Below Every Third Journal List Entry
Create an entry within your Virtual Database journal entitled "Journal List Ad Insert" and within the body of it, include whatever ad banner code you wish to add. When saved, the URL path for the entry should be "/data/journal-list-ad-insert.html". Then add the following script code as noted in the original post above.
var classSelector = ":nth-child(3n)";
if ($(".list-journal-entry-wrapper .journal-entry-wrapper").length ] 0) {
$('.list-journal-entry-wrapper .journal-entry-wrapper' + classSelector).after('[div class="journal-list-ad-insert"][/div]');
$('.list-journal-entry-wrapper .journal-list-ad-insert').load("/data/journal-list-ad-insert.html .body");
}
Note: This "every third" functionality only works for browsers that support the CSS3:nth-child CSS Selector. So visitors who view your site in IE won't see these inserted ads.
Nollind Whachell
Great stuff Nollind :)
I love the virtual database idea! Though it seems a little cryptic probably for the basic user. I'm wondering if a little video tutorial of what you are trying to say, might come across a little more user friendly?
Anyway, just wanted to say very cool idea, I wish I had thought of it lol.
Cheers,
J
Jeremy Blanchard
WOW - this is awesome you!
:)
sib
Thanks Jeremy. Ya, it's primarily geared for web developers and designers, since it requires an understanding of CSS to know how to define the custom content areas. And ya the virtual database idea makes it easy for the client to update the content for these custom areas themselves afterwords (without having to mess with the script code).
Nollind Whachell
the other challenge is:
"So visitors who view your site in IE won't see these inserted ads...."
If that's the case- they won't see anything else within IE either when using this modification correct? - easy to overlook amidst the other content above....
I am posting this to the helpful tips thread and will emphasize the fyi for IE as well.
sib
If that's the case- they won't see anything else within IE either when using this modification correct?
Not sure I'm following you. Are you asking if this entire thread will or won't work with IE? The answer is this technique will work for every browser with javascript enabled, so yes even IE. The reason that specific example won't work with IE is because it uses the CSS3 "nth-child" selector in it which hasn't been added to IE yet. The original journal entry footer example will work fine in IE though.
Again the implementation is CSS-based, thus if you use certain CSS Selectors that are only usable with current browsers, then only the current browsers will see the injected content areas. It's no different than defining CSS classes in your Custom CSS area with CSS 3 selectors. Those classes won't work with certain browsers either.
Nollind Whachell
Put another way. If you want your custom content areas to be viewable by every browser, then ensure you only define custom content areas using CSS that works with every browser.
Nollind Whachell
Exactly ->> Put another way. If you want your custom content areas to be viewable by every browser, then ensure you only define custom content areas using CSS that works with every browser.
sib
Excelent Idea.
When you say "ANYWHERE" do you think it may work to automatically place ads inside the post entries?
do you have a site where you implemented?
Thanks
Pedro Galvis
If anybody could do this for me I would be willing to send some money via paypal. I just need the facebook & tweet button embedded in all my blog posts. If you can do this email me at joecommisso@sparkhop.com and let me know how much you would charge. Thanks
Joe Commisso
ok so this worked for me no problem; the code that i would like to display under my post comes up fine in the data page but as soon as you venture over to the journal pages, where id like it to display all that shows is the facebook like button. Does anyone know why this happens or how i can fix this?
heres my data page
Data Page
and heres an example of one of my post
Post ExamplePage
you can see underneath the link within buttons that only the facebook button appears, whats up?
John
I literally LOVE YOU. Thank you so much.
I implemented a neat like box after each post: http://cloud.lukete.ch/48Et
http://luketechtips.com
If you have any feedback let me know.
Again, I love you.
:)
Luke Abell
I've been playing around with this and thought I'd note that one can also use a modification of this script to insert content into an existing DIV, rather than creating a new DIV under/above an existing DIV.
As it is, the script says:
• go find the DIV with class "i-exist",
• then create a new DIV under it with the class "i-didnt-but-i-do-now"
• finally, fill the DIV with class "i-didnt-but-i-do-now" with content from "/journalDB/content.html .body"
In situations where the existing DIV is empty, this would require adding another DIV inside the empty, existing DIV, just so jQuery can add yet another DIV after that one.
A quick read through the .load() documentation on jQuery's website showed me how to skip all that "find this, create that, suck this" business:
[ script type="text/javascript" ]
$(document).ready(function() {
$('#existing-div .existing-class').load('/internal-db/entry-1.html .body');
});
[ /script ]
And it can be repeated:
[ script type="text/javascript" ]
$(document).ready(function() {
$('#existing-div-1 .existing-class').load('/internal-db/entry-1.html .body');
$('#existing-div-2 .existing-class').load('/internal-db/entry-2.html .body');
$('#existing-div-3 .existing-class').load('/internal-db/entry-3.html .body');
$('#existing-div-4 .existing-class').load('/internal-db/entry-4.html .body');
});
[ /script ]
Of course, this isn't replacing content inside an existing DIV. I imagine that would need .replaceWith() or something similar.
Jim N
I am having an issue. I tried to implement this using the "ad content after every third journal listing" example. I know I set it up correctly because when I put standard text or an image in the virtual database it works well (shows the text/image after every third post on the main journal page). However, when I put google adsense html in the virtual database post (or anything else that uses javascript i.e. twitter button), it wont show up on the main journal page after every three posts. I know just enough CSS/HTMl to implement this in the first place, so I am lost as to why text/images work, but ad code does not. Any help would be greatly appreciated.
Wilson Barr
This is simply not working. I don't know much about CSS, mind. But I do know how to follow instructions. Is there something that hasn't been made painfully clear with this? Nothing that I try has been working, and both of your example codes are those I'm in desperate need of.
Please please please help me?
Nigel Lemieux
@Jim
How would I load 2 entries from /data only at the end of single journal entries?
Thanks!
Luke Abell
Nollind Whachell, you appear to have just saved my sorry butt. Thank you very, very much.
Matthew Wimmer
this doesnt work .. only for text
Michael Scott
WHAT DOES THIS DO?
This powerful technique allows you to add content to any area of your site, as long as it can be defined via a CSS class. Even more so, once you have defined these custom content injection areas, you or your clients can then easily edit them using the SQ WYSIWYG editor. Some examples of how you might use this technique.
- Add an ad banner to the top or bottom of your site
- Add an ad banner selectively to only certain pages
- Add an ad banner below every journal entry or selectively on certain journal entries
- Add your bio below every entry on a single journal entry page
- Add a journal entry header or footer on single journal entry pages
- And more!
HOW IS THIS DONE?
jQuery. Therefore ensure you install the jQuery script within your website before trying to implement the following technique.
HOW DO I SET IT UP?
Setup is a two step process. The first step is setting up a virtual database using a simple journal module. The second step requires adding some script content to your site. Note: If you don't have an Advanced account with HTML injection points to insert the script, don't worry because you should be able to add the script to your website footer area (or even within a hidden sidebar section).
Step 1: Create The Virtual Database
Basically add a hidden journal module to your site, so it doesn't show on your navigation bar but it's still accessible to the public. Name the journal module "Data" and turn off the "Prefix Entry URLs with Publish Date" option. Now create an entry entitled "Journal Entry Footer" and within the body of it just type "This is a journal entry footer". When saved, the URL path for the entry should be "/data/journal-entry-footer.html". Note: This area is where you or your clients can easily edit the content of these areas via the SQ WYSIWYG editor in the future.
Step 2: Add Customized Script
Now comes the slightly tricky part as this requires a basic understanding of CSS and XHTML to implement. The following script is added to your site (via HTML injection area, website footer, or hidden sidebar section). What it does is load the body content of the specific journal entry you created and display it where you wish to place it via CSS. In this example code below, I want to add a footer area below my journal entries but only on single entry page, since I don't want my bio showing up below every journal entry in a list view. (Note: Change every left square bracket "[" to a left arrow bracket and every right square bracket "]" to a right arrow bracket. There is a left arrow bracket after the word 'length').
[script]$(document).ready(function(){
if ($(".single-journal-entry-wrapper").length ] 0) {
$('.single-journal-entry-wrapper').after('[div class="journal-entry-footer"][/div]');
$('.journal-entry-footer').load("/data/journal-entry-footer.html .body");
}
});
[/script]
Understanding the code above:
.single-journal-entry-wrapper & .after - Basically equates to load the custom content area below the CSS class defined. If I used the word ".before", it would have inserted the custom content area above the CSS class. So ".after" equals below the CSS class container and ".before" equals above the CSS class container.
.journal-entry-footer - A newly created container which houses the custom content. You can now stylize this container via your Custom CSS area of SQ if you wish as well.
/data/journal-entry-footer.html - The virtual database path to load the content for this specific custom content area.
If you wish to add more custom content areas, just add the new item to your virtual database journal and replicate the script lines in the following pattern.
[script]$(document).ready(function(){
if ... {
$... ;
$... ;
}
if ... {
$... ;
$... ;
}
});
[/script]
Finally note that since we're using CSS to define these custom content areas, you can be extremely selective in their positioning and appearance, even utilizing unique CSS identifiers if you wish. For example, in the code above, if I want to add a journal footer area to just a specific journal module only, I could have used "#modulePage6518022 .single-journal-entry-wrapper" instead.
PS. I'll add more examples to this thread later when I get the time to do so.