Friday, October 18, 2013

Best Blockquotes for Blogger

Here below are the best blockquotes for Blogger Blogs that I have seen. Blockquotes are very important for Blogs especially for codes dedicated blogs. This blockquotes are use to make the codes see clearly and be separated from your different text. Remember that all this blockquotes are not mine and I only got them from their sites that they don't offer for tutorials. I'll first show you below the codes and the preview for the blockquotes and next is how to install inside your Blogger Blog. And I also want to say sorry because this blockquotes are only from their Blogs templates.



MYBLOGGERTRICKS blockquote:


    CODE:

     .post blockquote {
    background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSG1zKWbB1iknOzDWyAs2s0Up2i-fr_0EWVL3N9iq8C18Z868DIMy3YZp2hV1y_UICkV8jSJH_8lq-Bnc5hVBEN9wVah2u6Bx4Tv6zPtxMauAT5bTL7R-K8AN3aBhSnImr948lQc0sUKcH/s1600/block-qoute1.png) no-repeat bottom center;
    margin: 0 20px;
    padding: 10px 20px 40px 20px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 0px solid #ddd;
    font-size: 0.9em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .post blockquote p {
    margin: 0;
    padding: 0 0 15px;
    }
    #dummy {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadOG8goe6SnGbNS_1G9TCwfgaYBkURa_Bsh0_U4ujOKFLQmSGt1Dfm6XrrK707AGCB6Oa82cpcghyphenhyphenB_QYg0YlGS6LBm0MN7dzdIk9iKZH1ZynNwSCS7pBhyphenhyphen5VnpIyy8C1V5D1T2ieXu-0/s400/block-qoute-sprites.png") no-repeat scroll 0% 110% transparent;
    margin-top: -100px;
    padding: 0px;
    position: relative;
    left: 460px;
    height: 104px;
    width: 123px;
    top: -18px;
    cursor: pointer;
    clear: both;
    }
    #dummy:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadOG8goe6SnGbNS_1G9TCwfgaYBkURa_Bsh0_U4ujOKFLQmSGt1Dfm6XrrK707AGCB6Oa82cpcghyphenhyphenB_QYg0YlGS6LBm0MN7dzdIk9iKZH1ZynNwSCS7pBhyphenhyphen5VnpIyy8C1V5D1T2ieXu-0/s400/block-qoute-sprites.png") no-repeat scroll 0% 0% transparent;
    margin-top: -100px;
    padding: 0px;
    position: relative;
    left: 460px;
    height: 114px;
    width: 123px;
    top: -39px;
    }
    .blockquote {
    font-size: 18px;
    padding-top: 10px;
    margin: 20px 5px 10px 5px;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhADMRYNEogW4yVv-iohxNYgCwXw5z-xy0HGzkpV3pcyodCcVTpaHzVyzT4tHfXbJEeaa9UOIH3ear3sJJ46OizW4DHpUJQ-NFrlutv2bT0vByBjFWrksIb1WLL2xJGMixrprgXxeJTQnHD/s400/quoteme.png") no-repeat scroll left top transparent;
    color: rgb(105, 117, 124);
    font-style: italic;
    font-family: times,arial;
    text-indent: 65px;
    }
    .blockquote p {
    margin: 0;
    padding-top:10px;
    }
    This blockquote is what I've got from their template. This Blockquote is really nice because of its image below the text above where you can put an image for your site's link. This is just a simple blockquote from mybloggertricks but yet this is very awesome.

    EDITING MYBLOGGERTRICKS BLOCKQUOTE:

    • To change the image of this blockquote, You just need to change the link that's in color red with your direct image link that has the same size with mybloggertricks blockquote.


    OTHER SITE'S BLOCKQUOTE:

    CODE:

    blockquote {
    border-left: 6px solid;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0pt 0pt 14px #ABABAB;
    padding: 8px 9px;
    }

    This is a very simple blockquote template for Blogger and very easy to install with your template because you don't need to change anything inside the code. I like this blockquote because of its shadows and the black border on the right.




    HOW TO INSERT BLOCKQUOTES IN YOUR BLOGGER BLOG:

    To insert the blockquotes above inside your Blog, You only need to make some changes with your template and you're done.
    • Go to Templates then Edit HTML.
    • Or first back up your template if you like.
    • Find this code below:
    .blockquote or .post blockquote { or blockquote

    • Find any of the code that you see above, I'm sure you'll find many codes like that.
    • So what you need to do is to find the first one.
    • Highlight your blockquote from .blockquote to the last "}" without quotation.
    • Replace that codes with the codes above.
    • Save your template And you're done.
    If you have any problems with your blockquote installation, Please make a comment below.

    Credit Expert

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

    0 comentarios:

    Post a Comment

     

    Copyright @ 2013 Mybloggerzone.

    Designed by Templateiy & CollegeTalks