|
|
At this time I will share tips about how to make scrollbox on a blog.We can use scrollbox to load a long URL link or we can also load a long paragraph or a lot of image or any contents that we want in a single page.Actually the benefits of scrollbox are many but here we will discuss how its application in a blog provided by blogger.Placement of scrollbox can be on the blog posting, or sidebar or footer.The way to create scrollbox is like this:
*Code needed to make scrollbox is below:
*Example if we want to load the image that we want something like this:
<div style="width: 400px; height: 400px; background-color: b3b3n3; color: cc0000; font-family: verdana; font-size: 12px; text-align: left; border: 1px solid 0000ff; overflow: auto; padding: 4px;"><br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuAkiEFHhbZK3_30Fax1MMq2N5M7FmWxD5XIOhjioxhNNpQ5PKDd_gFAtDoVL_lAWYav6eE3AK2iPBxIcL4xSPgMwU0_mlKfvpVzkMY2xB8G17UYhOrk75DICufsldwlf9kmjmzpvRdyPB/" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1gCHpz2H_7lSmegYXRvcPmw3rKGuTN0ZCXqWlTtAxSmrEhs-ykZprgJwTuuKM6QEdsbQrqLUjyg9a4hjyisnYK2WVrtW5e0Ubx-1vUphFIqsBczeFnvBCyvNGZpMT-f-8QzbqJk0vBgXw/"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAqjiOYeWkxxIkhvXJmwTFhTXJmghB5rxpz-e23GsxYPk5jEgG_C-xRvfph6KDT9cVzXYYfuQhU6iIKpA2okxws1lOQOT6Qm80kexDw7uw_Cpp4dnOUSl4SHaJfWX0e3dVGwuTO0ovfR7Z/" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5P3yULLLyBdVrx8fAjIntTzy8fIlK66YFe5kwG_u5srFaeW66tfkgU47KcJNjMGrs7QIhbMp_iRW074ZaE7DnoZf3LzEMO-fUqZvwXi481-Wt_50vTHvL0SkbFzxow49RGbZE0SAcvY4/" /></div>
*And the result will be like this on a blog:
*Code needed to make scrollbox is below:
<div style="width: 400px; height: 400px; background-color: b3b3n3; color: cc0000; font-family: verdana; font-size: 12px; text-align: left; border: 1px solid 0000ff; overflow: auto; padding: 4px;"><br/>image1<br/>image2<br/>image3<br/> image4</div>
*Example if we want to load the image that we want something like this:
<div style="width: 400px; height: 400px; background-color: b3b3n3; color: cc0000; font-family: verdana; font-size: 12px; text-align: left; border: 1px solid 0000ff; overflow: auto; padding: 4px;"><br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuAkiEFHhbZK3_30Fax1MMq2N5M7FmWxD5XIOhjioxhNNpQ5PKDd_gFAtDoVL_lAWYav6eE3AK2iPBxIcL4xSPgMwU0_mlKfvpVzkMY2xB8G17UYhOrk75DICufsldwlf9kmjmzpvRdyPB/" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1gCHpz2H_7lSmegYXRvcPmw3rKGuTN0ZCXqWlTtAxSmrEhs-ykZprgJwTuuKM6QEdsbQrqLUjyg9a4hjyisnYK2WVrtW5e0Ubx-1vUphFIqsBczeFnvBCyvNGZpMT-f-8QzbqJk0vBgXw/"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAqjiOYeWkxxIkhvXJmwTFhTXJmghB5rxpz-e23GsxYPk5jEgG_C-xRvfph6KDT9cVzXYYfuQhU6iIKpA2okxws1lOQOT6Qm80kexDw7uw_Cpp4dnOUSl4SHaJfWX0e3dVGwuTO0ovfR7Z/" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5P3yULLLyBdVrx8fAjIntTzy8fIlK66YFe5kwG_u5srFaeW66tfkgU47KcJNjMGrs7QIhbMp_iRW074ZaE7DnoZf3LzEMO-fUqZvwXi481-Wt_50vTHvL0SkbFzxow49RGbZE0SAcvY4/" /></div>
*And the result will be like this on a blog:
*And to load another contents that we want on scrollbox, we only need to change the image source code with the contents that we want.
Posts
No comments:
Post a Comment