أهلا وسهلا بك إلى فورديزاد.
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.

الرئيسيةأحدث الصورالتسجيلدخول

فورديزاد :: :: تطوير المنتديات و المواقع:: :: قسم قوالب بلوجر معربة

شاطر

أضف صندوق إشتراك جميل بتقنية Css3 إلى بلوجر Emptyالأحد يناير 13, 2013 10:39 am
المشاركة رقم:
Admin


إحصائية العضو

المساهمات : 171
تاريخ التسجيل : 10/09/2012
https://fordz.ahlamontada.com
مُساهمةموضوع: أضف صندوق إشتراك جميل بتقنية Css3 إلى بلوجر


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



[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]



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

مثال للصندوق :



[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

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






1 - قم بتسجيل الدخول إلى مدونتك بلوجر.

2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.

3 - قم بالبحث عن :

]]></b:skin>


أضف قبله هذا الكود :
الكود:


----------------------Social Newsletter Widget By www.homeblooger.blogspot.com-----------------------------
/* 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(http://2.bp.blogspot.com/-rmq41pgw07w/Tsiw4-mWbkI/AAAAAAAAAiM/mPfgtkxQejo/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(http://4.bp.blogspot.com/-Sl_ER6EMfgI/Tsiw52f6_VI/AAAAAAAAAiQ/cM_KfAww8kg/s1600/ico-social-twitter.png)
 no-repeat;
}
.social .social-facebook {
display:block;
background:url(http://2.bp.blogspot.com/-uGVQ0Uj3rZg/Tsiw4Yz2NDI/AAAAAAAAAiE/YKIOK3M_zwY/s1600/ico-social-facebook.png)
 no-repeat;
}
.social .social-youtube {
display:block;
background:url(http://3.bp.blogspot.com/-qfHvHZZSPGg/Tsiw6NTml8I/AAAAAAAAAic/e4WtojhyZfk/s1600/ico-social-youtube.png)
 no-repeat;
margin-right:0;
}
form.emailform {
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext {
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/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="http://1.bp.blogspot.com/-05nCa_r6BsI/TwhrRwYTvhI/AAAAAAAAA74/t3j83HBdPVQ/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="https://www.facebook.com/[color=#cc0000]Homeblooger[/color]" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="http://twitter.com/[color=#cc0000]Homeblooger[/color]" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://feeds2.feedburner.com/[color=#cc0000]Homeblooger[/color]" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://www.youtube.com/user/[color=#cc0000]Homeblooger[/color]" 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=[color=#cc0000]xxxxx[/color]', '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>




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


منقول





الموضوع الأصلي : أضف صندوق إشتراك جميل بتقنية Css3 إلى بلوجر // المصدر : منتديات أحلى حكاية // الكاتب: forlou


توقيع : forlou








الــرد الســـريـع
..



الذين يشاهدون محتوى الموضوع الآن : 20 ( الأعضاء 3 والزوار 17)



أضف صندوق إشتراك جميل بتقنية Css3 إلى بلوجر Collapse_theadتعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة