Add a Metro Style Social Media Icons for Your Blog. - Blogger Lesson 7

ඔන්න මම අදත් අලුත්ම බ්ලොගර් පාඩමක් අරගෙන ආවා. මම කලින් ඔයාලට අපේ FreewareHut Forum එක ගැන කියලා තියනවා. මේ දවස්වල ඒකේ සාකච්ඡා කරන Topic එකක් තමයි බ්ලොග් ලියනකොට ඇතිවෙන ගැටළු. ඉතින් ඔයාලටත් ඒ වගේ ගැටළු තියනවා නම් එතනට යොමු කරන්න පුලුවන්. 

FreewareHut Forum 

 

Metro Style Social Media Icons

  ඔන්න ඉතින් දැන් අද පාඩමට් යමුකෝ. මම අද ඔයාලට කියලා දෙන්න හදන්නෙ Metro Style Social Media Icons විජෙට්ටුවක් බ්ලොග් එකට එකතු කරන හැටි ගැනයි.
Metro Style කියන්නෙ Windows 8 මෙහෙයුම් පද්ධතිය මගින් හදුන්වා දෙන ලද අතුරු මුහුණත නැත්නම් ඉන්ටර්ෆේස් එකට. එකේ Softwares තියෙන්නේ Tiles විදියට. ඉතින් මේ විජෙට්ටුවත් ඒ වගේම tiles වගේ තමයි පෙන්නන්නෙ. ඔයාලට මේ මගින් Facebook, Twitter, Google+ සහ Feedburner කියන සේවාවන් වලට Social Media Icons ලබාදෙන්න පුලුවන්. ඒක හරියට ඔය එහාපැත්තේ තියන විදියට තමයි පෙන්නන්නෙ.

දැන් ඉතින් අපි වැඩේට බහිමුකෝ. ඉස්සෙලාම blogger Dashboard එකේ තියන Layout කියන tab එකට යන්න. ඊටපස්සෙ Layout එකේ විජෙට්ටුව එකතු කරන්න සුදුසු තැනක Add Gadget කියන තැනක් Click කරලා HTML/Javascript කියන Gadget එකක් එකතු කරන්න දෙන්න.  

දැන් පල්ලෙහා තියන Code කොටස නිවැරදිවම ඒ HTML box එකට Copy කරලා Paste කරන්න.  

<!----Freewarehut.blogspot.com metro code starts---->
<div class="trickstoo-metro">
<li><a class="fb" href="http://facebook.com/Facebook Username"></a></li>
<li><a class="tw" href="http://twitter.com/Twitter Username"></a></li>
<li><a class="gp"
href="https://plus.google.com/Google+ User ID"></a></li>
<li><a class="fd"
href="http://feeds.feedburner.com/Feedburner ID"></a></li>
</div>
<style>
.trickstoo-metro{width:285px}
.trickstoo-metro li{position:relative;cursor:pointer;padding:0;list-style:none}
.trickstoo-metro .fb,.tw,.gp,.fd{z-index:7; float:left;margin:1px;position:relative;display:block}
.trickstoo-metro .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.trickstoo-metro .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.trickstoo-metro .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.trickstoo-metro .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.trickstoo-metro li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.trickstoo-metro li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.trickstoo-metro li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.trickstoo-metro li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<!----Freewarehut.blogspot.com metro code ends---->

 ඔන්න දැන් පොඩි වැඩ වගයක් කරන්න තියනවා. 

• ඉස්සෙල්ලම රතු පාටින් තියන Facebook Username කියන තැනට Facebook Fanpage එකේ Username එක දෙන්න. 
• දැන් නිල් පාටින් Twitter Username කියන තැනට ඔයාගේ Twitter ගිණුමේ Username එක දෙන්න.
• දැන් Google+ User ID කියලා දම් පාටින් තියන තැනට Google+ User ID එක දෙන්න. සාමාන්‍යයෙන් ඒ Google+ User ID එක කියන්නෙ ඉලක්කම් ටිකක් පල්ලෙහා තියන Google+ Account එකේ URL එක ගත්තොත් අන්තිමට තියන ඉලක්කම් පේලිය තමයි User ID එක කියන්නෙ.  
  

  උදා: https://plus.google.com/102884118533923160961 කියන Google+ Account URL එකේ 102884118533923160961 කියන එක තමයි Google+ User ID එක. 

• දැන් අන්තිමට Feedburner ID කියන තැනට ඔයාලගේ Feedburner එකේ ID එක දෙන්න.      
  
  දැන් වැඩ ඉවරයි. දැන් Gadget එකට කැමතිනම් Heading එකකුත් දීලා Save කරන්න. දැන් ඔයාලගේ බ්ලොග් එකේ Preview එකක් බැලුවොත් ඔයාලගේ Social Media Icons ටික බ්ලොග් එකට එකතු වෙලා ඇති. 
   

එහෙනම් මම දැන් යන්නයි හදන්නෙ. වැඩේ කොහොමද කියලා Comment එකක් දාලා කියන්නකෝ.