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

Friday, September 13, 2013

Add Social Media Icons for your Blog - Blogger Lesson 4

By DJ Niraj  |  7:43 AM 4 comments

ඔන්න යාලුවනෙ මම අදත් අලුත්ම Blogger පාඩමක් අරගෙන ආවා. පොඩි ගමනක් ගිය නිසා මට Post එකක් එහෙම දාන්නත් වෙලාවක් තිබුනෙ නෑ. ඒක නෙමෙයි මම SBU එකට මගේ Blog එකත් ඇතුලත් කරන්න කියලා ඉල්ලුවත් තවම ඒක කරලා නෑනෙ. සමහරවිට එයාල කියනවා වගේ මේ Blog එක තනිකරම සින්හල නොවෙන නිසා වෙනා ඇති. ඒත් Blogger වගේ English සේවාවන් ගැන තනිකරම සින්හලෙන් ඒකියන්නෙ එක English word එකක් වත් නැතුව කියලා දෙන්නෙ කොහොමද කියලා මටනම් තේරෙන්නෙ නෑ.. හරි හරි ඒක ගැන තවත් කතාකරලා වැඩක් නෑ, ලන්කාවෙන් මේවගේ වෙබ් සේවාවක් ආපු දවසට අපි ඒක ගැන සුද්ධ සින්හලෙන්ම කතාකරමුකෝ. අපි එහෙනම් වැඩෙට බහිමු.

Social Media Buttons කියන්නෙ Facebook, Twitter, Google+ වගේ සමාජ ජාල වලට පහසුවෙන් යොමු වෙන්න පුලුවන් විදියට හදන අලන්කාර යොමුවක්. අපිට මේ මගින් අපේ blog එකට එන අයව අපෙ Facebook page එකට හරි Twitter ගිනුමට හරි යොමු කරවන්න පුලුවන්. ඒ වගෙ Social Media Buttons එකක් අපේ Blog එකටත් එකතු කරගන්නෙ කොහොමද කියලා තමයි මම අද කියලා දෙන්නෙ. මේ තියන රූපෙ තියෙන්න ඒ වගේ Social Media Buttons ටිකක් තමයි.


මේකට ඉස්සෙල්ලම අපි Blogger Control Panel එකේ තියන Template කියන Tab එකට යන්න ඕනි. Blogger Control Panel එක ගැන මෙතනින් දැනගන්න පුලුවන්.




ඊටපස්සෙ එතනින් එන Page එකෙන් Edit HTML click කරන්න.

එතකොට මේවගේ HTML Editor එකක් විවෘත වෙනවා.


 
ඒ HTML Editor එක තුල පහලට ගෙනයමින් <b:skin>...</b:skin> ලෙස සදහන් Code කොටස සොයායෙන එහි ඉදිරියෙන් ඇති ඊතලය Click කර එය Extract කරගන්න

 ඉන්පසු HTML Editor එක තුල click කර CTRL යතුර සම F ( CTRL+F) click කර එන search box එක තුල ]]></b:skin> යන්න type කර Enter ඔබන්න. එවිට එම code කොටස කහපාටින් දැක්වේ.

දැන් එම කොටසට ඉහලින් පහලින් දැක්වෙන කේත කොටස Copy කර Paste කරන්න. 

  /* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
 එවිට එය පහත පරිදි දැකගත හැක.



 ඉන්පසුව නැවත search box එක තුල  

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
යන්න type කර Enter ඔබන්න.  එවිට ඊට අදාල Code කොටසද කහපාටින් පෙන්වයි. 


 ඉන්පසු එම කොටසට ඉහලින් පහත දැක්වෙන කේත කොටස Copy කර Paste කරන්න. 



<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>
එහි රතුපාටින් දක්වා ඇති ස්ථානවලට ඔබගේ ඊට අදාල ගිණුම් වල usernames ඇතුලත් කරන්න. Feeds සදහා ඔබගේ Blog අඩවියේ Feed URL එක රතු පාටින් ඇති කොටස වෙනුවට යොදන්න. සාමන්‍යයෙන් Blogger සදහා පහත් ආකාරයේ Feed URL එකක් ලබාදෙනු ලැබේ. 

http://blogname.blogspot.com/feeds/posts/default?alt=rss



එසේම Google+ සදහා XXXXX ලෙස සදහන් ස්ථානයට ඔබගේ Google+ ID එක ලබාදෙන්න. සියල්ල නිවැරදිව අතුලත් කර Save Template යන්න ලබාදී Template එක Save කරන්න.

ඉන්පසුව ඔබ සියල්ල නිවැරදිව සිදුකරලනම් Blog එකේ Preview එකක් බැලුවොත් Social Media Buttons ටික නිවැරදිව ඇතුලත් වී ඇති බව පෙනෙවි.


තව දෙයක් තියනවා. ඔයාලගෙ Blog එකේ Header එකට තියන Image එක නිසා සමහරවිට මේ Icons පෙන්වන්නෙ නැත්නම් Header Gadget එකට ගිහින් Image එකට යටින් තියන Placement කියන තැනට Behind title and description කියල දීල Save කරන්න. එතකොට ඒක පෙන්වාවි. ඒත් නැත්නම් ඔයාල HTML Editor එකේ කේත ඇතුලත් කිරීම නිවැරදිව කරලා නැ. ඒක නිවැරදිව කරලා නැවතත් උත්සහා කරලා බලන්න.

ඒවගේම ඔයාලට මේක කරද්දි අතිවෙන ගැටලු ගැනත් මට Comment එකක් දාලා කියන්න. පාඩම කොහොමද කියලත් කියන්න. ඔයාලගෙ අදහස් මට කෝටි ගානක් වටිනවා. එහෙනම් මම තවත් Blogger පාඩමක් අරගෙන ඉක්මන්ටම එන්නම්. 

ඔබට ජය..! 

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.....

4 comments:

  1. එළ දිගටම ලියන්න... අනිත් සිංහල බ්ලොග් වලටත් ගිහින් කොමෙන්ට් එකක් දෙකක් දාපන්.. එතකොට තමයි අනිත් අයත් එන්නේ..

    ReplyDelete
  2. ඒක තමයි මම මේ දවස් වල කරන්නෙ.. තැන්ක් යූ අයියේ

    ReplyDelete

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


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