Optimistic Blog A html template for Multipurpose Blog.

Introduction


Optimistic Blog is html template it is for Multipurpose Blog like ( fashion blog, lifestyle blog, review blog, travel blog etc ). Optimistic Blog HTML is responsive and compitable with modern browesrs. It is build on the top of bootstrap 3.7.

The below documentation guide a beginner to develop your blog website.

Whats inside the folder you created ?


Before you start to edit on the file first you should know about the folder components

image

Below the image, folders are maintained as per the content of the site. Here there are different html pages for the site plus, different folders naming css, fonts, images, js.

The folders like fonts, images and js are the folder where you keep your required fonts, images for the site and .js files needed to your project. For now we have kept all the needed fonts and js file for the site. And for images you can have the images as per your need. Remember the image size shall be according the given size.

This HTML was template was done using SASS for CSS and gulp to bundle js. If you have and idea of sass and gulp you can go ahead and start using that. Please check SRC folder inside assets folder for sass source file and js files.

how to use Our HTML Template ?


For the html integration you can simply edit on .html file. Like for example index.html, you can re-order the sections up and down, and you have a flexibility on re-ordering the sections.

img

Section edit


Section : Recent Posts or General posts

Here in this section you can have your recent posts or general posts.

image

Below is the attached file which will demonstrate you to edit this recent posts section and by default your recent posts will have 5 recent posts. This section do have 5 different posts ( regular standard post, gallery post, audio post, video post & link post ) and we will help you to understand you the post formate.

image

This is example for the general post / standard post. This demonstrate will help you to chnage the image, post title, post desc, post author name & post comment count.

As, we told before this blog contains of five post formate. You can change the post details accordingly. For youtube video and sound cloud audio you can have a iframe and simply paste that to the featured image div.

Section : Instagram Feeds ( above footer section )

This optimistic blog HTML template has a build-in instafeed. You donot need to use any other external plugin or do some programming. We will demonstrte you to get your instafeed running.

Instagram Feed in optimistic blog was possible with Jquery plugin. We will help you to get your instafeed feed in your blog home page in some minutes.

image

Please navigation to the following folder to edit the instafeed crediantials. All you need to have is access token and userid.

  • image
  • 1. Navigate to assets folder.

  • 2. Navigate to assets dist folder.

  • 3. Open js folder.

  • 3. Open custom.js file in your text editor.

  • image

To find your user id [ Go to this website and enter your instagram username. ] & to find your access token [ Go to this website ]. After you generate you userid and accesstoken simply copy paste that to the custom.js file as shown in above demonstration. Save the file and refresh your blog website.

Section : Right Sidebar

This is aside section on the right side of the optimistic blog html and is repeted almost in all the layouts of optimistic blog html

image

Actually, all the sidebar items like category, recent posts, social, popular posts are under widget div tag you can find the markup and change them accordingly.