18‏/06‏/2014

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

1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة




<div id='profile-wrapper'>
<p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء.</p>
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='https://facebook.com/arabe1web'></a>
<a class='twitter' href='#'></a>
<a class='behance' href='#'></a>
<a class='skype' href='#'></a>
<a class='khamsat' href='#'></a>
</div>
</div>
</div>
<style>
#profile-wrapper {
text-align: center;
padding: 34px 20px;
background: #FFF;
border-top: 3px solid #E24300;
margin: 0 0 20px;
font-size: 12px;
font-weight: normal !important;
}
#profile-wrapper img {
border-radius: 100%;
margin: 0 0 10px;
}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;
}
#profile-wrapper p {
font: normal 12px ges,;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:11px 0 0;overflow:hidden; margin-right: 30px;}
.social-icons a.facebook {
}
.social-icons a.facebook:hover {
background-color: #4265b9;
}
.social-icons a.twitter {
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}
.social-icons a.behance {
}
.social-icons a.behance:hover {
background-color: #444;
}
.social-icons a.skype {
}
.social-icons a.skype:hover {
background-color: #0bbff2;
}
.social-icons a.youtube {
}
.social-icons a.youtube:hover {
background-color: #df3333;
}
.social-icons a.google {
}
.social-icons a.google:hover {
background-color: #d62408;
}
.social-icons a.khamsat {
}
.social-icons a.khamsat:hover {
background-color: #F39C12;
}
.social-icons.sticky-social {
text-align: right;
float: right;
}
.social-icons {
float: right;
text-align: center;
}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
float: right;
display: block;
}
.social-icons a {
background-color: #dadada;
}
.social-icons a {
width: 30px;
height: 30px;
margin: 0 3.5px !important;
}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
</style>



<div class='loginform'>
<form action='/search' method='get'>
<input class='username' placeholder='الاسم المستعمل' type='text'/>
<input class='password' placeholder='كلمة المرور' type='password'/>
<input class='checkbox' type='checkbox' value='كلمة المرور'/><span class='rememberme'>تذكرني&#1567;</span>
<a class='passwordlost' href='#'>نسيت كلمة المرور</a>
</form>
</div>
<style>
.loginform {
padding: 20px;
}
.username {
width: 70%;
padding: 14px 40px;
border: none;
font: normal 12px tahoma;
border-radius: 3px;
border:1px solid #eee;
color: #0093FF;
margin: 0 0 10px;
}
.username:focus {
border:1px solid #0093FF;
}
.password {
width: 70%;
padding: 14px 40px;
border: none;
font: normal 12px tahoma;
border-radius: 3px;
border:1px solid #eee;
color: #0093FF;
margin: 0 0 10px;
}
.password:focus {
border:1px solid #0093FF;
}
.rememberme {
font: normal 12px tahoma;
color: #888;
padding: 0 5px;
}
.passwordlost {
font-size: 12px;
text-decoration: underline;
float: left;
}
</style>


<div class='socialnetwork'>
<ul>
<li class='tw'><a href='#'>تويتر</a><p><span>4,321</span>متـابع</p></li>
<li class='rss'><a href='#'>الخلاصات</a><p><span>1,587</span>مشتـرك</p></li>
</ul>
</div>
<style>
.socialnetwork {
background: #FF954C;
margin: 0px;
}
.socialnetwork ul {
padding: 10px;
overflow: hidden;
}
.socialnetwork li {
float: right;
width: 33.33%;
background: #F8F8F8;
text-align:center;
padding: 0;
transition:0.4s;
}
.socialnetwork a {
width: 100%;
text-align: center;
display: block;
text-indent: 9999em;
padding: 80px 0 0;
}
.socialnetwork li:hover {
transition:0.4s;
}
.socialnetwork .fb{background:#666 url(http://2.bp.blogspot.com/-CFlwJYkcnVw/U4jgUCAHTXI/AAAAAAAADR4/1hQTbW_HDEc/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .fb:hover{background:#0C6DB4 url(http://2.bp.blogspot.com/-CFlwJYkcnVw/U4jgUCAHTXI/AAAAAAAADR4/1hQTbW_HDEc/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .tw{background:#555 url(http://1.bp.blogspot.com/-9JRfTF50xds/U4jgpkmIa_I/AAAAAAAADX8/pqjKZJbhs34/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .tw:hover{background:#33b5e5  url(http://1.bp.blogspot.com/-9JRfTF50xds/U4jgpkmIa_I/AAAAAAAADX8/pqjKZJbhs34/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .rss{background:#444 url(http://4.bp.blogspot.com/-xM7OELn38hI/U4jgkDMnJCI/AAAAAAAADWg/lobKUqprafg/s1600/rss.png) no-repeat center 30%;}
.socialnetwork .rss:hover{background:#ffbb33 url(http://4.bp.blogspot.com/-xM7OELn38hI/U4jgkDMnJCI/AAAAAAAADWg/lobKUqprafg/s1600/rss.png) no-repeat center 30%;}
.socialnetwork span {
float: right;
text-align: center;
width: 100%;
font:bold 14px arial;
color:#fff;
padding:0 0 5px
}
.socialnetwork p {
padding:10px 0;
text-align:center;
font:normal 14px ges;
color:#fff;
background: rgba(50, 50, 50, 0.47);
}
</style>



<div class='newsletter'>
<form action='/search' method='get'>
<input class='newsbox' placeholder='ضع بريدك الالكتروني هنا..' type='text'/>
</form>
</div>
<style>
.menuoption{display:none;}
.menuoption select {
padding: 10px;
float: right;
margin: 10px;
width: 60%;
font: normal 12px tahoma;
color: #888;
background: #F8F8F8;
border: 1px solid #EEE;
}
.newsletter {
padding: 10px;
}
</style>
تعتبر الإضافات الخاصة ببلوجر من أولويات المدون لذا نحرص على أن نختار ما يناسبنا وأيضا ما سيجذب الزائر ، لذا قررنا  أن نعمل مكتبة لإضافات بلوجر مجموعة في أن واحد وبما أن هذه أول مكتبة فتتضمن أربع إضافات وسنعمل على تكبيرها مع المدة، إخترنا لكم إضافات بعضها لإطفاء جمالية على القالب فمثل إضافة تسجيل الدخول التي سنشاهدها بالمعاينة فهي لإضافة رؤية مميزة فقط، كما نعلم أن منصة بلوجر ليست بها خاصية التسجيل ولتسهيل إضافت الكود الخاص بكل إضافة فلقد سهلنا الأمر وكل ما عليكم فعله هو إضافة أداة
شرح  طريقة التركيب

1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة




<div id='profile-wrapper'>
<p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء.</p>
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='https://facebook.com/arabe1web'></a>
<a class='twitter' href='#'></a>
<a class='behance' href='#'></a>
<a class='skype' href='#'></a>
<a class='khamsat' href='#'></a>
</div>
</div>
</div>
<style>
#profile-wrapper {
text-align: center;
padding: 34px 20px;
background: #FFF;
border-top: 3px solid #E24300;
margin: 0 0 20px;
font-size: 12px;
font-weight: normal !important;
}
#profile-wrapper img {
border-radius: 100%;
margin: 0 0 10px;
}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;
}
#profile-wrapper p {
font: normal 12px ges,;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:11px 0 0;overflow:hidden; margin-right: 30px;}
.social-icons a.facebook {
}
.social-icons a.facebook:hover {
background-color: #4265b9;
}
.social-icons a.twitter {
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}
.social-icons a.behance {
}
.social-icons a.behance:hover {
background-color: #444;
}
.social-icons a.skype {
}
.social-icons a.skype:hover {
background-color: #0bbff2;
}
.social-icons a.youtube {
}
.social-icons a.youtube:hover {
background-color: #df3333;
}
.social-icons a.google {
}
.social-icons a.google:hover {
background-color: #d62408;
}
.social-icons a.khamsat {
}
.social-icons a.khamsat:hover {
background-color: #F39C12;
}
.social-icons.sticky-social {
text-align: right;
float: right;
}
.social-icons {
float: right;
text-align: center;
}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
float: right;
display: block;
}
.social-icons a {
background-color: #dadada;
}
.social-icons a {
width: 30px;
height: 30px;
margin: 0 3.5px !important;
}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
</style>



<div class='loginform'>
<form action='/search' method='get'>
<input class='username' placeholder='الاسم المستعمل' type='text'/>
<input class='password' placeholder='كلمة المرور' type='password'/>
<input class='checkbox' type='checkbox' value='كلمة المرور'/><span class='rememberme'>تذكرني&#1567;</span>
<a class='passwordlost' href='#'>نسيت كلمة المرور</a>
</form>
</div>
<style>
.loginform {
padding: 20px;
}
.username {
width: 70%;
padding: 14px 40px;
border: none;
font: normal 12px tahoma;
border-radius: 3px;
border:1px solid #eee;
color: #0093FF;
margin: 0 0 10px;
}
.username:focus {
border:1px solid #0093FF;
}
.password {
width: 70%;
padding: 14px 40px;
border: none;
font: normal 12px tahoma;
border-radius: 3px;
border:1px solid #eee;
color: #0093FF;
margin: 0 0 10px;
}
.password:focus {
border:1px solid #0093FF;
}
.rememberme {
font: normal 12px tahoma;
color: #888;
padding: 0 5px;
}
.passwordlost {
font-size: 12px;
text-decoration: underline;
float: left;
}
</style>


<div class='socialnetwork'>
<ul>
<li class='tw'><a href='#'>تويتر</a><p><span>4,321</span>متـابع</p></li>
<li class='rss'><a href='#'>الخلاصات</a><p><span>1,587</span>مشتـرك</p></li>
</ul>
</div>
<style>
.socialnetwork {
background: #FF954C;
margin: 0px;
}
.socialnetwork ul {
padding: 10px;
overflow: hidden;
}
.socialnetwork li {
float: right;
width: 33.33%;
background: #F8F8F8;
text-align:center;
padding: 0;
transition:0.4s;
}
.socialnetwork a {
width: 100%;
text-align: center;
display: block;
text-indent: 9999em;
padding: 80px 0 0;
}
.socialnetwork li:hover {
transition:0.4s;
}
.socialnetwork .fb{background:#666 url(http://2.bp.blogspot.com/-CFlwJYkcnVw/U4jgUCAHTXI/AAAAAAAADR4/1hQTbW_HDEc/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .fb:hover{background:#0C6DB4 url(http://2.bp.blogspot.com/-CFlwJYkcnVw/U4jgUCAHTXI/AAAAAAAADR4/1hQTbW_HDEc/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .tw{background:#555 url(http://1.bp.blogspot.com/-9JRfTF50xds/U4jgpkmIa_I/AAAAAAAADX8/pqjKZJbhs34/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .tw:hover{background:#33b5e5  url(http://1.bp.blogspot.com/-9JRfTF50xds/U4jgpkmIa_I/AAAAAAAADX8/pqjKZJbhs34/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .rss{background:#444 url(http://4.bp.blogspot.com/-xM7OELn38hI/U4jgkDMnJCI/AAAAAAAADWg/lobKUqprafg/s1600/rss.png) no-repeat center 30%;}
.socialnetwork .rss:hover{background:#ffbb33 url(http://4.bp.blogspot.com/-xM7OELn38hI/U4jgkDMnJCI/AAAAAAAADWg/lobKUqprafg/s1600/rss.png) no-repeat center 30%;}
.socialnetwork span {
float: right;
text-align: center;
width: 100%;
font:bold 14px arial;
color:#fff;
padding:0 0 5px
}
.socialnetwork p {
padding:10px 0;
text-align:center;
font:normal 14px ges;
color:#fff;
background: rgba(50, 50, 50, 0.47);
}
</style>



<div class='newsletter'>
<form action='/search' method='get'>
<input class='newsbox' placeholder='ضع بريدك الالكتروني هنا..' type='text'/>
</form>
</div>
<style>
.menuoption{display:none;}
.menuoption select {
padding: 10px;
float: right;
margin: 10px;
width: 60%;
font: normal 12px tahoma;
color: #888;
background: #F8F8F8;
border: 1px solid #EEE;
}
.newsletter {
padding: 10px;
}
</style>
15 Blogger تعليقات
Disqus
15 التعليقات
المشرف
avatar

شكر لكم لقد أعجبتني الإضافة الخاصة بتسجيل الدخول رائعة
واصلووووووووووو :)

المشرف
avatar

لقد أعجبتني الإضافة الخاصة بتسجيل الدخول رائعة

المشرف
avatar

سوال اين يتم تسجيل الدخول لانى وضعت الاضافة فى بلوجر لم يحصل شى ؟

المشرف
avatar

اخي كما ذكرت في الموضوع أنا تلك الإضافة هي فقط لتزيين ٬ لأن بلوجر اصلا لا يحتوي على تلك الخاصية

المشرف
avatar
yasmine Ahmed 12/27/2014
delete

كيق سيقومون بتسجيل الدخول وتسجيل ليست موجود

المشرف
avatar
ahmed wazani 3/20/2015
delete

موضوع جميل هذا رابط موقع أختي :
http://www.omsaad.com/

merci

المشرف
avatar

لو سمحت عايز كود التواصل الاجتماعي

المشرف
avatar

تم التعديل يمكنك نسخ الكود الآن

المشرف
avatar
المشرف
avatar

عند إضافة أحد هده الإضافات لمدنتي أصبحت موقع مدونتى يتوجه دائما إلى مدونتكم مادا سأفعل ؟؟

المشرف
avatar
المشرف
avatar

ممكن تعبتلي قالب مدونتك
mohamedgfx29@gmail.com

المشرف
avatar

اخي الغالي كيف افعل خاصية تسجيل الدخول و الباسوورد ؟

المشرف
avatar

هي إضافة لتزيين فقط

المشرف
avatar

شرح اكثرمن رااائع لكن قل لي اخي كيف يمكن جعل اول اضافة تظهر في المواضيع فقط

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة