Adding Background Image in Blogger "Read More"
Step 2. Now we will just make some changes on the code that you have you put in replacement of the code "<data:post.body>" in step no. 7 in that previous tutorial.
The original code is:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
<a expr:href='data:post.url'> <div class='readmore' style='float: right;'>
</div></a>
</b:if>
</b:if>
Step 4. To add the CSS code, look for the tag ]]></b:skin> and just above it paste the code below:
.readmore {background: url("Select image url below") no-repeat scroll 0% 0% transparent;width: 120px;height: 36px;top: 88px;left: -7px;position: relative;
}
Customization:
- You can change the background url (in red bold texts) with your own image url.
- Adjust the margin of the image by increasing and decreasing the numerical value in top attribute (in orange color). High value will put the image on a higher position and lower value will put the image in lower position respectively.
- Adjust the horizontal position of the image by customizing the numerical value (in light blue color). Higher value will place the image more in the right position while lowering the value will put it more in the left position.
- You can use some of my images url below:
Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbPhFhIK9pN1ExtFj7qeD6TW5xye7cVqLQ6RF0gCbogVa1ZdQ6uwEjf6Wxr_mC-Zdmdc7w2tp1z8WVQtk2G6KBvDD_NKgDEv7ammPN5Jt6gPTQHae7P1wlIyK3-vla4ujBbnZkswXI6Hk/130/readmore+background.jpg
Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_jTNUtsVCivwdmZiPw-dk29KjVPgXNrLdo4wZQ2xWnXbtzUajyrqVY-9EvvqH8JNxYTuWHEtvtx7YfSKNiUsKJgUl4AaMPjCxuJ079NKS0qLY44kQihOVWYTMLI9NiAFenfMtVvcRZ8/1600/read+more+background451.jpg
Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWGvpzDo53XSc40j346gN__FdeTjx4fgm28tBCyEw5SbrfIxsWiSWitbIXf-8R1U5SL3k23yJlblirNQePcCuO7Sb2Z6xpRAlzb7RQ1VzKm93dMs52jge-C9IFXtEQ1QsnG5nRezN754/1600/read+more+background1.jpg
Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcBu4pFH0qFaP8QhIKh1PRtRN35nNkkbFqkBLyrPfe6_oy-T2z50nXQneP5pvMnhhuNQG84MTzOIA_HWHC-4MChba-gjOZIek-pBKyTFFi2x_cP_hvthUMZ-fjWoTScorTY8sayxo4ss/1600/read+more+background3.jpg
Image URl - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzSyTua_BDx5V7gPU_dNiYszB7_c74-fW3LsdQiNgeCDR0ugEGte6udPxDpYGfRekQRELPrxK9xkaEJeSrjZ-Fy6WkH4Ako7NcL8UMxmGPyeQuD4ELOLFRqw7TN6OKkMhSyOywZvq2VAk/1600/read+more+background+1a.png
Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoFUP2AwXLQkTd-b_mQHtJeRISoPc9Cu46Wde0KYxFXn2bBxAVDNJSY4GRboZpXRsUl_O3dPnl-pTKSWnxFDty017oHWqNcn62lgirurwks41ZzWjT8vhXba92w2cP-zl5_CKbFGlxihM/1600/read+more+background10.jpg
Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEbvrxGMdPhXqdtoSn4VL7b6KbBaioii5uQLnn_tNaDoAYh8jZJQXnT8SKG1jl_6MCbD2BGRD0z3ml8oSYxo2i6NLmYUgIBl1IhvfrRj5K3_Q8hTKfAryNT-Wgj4FGUs4HGwQzheh-NI/1600/read+more+background9.jpg
- You can change the size of the above images by changing the red bold number. Higher value will increase the image size and lower value will also decreases the size of the image.
Step 5. Save your Template.
Take care and Enjoy!
