درس اليوم على مدونة برو يونس سوف يكون اضافة ازرار مواقع التواصل الاجتماعية بعدة اشكال جميلة وجذابة لمدونات بلوجر ويمكنك اختيار الشكل المناسب لمدونتك
 |
| ازرار التواصل الاجتماعية بعدة اشكال احترافية |
كيفية اضافة ازرار التواصل الاجتماعي على شكل مترو لمدونات بلوجر
- توجه الى منصة بلوجر
- ثم ادخل الى مدونتك
- التخطيط
- اضافة اداة
- ثم قم باختيار HTML/Javascript
- قم باضافة احد الاكواد التالية
الشكل الاول
<style type='text/css'>
#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1E4cwT6syq_0NDpQHLutYih7WI6CUFTUcisVt8nKEgM-KVRfEOQHjcBXMsQ3KnVg9U0G8IHPeRORXqqOxO-kqxbIMoyfAWIR8Vxtl0WlkeCUSkbwlzAl93Gs_i2KlhNzNuJnEd2jNN0_/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/AVvXsEjhDsakeXmTrCfiHxW26cYPglzBMR23M0KlFKB-wWvQ5VQp3w-2vGwdn07o3PvzboWRKME5QuiczslLBTnBJ-8hzK967zYB0CZJQxrUhHCfybbviILkfDDLmNONjcXN_H2ezFRlU1cqg7P2/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/AVvXsEhRJwpfnZWDED4Mn2hef-SKKoxFChm3LRoOR0GeKMFgkxzQVqFMTWLHmgqSk4BiM5Aiuj8QkaIjJ9cUACSFn1X51NT-jPuMyigtUIWRD6X0gnRzZ2-j_-RB0-hb5rGOyKcermIMI4caCEmd/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/AVvXsEjgxiX6jj9Wugf8JUNFO6ahmHkyCwzEMT_J5B38SG21_SgG_g7D9dX_7uGrUyr6Qz8cUv8ZfSlR0mGl7yt92lSsxqFdOPlgKdY32VaJxcukbS2IvA1LRcqV0RuJ5TuoT0XSbvMd2cnhK8ie/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/ProYounessBlogg">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7B8-Mp9yffs2R8WzL_z7Kf5I34TtEJSvE4bcgSTdnZSzisglSn_7RzNhcktAPx7B7MNx8Z7eSlc_qGrFozbjFGnOCWGgJ5MuuyzoQockufyEllW0tDOobKF2X_LHSUs472KA0Nu53sNIp/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6ByZA00L5o_G4g8t6cQO2FcDd-jMfiQNr4aTUPWC_AD2HR6VpVvBVTp7F2ja_Dv0n8DONmecl2wwBTY_MbCh_XeIw78clhIxU4NgGwHYxzdwMEbRcKpFi26YPz0FDtc1TRTs62QrqAzB/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7B8-Mp9yffs2R8WzL_z7Kf5I34TtEJSvE4bcgSTdnZSzisglSn_7RzNhcktAPx7B7MNx8Z7eSlc_qGrFozbjFGnOCWGgJ5MuuyzoQockufyEllW0tDOobKF2X_LHSUs472KA0Nu53sNIp/s1600/rss-inactive.png" /></a>
<a href="http://facebook.com/ProYounessBlogg">
<img alt="Click Me" hieght="100" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8zQuibCz-cxvIuEeE8_AI4vsSqulHTRREZvZvW5kJt8tKNzF0aUBjHLuBeF-9sEoXVXAaYWXz6PIlrS7yE_Tyzm1dtD5OUGGSeP2dEUO9WX7OilRkc6l4YUYTAskz1FoeTF9Tv5iK8ua/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4rcA3HjSJsQbjaeTJdi9eBeXjlWStnHwCDgQqeWZ4SSPfYra7zaSJkTtUFGdqKx4a7FenWBlX-i9EF0gXx0vkHVYGwd4FtMhHxeABDov17pGqYIBIBGruXVhnv7cWKrlY2nf6FHZc8wy/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8zQuibCz-cxvIuEeE8_AI4vsSqulHTRREZvZvW5kJt8tKNzF0aUBjHLuBeF-9sEoXVXAaYWXz6PIlrS7yE_Tyzm1dtD5OUGGSeP2dEUO9WX7OilRkc6l4YUYTAskz1FoeTF9Tv5iK8ua/s1600/facebook-inactive.png" /></a>
<a href="http://twitter.com/ProYounessBlogg">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwjcwZDUL25cABqBJO8nmZnuSJYZzYs3VILXnv6Ox1_7Binnvde_H1hp5JsjoT6wR7bzvFZtGLgG6uE53XepGR3RvJiiL9Ba1EWlDO3-VHWKdER6fDiyaikwEyTCMHdJeHAXIITCQQFN_/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGb9tELRgxJQMYH61ocHA9lKbXmljmaFF1mASsPeO9C_XOE6w5v7J8nHMk764YKP98NJTzRmKdzG3XaNY53bLMmcRfphWXu7Dk1rkXx-7NNHzwfHAFVofgzW7eCGOGrVS9vQh-gvJneuR/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwjcwZDUL25cABqBJO8nmZnuSJYZzYs3VILXnv6Ox1_7Binnvde_H1hp5JsjoT6wR7bzvFZtGLgG6uE53XepGR3RvJiiL9Ba1EWlDO3-VHWKdER6fDiyaikwEyTCMHdJeHAXIITCQQFN_/s1600/twitter-inactive.png" /></a>
<a href="https://plus.google.com/105245220392251111571/">
<img alt="Click Me" hieght="160" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz8M5fhEqgRrThRkeP5TAM2d7-eL0dQwcPLWdzkiB5SPpGbMBr5UqtfP2trPuDgFBszQMSvlOPMizjpHdQa_1Gyi0ChJuE4cXCnwr1c9z2aEWD0lzDXv76ZeIJj35rvJYel5mDY3TGs6Jd/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ8Bn21q7hox3abktPjSjcy5YwPp2eXDmmlrAh1HT3Haf-hIwGoZSOvqmopUZeuukJWIF3KBNxleLOupar_J9wHqOdGrp1_J8sm1hQXhd9QnhzndXVTIb5e-8X7Cy0Uu5GFUi7pt6qkgbQ/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz8M5fhEqgRrThRkeP5TAM2d7-eL0dQwcPLWdzkiB5SPpGbMBr5UqtfP2trPuDgFBszQMSvlOPMizjpHdQa_1Gyi0ChJuE4cXCnwr1c9z2aEWD0lzDXv76ZeIJj35rvJYel5mDY3TGs6Jd/s1600/google-plus-inactive.png" /></a>
<a href="http://pinterest.com/ProYounessBlogg/">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf4wApWibfpar1lSR3biWBXYn5mFvNbWVrZeTJSqOhK995LFPZb9Wz6glV78GZj5L2Swb1pJN2z9bDu_HzDz5TkGlnyrilG4lFSOiPL4c9M8wxpJ5iYGCAh_j7YvTIxkBRxHwqBn-ce49J/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNeey3Kfr5bH6w1yqcMxAi_VFAnU9-QOUNLcyRj4yR2-ZZrBTpBvz2LwLI80GhsCzGPHvYr6oYkYIyEcd7LAqEUvt5Sod_jUikzrC0vaXoexT5o6Q9_b6_pX1pELE8arWxF-VprnDyFsXM/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf4wApWibfpar1lSR3biWBXYn5mFvNbWVrZeTJSqOhK995LFPZb9Wz6glV78GZj5L2Swb1pJN2z9bDu_HzDz5TkGlnyrilG4lFSOiPL4c9M8wxpJ5iYGCAh_j7YvTIxkBRxHwqBn-ce49J/s1600/pinterest-inactive.png" /></a>
<a href="mailto:Youness-Freedom@mail.com">
<img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOAE-hwqPAJWdyJoc2JxgBxnpcTHBrel-qx_HiPNx2xJoSNMAtd3pkFuFz2UNUqtZA_C_e-crKXJYoeZh1LRA1WvTp4pN6juVXFtwCaSTaUPRnNBX8vruEykhydztGp3IVvmryDrbynag/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiModR0IfXrLNK1YoVSWgeTg3bMhZHyrwa5PtsLqahJrRGKjI15gKH0J7ymc0YfuDFHS5h668s87Ea21L5rKCPHSmI8eRIi12n9zRsNuBfWiiipIggbwY3XdDKdtTBoKCaNNFPUtWGPCrKJ/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOAE-hwqPAJWdyJoc2JxgBxnpcTHBrel-qx_HiPNx2xJoSNMAtd3pkFuFz2UNUqtZA_C_e-crKXJYoeZh1LRA1WvTp4pN6juVXFtwCaSTaUPRnNBX8vruEykhydztGp3IVvmryDrbynag/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>
الشكل التاني
<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/ProYounessBlogg fan page facebook/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/ProYounessBlogg'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/105245220392251111571 profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/ProYounessBlogg 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/AVvXsEh89vYEikC61B7X_kYIKSQyky4Ijt9UcOx-XXlUePf9G3CDxMR3jfQ6IjGX2Kl7etS6C1Dqc0m5Ht8yZNcylcz6qlOG8f9-OmlgI1lhIs_TBkXH_Vl5lp9h4O_QITkg-q5BNmVZROjgSZtn/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/AVvXsEghp83pSnhIQwi9hnlp3LpAe-rdUXf_OI9_rJgMu7SiF61GyPkVPmllspncKf2k4qJVGlk1lD_-Rp5N9pFFg4JCtqKzgWKudFRY2qmMk5qpr-nHprif92EsyH1RHW5NK5MReKn4sT_ZTooK/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/AVvXsEhtPFdKdtfj67INTCmVe_J4YZiMArd5gTIDgSCfYOqGp3CK_e0K6UFnzjWUN-9Biqz77aegLpuH7TO5wPszTiLUdEzgxlGzy9Xcr1t14u7tferzZIhtATuZDnCWy41pY5VqQdk-70C_dxiZ/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/AVvXsEh2p7vqO5HpQoLqYcebVH57PiCOqsFUC6lfjvGgTT20eaXroogrO0BFDZxa4zatB8FwzYWijBs-szdp1jRdZg4MqKIjFCPMl5CRXl0zJaw-IF8kWHXXtjzlbdFy6viP_5h4Y5kkumtp8EVw/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/AVvXsEghp83pSnhIQwi9hnlp3LpAe-rdUXf_OI9_rJgMu7SiF61GyPkVPmllspncKf2k4qJVGlk1lD_-Rp5N9pFFg4JCtqKzgWKudFRY2qmMk5qpr-nHprif92EsyH1RHW5NK5MReKn4sT_ZTooK/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/AVvXsEhtPFdKdtfj67INTCmVe_J4YZiMArd5gTIDgSCfYOqGp3CK_e0K6UFnzjWUN-9Biqz77aegLpuH7TO5wPszTiLUdEzgxlGzy9Xcr1t14u7tferzZIhtATuZDnCWy41pY5VqQdk-70C_dxiZ/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/AVvXsEh2p7vqO5HpQoLqYcebVH57PiCOqsFUC6lfjvGgTT20eaXroogrO0BFDZxa4zatB8FwzYWijBs-szdp1jRdZg4MqKIjFCPMl5CRXl0zJaw-IF8kWHXXtjzlbdFy6viP_5h4Y5kkumtp8EVw/s1600/rss.png") no-repeat center center;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
</style>
الشكل التالث
opacity: 0.6; } </style> <div id="social"> <a href="http://twitter.com/ProYounessBlogg"><img alt="Twitter" src="http://img221.imageshack.us/img221/3171/twittericont.png" title="تابعنى على تويتر"></a> <a href="http://www.facebook.com/ProYounessBlogg"><img alt="Feed" src="http://img521.imageshack.us/img521/3997/rssiconldl.png" title="الخلاصات"></a> <a href="http://feeds.feedburner.com/ProYounessBlogg"><img alt="Facebook" src="http://img707.imageshack.us/img707/5055/facebookiconq.png" title="تابعنى على الفيس بوك"></a> <a href="https://plus.google.com/105245220392251111571"><img alt="Google Plus" src="http://img9.imageshack.us/img9/6204/googleplusiconl.png" title="جوجل بلس"></a> <a href="#"><img alt="Youtube" src="http://img835.imageshack.us/img835/1835/youtubeiconf.png" title="تابعنى على يوتيوب"> </a> <a href="https://www.youtube.com/user/ProYounessBlogg"></a> </div> <div style="clear: both"> </div>
ملاحظة : قم بتغيير ما باللون الازرق بما يناسبك
0 التعليقات Blogger 0 Facebook