إضافة صندوق اشتراك جميل بتقنية CSS إلى مدونة البلوجر

عندما تكون تتصفح مدونات عربية أو أجنبية فإنك تلاحظ أن أغلب هاته المدونات تتوفر على صندوق اشتراك يحتوي على أيقونة الفايسبوك وتويتر و اليوتوب والإشتراك بالبريد الإلكتروني و رابط التغذية Rss إلخ…. يمكنني القول أن هذا الصندوق ذو أهمية بالغة كونه يساعد في الحفاظ على الزوار فمثلا عند الإشتراك بالبريد الإلكتروني فإن الزائر سيبقى على اطلاع بآخر المواضيع و المستجدات

و كذلك هو الحال بالنسبة لصفحة الفايسبوك و تويتر و قناة اليوتوب و رابط التغذية RSS. لذلك تطرقت في هذه التدوينة إلى شرح طريقة إضافة هذا الصندوق إلى المدونة و بتأثير جميل مستعينا بتقنية CSS.

تتبع هذه الخطوات لإضافة الصندوق :

توجه للوحة التحكم =>اختر تصميم => تحرير HTML
قم بتوسيع القالب
وأبحث عن الكود التالي :

قم بإضافة هذا الكود فوق ]]>

> مباشرة.

<blockquote data-blogger-escaped-style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQL7a4pV-nE82MNHCVnl_8pBDoWkaZwuxHxGqGDYSqqKoc34y9QPyFtUCQxLa_bzBezgiVwO0P46oj-Dlj3JEUscwkzHp6iKm5H2KQHv7hHWC-s3ZVbPsZQzh61oseqaXIlNw4qA31Zyw/); background-position: 0% 0%; border: 1px solid rgb(153, 153, 153); font-family: 'Courier New', Courier, monospace; font-size: 13px; height: 30px; line-height: 18px; margin: 10px 0px; overflow-x: scroll; overflow-y: auto; padding: 18px 10px 17px; position: relative; width: 499px; z-index: 50;">
<div dir="ltr" style="margin: 0px; padding: 0px;">
</div>
</blockquote>
<blockquote data-blogger-escaped-style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQL7a4pV-nE82MNHCVnl_8pBDoWkaZwuxHxGqGDYSqqKoc34y9QPyFtUCQxLa_bzBezgiVwO0P46oj-Dlj3JEUscwkzHp6iKm5H2KQHv7hHWC-s3ZVbPsZQzh61oseqaXIlNw4qA31Zyw/); background-position: 0% 0%; border: 1px solid rgb(153, 153, 153); font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin: 10px 0px; overflow-x: scroll; overflow-y: auto; padding: 18px 10px 17px; position: relative; z-index: 50;">
<div dir="ltr" style="margin: 0px; padding: 0px;">

----------------------Social Newsletter Widget  -----------------------------

/* Social &Newsletter Widget *//* Social */.social {

background:#fcfcfc;

height:80px;

padding:0 15px;

border-bottom:1px solid #f0f0f0;

}

.social li {

float:right;

width:52px;

margin-left:15px;

text-align:center;

}

.social li.last {

margin-right:0;

}

.social li a {

opacity:0.6;

filter:alpha(opacity=60);

font-size:11px;

color:#666;

padding-top:42px;

line-height:34px;

}

.social li a:hover {

opacity:1.0;

filter:alpha(opacity=100);

color:#666;

text-decoration:none;

}

.social .social-feed {

display:block;

background:url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDrIGYzyqaD8N_Fd7PMJpQawrN7bjRUSJah77Sfqps21Dty4ltYOTwbC-9aCiAgEoHoCYKaKmXi3UNLBxzNTLVgOzBbRPWsRTulKJ0uo8fbf287DvobkIjTPie9_FrNpaT8DGHC345yA/s1600/ico-social-rss.png)" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDrIGYzyqaD8N_Fd7PMJpQawrN7bjRUSJah77Sfqps21Dty4ltYOTwbC-9aCiAgEoHoCYKaKmXi3UNLBxzNTLVgOzBbRPWsRTulKJ0uo8fbf287DvobkIjTPie9_FrNpaT8DGHC345yA/s1600/ico-social-rss.png)</a> no-repeat;

}

.social .social-twitter {

display:block;

background:url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3lNE7Rr36o-skvX-ewZjIazt5ctKmW3egojuoRpe0OeFpaPbQ-Bxc3AviQiGzCuQsaMUCVpmElTJpYt9ewUv9vW30iQ6hFbVqbKOprPzgdlE43f2AAuLWueAKRoo74F_tof_lyaISrdE/s1600/ico-social-twitter.png)" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3lNE7Rr36o-skvX-ewZjIazt5ctKmW3egojuoRpe0OeFpaPbQ-Bxc3AviQiGzCuQsaMUCVpmElTJpYt9ewUv9vW30iQ6hFbVqbKOprPzgdlE43f2AAuLWueAKRoo74F_tof_lyaISrdE/s1600/ico-social-twitter.png)</a> no-repeat;

}

.social .social-facebook {

display:block;

background:url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFfyRhVt1N_65POYmNIAKJa_KeBNwC1DsP9uh4uIKn6C5JIlqrm5oF9wZMfjYbV54TKpOWaBpG3TjhLmpkOVVvKiK6-O-kHqRzzSoDbwAtzmZO1Oh7A7sNY-Pzl1Ap0a0yozQSvGjp5jU/s1600/ico-social-facebook.png)" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFfyRhVt1N_65POYmNIAKJa_KeBNwC1DsP9uh4uIKn6C5JIlqrm5oF9wZMfjYbV54TKpOWaBpG3TjhLmpkOVVvKiK6-O-kHqRzzSoDbwAtzmZO1Oh7A7sNY-Pzl1Ap0a0yozQSvGjp5jU/s1600/ico-social-facebook.png)</a> no-repeat;

}

.social .social-youtube {

display:block;

background:url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg974SZYPu13o4-nxUng1aZJMLrZBXKHLNLH5JUreJnvtf9wWmbSpX6zGWxRwDp_K1q1cfOewNkqUG6CPdfHThpPR5pXJvnkm8nSy1ZB7CvN70-ZOLFucyuV-TNTVj4HRTVtp2xUGHO34I/s1600/ico-social-youtube.png)" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg974SZYPu13o4-nxUng1aZJMLrZBXKHLNLH5JUreJnvtf9wWmbSpX6zGWxRwDp_K1q1cfOewNkqUG6CPdfHThpPR5pXJvnkm8nSy1ZB7CvN70-ZOLFucyuV-TNTVj4HRTVtp2xUGHO34I/s1600/ico-social-youtube.png)</a> no-repeat;

margin-right:0;

}

form.emailform {

margin:20px 0 0;

display:block;

clear:both;

}

.emailtext {

background:url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht2ihsAo-KRKqQRpswnd8neJBmI3JGS_T41tCS2nGxPxcVrD3XIOnDR1-mH8Uwi38yDEkf0iWiVFr5-jwEV-YNH45y0peqaDYkbmYnwyBJBGb03F2upsFHaLTTTGfU5W6CVW7AkU0T1JOi/s28/w2b-mail.png)" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht2ihsAo-KRKqQRpswnd8neJBmI3JGS_T41tCS2nGxPxcVrD3XIOnDR1-mH8Uwi38yDEkf0iWiVFr5-jwEV-YNH45y0peqaDYkbmYnwyBJBGb03F2upsFHaLTTTGfU5W6CVW7AkU0T1JOi/s28/w2b-mail.png)</a> no-repeat scroll 4px center transparent;

padding:7px 15px 7px 33px;

color:#444;

font-weight:bold;

text-decoration:none;

border:1px solid #D3D3D3;

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

-moz-box-shadow:1px 1px 2px #CCC inset;

-webkit-box-shadow:1px 1px 2px #CCC inset;

box-shadow:1px 1px 2px #CCC inset;

}

.ebutton {

color:#444;

font-weight:bold;

text-decoration:none;

padding:6px 15px;

border:1px solid #D3D3D3;

cursor:pointer;

-moz-border-radius:4px;

-webkit-border-radius:4px;

-goog-ms-border-radius:4px;

border-radius:4px;

background:#fbfbfb;

background:-moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #f4f4f4));

background:-webkit-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background:-o-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background:-ms-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4', GradientType=0 );

background:linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

}
</div>
</blockquote>

الأن قم بحفظ القالب وتوجه بعدها إلى تصميم أو تخطيط.
ثم إضافة أداة HTML/JavaScript .
قم بنسخ ثم لصق هذا الكود داخل الأداة :

<li><a class="social-facebook" href=”<a data-blogger-escaped-target="_blank" href="https://www.facebook.com/pages/Th3-Developer/149054018631615">مدونه تقنيه</a>” rel="nofollow" target="_blank">Facebook</a></li>

<li><a class="social-twitter" href=”<a data-blogger-escaped-target="_blank" href="https://twitter.com/MDiabyan">تقنيه Twitter</a>” rel="nofollow" target="_blank">Twitter</a></li>

<li><a class="social-youtube" href=”Youtube Chaine” rel="nofollow" target="_blank">YouTube</a></li>


</ul>


</center>


<form action="<a href="http://feedburner.google.com/fb/a/mailverify%22" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">
http://feedburner.google.com/fb/a/mailverify"</a> method="post" target="popupwindow" class="emailform" onsubmit="window.open('<a href="http://feedburner.google.com/fb/a/mailverify?uri=xxxxx'" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">http://feedburner.google.com/fb/a/mailverify?uri=xxxxx'</a>, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="hidden" value="softechnogeek" name="uri" />

<input type="hidden" name="loc" value="en_US" />

<input type="text" value="أدخل بريدك الإلكتروني..." name="email" class="emailtext" onblur="if (this.value == "") {this.value = "أدخل بريدك الإلكتروني...";}" onfocus="if (this.value == "أدخل بريدك الإلكتروني...") {this.value = ""}" />

<input type="submit" class="ebutton" value="إشترك" title="" alt="" />

</form>


<center>




</center>


<div dir="ltr" style="text-align: left;" trbidi="on">


<a href=<a href="http://pro-fess-ional.blogspot.com/" style="color: #1a7d2e; margin: 0px; padding: 0px; text-decoration: none;">http://Pro-fess-ional.blogspot.com/</a> target="_blank" title="Blogger Widget">Blogger Widget »</a></div>


</div>


</div>

</div>
</blockquote>

التعديل على الكود :

مدونه تقنيه ==> رابط صفختك على الفايسبوك
تقنيه Twitter ==> رابط التويتر الخاص بك
Feedburner Url ==> رابط التغذية Rss الخاص بمدونتك
Youtube Chaine ==> رابط قناتك على اليوتوب
Uri=xxxxx ==> اسم المستخدم الخاص برابط التغذية
http://Pro-fess-ional.blogspot.com/ ==> غير هذا الرابط برابط مدونتك

و بهذا نكون قد ركبنا هذا الصندوق في المدونة و بالتوفيق للجميع

إضافة صندوق اشتراك جميل بتقنية CSS إلى مدونة البلوجر

بقلم محمد شومان

مواضيع ذات صله

0 التعليقات :

المتابعون

اصدقاء المدونه على الفيس بوك