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

මම අද ඔයාලට කියලා දෙන්න යන්නෙ අපේ බ්ලොග් එකේ ජනප්‍රිය ලිපි ඒ කියන්නේ ගොඩක් දෙනෙක් බලපු ලිපි Thumbnails ආකාරයට ලස්සන Zoom 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 කියන තැනට ටික් එක දමන්න.

දැන් වැඩේ ඉවරයි. කමෙන්ට් එකක් දාලම යන්න. මේ සයිට් එකට අකමැත්තක් නැත්තම් Follow කරලා මටත් ප්‍රතිඋපකාරයක් කරලා යන්න..

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float:left; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important}
.PopularPosts .item-thumbnail{margin:0 8px !important}
.item-thumbnail img{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; border:5px solid #666; height:40px; padding:3px; width:40px}
.item-thumbnail img:hover{border:5px solid #BBB; -moz-transform:scale(1.3) rotate(-5deg); -webkit-transform:scale(1.3) rotate(-5deg); -o-transform:scale(1.3) rotate(-5deg); -ms-transform:scale(1.3) rotate(-5deg); transform:scale(1.3) rotate(-5deg)}
</style>

Code From bloggertricksandtoolz

Sinhala Editing by Supushpitha