Everyday duas to pray as a Muslim

This post shows makes a custom post including sidebar table of content, image, audio, video, twitter posts, and option for comments, and related posts.

1. SIDEBAR TABLE OF CONTENTS

Side bar table of content is based on ‘#’ or ‘##’ etc used for heading, sub-heading, …. etc. Let’s see how that works out!

Sidebar table of contents - subheading

Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.

Sidebar table of contents - Customizing Your Table of Contents

If you want to learn more about how to customize the table of contents of your sidebar, you can check the bootstrap-toc documentation. Notice that you can even customize the text of the heading that will be displayed on the sidebar.

2. ADDING VIDEO FILES

This is an example post with videos.

local video files

embedding videos from different sources

3. ADDING AUDIO FILES - from local and external link

4. ADDING IMAGE FILES

This is an example post with image galleries.

Normal images

Zoomable images

Just add data-zoomable to <img> tags to make zoomable.

5. ADD TWITTER POSTS

A sample blog page that demonstrates the inclusion of Tweets/Timelines/etc. For more details on using the plugin visit: jekyll-twitter-plugin

Add Tweets

An example of displaying a tweet:

Add Twitter Timeline

An example of pulling from a timeline:

6. ADDING CODES

This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting. It supports more than 100 languages.

Basic markdown code

This example is in C++. All you have to do is wrap your code in markdown code tags:

```c++
code code code
```

For instance:

int main(int argc, char const \*argv[])
{
    string myString;

    cout << "input a string: ";
    getline(cin, myString);
    int length = myString.length();

    char charArray = new char * [length];

    charArray = myString;
    for(int i = 0; i < length; ++i){
        cout << charArray[i] << " ";
    }

    return 0;
}

Show line numbers for the code also

If you want to display line numbers for a specific code block, all you have to do is wrap your code in a liquid tag:

{% highlight c++ linenos %}
code code code
{% endhighlight %}

The keyword linenos triggers display of line numbers. Produces something like this:

For instance:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
int main(int argc, char const \*argv[])
{
    string myString;

    cout << "input a string: ";
    getline(cin, myString);
    int length = myString.length();

    char charArray = new char * [length];

    charArray = myString;
    for(int i = 0; i < length; ++i){
        cout << charArray[i] << " ";
    }

    return 0;
}