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("http://1.bp.blogspot.com/-BGOX3zdOF4s/UQNU_PFl3oI/AAAAAAAAFL0/_5nRgCuxHrc/s1600/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;height: 74px;background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;height: 74px;background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;height: 74px;background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/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("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/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("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/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("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/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(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/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(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/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(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/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(http://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/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='http://1.bp.blogspot.com/--VKL86l-Jb8/UOpZTI1QdYI/AAAAAAAALHc/pobvypvYAkY/s1600/rss-inactive.png'" onmouseover="this.src='http://1.bp.blogspot.com/-4suOkcJcrEY/UOpZSLOgEAI/AAAAAAAALHQ/Bfo2GP16lVk/s1600/rss.png'" src="http://1.bp.blogspot.com/--VKL86l-Jb8/UOpZTI1QdYI/AAAAAAAALHc/pobvypvYAkY/s1600/rss-inactive.png" /></a>
<a href="http://facebook.com/digitalhubinc">
<img alt="Click Me" hieght="100" onmouseout="this.src='http://4.bp.blogspot.com/-cr9boutcy-s/UOpZATc-69I/AAAAAAAALGU/-OJr2yI988k/s1600/facebook-inactive.png'" onmouseover="this.src='http://1.bp.blogspot.com/-KB8iKLter1I/UOpY-36lZzI/AAAAAAAALGI/XNGi27H5UaA/s1600/facebook.png'" src="http://4.bp.blogspot.com/-cr9boutcy-s/UOpZATc-69I/AAAAAAAALGU/-OJr2yI988k/s1600/facebook-inactive.png" /></a>
<a href="http://twitter.com/digitalhubinc">
<img alt="Click Me" onmouseout="this.src='http://2.bp.blogspot.com/-vfdnT942AG0/UOpZbVIg7-I/AAAAAAAALH0/f1yb38pRaBg/s1600/twitter-inactive.png'" onmouseover="this.src='http://4.bp.blogspot.com/-1-MHoTTgPNo/UOpZa9PAwuI/AAAAAAAALHo/khEpCb1lAK0/s1600/twitter.png'" src="http://2.bp.blogspot.com/-vfdnT942AG0/UOpZbVIg7-I/AAAAAAAALH0/f1yb38pRaBg/s1600/twitter-inactive.png" /></a>
<a href="https://plus.google.com/116441114801311321617/">
<img alt="Click Me" hieght="160" onmouseout="this.src='http://2.bp.blogspot.com/-80lPTxcgo0c/UOpZPjm3eBI/AAAAAAAALGs/gNMX65WTC_U/s1600/google-plus-inactive.png'" onmouseover="this.src='http://1.bp.blogspot.com/-iDS8TSF6atk/UOpZBRDDbYI/AAAAAAAALGg/IPL4upm_zgI/s1600/google-plus.png'" src="http://2.bp.blogspot.com/-80lPTxcgo0c/UOpZPjm3eBI/AAAAAAAALGs/gNMX65WTC_U/s1600/google-plus-inactive.png" /></a>
<a href="http://pinterest.com/digitalhubinc/">
<img alt="Click Me" onmouseout="this.src='http://1.bp.blogspot.com/-LIVfFyuMd6Y/UOpZRHWUq3I/AAAAAAAALHE/txTdlnAwSrs/s1600/pinterest-inactive.png'" onmouseover="this.src='http://3.bp.blogspot.com/-l16hOlygfME/UOpZQaHRQHI/AAAAAAAALG4/Ank4It2IZcE/s1600/pinterest.png'" src="http://1.bp.blogspot.com/-LIVfFyuMd6Y/UOpZRHWUq3I/AAAAAAAALHE/txTdlnAwSrs/s1600/pinterest-inactive.png" /></a>
<a href="mailto:digitalhubinc@gmail.com">
<img alt="Click Me" onmouseout="this.src='http://2.bp.blogspot.com/-YcqWpuN34gs/UOpY8ib_hCI/AAAAAAAALFw/iRbm88KLIT0/s1600/email-inactive.png'" onmouseover="this.src='http://2.bp.blogspot.com/-owi0cEo4oTY/UOpY99R2I1I/AAAAAAAALF8/1XGb4foX_dQ/s1600/email-shadow.png'" src="http://2.bp.blogspot.com/-YcqWpuN34gs/UOpY8ib_hCI/AAAAAAAALFw/iRbm88KLIT0/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