Expandable Section in your Post on Blogger - H&L Show

أخر ألاخبار

Post Top Ad

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

الاثنين، 24 سبتمبر 2018

Expandable Section in your Post on Blogger


Before you proceed to the tutorial, check this demo :
Expandable Section Demo

Let's start

This tutorial requires you to work with codes, here work means just copying-pasting and editing some parts of the code. So it will be easier for you to work if you open a plain text editor like Notepad.


     step 01

Including the jQuery Library

This step is optional, you might not need to perform this step if your template already has a jQuery library included. If you are using a custom designed template, as your web dev. if they've already added it. If not you may continue with the steps

  1. Go to your Blogger Dashboard -> Template -> Edit HTML
  2. When inside the code box press CTRL+F to open a search box
  3. Search for </head> in the template
  4. Once you find it in the template, paste the following code immediately above </head>
    ?
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    That is how you add jQuery to your blog.
    Always remember to add the jQuery script code above any script (including the one I am going to provide for this widget) in the template depends on jQuer
   Step 02

JavaScript/jQuery Code

The first thing you will add in the template to make our expandable section work is the code that handles it hiding and showing. It's a small jQuery dependent JavaScript code. Following is the code you need :


<script type='text/javascript'>
$(document).ready(function(){
  $(".sh-section-btn").on("click",function(){
    $(this).parent().children(".h-section-cont").slideToggle(200);
  });
});
</script>


The code above simply tells the browser to show hidden content if the "show" button is clicked, and if the content box is already visible it simply hides.


To apply this code go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F to find </body> and paste the JavaScript code immediately above/before it and save.



Step 03

Adding the CSS

The event handling part is done. Now let's style our expendable box so that it looks good and the reader notices it.  Here's the CSS that styles the complete box. 


/* Expandable Box CSS */
.hidden-section-container {
  background-color:rgba(187, 187, 187, 0.93);
  box-shadow:0 2px 10px rgba(0,0,0,0.2);
}
.sh-section-btn {
  font-size:18px;
  color:#fff;
  text-shadow:1px 1px 0px rgba(0,0,0,0.2);
  padding:5px 10px;
  cursor:pointer;
}
.h-section-cont {
 padding:10px 10px;
 background-color:#eee;
 display:none;

}

If you aren't sure how to add this CSS to your Blog, check this : 
adding CSS in blogger.

How to add CSS to your blogger blog

Using Add CSS in Template Designer

  1. Go to your Blogger dashboard at http://www.blogger.com/home
  2. Now select the blog from the list (if you have multiple) and go the its "Theme" section on the left pane.
  3. In the Theme section, click on the button that says "Customize" and you will be taken to the Template Designer page
  4. Select the Advance tab from the list of options on left pane and from the sub-menu list select Add CSS, it's at very bottom
  5. Now in right pane, there will be an input area where you can paste your CSS styles

You don't need to add the HTML elements such as <style type="text/css"></style> , we can paste the CSS styles directly. Adding those elements may result in error.


Adding it using the HTML Template Editor

  1. Go to your blogger dashboard at blogger.com/home 
  2. And from drop-down menu of the blog select Theme

  3. After going to Template menu, click on Edit HTML button to open the template code editor on the page

  4. Now using the default find-on-page function (by default CTRL+F ) and find </head> and paste your CSS code (inside <style>) and paste it above </head>. Do remember to include the first and last line in the following code around your CSS rule when adding it above the closing </head> tag d
1
2
3
4
5
6
7
8
9
<style type="text/css">
/* This is a comment, and follow is a CSS rule */
body
{
color:#999;
background-color:whiteSmoke;
font-family:"Georgia", Helvetica, sans-serif;
}
</style>

The CSS styles are just for example.

Step 04

HTML for the box

After we've got the two main things for this box we can now actually use it in our blog posts. Using it is simple. The HTML for box may contain your text or any other content you want inside it. But before we add the content let's see what's the basic HTML for this box.


<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
     
     <p>All your content here</p>
     
    <!-- All your text/html above this -->
  </div>
</div>

You don't need to make much changes to this. All you need to change is the title and the content. Let's see how you will do it :
  1. Title Text - This is the text that will appear as the title of that expandable box. See the second line of the code. Change the text "Show" to anything you want as the title.
  2. Content - After the line 4 you can add anything possible with HTML inside the hidden box. Add text, images, links etc. using its HTML markup.
Once your HTML for the expandable box is ready you are all set to put it in your post body. But you can't simply paste HTML code in your post editor. In order to prevent the HTML from being shown just as plain text you will first need to switch to the HTML mode in the post editor. 


ليست هناك تعليقات:

إرسال تعليق

الاثنين، 24 سبتمبر 2018

Expandable Section in your Post on Blogger


Before you proceed to the tutorial, check this demo :
Expandable Section Demo

Let's start

This tutorial requires you to work with codes, here work means just copying-pasting and editing some parts of the code. So it will be easier for you to work if you open a plain text editor like Notepad.


     step 01

Including the jQuery Library

This step is optional, you might not need to perform this step if your template already has a jQuery library included. If you are using a custom designed template, as your web dev. if they've already added it. If not you may continue with the steps

  1. Go to your Blogger Dashboard -> Template -> Edit HTML
  2. When inside the code box press CTRL+F to open a search box
  3. Search for </head> in the template
  4. Once you find it in the template, paste the following code immediately above </head>
    ?
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    That is how you add jQuery to your blog.
    Always remember to add the jQuery script code above any script (including the one I am going to provide for this widget) in the template depends on jQuer
   Step 02

JavaScript/jQuery Code

The first thing you will add in the template to make our expandable section work is the code that handles it hiding and showing. It's a small jQuery dependent JavaScript code. Following is the code you need :


<script type='text/javascript'>
$(document).ready(function(){
  $(".sh-section-btn").on("click",function(){
    $(this).parent().children(".h-section-cont").slideToggle(200);
  });
});
</script>


The code above simply tells the browser to show hidden content if the "show" button is clicked, and if the content box is already visible it simply hides.


To apply this code go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F to find </body> and paste the JavaScript code immediately above/before it and save.



Step 03

Adding the CSS

The event handling part is done. Now let's style our expendable box so that it looks good and the reader notices it.  Here's the CSS that styles the complete box. 


/* Expandable Box CSS */
.hidden-section-container {
  background-color:rgba(187, 187, 187, 0.93);
  box-shadow:0 2px 10px rgba(0,0,0,0.2);
}
.sh-section-btn {
  font-size:18px;
  color:#fff;
  text-shadow:1px 1px 0px rgba(0,0,0,0.2);
  padding:5px 10px;
  cursor:pointer;
}
.h-section-cont {
 padding:10px 10px;
 background-color:#eee;
 display:none;

}

If you aren't sure how to add this CSS to your Blog, check this : 
adding CSS in blogger.

How to add CSS to your blogger blog

Using Add CSS in Template Designer

  1. Go to your Blogger dashboard at http://www.blogger.com/home
  2. Now select the blog from the list (if you have multiple) and go the its "Theme" section on the left pane.
  3. In the Theme section, click on the button that says "Customize" and you will be taken to the Template Designer page
  4. Select the Advance tab from the list of options on left pane and from the sub-menu list select Add CSS, it's at very bottom
  5. Now in right pane, there will be an input area where you can paste your CSS styles

You don't need to add the HTML elements such as <style type="text/css"></style> , we can paste the CSS styles directly. Adding those elements may result in error.


Adding it using the HTML Template Editor

  1. Go to your blogger dashboard at blogger.com/home 
  2. And from drop-down menu of the blog select Theme

  3. After going to Template menu, click on Edit HTML button to open the template code editor on the page

  4. Now using the default find-on-page function (by default CTRL+F ) and find </head> and paste your CSS code (inside <style>) and paste it above </head>. Do remember to include the first and last line in the following code around your CSS rule when adding it above the closing </head> tag d
1
2
3
4
5
6
7
8
9
<style type="text/css">
/* This is a comment, and follow is a CSS rule */
body
{
color:#999;
background-color:whiteSmoke;
font-family:"Georgia", Helvetica, sans-serif;
}
</style>

The CSS styles are just for example.

Step 04

HTML for the box

After we've got the two main things for this box we can now actually use it in our blog posts. Using it is simple. The HTML for box may contain your text or any other content you want inside it. But before we add the content let's see what's the basic HTML for this box.


<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
     
     <p>All your content here</p>
     
    <!-- All your text/html above this -->
  </div>
</div>

You don't need to make much changes to this. All you need to change is the title and the content. Let's see how you will do it :
  1. Title Text - This is the text that will appear as the title of that expandable box. See the second line of the code. Change the text "Show" to anything you want as the title.
  2. Content - After the line 4 you can add anything possible with HTML inside the hidden box. Add text, images, links etc. using its HTML markup.
Once your HTML for the expandable box is ready you are all set to put it in your post body. But you can't simply paste HTML code in your post editor. In order to prevent the HTML from being shown just as plain text you will first need to switch to the HTML mode in the post editor. 


ليست هناك تعليقات:

إرسال تعليق