Amateur Guide to Some BearBlog Extra Features
Amateur Guide to Some BearBlog Extra Features
I'm in no way a web designer, but i am curious about how folks get certain features to work on BearBlog, so I've done some reading and experimenting. Someone asked me to share what I've learned and I am always willing to do that.
Header
Under Settings>Header and Footer Directives > Header, I have some code copied from the website SearchMySite that allows my blog to be searchable in their IndyWeb search engine. It's not visible when you are looking at one of my blog posts.
Footer
Under Settings>Header and Footer Directives > Footer, I have links to:
- Letterbird email form
- A Gateway Theme page from Micro,blog listing where you can find me on all the socials, You can make a page like that on Gravatar.
- My account on Mastodon
- A free guestbook on Smart Guestbook
- A rel="me" link to my Gitgub account for authentication purposes. This is invisible to readers.
- A link to my p-author h-card, invisible to readers
- A code snippet to a BearBlog Plugin that puts a search box on my /blog page
- A code snippet for Tinylytics
<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
text-align: center;
}
</style>
<div class="center-text">
***
<br>
<a href="https://louplummer.lol/contact-form/">💌 Email Form</a>
<br>
<a href="https://amerpiegateway.micro.blog/">🔍 Find Me Online</a>
<br>
<a rel="me" href="https://social.lol/@amerpie">Follow me on 🦣Mastodon</a><br>
<a href="http://users.smartgb.com/g/g.php?a=s&i=g19-01450-d8">✏️ Guestbook</a><br>
<link href="https://github.com/cyclelou" rel="me">
<span class="p-author h-card">
<a class="p-name u-url" href="https://amerpie.omg.lol">Lou Plummer</a><br>
<img class="u-photo" src="https://micro.blog/amerpie/avatar.jpg" />
</span>
<script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.5/bear/blog-search.js"></script>
<script src="https://tinylytics.app/embed/SoFjDzKBYZLbtLAysLdo.js" defer></script>
</div>
Nav
In the Nav section, I have a small graphic (of Woodie Guthrie, a hero of mine) and some links to other sites on the web where I publish. I have commissioned a logo for my links blog, Linkage and this where I will place it on that blog when it is ready. a As you can see, I use emoji before the names of the links.
![[PathToPicture.jpg]]<br>[Home](/) [📚Blog](/blog/) [🔗Linkage](https://linkage.lol) [🎩Slash Pages](https://amerpie.lol/slash/) [📱App Reviews](https://apps.louplummer.lol) [🪨Obsidian](https://obsidian.amerpie.lol)
Post
In my my post template, I specify some extra metatag info so that when I link to posts on social media, the sites use the image from my post and the 200 character description I've included. I also use the published_date tag to schedule posts to be published in the future. I also have some hashtags included that I am currently using. The only other element I am using is a bit of code that lists the last five posts I've made at BearBlog.
title:
link:
published_date:
meta_description:
meta_image:
tags: 100DaysToOffload, Blaugust2024
---
___
**Last 5 posts**
{{ posts|limit:5 }}
Themes
Under Themes>CSS I have one entry at the bottom of the default code that adds some text to the Toast button, making it hopefully easier to identify fir readers who don't know what it is.
.upvote-button {
align-items: center;
column-gap: 4px; /* Adjust to change spacing between label and upvote button */
display: inline-grid;
grid-template-columns: 1fr 25px;
grid-template-rows: 1fr 1fr;
justify-items: center;
}
.upvote-button:before {
content: "Like this post? Click here"; /* Change text to anything you'd like */
grid-row-start: span 2;
}