Many Of The Bloggers Don't Know How To Highlight html Codes I There Blogs.So Today We are Going To Post How To Highlight Html Codes by Using Simple BlockQuote Trick
(Do You Don't Know How To Use Blockquote Click Here)
Step 1 : Find The Blockquote In Template
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML >> Search For .post blockquote (Want help to find Click Here)
You Will Find A Code Similar To This..
.post blockquote{
--------------------
--------------------
}
.post blockquote p{
---------------------
---------------------
}
.post blockquote:hover {
---------------------------
-------------------------
}
Step 2 : Then Replace the Above Codes Given Below in Step 4
Step 3 : If You Don't Find The Code Then Simply Follow Below Steps
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML >> Search For ]]></b:skin> (Want help to find Click Here)
- Now Paste The Following code Above/Before ]]></b:skin>
Step 4 :
.post blockquote {
background: hsla(0, 4%, 95%, 0.34) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAbwOJNDqQtgLQ-qVM7O2GQhP-DYgvA0DLRlSkzqMtP4jGQsDCI8E0_4bJS-BWfUv8xA9KLNAn_N1ipbkc71oHxDk7_ZbTsDNkCJJ-a_3gUmwiTP0eur_fjz7YMtbthwhMPwQMs2tFYo/s1600/blockquote.png) no-repeat bottom center;
margin: 20px;
padding: 10px 20px 40px 20px;
border: 1px solid #ddd;
font-size: 0.9em;
word-wrap: break-word;
overflow: hidden;
-webkit-box-shadow: 0 0 5px 5px hsla(0, 0%, 50%, 0.13);
-moz-box-shadow: 0 0 5px 5px hsla(0, 0%, 50%, 0.13);
box-shadow: 0 0 5px 5px hsla(0, 0%, 50%, 0.13);
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.post-body blockquote {
line-height: 1.3em;
}
Customization :
- Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAbwOJNDqQtgLQ-qVM7O2GQhP-DYgvA0DLRlSkzqMtP4jGQsDCI8E0_4bJS-BWfUv8xA9KLNAn_N1ipbkc71oHxDk7_ZbTsDNkCJJ-a_3gUmwiTP0eur_fjz7YMtbthwhMPwQMs2tFYo/s1600/blockquote.png With Your Image.
- Now Save The Template
- Go To Your Blog And Check,if you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.
0 comments:
Post a Comment