Thursday, April 21, 2011

How To Publish A Code With Color and Scroll Style to Blogger/Blogspot/Wordpress/Tumblr

STEP 1. Go to your > Dashboard > Design > Edit HTML

STEP 2. Long press Ctrl + letter f on your keyboard in order to appear the search box at the top of your toolbar

STEP 3. Search for this ]]></b:skin> and copy-paste the following code at the top or right before and SAVE TEMPLATE

.code {

background:#e1ffab;
background-image:none;
background-repeat:no-repeat;
border: solid #87aac9;
border-width: 1px 1px 1px 20px;
color: #87aac9;
font: 14px 'Courier New', Courier, monospace;
line-height: 16px;

margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 28px 10px 10px; width: 90%;
}
.code: hover {
background: #FAFAFA; background-image:none;
background-repeat:no-repeat;
}

STEP 4. Go to your Dashboard and create new post > click Edit HTML beside compose

STEP 5.
<div class="code">
 YOUR CODE HERE (code you want to post with scroll style)
</div>
  
 SAMPLE SCROLL STYLE POST:

.code {


THIS IS
ONLY
A TEST
CODE
YOUR PUBLISH
CODE WILL

LOOK LIKE
THIS WITH
SCROLLER
STYLE
GET IT?
}
.code: hover {
background: #FAFAFA; background-image:none;
background-repeat:no-repeat;
}


NOTE: You Can Also Change The Font Style, Color, Background Color, Width, Height depends how you will find it.

I HOPE YOU FIND THIS HELPFUL, PLS LIKE, RETWEET AND SUBSCRIBE TO RSSfeed THANKS YOU!!!

No comments:

Related Posts Plugin for WordPress, Blogger...