How To Add Seperator In Blog Posts In Blogger



STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:


.post
this is the cs part that controls your post layout and style, it must contains few css properties like the following.


.post {
margin: 0 0 40px 0;
width: 90%
}

Now we want to add the separator css properties between the opening and closing tags, { and }
Here is the separator css properties :

background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;


And here is what you need to change in above code to customize it to your blog.
Separator-Image-Url
Change it to the separator image url,
2.5
If you found that the separator displayed behind part of your post latest line, increase this number, for example to 3.5 Or 4.5.
Now your final code should looks Like The following one.


.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}


Free Separator Images
Now Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwIYT0uiXnPgKbgR2uuMsdseJABophWwOGt3BLticOL34hESsmIyk4xomOGWiEfrjoMgPtqFiHx8D8O_W9URAZ_DrRZHa1XhptuC2TruADGZYbjcuZTc_iS6ytDL1wX5f3s_sxUaP-v2sG/s1600/barsnake.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhXlxDl4z8RMN8O1RVU4jH4pFUxMW9JSRLrZ_h9Q-RvFhIWBiendxOqH5x94O9FjM5ZCPTKgXxzCzWpSaYFtk4fLH3K-dxbQSd66X_tJ4UxYRJdYFe3vYFogLQvdkG709RD_srTJbBri4/s1600/bar54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Qn1tf7PfzVeABl-TAkLeZmZXX6o3NnrSdlkhy1r9O_9PwxtLygYLNoinWtvmGawIGz-9EbWWFXGysG-05c_4vC9OUEKZiKcwgDNIBcKKZBKPimTdSjP2ZrgGdbOmjL_NQhGgqJlDnVfw/s1600/bar48.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh36RlQ9z_N6hvjLqHJYB0_Dr60hKM-4bifIgbA1tE21EutBY4gtEEVQz9LGe8rPfRQOokegHU6hyphenhyphenCouoTVZVKlgPw_KKhlfKdNfeNnHJtVB17clHskrZPsIdUxqYrob4PtBcgbZu_cTsHU/s1600/bar47.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHmpn8QgZFYKBEuyvvGaR1sean-HUPDPzh6KSIejuMXGw_yWhH-0XmUbRTXRCxruUuBhjb5dHrt3BudpnBR9z7UVC4V-wVzU1IB9jgEdZ7YQ1mEcoQALw9AjVLzkeyRAZbzDBBCalfvV9U/s1600/astarl7s.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiiCDHLA5wsCZGmC-AiivD16LKKswbKpt710VcD1hZCIfsYqCpZ7Z3P9Gdyin4pMTuVhERC_JiX-nFXzp3BYQC_y3z4TKBS3cO1OPceUTHp0YbaExmvItUNLwUsfhaSmi6A8VEnFqdzwLW/s1600/dividers_129.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj25Wtlnb0PfByp2AFn52s3KXAdeWv2RWE3t9XAGxoTf41UN4wg6B5TFVr3GZ6OuCc521gLqPFBWxUL-_m_WVOGfZgMpIge_Ws0DklrgG6yVLEBg-Gx9Es-vjJlE8oiBJqro0lILuHJpMA7/s1600/dividers_96.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYv4W9WjhExGDzcC_t_dA9-Q5gAtAFkEA3bhZjboJjVZXZbpbmHi_9eCn-N1RzVvC6iz7U03gDxcTyEZ_KLwrH_1sqGNEE7df2d4LU1pbywvHJ-B_0bwIxNckozL9C6wBtmjqUE5Z8FHWF/s1600/clipart-heart-border.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PuU5XEiIr0-pckvLVb7yw46DprFUTYeQtoZ-oMqo69NwrdvwiYEWpX2WA_ujmPcCUhmRydRzNtp7ak1NVO-CX0QT5iW2e2nnsyukbtZzrw1B2IAXNrDCHPtmSdfRk2CrNhNF52UmoF_A/s1600/chain.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWgieV_lr97McMfLrtptGDnpvNZKjIZTDSL5EfkUYrd36diRoV0PQEqWV0QckxaOA3-X20Sudy_8kcXWmGx0HnFMKBiWL8LDwxj20Rt7EtMgcJ34Y4qP4hiFJc40bXkrK_9-f5fLK8ySwl/s1600/bloodrose.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDVhsIPIBKA1zUKL8VLrH16JPp-2h2cWFJ3WvmVN6vafEQFH71eZ9AM259XGoqunYoQGntbXmKpf9Vye0wDYGNt_5D6_a8Zu62swnxwHCxcBGIZiOHfrlntxKaCexv4RLwYx8-m8r5KDy/s1600/stonebar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2o_3-WXsjiT1CvOXC1Sx7k9hrlb1WV4o1ci5r6x9hQoOEH2IdwtMvtJ8hWCzGd8z-ot3OuseG7ypXy6b6p7gh1ejChlKu1Z0THGH6NRj9znKac9Vn0wZxTtrpImdJbolhgyFGYWZAd5OB/s1600/resfiles_sdfp.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4DPE3Q5OyeYGodtEm5qSOjUqZ78FNp156S7lmSpiWRL0vA5q-oHGHc2jezBvwAYFzqQth3DMWjTauhQJk9XTewi7jK7LGEuv7dPzlbATBue6oXMXiQfDsYORVTl5xOCd5R_NsH6dMGei6/s1600/resfileszcp.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD22JPfmxeYc7oZW1vnoF83psi1R6Oua9TnziD3blgr-aa2M_DMrXTvFgrvzafUb6TMxtVbGgUZkBUYMJC9SDmPW7KhQpKSKp1TvzueBdOxBIHOd7uf78ydB_vMd1g9WkmoINiofd0Ry8x/s1600/resfiles_output.php.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnfmiqdM4glq5Ebu8TOWg6rWZyUcK53fZwH6hdfsFuxRzbalxOYLuJMnpUGzdi5sUxSKnwDZGzxPFMtnYOj__exmbOQcEWWnpVb9MhszDPhfw8kvHfimTKH-1rrSsA4k9yIbdnzY1gvrr/s1600/pumpkin-border-hth.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLFIPq9YFBwgck6vFpVWWkx9ar-nhWWIA9nSOE_m5aGDl2ONi62WUydoV0Z9huTI_p0GU-QYb_Fyz8_I2AA_bCtedHcCbE-1iqkNZbYvZK0uEl9VdKUOkLOqyk57p_TsFrbPcoq3SzoD_A/s1600/irish-border4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmqZCn1nSuaJYO6oko6M-PnW29d8mSMzgv0LVWhUKYs8Mj-AqkSynAg7j38RTcdwn9dz0pcqcZluSmNGqTzob33wJyP3k7sS3RK_LpBemlh3cwRYXGrdylthlSVd8rPtz9-1FVk4QjIz5S/s1600/ivy.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYOT9PR7K0ZXLKfR6t5wKQCjSG1H6oR4Zwg7gBzix3nvIOybwPDXOoWyzSsgAByFBNTot3XlHlypXeRCpwfG0GRYHvqBnrYz3A9_Yjd80Cjvr7oGOKir4NuBkiI5Rs71vvxkwCDDcHUl9S/s1600/irish-border1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEklGibJRM4P5pg6KoCS4C47iJ1qbbv_6xruJ53dRiTxv64QhvuiUMrJcsL5ECyesorQx1A_RI8kbegvTWFBpBkz5y8cFr81fMtvQ3OzkBni7yKyTJXUtbj69wOkSp9qfTQa6Ax3OP5M5I/s1600/frog54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwK5n6uHV1jfOp7zKvwYxBWCESh8WK_wjfb-ms-fty-fOnx2fRSwq-oy0XoZbvgliP2494wzt6FWJHxWjzZC8TFD7BGnshJR1Mjm5oGzOAX1p-S86z69l_wb7OeqSi6sdh61A0GSwykecY/s1600/flowerbar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrBPna_HfGLcE0wS7LPTi9yzG_LGOP_B3o871-xtUYNxix-RRA6RI8f2YV3_d9UwPBrFP7GAd1hyTkB1w0GT5z7bo0ZwtPhTjgS0cZBO2WyixE3fbrklei18zBiTJhLi5U4xDHSmdX4_W/s1600/drawing-separator.gif

How to Create Show or Hide Links for Posts on Blogger




1. Login to Blogger, Chose "Layout --> Template --> Edit HTML
2. Click "Download Full Templates" link to back up your template.
3. Check on the "Expand Template Wdiget" Check Box.
4. Copy the code below and paste above this code </head>

<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>
5. Then find this code <div class='post-header-line-1'/> .
6. If You found it you will see a code like this:

<div class='post-body entry-content'>or
<div class='post body'>


7. The next step is change or replace the code (Only Number 6 code) to be like this:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

8. Under it you will see a code like this <p><data:post.body/></p>
9. Put the code below under it.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
10. So, the full code will like this :

<div class='post-header-line-1'/> 
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
11. Save Your Editing.
12. Go to menu "Setting --> Formatting"
13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box

<span id="fullpost">


</span>
14. Save your setting.
15 If you want to post an articel place your part articel above this code <span id="fullpost">. Then the remain or full post put between this code <span id="fullpost"> and this </span>