28 يونيو 2014

مدون محترف اضافات بلوجر اضافة ازرار التواصل الاجتماعي باشكال احترافية

اضافة ازرار التواصل الاجتماعي باشكال احترافية

كيفية اضافة ازرار التواصل الاجتماعي باشكال احترافية و متعددة تسمى بازرار المترو ,مدونة مدون محترف ,اضافات بلوجر ,دروس بلوجر ,قوالب بلوجر ,mudwnp

درس اليوم في مدون محترف سوف يكون اضافة ازرار التواصل الاجتماعي على نمط مترو لمدونات بلوجر و انها تبدو جذابة لمدونات بلوجر , و الموضوع يشمل ازرار التواصل الاجتماعي على نمط مترو ,صندوق الاشتراك و ازرار التواصل الاجتماعي على شكل مترو


كيفية اضافة ازرار التواصل الاجتماعي على شكل مترو لمدونات بلوجر


  1. انتقل إلى Blogger > مدونتك >> التخطيط
  2. إضافة أداة >> HTML/Javascript

الآن عليك اضافة الرموز او الاكواد في HTML/Javascript .

الشكل الاول 


كيفية اضافة ازرار التواصل الاجتماعي باشكال احترافية و متعددة تسمى بازرار المترو ,مدونة مدون محترف ,اضافات بلوجر ,دروس بلوجر ,قوالب بلوجر ,mudwnp

 <a href='ORKUT' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Orkut'>
<img alt='Orkut' src='http://icons.iconarchive.com/icons/danleech/simple/48/orkut-icon.png' style='border:0; width:45px; height:45px;'/></a>
<a href='TWITTER' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Twitter'>
<img alt='Twitter' src='http://icons.iconarchive.com/icons/danleech/simple/48/twitter-icon.png' style='border:0; width:45px; height:45px;'/></a>
<a href='FACEBOOK' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Facebook'>
<img alt='Facebook' src='http://icons.iconarchive.com/icons/danleech/simple/48/facebook-icon.png' style='border:0; width:45px; height:45px;'/></a>
<a href='GOOGLE+' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Google +'>
<img alt='Google +' src='http://icons.iconarchive.com/icons/danleech/simple/48/google-plus-icon.png' style='border:0; width:45px; height:45px;'/></a>

الشكل الثاني 


كيفية اضافة ازرار التواصل الاجتماعي باشكال احترافية و متعددة تسمى بازرار المترو ,مدونة مدون محترف ,اضافات بلوجر ,دروس بلوجر ,قوالب بلوجر ,mudwnp


<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/digitalhubinc fan page facebook/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/username/'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/digitalhubinc profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/digitalhubinc feed rss'></a></li></ul>
<style>
#jocial{width: 310px;float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{position: relative;-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9EAU1KjDEIf5l5oD46dZDZzDlCZ8tDB5YWaf56x1Ov4ZLtIy0LsmOmXgH3GZ_T4Lo302JU65BYxjt8_HE2fEff3BgXjajHfeEyRNkU86VxyWL-YbdmSHiQS9-rPzI0JHevQPmBnvtmHN/s1600/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNr4PKhHIF7k7xLd4T3Jf4pTCQQzQKpldfD_RYwjOkDoU977yIcpZOq53NC9s7RLBvsfQ6LPx2K-LUVWPSwH9nsfA1jIjMOmX10ShKirf9TaLv_1oZKpbTPEJlM9ZQ3jfFhY0fBkFRHmwe/s1600/Twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4COmUL_2lH7wZNnehr_hHfrGFFt46FqmqBoeBdjtV9QrCI8BaDjk1zkQGRg6YOUdOKGJc27DZ2bcp6oV0IHXbLZk_NxXkhNAoJbcVAOE2fAh-JrZiJQp53mcKi5HyjwoeSwtlljFPDaks/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9in9iDavUT2tENpB-52nCwyw_OB1NtNe_8wZpFzgdfqWYHGlPxv2LfHWa1CVMDfza9NL6fHVbDzrj-542wOR1iMePxalFa4ZT95bJbmfbDgYIfrVlJjaUKh4UfOxO6uW4U6rdGUaQgefK/s1600/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNr4PKhHIF7k7xLd4T3Jf4pTCQQzQKpldfD_RYwjOkDoU977yIcpZOq53NC9s7RLBvsfQ6LPx2K-LUVWPSwH9nsfA1jIjMOmX10ShKirf9TaLv_1oZKpbTPEJlM9ZQ3jfFhY0fBkFRHmwe/s1600/Twitter.png") no-repeat center center;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4COmUL_2lH7wZNnehr_hHfrGFFt46FqmqBoeBdjtV9QrCI8BaDjk1zkQGRg6YOUdOKGJc27DZ2bcp6oV0IHXbLZk_NxXkhNAoJbcVAOE2fAh-JrZiJQp53mcKi5HyjwoeSwtlljFPDaks/s1600/google+plus.png") no-repeat center center;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9in9iDavUT2tENpB-52nCwyw_OB1NtNe_8wZpFzgdfqWYHGlPxv2LfHWa1CVMDfza9NL6fHVbDzrj-542wOR1iMePxalFa4ZT95bJbmfbDgYIfrVlJjaUKh4UfOxO6uW4U6rdGUaQgefK/s1600/rss.png") no-repeat center center;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
</style>

الشكل الثالث 


كيفية اضافة ازرار التواصل الاجتماعي باشكال احترافية و متعددة تسمى بازرار المترو ,مدونة مدون محترف ,اضافات بلوجر ,دروس بلوجر ,قوالب بلوجر ,mudwnp


<style type='text/css'>
#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLLsAKglDuCBkkijDYyJalNoTylpR8Fj_j0mDuA-U386dgKbji5zlu0QGQ0Q3gCYq_qsE68gfLsQaFLUBDXVmXiMZ7UybApOl18SniSbuAn9-CkEZafFAwKpzrRVxYROGIS_KF5mITWD3u/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtRl3h9-F1y1MDaCF_UNaGS-SbUPmQ8Hrtw8pNvzs4TEmG51OKXiU5YdmgSz9rzJw__KCbJEUf7hdCnD1rs6jclEcifVhgd2OHL8X4s4FHVP6qd_pinLgXiXIbDOujwvfGkkJ86lIx3tZg/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;
color:#111;
font-size:14px;
line-height:20px;
padding:1px 20px 10px;
text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;
display:block;
margin:10px 0 0;
width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBG3AMJbPcIIynKREP8EPHoRP1mWFW6QzITTJKy5BYQ0tJA-JbaEVk_xovRbApPLdDUNPY20Fmc8xc5q4_hARubR8IRVWnbDFluXsM9dHU5yKQQ8OYpG-phyphenhyphenUMPxSHUc4fENOCAjbD6R8w/s1600/sprites.png) no-repeat 0 -27px;
border:1px solid #ccc;
border-radius:4px;
color:#444;
margin:0 0 15px;
padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;
border:1px solid #007fff;
box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
color:#fff;
cursor:pointer;
font-family:verdana;
font-weight:700;
padding:10px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;
box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;
outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;
-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
background:#FFF;
border:1px solid #ddd;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
margin:0;
padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimdNSQTUwdKHlilQMw53oB2MAgx_juPBEtZr81uyYiyOvVXoy_98RHQttijsIzIOfuuecwab_3KQMoQbM8-BoGGi2xQGfRJrIuR54CdUnsyBzIXdnSGQAmktmnV0PWRYInY5oeODzl1XiW/s0/bg-pattern.png) repeat top left;
border-top:1px solid #aaa;
box-shadow:inset 0 4px 6px -3px #aaa;
font-family:cambria;
font-size:14px;
height:100px;
margin:10px -30px 5px;
padding:0 30px;
text-align:center;width:100%}p#rb_socialicons img { /* Spinning Social Icons Widget By http://mudwnp.blogspot.com/ */  
-moz-transition: all 0.8s ease-in-out;  
-webkit-transition: all 0.8s ease-in-out;  
-o-transition: all 0.8s ease-in-out;  
-ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}p#rb_socialicons img:hover {  
-moz-transform: rotate(360deg);  
-webkit-transform: rotate(360deg);  
-o-transform: rotate(360deg);  
-ms-transform: rotate(360deg);    transform: rotate(360deg);}/* Spinning Social Icons Widget By http://mudwnp.blogspot.com/ */</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper"><div class="sidebar-subscribe-box-form"> 
<center><p id="rb_socialicons">
<a href="http://feeds.feedburner.com/digitalhubinc">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCyv183Xm6Q7OA-nMG0-iSYyjNX3GLS71xRtikEii7DPSiP7zwAbavcEsKiqg95bHECJzV5Zm6IsuM5Xg3sp08UOuwypn0tCls8Po9vLzT8HVP4r0sEqjAz52b6pt7yW08EifJsL5-_XE/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgfGYUlSn0GrhP5aJpYnoow8dWj_Ry3I-um-eHqSZ3DiAfokOotIxJQ8lVJPIcMfzllqxzj4f5vYTQjekveii-7JqKC6jsLmLwMQtsa8ijBoTD22-_qFZi8dhLv5D0zf_0fZe_timm_wY/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCyv183Xm6Q7OA-nMG0-iSYyjNX3GLS71xRtikEii7DPSiP7zwAbavcEsKiqg95bHECJzV5Zm6IsuM5Xg3sp08UOuwypn0tCls8Po9vLzT8HVP4r0sEqjAz52b6pt7yW08EifJsL5-_XE/s1600/rss-inactive.png" /></a>
<a href="http://facebook.com/digitalhubinc">
<img alt="Click Me" hieght="100" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1pw17plsMfNiokmD52FXsjgrR2aw_LiSVw6YRloSM2u3w6Kx0nQ1SoOJTAYxpLq0dRuoesC-8u37pmpVR-scMykjgHwl81ZWYD5BbrShS_K6qmK0eE6v0VIV-8DgabNQoTVOMMo5Opid/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmLyjTD1LPtOixY262yKwfpY6TVeA7inVhDlA_jM8cV-MJbT_DbgqjrVXe-_CyiE743NeGCmjebJrDq7yH4L4F5jzkYJhcIzjd1FrZ0UTMASIc8fBFB6c4NYcUfcNoXZR2Z-KcAP2csruI/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1pw17plsMfNiokmD52FXsjgrR2aw_LiSVw6YRloSM2u3w6Kx0nQ1SoOJTAYxpLq0dRuoesC-8u37pmpVR-scMykjgHwl81ZWYD5BbrShS_K6qmK0eE6v0VIV-8DgabNQoTVOMMo5Opid/s1600/facebook-inactive.png" /></a>
<a href="http://twitter.com/digitalhubinc">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYph_O6G6TS6gHW1XxmTfYytpt_5Av7LOLm0LtrqfVYZUyUrS3R7upcd2TJollp1hLQKoiv5mvqTwQycO3pkq5x7rRbhErTwL6MdVv1E_7x7KTeAcuVNEmqGCLcL6XYMYwvfJBacMNYETD/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_DszOaQMRRLtjyMqDArf8GFGfkB_VkavUnl_l-OTdegmkjNKufqDj7kg2B6Dm42VFXQciyZ43i0Iwu6hSYI5H4jJNLcMlfPza0EWlVP2l6mM_dMyNv_jjFctiCy_X09ddQP0cbs-4AID/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYph_O6G6TS6gHW1XxmTfYytpt_5Av7LOLm0LtrqfVYZUyUrS3R7upcd2TJollp1hLQKoiv5mvqTwQycO3pkq5x7rRbhErTwL6MdVv1E_7x7KTeAcuVNEmqGCLcL6XYMYwvfJBacMNYETD/s1600/twitter-inactive.png" /></a>
<a href="https://plus.google.com/116441114801311321617/">
<img alt="Click Me" hieght="160" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzaRyNVWlEG1pk72JF78I8nq2YgqizEz4BXNj3286qS4K3ekN-M99iG6b4oKs4lElyLXoMMd33lo7hkciBRpsVncZDdqFDKvnLwAWu4yh5cjy7EZlZ6ewJrN9dm0JGkN5WSjzSSwN7d_n/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXXZPFFXmaLa-rXccTulvnmb9nHRGMpeUPa-9wIZqF3xkB8wZujB8hM4aK9Lm-R0c3tu6yOSUaEq_JPdrnd_eSAZH2yHoEa61mp1g-lL_EJn4brpWIChWiJVDNiedxmfQjgj_9Bk5erRFc/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzaRyNVWlEG1pk72JF78I8nq2YgqizEz4BXNj3286qS4K3ekN-M99iG6b4oKs4lElyLXoMMd33lo7hkciBRpsVncZDdqFDKvnLwAWu4yh5cjy7EZlZ6ewJrN9dm0JGkN5WSjzSSwN7d_n/s1600/google-plus-inactive.png" /></a>
<a href="http://pinterest.com/digitalhubinc/">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSQbtXyN7vSNv1j0NfpEGxu8BUWIAFCGIDPy47YCftKG3UCWwLnHaCt9Nz_N95FJYiniUriGXsBtgyNBqP0P4J4RhVGMZDfAeKpcNvIb5qA_GIUDsHviRUoLsCEQO3VYre91xyreuPzK4s/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUl0a0zDr2zNjNIf9KESVBH7I9xmAo4PD0cRcWEidkfVECG60gXoV6tTzjp0lcyeW9nB85XpXQZUMmV58Swh7rPZT2YScFcOA6RrZ1QGiGq5BINFmi74vnidGHGkJDKyArkRhXwgqg_kFG/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSQbtXyN7vSNv1j0NfpEGxu8BUWIAFCGIDPy47YCftKG3UCWwLnHaCt9Nz_N95FJYiniUriGXsBtgyNBqP0P4J4RhVGMZDfAeKpcNvIb5qA_GIUDsHviRUoLsCEQO3VYre91xyreuPzK4s/s1600/pinterest-inactive.png" /></a>
<a href="mailto:digitalhubinc@gmail.com">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv04InOR3Yc5LSxIrePg0hzwa-ZaH0qSWx2NHNF8d7piilxMh4HRFT02OZBVlNYAErBA0F8Pzq15kDB7GIXEjUirKFmTEG6axTHdkoFi3uAfaXrcmn-S7MJN8KkMsbsxB3tqwdrpxEgpAJ/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0BPBHsHrFq4ZC4Xm7G-69XvEKRC9V4_-0LKOwyJTo05W_t8p-vJyufQUDK3IHcL4RG_SWoteeEZ-px6YoIr3qSUEfsd7Kk1mvrE9Xqil3-bAnMDIM5Vi02kM_yR9HIPugOG5abQDtP_n-/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv04InOR3Yc5LSxIrePg0hzwa-ZaH0qSWx2NHNF8d7piilxMh4HRFT02OZBVlNYAErBA0F8Pzq15kDB7GIXEjUirKFmTEG6axTHdkoFi3uAfaXrcmn-S7MJN8KkMsbsxB3tqwdrpxEgpAJ/s1600/email-inactive.png" /> </a></p></center>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=digitalhubinc" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=digitalhubinc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="digitalhubinc" />
<input name="loc" type="hidden" value="en_US" />
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" />
</form>
</div>
</div>
</div>
<style>
</style>

في امان الله 
مدونة مدون محترف
مواضيع ذات صلة
اضافة ازرار التواصل الاجتماعي باشكال احترافية
4 / 5
بواسطة

هناك 4 تعليقات :

  1. =q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

    ردحذف
    الردود
    1. =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

      حذف
  2. ازاى احط روابط صفحاتى الفيسبوك والتويتر ف الكود ؟؟

    ردحذف
    الردود
    1. بعد كود href='
      في رابط فيسبوك امسحه وحط رابط صفحتك

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r