Wednesday, August 12, 2015

Paper Style එකේ BlockQoute එකක් බ්ලොග් එකට දාගමු.


ඔන්න අද අරගෙන ආවා අපේ බ්ලොග් කරන යාලුවන්ට වැදගත් වෙන පොඩි වැඩ කෑල්ලක්. අපි බ්ලොග් එකේ  මොකක් හරි පෝස්ට් එකක් දාද්දි ඒ පෝස්ට් එකේ කුමන හෝ වැදගත් ජේදයක් තිබ්බොත් අපි ඒක Quote කර ගෙන හැර දක්වනවානේ. ඉතින් අද ලිපියෙන් කියන්න  යන්නේ බ්ලොග් එකට Paper Style එකේ BlockQoute එකක් Blog එකට Add කරගන්න විදිහ ගැනයි.



මේ තියෙන්නෙ Paper Style BlockQoute එකේ DEMO Screen Shot එකක්.

හරි  මෙහෙමයි Paper Style BlockQoute එක ඔයාගේ Blog එකට එකතු කරගන්නේ මෙහෙමයි.

මුලින්ම ඔයාගේ Template එක Backup කරගන්න.
Template >> Backup / Restore >> Download full template


Step 1] මුලින්ම ඔයාගේ Blogger Dashboard එකට ගොස් Template >> Edit HTML යන්න.

Step 2] CTRL + F Press කරලා  ]]></b:skin> කියන එක Search කරලා පහත තියන Code එක ඊට උඩින්  Copy >> Paste කරන්න.  ( පහත රූපය )



.post-body blockquote {
line-height: 1.3em;
}

.post blockquote {
background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHOBbd0W5_u6OLDaOcoHQHjBbQJbvpHkiqusG2WwsM2CMMTcIdkNso0SUmh3yOAJJ7rCHinqN4B_7GSQo9L5xkF_3JPPpWmZ82qzK1ugLMkrAzEPaEuCltek-XOeEkCENNMejNtPbtfpm/s986/note.png);
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
padding: 20px 20px 20px 50px;
color:#000000;
font: normal 0.9em “Consolas”, “Courier New”, Courier, mono, serif;;
-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.post blockquote:hover {
background: #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHOBbd0W5_u6OLDaOcoHQHjBbQJbvpHkiqusG2WwsM2CMMTcIdkNso0SUmh3yOAJJ7rCHinqN4B_7GSQo9L5xkF_3JPPpWmZ82qzK1ugLMkrAzEPaEuCltek-XOeEkCENNMejNtPbtfpm/s986/note.png);
background-repeat:repeat-y;
color:#000000;
box-shadow: -1px -1px 12px 2px gainsboro;
border-radius: 15px;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

අවසාන පියවර  විදිහට  Template එක Save කරන්න.

How to Use it in Blogger Post?

  • Open post editor and press Quote button
Capture[1]