Our Blog! Top News! Be a Web Designer with Joomla! Be a Good Blogger with Blogger Lessons Download Operating Systems FREE!
Topics :

Saturday, October 19, 2013

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

By DJ Niraj  |  12:07 PM 2 comments

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

 
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 එකක් දාලා කියන්නකෝ. 

Author: DJ Niraj

Hello My Name is Sandun Isuru Niraj, And I'm from beautifull island Sri Lanka which is called the pearl of the Indian Ocean. I Love the blogging and web designing. Not only that I love programming much.....

2 comments:

  1. ඔන්න මමත් දඟලලා-දඟලලා මගේ බ්ලොග් එකට එකතු කර ගත්තා. මේක වටින ගැජට් එකක්.

    ReplyDelete
    Replies
    1. එල එල එහෙම තමයි දියුණු වෙන මිනිස්සු.. අදහසට බොහොම ස්තුතියි..

      Delete

ඔබගේ අදහසත් එකතු කරන්න. මට ඒක ගොඩාක් වටිනවා..


Connect with Google+

All Rights Reserved

Protected by Copyscape Web Plagiarism Software

Safety First....

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles

TOP