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


اليوم سأقوم بمشاركة معكم قطعة مربع/صندوق رائع وأنيق للإشتراك في مدونة Blogger. لا يوجد أي JavaScript المضافة في هذه القطعة. فقط كود CSS ، لذلك لا داعي للقلق حول سرعة تحميل المدونة. لزيادة المتابعين في شبكات الاجتماعية يجب علينا إضافة هذه القطعة في المدونة. يمكنك إضافة هذه القطعة مربع الإشتراك في المدونة بلوجر بسهولة جدا و ببساطة.




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


 1. انتقل إلى تخطيط >> إضافة أداة  HTML/JavaScript 
 2. إضافة الكود التالية في ذلك.


<div dir="rtl" style="text-align: right;" trbidi="on">
<style type="text/css">
#subscribe-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5V3ei2sgwaNQLpwx-NgNNhbZ5R0hpz2hXcI8U4fbytHwVPQHZji4tmPLkJamNtz7nN67NGRoVHnZFsIB5-ttvDoe0jO6qnbulw5u3Ywm6_zYcjxNhAhW-QligNz-H2p8319T20BBc09RS/s1600/border.png) repeat scroll 0 0 transparent;
padding: 3px;
}
#subscribe-box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_Q_es0aeNsZpl33sYzlA55BtMVG2_xwu67z7GPtN6AVlmObkc6bvYIeBBZVo37S_xz3V6I8fTz8oM0ol6HH7YZAHOeAWZWNKe4cHX4mhXgtxztd63Ub2dR3PCv-1996RLDbCDzYb7Otl/s1600/bg.png) repeat scroll 0 0 #F7F7F7;
border-radius: 15px;
padding:5px;
overflow: hidden;
}
a.linkopacity img {
filter:alpha(opacity=75);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-ms-transition:All .5s ease;
-o-transition:All .5s ease;
transition:All .5s ease;
padding: 3px;
border: 1px solid #999;
}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-khtml-opacity: 1;
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
}
#subscribe-box:hover table {
    top: 0;
}
#subscribe-box h1{
margin-top: 5px;
color: black;
font-family: arial;
font-size: 15px;
margin-bottom: 5px;
line-height: 14px;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
}
#subscribe-box table {
position: relative;
top: 40px;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-ms-transition:All .5s ease;
-o-transition:All .5s ease;
transition:All .5s ease;
margin-bottom: 0px;
}
#subscribe-box td {
padding: 2px;
}
#subscribe-box input{
background: white;
border: medium none;
font-size: 12px;
padding: 10px;
width: 150px;
color: #666;
font-family: arial;
margin-bottom: 3px;
width: 55%;
}
#subscribe-box input:focus{outline:none;}

#subscribe-box .submit{
background: #E73827;
color: #fff;
cursor: pointer;
font-weight: bold;
text-shadow: 0 1px 2px black;
width: 90px;
font-family: arial;
margin-left: -3px;
font-size: 14px;
}
</style>

<br />
<div id="subscribe-wrapper">
<div id="subscribe-box">
<h1>
اشترك للحصول على أحدث دروس عبر البريد الإلكتروني</h1>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=StupidComputer', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<center>
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;أدخل عنوان بريدك الإلكتروني...&quot;;}" onfocus="if (this.value == &quot;enter your email address...&quot;) {this.value = &quot;&quot;}" size="20" type="text" value="أدخل عنوان بريدك الإلكتروني..." />
<input name="uri" type="hidden" value="StupidComputer" />
<input name="loc" type="hidden" value="en_us" />
<input class="submit" type="submit" value="الاشتراك" /></center>
</form>
<center>
<table>
<tbody>
<tr><td><a class="linkopacity" href="http://feeds.feedburner.com/StupidComputer" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyXJbqAkA0TksC3krv5z8H71up7NW2gbSn5vMAh1LYu6OXnwwxkJpB659_M3cGpclQBMOrum2fBSWvmUeMqfLQVKJqVksB2ztnjAdwVepfpL6hZSbTMk-4JsoXpRmYNT-A690oNjmIAWJo/s1600/rss.png" /></a></td>
<td><a class="linkopacity" href="http://www.facebook.com/wikilazy" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkasqgpjQ7XChT81KapzolFbqVFnl6gv8mWBvqvHqNDX1WHeapi-oqlS3VdwzUAEcU4QJIXY7k_i9TvdtjVpyxa_nVU3qZ-safd6qUXHZbSOYDTwNRKrqbwZ-uNUflvMWbJu1_CXhwWU6f/s1600/facebook.png" /></a>
</td>
<td><a class="linkopacity" href="https://twitter.com/#!/wikilazy" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJTSoC6NXl2uyAFK3ScPadqxseTOfqlylaKTGgFj8Fqx-hgkHbwr6HvVJUpW5mft-soF1WA2ib-jZmOqhvOZVBd34VmlsBUEnkU9un7cJmbdOdjCZa3WUmsCQmygi_a90cM8K7Kxu8jtR/s1600/twitter.png" /></a>
</td>
<td><a class="linkopacity" href="https://plus.google.com/b/111126125541133774283/111126125541133774283" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJ5jf08X9SJo3rAIMulreYNLSGsW1s7aPtCn2v54uysERNoJ_6ycWL0tjsciO5JFMHzwNuezNVj1UY-pqt3kw2KvE9R010HYrEtdQRoTdMUZE3bJlxOH1jhg1fhlpaa3XOTWxyRrGPvWL/s1600/Google.png" /></a>
</td>
</tr>
</tbody></table>
</center>
</div>
</div>
</div>


 التخصيص:

 استبدال نصوص الحمراء بعنوان موقعك الاجتماعية واسم المستخدم.


إرسال تعليق

أحدث أقدم