فى هذه المدونة ستجد معاينات لإضافات وأكواد من مدونة ابداعاتى

الأربعاء، 28 أغسطس 2013

صندوق إشتراك جميل بتقنية CSS3 للبلوجر



طريقة الإضافة :

1 - قم بتسجيل الدخول إلى مدونتك 
2 - من لوحة التحكم الخاصة بمدونتك توجه إلى القالب
3 - قم بالبحث عن :
                          ]]></b:skin>
أضف قبله هذا الكود :

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUSyDrxixnI62yHaPZgjUnjQ3xxY98E6E_zlu6TgXuIKHPWWnkc6lmn9pxzev5y5SViXv2O4toxCaseQrTnlLWhe-hb_u0Wq5Zqq8VkWpcas4x8O9GYrFo3NmLxv8F_TeZQovQ2v0bWU/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPPYPOcXkTgDSeVdYg6bbBOoJj4dQpPebW4Ahm8_Bi8ovlEYRdbjRtPMZeCI7_bjsLScK1Nk8jOwX4cbVSaRzlA3EYRbn5jsICLLAuIWRwwTJNeMqy0h8oJgUvEhg8ydQnA8dF-EsZTsk/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip7qwsK73U2MNSxWGsK-2rjvso88XxQDG4tk8RvUgfIrralImv8hXEgwMXSJDPunOLTA2uugVV_m7vh0QHUIsejDQG0e7C4Kbti44IFBqKM6nPTy1flTFypnscWMBm26JgmjLAWOUyr8I/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigoL0Cr2PiXFF4o6dkD6nHOpvAQOvXxT7k40PXLCNpQ7BVkhc94eqpCMB2SqpiXfwM4vHLjzHLH3Ezj5xJ-pWOXp4GF_k270vsp3NNwlN8hGJVpeO3RSZMOpgmjHb6-L59n8MTj3To7kI/s1600/ico-social-youtube.png) no-repeat;
margin-right:0;
}
form.emailform {
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Liw1W_w7zv2gugex7yi2Y7zbs6llzoVb_FIy1ezdCvhJGr4Kcco97ORcAKkXXNFzrX4Zy8VjqW9lOQ_Z8z6jWlmE1eG1O9XBLzFD_RucHG21DoSipYIOBvc1rb6nV3ulUbP4Pb0NwA1C/s28/w2b-mail.png) 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%);
}

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

<div class="widget-content">
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQRiFF9cBaR-ySPFMcLn0a7YagEODopkCf5891XHLYZ0FsolGsKhNM639fjad1FriVrjotNNdnuxudoRqNJlVdRToAx9lV0g15530Wr2eKuGJScoX3tiA9uJqhUPUP2mOYzXJU4LPyuk/s1600/email-px-png.png" /></center>
<center><span style="font-size:16px;font-weight: bold;;">توصل بكل المواضيع الجديدة ،كن السبّاق وقم بإدخال بريدك الإلكتروني و إنتظر الجديد</span>
<ul class="social">
<li><a class="social-facebook" href="رابط الفيس بوك" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="رابط تويتر" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="رابط الخلاصة" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="رابط اليوتيوب" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" class="emailform" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=xxxxx', '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 == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكتروني...&quot;;}" onfocus="if (this.value == &quot;أدخل بريدك الإلكتروني...&quot;) {this.value = &quot;&quot;}" />
<input type="submit" class="ebutton" value="إشترك" title="" alt="" />
</form>
<center>
<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'trebuchet ms', Trebuchet, Arial, Verdana, sans-serif; font-size: 10px; font-style: italic; background-color: rgb(255, 255, 255); "></span>
</center>
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://homeblooger.blogspot.com/" target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>

قم بتغيير ما هو بالأحمر بما يناسب موقعك
شــــــارك الموضوع :

0 التعليقات:

إرسال تعليق

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

 
جميع الحقوق محفوظة © 2014 تجربة القالب 3