බ්ලොග් එකේ ජනප්‍රිය ලිපි Thumbnails ආකාරයට Zoom Effect සමග බ්ලොග් එකට දාගන්න V2

මතකනෙ මම කලිනුත් මේ වගේ Widget එකක් දුන්නා. අද මේ දෙන්නේ ඒ Widget එකේ V2 එකයි. ඉතින් කලින් V1 එකේ තිබුණ විදිහට නෙමේ මේකෙ Effect එහෙම වෙනස් කරලා තියනවා. කැමතිනම් මේක බ්ලොග් එකට දාගන්න..

මුලින්ම ඔයාලා Design > Page elements  ගිහිල්ලා Add Gadget තුලින් Popular Posts widget  එක බ්ලෙග් එකට දාගන්න.

1.දෙවනුව Edit HTML ගිහින් Expanded Widget Template කියන තැනට ක්ලික් කරන්න.

2.Ctrl + F යතුර එකවර ඔබන්න. එවිට Search bar එකක් දිස්වේවි. එතන ]]></b:skin> කියන කෝඩ් එක පේස්ට් කරන්න. දැන් පහල HTML Box එකේ කෝඩ් එක තියන තැන පෙන්වාවි. එම කෝඩ් එකට යටින් පහල කෝඩ් එක පේස්ට් කරලා සේව් කරන්න. 

3. දැන් නැවත  Page elements වලට යන්න. අපි කලින් දාපු  Popular Posts widget එකේ Edit ක්ලික් කරන්න. Show යටතේ තියන image thumbnail කියන තැනට ටික් එක දමන්න.

<style type='text/css'>
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

මොකක් හරි අවුලක් තිබුණොත් කමෙන්ට් එකක් දාන්න. එහෙනම් මම ගියා..

Code From bloggertricksandtoolz

Sinhala Editing by Supushpitha