Tuesday, January 11, 2011

Stylish Blockquote Effects လုပ္နည္း

  1. Blogger.ကိုသြား
  2. Click on Template.
  3. Again Click on Edit HTML.
  4. Press 'Ctrl+F'
  5. And Search For "]]></b:skin>".
  6. Paste the Copied code above ]]> it.
  7. ေအာက္က CSS Code ကုတ္ကို Copy ကူး ]]></b:skin> ရဲ႔ေရွ႔မွာခ် (အေပၚမွာ)ထား လိုက္
    .post blockquote {
    background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2XpINyudkRaw4vFqez6FkfrchuPwv4KqtIPx1qo1gmFGAVkBgbUC5OUb3QY6426tkM_1Q7Y6S1Cdm45QEsvkgPimVOSGudR8a7J3_KZrNS6wjLz7GghGLE8S7TIG_-QXepG8wSardsVs/s320/davivd.gif)top left repeat-y;
    margin: 0 20px;
    padding: 10px 20px 10px 45px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    font-size: 0.9em;
    }
    .post blockquote p {
    margin: 0;
    padding: 0 0 15px;
    }
    .post blockquote:hover {
    background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKn4UO-GG0B-NnF1jf2_z7AUPNFaLXS39NKMHebiaGJQSczImDrz8R2-o1dscwDuiN8GqYL2Jm974ij-l9MdDbbfFGf-J1YKHETz46jQdFhi5rLikBZ4fMW3dU1nIw6uNrAFiTLj0Ek4/s320/davivd1.gif)top left repeat-y;
    }
    .blockquote {
    font: 18px normal  sans-serif,Tahoma;
    padding-top: 10px;
    margin: 5px;
    background: url() no-repeat top left;
    text-indent: 65px;
    }
    .blockquote div {
    display: block;
    background: url() no-repeat bottom right;
    padding-bottom:10px;
    }
    .blockquote p {
    margin: 0;
    padding-top:10px;
    }.home-link {
    display: none;
    }


  8. ၿပီးရင္ Save ။
  9. post တင္ရင္ျပထားတဲ႔ အနီေရာင္ အဝိုင္းကို ကလိ ၿပီး တင္ပါ။
Enjoy!

No comments:

Post a Comment