في هذه الدرس الجديد انشاءلله سوف نتعلم طريقة أظافة نموذجين لأزرار مواقع التواصل الاجتماعي بشكل جميل وانيق والذي سوف يعجبك حتما,نحن نعلم مدى اهمية ازرار المواقع الاجتماعي بالنسبة للمدونين والذين يرغبون بعرض صفحاتهم الأجتماعية للزائرين لكي يحصلو من خلالها على زوار جدد.
تعتبر هذه الأضافات مهمة بالنسبة للمدونين والتي يجب توفرها على كل مدونة أو موقع لكي تساهم بشكل فعلي للحصول على زوار لصفحة الممدونة أو الموقع من الفيسبوك أو تويتر او أنستغرام تو جوجل بلس أو غيرها,وتعتبر هذه الاضافات مهمة بالنسبة للمدونات والتي يجب أن لاتخلو من كل مدونة.
طريقة التركيب
1-توجة الى لوحة التحكم الخاصة بلوجر
2-اختر التخطيط
3-قم باضافة أداة جديدة
4-أختر من بين الاشكال الثلاثة التالية الخاصة بمواقع التواصل الاجتماعي وضعها في الاداة الجديدة.
1-الشكل الأول
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<center>
<style>
ul.social
{
cursor: default;
margin: 0;
color:#fff;
}
ul.social li
{
position: relative;
display: inline-block;
margin: 0.25em;
top: 0;
color:#fff;
border-radius: 6px;
overflow: hidden;
background: #444;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
-moz-transition: background-color .2s ease-in-out, top .2s ease-in-out;
-webkit-transition: background-color .2s ease-in-out, top .2s ease-in-out;
-o-transition: background-color .2s ease-in-out, top .2s ease-in-out;
-ms-transition: background-color .2s ease-in-out, top .2s ease-in-out;
transition: background-color .2s ease-in-out, top .2s ease-in-out;
box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px rgba(255,255,255,0.1);
}
ul.social li:before
{
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.social li.twitter:hover { background-color: #2DAAE4; }
ul.social li.facebook:hover { background-color: #3b5998; }
ul.social li.youtube:hover { background-color: #BF2E25; }
ul.social li.googleplus:hover { background-color: #DA2713; }
ul.social li:hover
{
top: -5px;
}
ul.social li:active
{
top: 0;
}
ul.social li a
{
display: block;
position: relative;
width: 48px;
height: 43px;
outline: 0;
color: #fff !important;
line-height: 48px;
font-size: 25px;
text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
}
ul.social li a span
{
display: block;
text-indent: -9999px;
}
.ftwitter::before{content:"\f099";font-family:fontawesome;}
.ffacebook::before{content:"\f09a";font-family:fontawesome;}
.fyoutube::before{content:"\f167";font-family:fontawesome;}
.fgoogleplus::before{content:"\f0d5";font-family:fontawesome;}
.youtube a{text-align:center;text-decoration:none;}
.twitter a{text-align:center;text-decoration:none;}
.facebook a{text-align:center;text-decoration:none;}
.googleplus a{text-align:center;text-decoration:none;}
</style>
<ul class="social">
<li class="twitter"><a href="#" class="ftwitter" target="_blank"><span>Twitter</span></a></li>
<li class="facebook"><a href="#" class="ffacebook" target="_blank"><span>Facebook</span></a></li>
<li class="googleplus"><a href="#" class="fgoogleplus" target="_blank"><span>Google+</span></a></li>
<li class="youtube"><a href="#" class="fyoutube" target="_blank"><span>YouTube</span></a></li>
</ul>
</center>
2-الشكل الثاني
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
#socialmedia {list-style-type:none;}
#socialmedia li {
display: inline-block;
padding: 0;
}
.sicon{opacity:1;transition:all .5s;}
.sicon:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
</style>
<ul id="socialmedia"><a href="https://astuce-hassoubi.blogspot.com/" style="display:none;">حاسوبي Astuce</a>
<li class="tooltip"><a href="#" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuq0hRW1aB2nGQOAd6FWY9pGQpcS0frtPmto3cDpszjFxGmvzf2cFahYb8YgkUm6LN8bmmkp8nfpiCZTWAaIvdWlE88SXsrzIJ2Gh0v0NM_bp4Kfmtrs3gckBMDRh7-oaIWOlL-0upyIs/s1600/Facebook.png"></a><span class="tooltiptext">فيسبوك</span></li>
<li class="tooltip"><a href="#" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipLrvNXbwIiMHHOn1uv2DBz1Bo5rOzoKmBrJEvPQt_J18hkRujLEombFFJJaIPl8FA8y1Kozdz22alwf04ckO-UieVa7rRCsCJZdomHPj3HYdnlf2GAXKKNK4w7Bn5o0RTWmQ0FNazFaMz/s1600/Twitter.png"></a><span class="tooltiptext">تويتر</span></li>
<li class="tooltip"><a href="#" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0H4wKSbCnWEu04NO-g53b0I-E0n3FpeTlalx4ijSIJUbbX6aSwoXnIl96ctiq4hOnKK21BYHiCh-40zaFROR45tiTpy16T9uKpy3s08IEpomcGlllzPPMX0tG8DhAPKUQAmE9_mTafVwo/s1600/Youtube.png"></a><span class="tooltiptext">يوتيوب</span></li>
<li class="tooltip"><a href="#" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7lYnR0Rh9wD6PwneVyUety56F3fPK4XSLfDmCqTanHiAoDbu3CxLKtj_9qKn2-_nwKFybWuEQBA1rIZAHAQa0y1WrHmDUm54yzzAwW4st7HkJO4LJMyfB5KNvJUshDWeIMtpAlis-m3z/s1600/RSS.png"></a><span class="tooltiptext">RSS</span></li>
<li class="tooltip"><a href="#" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxIZ3S1JEMWuehod0aR4FFRb7H7WDeaRso1CtYmIkpTjWqJAsvE_9TEAyoLJMklq58ARz1UJLxgvlDgVLespjS4SVLzLeW-eqnz9aXUkwNQCVnv206bIyp-6Vo6JGBB0mu6c-ref1nuOD/s1600/Google+.png"></a><span class="tooltiptext">جوجل بلس</span></li>
</ul>
3-الشكل الثالث
<style>p#hb_socialicons img {
/* Spinning Social Icons Widget By www.4we-eb.blogspot.com */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
/* Spinning Social Icons Widget By www.4we-eb.blogspot.com */
</style>
<center>
<p id="hb_socialicons">
<a href="#">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwcKq6DvERerDpquyAQLCKxRZ7TXgGoYOxL_9tn5TF_y-lXAv-bSqxy1oanKTotaQMo8yaQmWcg4AoeH1XPF69L3yFHrZmsqpaw9jGSKrxIr5XFqgRKagCFrwEIXJf8F_PA679r1-A8c/s1600/helperblogger.com-facebook.png"></a>
<a href="#">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-o0DvNSUgzUKhcvParNU1Md2LQ3GujG5tkzV3WRBezBUwKDZes690hndRRwh0mygh6mjLNO-VLCrNlRGPgEA2rqQq4OMPG6umw9CLqIIbroyYrNNTu2EwyIaq9HKTrIDxzRcTEkIqPz8/s1600/helperblogger.com-twitter.png"></a>
<a href="#">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsE2O8jVQNJ3HRTCdXxkq6kqDJPCxdEJj1_nkavwvSdsdb_vxBI0VETOntpFGJnTNXsO-YqQUlpnubWp_rXMUpH2-xug0GWk07wZcNiXrUSeI7LkFeKc6RnHGlk3l28TwG29dJq-p1Vk/s1600/helperblogger.com-google_plus.png"></a>
<a href="#">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4RTC1AlDaYRslwwOeqnenPvIbVoRTh31LmgkIiAMz_FfN41NYWjRt7QtiaOFl_PhhkzDEY2I6-sbfYaRUOaHPH-GrUD-sbgAH25wXzKi8i8jpmLaUvLldRUuqziP2ei9KakwgrYH-Lo/s1600/helperblogger.com-rss.png"></a>
<a href="#">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQEJSXp0aQJCiKulpWxXfJvhxJfpPnUw-3ptW72AIY6VvPLLvoUWW_5tWooqAl98we008xTR_r_JvFlKEqAvG-MCJ3ChV8-KESvf-5xpPnC89Hu3bF7NFCixiHrjo4oHnJhaW232iD5A/s1600/helperblogger.com-youtube.png"></a>
</p>
</center
*ملاحظة:قم بتغيير علامة"#"بروابط مواقع التواصل الاجتماعي الخاصة بك قبل عملية الحفظ
0 تعليق
إرسال تعليق