Apu Story - Premium Blogger Template Free Download - 3schools Post Editor
Apu Story is a special blogger template that was made by the 3schools team. This template lets you create different types of content for your blog, like regular blog posts, news articles, and the new Google Web Stories.
In this blog post, I'm going to show you all the features that come with this Apu Story template. I'll explain how you can use each of these features for your blog or website.
We all know that the regular Blogger editor doesn't let you add things like tables or buttons to your blog posts. That's why the 3schools team created a special tool called 3schools Make Story 2.0. With this tool, you can create blog posts that have tables, buttons, marquees, and even Google Web Stories.
Getting Started - Setup and installation guide.
First, you'll need to create a blog on the Blogger platform. You can use either a custom domain name or a custom subdomain. Once you have your blog set up, you'll need to download the Apu Story blogger template.
Now it's time to upload and install the Apu Story template on your Blogger blog. You might be thinking the easiest way is to just upload the .xml file directly. But the recommended way to install a custom theme is to actually replace the entire HTML code of your previous theme with the new Apu Story HTML code.
- In Blogger dashboard, click on Theme.
- Click icon next to the Customize button.
- Click Edit HTML, you will be redirected to the editing page.
- Now open the download .xml file in any text or code editor (you can also use our tool) and copy all code.
- Replace all code in your previous theme and paste the copied code. Now save the theme by clicking the icon.
Create a blog post or news article.
The 3schools post editor makes it easy to write both blog posts and news articles. It has lots of different options you can use, like paragraphs, headings (from H1 to H6), lists, checklists, quotes, alerts, FAQs, custom HTML, tables, and images.
- First go to our dashboard and complete the sign in process with you gmail account.
- After completing the sign in process, you will see the options as shown in the below image.
- If you have multiple blogs then select a blog and click on the Create button. Now click on the Write Post button. You will be redirected to the post editor.
Our 3schools post editor works a lot like the regular Blogger post editor. You can enter a title, write your post content, add labels, and select the publish date - just like with the Blogger editor.
But I'm going to focus on discussing the new features that our 3schools editor has, beyond what the regular Blogger editor can do.
- Blog post / news article :- By default, any post you create in the 3schools editor will be a regular blog post. But if your post is actually a news article, you can add an extra label called "NEWS" to identify it as such.
- Table Of Contents :- The 3schools editor will automatically add a table of contents at the top of your article. But if you don't want the table of contents to be displayed, you can add an extra label called "NOTOC" to your article.
- Voice Typing :- The 3schools editor has a voice typing feature. To use it, first select your language from the right sidebar. Then you can speak, and the editor will automatically convert your voice into written text.
- Save / Delete :- While editing a post, you may want to save your work to come back to it later. To do this, click the save icon next to the voice typing icon. This will store your post content in your browser's local storage, so you can pick up where you left off. Delete saved data by clicking the icon.
- Raw HTML :- If you click on the "+" icon in the editor, you'll see an option for "Raw HTML". This allows you to add your own custom HTML, CSS, and JavaScript code directly into your blog post or article.
- Extensions :- The 3schools editor has multiple extensions that you can use. To access them, first add a "Raw HTML" block. Then click on the extension button next to the voice typing button. This will show you all the different extensions available. You can choose any of them, and when you're done, click the save icon in the top right corner.
- Preview :- When you're ready to see what your article will look like, you can click the preview button in the top right corner of the editor.
Create Google Web Story
You can create Google Web Stories for your Blogger blog using the fast and easy-to-use "3schools Make Story 2.0" online tool. To learn more, you can read the documentation.
All About 3schools Extensions!
3schools Extensions are a collection of tools that enhance the functionality of Blogger. They include features not available in the standard Blogger editor, such as adding related posts, web stories, categories, buttons, Timer, Share Buttons, marquees, banners, next/previous post navigation, image slideshows/carousels, and author boxes. These extensions are designed to be used with the 3schools Post Editor.
1.How to Use the Related Posts Extension?
This extension allows you to display related posts on your blog post. Here's a step-by-step guide on how to use it:
- Search for Posts: Type a keyword or phrase in the Search Post input field to search for related posts on your blog.
- Set Post Type: Enter a title for the related posts section, such as Also Read or Recommended Posts.
- Set Number of Posts: Use the range slider to set the number of related posts to display. You can choose from 1 to 12 posts.
- Set Post Style: Choose from two post styles: List Style or Block Style. Click on the corresponding button to select the style.
- Show Thumbnail: Check or uncheck the Show Thumbnail checkbox to display or hide post thumbnails.
- Show Title: Check or uncheck the Show Title checkbox to display or hide post titles.
- Show Description: Check or uncheck the Show Description checkbox to display or hide post descriptions.
Finally, click on the save icon in the top right corner.
2. Web Story
The Web Story extension allows you to embed web stories from your blog into your posts. Here's a step-by-step guide on how to use it:
- Set Web Story Type: Enter a title for the web story section, such as "Web Stories", "Trending Web Story".
- Set Number of Web Stories: Use the range slider to set the number of web stories to display. You can choose from 1 to 12 web stories.
- Fetch Latest or Random Web Stories: Click on the Latest Web Story button to fetch the latest web stories or click on the "Random Web Story button to fetch random web stories.
- Set Web Story Style: Choose from two web story styles: List Style or Block Style. Click on the corresponding button to select the style.
- Show Thumbnail: Check or uncheck the Show Thumbnail checkbox to display or hide web story thumbnails.
- Show Title: Check or uncheck the Show Title checkbox to display or hide web story titles.
- Show Description: Check or uncheck the Show Description checkbox to display or hide web story descriptions.
Finally, click on the save icon in the top right corner.
3. Category
The Category extension allows you to display a list of categories on your blog post.
- Set Category Title: Enter a title for the category section, such as "Trending Now".
- Enter Category: Type a category name in the "Enter category" input field. As you type, suggestions will appear below. Click on a category from the suggestions.
- Set Number of Categories: Use the range slider to set the number of categories you want to display. You can choose from 1 to 400 categories.
- Fetch Latest or Random Categories: Click on the Latest Categories button to fetch the latest categories or click on the Random Categories button to fetch random categories.
You can rearrange the order of categories using drag-and-drop & Click the "delete" icon next to a category to remove it from the list. Finally, click on the save icon in the top right corner.
4. Button
The Button extension allows you to create custom buttons for your blog post.
- Set Button Text: Enter the text you want to display on the button in the "Button Text" input field.
- Set Button Link: Enter the URL you want the button to link to in the "Button Link" input field (Set Link Target, Set Link Rel).
- Customize Button Style: Use the various options to customize the button's style, including font size, font weight, text align, display, text color, background color, padding, margin, border width, border color, and more. Choose an animation effect for the button in the Animation dropdown menu.
- Choose a Button Style: Click on the BUTTON LIST tab to choose from a variety of pre-designed button styles.
Preview your button and click on the save icon in the top right corner.
5. Timer
The Timer extension allows you to create a countdown timer for your blog.
- Set Title and Message: Enter the title and message you want to display on the timer in the "Title & Message" input fields.
- Set Date or Custom Time: Choose a date or custom time for the timer to count down to. You can use the Date input field to select a specific date or the Custom Time input field to enter a custom time in seconds.
- Customize the "We're Live!" Message: Enter a custom message to display when the timer reaches zero. Use the text formatting options to customize the appearance of the text like bold, Italic, Link, Underline, Text Color, Background Color.
- Select a Template: Choose a pre-designed template for the timer from the Select a Template section.
Preview the timer and click on the save icon in the top right corner.
6. Share This
The Share This extension allows you to create social share buttons for your blog post.
- Select Social Media: Choose the social media platforms you want to include in the share buttons from the Select Social Media dropdown menu. You can choose from a variety of platforms, including Facebook, Twitter, WhatsApp, LinkedIn, and more.
- Set Button Size: Use the Button Size slider to set the size of the share buttons in pixels.
- Set Button Shape: Choose the shape of the share buttons from the Button Shape dropdown menu. You can choose from circle, rounded, or square shapes.
- Add Social Media Button: Click the Add Social Media Button button to add the selected social media platforms to the share buttons. You can also delete the added button by clicking the ✖ button.
Preview the social share buttons and click on the save icon in the top right corner.
9. Next - Previous
The Next/Previous Post extension allows you to display navigation links to the previous and next posts on your blog post.
- Set Previous Text: Enter a title for the previous post link, such as Previous Chapter.
- Set Next Text: Enter a title for the next post link, such as Next Chapter.
- Previous Search: Enter the title of the previous post in the Previous Search input field. As you type, suggestions will appear. Click on a post from the suggestions to add as a previous post.
- Next Search: Type the title of the next post in the Next Search input field. As you type, suggestions will appear. Click on a post from the suggestions.
Finally, click on the save icon in the top right corner.
10. Image Carousel
The Image Slideshow extension allows you to create a slideshow of images on your blog post.
- Enter Image URL: Type the URL of the image you want to add to the slideshow in the Enter image URL input field.
- Upload Image: If you don't have the image URL, you can upload the image by clicking the Upload button.
- Add Image: Click the Add Image button to add the image to the slideshow.
- Delete Image: You can delete an image from the slideshow by clicking the Delete icon.
Once you have added all the images, you can insert the slideshow into your blog post by clicking the save icon in the top right corner.
11. Author Box
The Author Box extension allows you to create a customizable author box for your blog posts.
- Enter Image URL: Type the URL of the author's image in the Image URL input field. You can also upload images by clicking the upload button
- Select Bio Style: Choose a bio style from the dropdown menu.
- Enter Author Name: Type the author's name in the "Author Name" input field.
- Enter Author Link: Type the author's profile link (Facebook, Instagram, Blogger etc.) in the "Author Link" input field.
- Enter Short Bio: Type a short bio of the author in the "Short Bio" textarea.
- Add Author Bio: Click the "Add Author Bio" button to add the author bio.
You can add multiple author bio, edit, delete and select one of them. Finally click the save icon in the top right corner.
12. News Hub
The News Hub for Blogger extension allows you to keep your readers updated with the latest and random posts, pages, or web stories. Know more
- Enter Your Blog URL: Type the URL of your blog in the "Blog URL" input field.
- Choose What to Display : Select whether to display posts or pages in the "Post or Page" dropdown menu.
- Customize the Icon: Choose the color of the icon using the "Icon Color" color picker.
- Choose the background color of the icon using the "Icon Background Color" color picker.
- Customize the Header:
Choose the color of the header using the "Header Color" color picker.
Choose the background color of the header using the "Header Background Color" color picker.
- Enter the Title: Type the title of the news hub in the "Title" input field.
- Set the Number of Posts:
Choose the maximum number of posts to display in the news hub using the "News Hub Max Posts" range slider.
Choose the number of posts to load at a time using the "Posts Per Load" range slider.
- Customize the Suggested Posts:
Type the title of the suggested posts section in the "Suggested Posts Title" input field.
Choose the maximum number of suggested posts to display using the "Suggested Max Posts" range slider.
Choose the time to display suggested posts from the "Post Display Time (seconds)" range slider.
Toggle the display of suggested posts using the "Display Suggested Posts" checkbox. If you don't want to show then turn off.
Finally click the save icon in the top right corner.
