Blockquote CSS Examples With Auto Number List –The Notebook Diary!

According-To-MR-MBT I shared a tutorial yesterday on 14 amazing ways to stylize Blogger Blockquote and today I have a really interesting and exceptional blockquote for those who write tutorial based articles on their blogs and websites. I have created two blockquotes, the first one has no number list while the second one comes with automatic number list and looks like your notebook diary. The number list starts at #1 and end at #112. Both of these blockquotes can easily be customized to suit your web layout.

 

So let’s have a look at each one of them first.

Blockquote With Auto Number List:

notebook-with-numbers

Blockquote Without Number List:

notebook-without-numbers

Liked the difference? Now let’s learn how to add each one of them to your Blogger Blogs.

Adding Blockquote With Auto Number List To Blogger

To add this blockquote to blogger, follow the simple steps below,

    1. Go to Blogger > Layout > Edit HTML
    2. Backup your template
    3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,
      .post-body blockquote { line-height:1.3em; }
      OR
      .post blockquote{ bla bla bla}
      If you couldn’t find such code then it is OK.
    4. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code below,

blockquote {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxMQsDWtrzdfrXvd9_nCQ7I8NMeCCQdIGbdOlENPjryUHjBB5C2cyvCqOtvnzPQpLv5x87FGYzlbnruIf-eZxNKEELqzbaMXJ4ROna_pa6yqJpEmn9ohxuNWbw2R2n9NOp3I0G1CigrkM/s1600/notebook-with-numbers.gif) repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 153%;
}
blockquote p {
margin: 0;
}

Customization:-

You can also change the Number list background by replacing the bolded image link in the code above with the image URLs of one of these blockquotes.

Tip:- Right Click the links below each blockquote and choose Save Link As Or Copy Link Location to its image URL.

notebook-brown Blockquote with Yellowish Number List & Dark Brown Background

notebook-green Blockquote with Greenish Number List & Dark Background

notebook-grey Blockquote with a soft touch

font :- It includes font style, size and type respectively. Match the colours with the code above for reference. Font style can be bold, normal , italic or bold italic

color :- This refers to text colour. You can use a different font colour using our color chart

Adding Blockquote With No Number List To Blogger

To add this blockquote simply follow the same steps as shared for the blockquote with auto number list. But for step#4 paste the code below instead,

blockquote {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-F6II2PfEhjC7hf59Xj_LeWlOzYVyD6r4tr_TeIW_LPkAQeTOwrJgpAi0z9af6JsY8MIPSfhM4JWNuocsGFWGEtZ4lbXRgrTe7ui7-KyAwDW5Grsi_PSj-2vd40Mm7U0WaOlWgbcD21Q/s400/notebook.gif) repeat-y ;
margin: 0 20px;
padding: 20px 20px 20px 55px;
color:#7A7A7A;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 155%
}
blockquote p {
margin: 0;
}

 

You can replace the Background Image link with one of these.

Tip:- Right Click any of the blockquote images below and choose Save Link As Or Copy Link Location to get its image URL. notebook-withoutbrown

notebook-withoutnavy

notebook-withoutpink 

That’s All!

Note:- If you want to increase the number range for the blockquote with auto number list or if you want to create an image with your custom colours than I can provide you the PDF source file for it. But it will be given to subscribers only. If you haven’t subscribed yet, kindly do so to avail unlimited download resources from us to you.

Let me know how was this new discovery :>>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

17 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. hi mohd this trick is so much old in blogger platform try use other unique tricks thatz other dont have and how to do i get html generator just like u

    ReplyDelete
  2. @Ahmed

    Bro It is not about old and new. It is about a simple CSS code that can be embedded in blogger layout to create a blockquote with such auto list. It has a great perfromance value. If you can find any such website out of billion blogs out there and find any such blockquote like the one above that uses only 4-5 lines code , than I will remove the post immediately.

    We post thinks after researching and never quote words unknowingly.

    As far as the html editor is concerened brother it is a copyrighted one and can only be given on purchase.

    ReplyDelete
  3. @AHMED


    AHMED WE HAVE OBSERVED THAT YOU HAVE COPY-PASTED ALL OUR COPYRIGHTED TUTORIALS IN YOUR BLOG WITH NO CREDITS ATTACHED. FURTHER YOU ARE USING OUR STYLIZED TEMPLATE WITH NO FOOTER CREDITS.

    WE URGE YOU TO IMMEDIATELY REMOVE ALL OUR CONTENT FROM YOUR BLOG FOR IT IS A COMPLETE VIOLATION OF OUR CREATIVE COMMONS ATTRIBUTION LICENSE.

    ELSE WE WILL BE FORCED TO CONTACT GOOGLE FOR AN URGENT SUSPENSION OF YOUR BLOGGER ACCOUNT.

    ReplyDelete
  4. Hi MOHD..
    OMG! I just had a look at Mr. Ahmed's blog...I was shocked to see all you materials there...this is ridiculous. I got confused for a while whether I'm on your blog or what!

    ReplyDelete
  5. @googy

    Unfortunately some people have pleasure in snatching someone's else credit. But Thanks To Allah we know how to deal them. If Ahmed didn't contacted me within 2 business days, we will cotact the blogger customer service board for an immediate action against his blogger account

    ReplyDelete
  6. sorry mr mohd u cant do any thing else coz if official member of google team so u acnt do any thing to my blog if u do so i ahve to take a step against ur blog ok so dont try to do any thing which harms us so i urge u to take a step back and leave us ok or else u have to pay what u what u doing

    ReplyDelete
  7. hey im working with google abt 5yrs and i deal in 25 blogs with 8 to 6 PR and this is my new site soon i will chage its looks u dont have to worry ok still im busy with my examz ok so cant change now ok u are quite intresting but u are still on our paltform of blogger if u agian do any thin so i will give a alert notice with ban of google ads + no sign up to this email ok this is my full and final warning

    ReplyDelete
  8. @AHMED

    AS A CIVILIZED BLOGGER I REQUESTED YOU TO REMOVE OUR COPYRIGHTED CONTENT FROM YOUR BLOG AND ATTACH FOOTER CREDITS ON OUR TEMPLATE THAT YOU ARE USING ON YOUR BLOG TUTZONE1.BLOGSPOT.COM. FOR IT IS A SHAMELESS ACT TO INFRINGE SOMEONE'S COPYRIGHTS.

    WE THOUGHT THAT YOU WILL CO-OPERATE AND REMOVE THE CONTENT FROM YOUR BLOG BUT UNFORTUNATELY YOU SOUNDED MORE CHILDISH AND IMMATURE THAN WE EXPECTED.

    YOUR LACK OF VERBAL EXPRESSION INDICATES WHERE YOU BELONG AND HOW MANY BLOGS YOU DEAL. WE RESPECT GOOGLE AND BELIEVE THAT THEY WILL NEVER MAKE A MISTAKE OF HIRING AN IMMATURE AND ARROGANT EMPLOYEE LIKE YOU.

    IT IS SAD TO KNOW HOW EASILY SOME PEOPLE PUT FORWARD BLIND AND FAKE STATEMENTS.

    WE HAVE ATTACHED SCREENSHOTS OF YOUR BLOG WITH OUR COPYRIGHTED CONTENT AND HAVE PROVED ENOUGH EVIDENCE TO BLOGGER EDITORIAL BOARD. THE POST MAIL WILL REACH THEIR OFFICE WITHIN 3-4 BUSINESS DAYS AND WE HOPE BLOGGER WILL TAKE ACTION AGAINST YOUR CURRENT BLOGGER ACCOUNT FOR BLOGGING IS NOT FOR ARROGANTS AND COPY-CATS.

    WE WASTED PRECIOUS TIME TALKING TO YOU.

    MOHD_____

    ReplyDelete
  9. Hi Mohd
    Just had a look at this guy Ahmeds blog and it is truly the work of one who is completely inept,indeed my 8 year old daughter could correct him in the use of the Queens english,I hope your actions wipe him off the Blogosphere forever,carry on the good work and many thanks for all your great ideas

    ReplyDelete
  10. hmmm...its a creativity too...
    nice

    ReplyDelete
  11. Hi - I am certainly happy to discover this. great job!

    ReplyDelete
  12. err, did you have the grey image color with no number list?

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. hey mohammad...
    hi your tricks helped me so much from first day of my blogging, I am not a computer professional but an mechanical Engineer and your posts helped me to design my blog
    "http://computer-geekforum.blogspot.com"

    I have some questions regarding the Google Ad sense, Because it is rejected and i cant figure out why. My Blog is new and having 15 posts.

    My other question is about "Hostgator"
    If i purchase same plan like you what i have to do to change my blog address to the one I choose on hostGator?

    Can I share your posts (But only those I used to improve my blog) with my readers, I ASHURE YOU TO GIVE ALL CREDIT TO "MBT" and confirm each time from you that i have given right credit or not. And if its violating something i am ready to REMOVE IT WITHIN TIME.

    SHARING IS CARING
    THANK YOU
    COMPUTER GEEK FORUM

    ReplyDelete
  15. i think this not autonumbering in blockquote, if you remove the link image so the number is not displaying. do you have any one another tricks for tag numbering in blockquote??
    i have any one the tricks by using pre tag or/and code, but isn't work..

    ReplyDelete
  16. hi dear i applied this widget to my blog which uses your template...slahuddin ayubi.....i removed all occurence of blockqoute and then performed all the actions as you mentioned but this did not worked..so i removed the code from above ]]> and pasted it on its original place....mean to say i removed the default blockqoute code and pasted yours on its place and now it is working fine but the numbered list page is not according to the data...please have a look please
    http://yeahgotit.blogspot.com/2014/05/blog-post.html

    ReplyDelete