أيقونات جديد لمدونتك Social Icons

بسم الله الرحمن الرحيم

 

في هذه التدوينة سأقدم لك إن شاء مجموعة من الأسقونات الخاصة بالشبكات الإجتماعية الجديدة، فهي تتميز بشكلها الجميل و الأنيق و اللذي سيزيد من جمالية مدونتك.

 

تتكون هذه الأيقونات من زر Facebook و Twitter و RSS و زر +Google ليتمكن زوارك من التواصل معك على شبكة Google الإجتماعية الجديدة.

 

ستظهر الأيقونات بهذا الشكل

 

أما طريقة تركيب الأيقونات فهي بسيطة  و ما عليك سوى إتباع الشرح بالأسفل.

1- توجه إلى لوحة تحكم المدونة / تصميم / إضافة أداة / Html/JavaScript

 

2- أضف الكود الموجود بالأسفل في مربع الكود

<a href="http://facebook.com/wedget.blogs" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheeouOrSaQF8w-_cMCSzJ4VDW-fltrQih5ziFG5I9fV_eIAHn1wNFCTP6cRJys5wsAfxtWiMB6F84L-6Cz7C8y3EMkNBl2wxy3M7eIF5YeW-fzjQfCd3bJXcQAkiBw1ZRSa0cVdM2HfLc/s1600/facebook-30x43.png" /></a><a href="http://twitter.com/grinigm" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUwi1ByUZWxS8tpg_efWN5cEn7sZvPYleXZ05wscqhsZiEwJfOnX3nda4BMcMrhMB1cu831try4dR2oJUbwDfk51OE5vHUiSex_X1l5puEoZU68PonakdUkK423f5kYROMlWjjw3c9VI/s1600/twitter-30x43.png" /></a><a href="https://plus.google.com/u/0/106763460954904910048/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyi-lFVXraI86xhOZnEnv3FLkYI_gPEWUS0HmUdXbAvEk4ixWbLiLMvdkiN1i3UNms4yXpJLL4H3gWzavkdYYK_vK8aV8Ohc7zs79LI7XFnvYh0zlmHRvkEiBEtqZGtdi5H7ByqUh-KNI/s1600/googleplus-30x43.png" /></a><a href="http://feeds.feedburner.com/widget-blogger" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcMotOLKr5qyOgbXaBvnNZQkBathc2udOi0a_q3BpvwZT-0AXOLasC3tc3O9ZFabvtndC9aCqgjxLyKFJH8wlKiCAplqPrIF52keWlcx16R7AJLeRLf0tMMM7P5acsIoLt2AGCg4OtHo/s1600/rss-30x43.png" /></a>

3- قم بتغير ما هو باللون الأحمر بإسمك الخاص على الشبكات الإجتماعية، كما يمكنك تغير الرابط باللون الأخضر بصورة الشبكة الإجتماعية التي تريد يمكنك إختيارأيقونات أخرى من هنا أزرار الشبكات الإجتماعية Bright Social

4- الأن قم بحفظ الأداة

 

الأن قم بوضع ردك أو استفسارك على التدوينة.

+

أضف قائمة للأدوات أسفل مدونتك Wibiya Toolbar

بسم الله الرحمن الرحيم

الجميع قد شاهد هذه الإضافة في مدونات مختلفة و أعتقد أنك من بينهم. هذه الإضافة الجميلة و المقدمة من موقع Wibiya تتيح لك إختيار قائمة تظم العديد من الإضافة و التي تسهل على زوار مدونتك الإبحار فيها بكل حرية و سلاسة.

 

 

كما أن الإضافة مجانية فهي تحتوي على الكثير من الأزرار الخاصة بالمواقع الإجتماعية، و المواضيع الشعبية، و قائمة البحت، الكثير غيرها.

و لكي لا أطيل عليك في الحديث أتركك مع الإضافة

1. توجه لموقع الإضافة http://www.wibiya.com 
2. إختر شكل القائمة و يمكنك معاينة الشكل بالأسفل
3. أضف ما تريد من الإضافات التي ترد أن تتظمنها القائمة، كما يمكنك مسح الإضافات التي لا ترغب فيها
4. إختر المنصة التي تتواجد بها مدونتك (هنا العديد من الخيارات و في حالتنا ستكون Blogger )
5. بعدها سيتم توجيهك للوحة التحكم إختر المدونة التي تريد أن تظيف لها القائمة
6. و بهذا تكون قد إنتهيت و يمكنك معاينة الإضافة على المدونة.

 

إن أعجبك الموضوع فلا تبخل علينا بتعليقاتك

+

إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box

بسم الله الرحمن الرحيم

 

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

 

هذه الإضافة يبحث عنها الكثيرون و قد تلقيت بعض الرسائل من متتبعي المدونة يطلبونها، و أنا في عدم سرعة تلبية الطلب لأسباب قهرية.

 

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

 

1- توجه إلى لوحة تحكم المدونة

2- تصميم ثم تحرير HTML

3- إبحث عن الوسم التالي </head>

4- ثم ضع فوقه مباشرة الكود التالي

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

5- بعد ذالك إبحث عن الكود التالي ]]></b:skin>

6- و ألصق هذا الكود فوقه مباشرة

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgph9oT2fI7ZNftJ0x1FASF8BH3pmcM4119D0xCgWMuYAEK-5VCI-nlpvdggA7fkmmy7iyUAJiwIbliPt3YkW8HI6uGzpW_14B-g1EZy2NTRYrBlgB3Pb3S37h-USdZP4DafrXpJKOIgNE/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

7- قم بحفظ القالب الأن

 

بعد وضع هذه الأكواد توجه إلى تصميم عناصر الصفحة و قم بإضافة أذاة Html/JavaScript و ضع بها الكود التالي

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/Psi.Arabe&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

الأن قم بتغير ما هو باللون الأحمر بإسم صفحتك على ال Facebook ثم إحفظ الأداة و تمتع بالإضافة الرائعة.

 

أتمنى أن يكون موضوع اليوم قد نال إعجابك، و إن فعل فلا تبخل علينا بتعليقاتك

+

ضع عنوان لتدويناتك بتأثيرات جميلة Heading Tag

بسم الله الرحمن الرحيم

 

موضوع اليوم سيكون عن تزين عناوين التدوينات لتظهر بشكل جميل و أكثر إحترافية. سنعتمد فيها على تقنية CSS3 الأكثر من رائعة .

 

 

يمكنك مشاهدة التأثير على مدونة فأر التجارب

توجه لقالب المدونة و ابحث عن الوسم

]]></b:skin>

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

/*----Widget Heading Tag----*/

h3{
font-family:veranda !important;
font-style:italic !important;

}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;

}

.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

الأن بالتغيرات التي تريدها حسب شكل مدونتك أو إترك الكود كما هو.

• لتغير الخط بخط مدونتك، قم بتغير كلمة  veranda بإسم الخط اللذي تريد. و غير كذالك كلمة italic لتغير شكل الخط.
• لتغير لون الخط و لون الحدود قم بتغير القيمة التالية #666
• لتغير لون الخط و لون الحدود عند مرور سهم الفأرة قم بتغير القيمة التالية #FF133F
• لتغير لون الظل في الوضع العادي قم بتغير القيمة التالية #666
• لتغير الظل عند مرور سهم الفأر قم بتغير القيمة التالية #FF133F
• بعد إتمام التغيرات قم بحفظ القالب

 

كيف تقوم بإدراج التأثير في التدوينات

 

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

<h3>ضع هنا عناوين المقال</h3>

عندما تقوم بنشر تدويناتك سترى سحر الكود يعمل، أتمنى أن يكون الموضوع قد نال إعجابك. في انتظار تعليقاتك و استفساراتك تقبل سلامي الحار.

سلام

+

Subscription Box بشكل جذاب و أنيق

بسم الله الرحمن الرحيم

 

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

 

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

 

كنا قد تحدثنا عن إضافة مشابهة هنا  صندوق عائم للإشتراك في خدمة RSS و هنا أضف صندوق القوائم البريدية بشكل منبثق Subscription Pop Up

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

 

كيف تقوم بتركيب الإضافة

1- توجه إلي تصميم / تحرير HTML

2- قم بأخد نسخة إحتياطية من القالب

3- قم بتوسيع القالب

4- ثم إبحث عن الكود التالي

 

<data:post.body/>

5- ثم قم بوضع الكود التالي تحته مباشرة

 

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-sub-box'><h1>إشترك لتحصل على جديد المواضيع مجانا</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=widget-blogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكتروني هنا ...&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك الإلكتروني هنا ...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='أدخل بريدك الإلكتروني هنا ...'/> <input name='uri' type='hidden' value='widget-blogger'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='إشترك الأن'/></center></form></div>
</b:if>

الأن قم بتغير الأتي

• قم بتعديل النص المظلل باللون الأخضر إن أردت ذالك أو اتركه كما هو سيظهر هذا النص فوق خانة البريد الإلكتروني.
• قم بتغير رابط الخلاصة المضلل باللون الأحمر برابط خلاصة مدونتك.

6- الأن قم بحفظ القالب و عاين الإضافة

و بهذا سيزيد عدد المسجلين في قوائمك البريدية بسبب هذه الإضافة اللافة لنظر. لدى لا تتردد في تجريبها .

+