Every Blogger wants new features.
I will share a new Scroll Box with light bulb ' I am sharing this shortly . 
OK lest start
- First go to Blogger > Design > Edit HTML
- Now Search for the tag ]]></b:skin>
- Copy and paste below code just above/before ]]></b:skin> tag.
.code1 {
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpHwHntTUrg9nle25nUZVgM9bnNmBzG_eH6YsrZpkOI_kmJ4pBa2nBij8elRyRJQTlH4g7_MJ1e14LAY7yiFmGLWwT47mdqFNJPW7-TSqjP_4bIPCbIpehDEXWOd5PcnEkS-dbVaZM5Yd7/s320/btsnts-show-codes1.jpg) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfH8_8E2FM_ZjVZxtVesg_6CLcoGLk1_ST1ByiZtqWmB6FMN5M3C0rmVQccra1WHYLhEd_Z3uGzAItSWOW015SauWv8uz6HCXvW_Z34h_E5uxnM_22PtPzqAKBIaF5Z72Jv1IQQHK_BTVY/s1600/btsnts-show-codes2.jpg) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
How Will You show it In your Blog Post ?
In New Post,
You have to paste this code in html mode.<div class="code1">Write Your Code Here </div>
If you Still having problems then leave a comment below
0 comments:
Post a Comment