قوالب بلوجر معربة

الاثنين، 26 يناير 2015

بلوجر فيس تعود من جديد

0 التعليقات

 السلام عليكم ورحمه الله وبركاته




المدونة تعود من جديد لتنشر المزيد من الابداع

والدروس والدورات وكما عودتكم المدونة علي نشر ما هو حصري انتظرونا الايام المقبله سوف نقوم بنشر كل ماهو جديد في عالم البلوجر من اضافات وقوالب وهكات وكل شئ يخص البلوجر ولكن نحن نحتاج لتشجعيكم كما في السابق لنعود بقوة
فريق عمل الموقع

الثلاثاء، 2 أكتوبر 2012

بلوجر فيس تكمل شهرها التاني

5 التعليقات

بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين حبيبي محمد صلي الله عليه وسلم

اليوم الموافق 3/10/2012 تكمل بلوجر فيس شهرها الثالث علي التوالي ومع انجازات ما اشاء الله

اول انجاز هو ظهورها في محركات البحث بمعني ان تذهب لجوجل الان واكتب بها كلمة بلوجر فيس وستري كما في الصورة


وانضمام شامل كول الينا

وانضمام كاسر بلوجر

واتمام مائة موضوع و 250 تعليق
وشكرا باذن الله انجازات اخري افضل وافضل

والسلام عليكم ورحمة الله وبركاته

كيفية اضافة صندوق المتابعة عبر المواقع الاجتماعية بتقنية css3 مثل التي تعمل بها مدونة بلوجر فيس

3 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين سيدنا محمد خير البشر اجميعن ثم اما بعد
اضافة اليوم في غاية الجمال والروعة وانا اذا كان هناك مكان في مدونتي لها لا كنت وضعتها 

وهذا الاضافة مكونة من خليط بين css3 التي يعمل بها قالب مدونة بلوجر فيس ولغة البرمجة الاساسية html
انا لن اطيل عليكم ولكني اقول هذا لاستعياب اكثر لمعلمومات انت في بلوجر فيس لاتاخذ اضافة وتذهب بل يجب ان تاخذ معلمومة ايضا وفهم لنذهب للدرس اولا ساريكم مشاهدة حية 
مشاهدة حية


لوضع الاضافة في مدونتك اضغط علي الزر الذي بالاسفل



وللتعديل علي الكود ابحث عن
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
غير باللون الازرق بالكلمة بجملة اخري حسب ما تريد 
واغير علامة# برابط صفحاتك 

والي هنا قد انتهي الدرس ارجو ان يكون قد نال اعجبكم واي استفسار انا في الخدمة ومنتظر تقييمكم للموضوع

كيفية وضع ازار لوحة المفاتيح او الكيبورد في موضوعتك وتدوينتك في بلوجر

5 التعليقات

بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين صلي الله عليه وسلم
موضوع اليوم اعتقد انه بحث عنه الكثير حتي انا كنت ابحث عنه حتي قررت صنع الكود هيا بنا نبداء الدرس
ساريكم مثال حي الان كالعادة

blogger face

انها مفيدة جدا في الشروحات وبالذات في بلوجر

الان سنذهب لنعرف طريقة التركيب 

اذهب للوحة تحكم بلوجر
ثم قالب ..تحريرhtml..متابعة.. وابحث عن
]]></b:skin>
باستخدام  
Ctrl + f

وضع قبلها او فوق الوسم هذا الكود


kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}



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

عن طريق تغير وضع تاليف الي (تحرير html)
ووضع هذ الكود


<kbd>هنا الكلمة المرادة</kbd>

والي هنا قد انتهي الموضوع والسلام عليكم ورحمة الله وبركاته منتظر تقيمكم للموضوع باذن الله نلتقي في موضوع اخر 

السبت، 22 سبتمبر 2012

كود عمل رابط تلقائي للموضوع والمصدر داخل كل تدوينة

4 التعليقات
بسم الله الرحمن الرحيم

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



مميزاته عمل باك لينك داخل التدوينه + تعطي شكل جميل للتدوينه

للمعاينة 




نبدأ الشرح

أولا يجب أن تاخذ نسخة احتياطية من القالب قبل البدء في الشرح

ابحث عن الوسم التالي
 <data:post.body/> 

(إن وجدت ثنتين فالثانية هي المقصودة)  ثم مباشرة بعدها ضع الكود الآتي:

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><b:if cond='data:blog.pageType == &quot;item&quot;'><div style="text-align: center;"><span>
<span style='margin:0px;padding:10px 10px 10px 10px;font-family:Arial;font-size: 15px;line-height: 20px;'>رابط الموضوع الاصلي: <a expr:href='data:post.url'><data:post.title/></a></span><span style='margin:0px;padding:10px 10px 10px 10px;font-family:Arial;font-size: 15px;line-height: 20px;'>المصدر: <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></span>
</span></div></b:if>


قم بحفظ القالب وهكذا ينتهي الشرح.

شكر ا ومنتظر تقيمكم للموضوع

الخميس، 30 أغسطس 2012

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

1 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين واضافة اليوم اضافة جميلة واعتقد ان الكثير بحثوا عنها كثيرا وحولو حتي تعلم صنع الفلاش وانا الحمد لله وجدت لكم الحل  لندخل في الموضوع ولن اطيل عليكم كثيرا لكي لا تملوا مني ساريكم المشاهدة المباشرة الان




مشاهدة مباشرة

اضافة لها اشكال كثيرة وانا ساضع بعضها فقط وهذا الشكل الاول


اذا اردته انسخ الكود الذي بالاسفل وضعه في اداة java scribt
<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" width="250" height="150"><param name="movie" value="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=blogger-face"></param><a href="http://24work.blogspot.com/" title="Blogger Widgets">Blogger Widgets</a><embed src="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="250" height="150" menu="false" wmode="transparent" flashvars="username=blogger-face"></embed></object>
استبدل ما باللون الازرق باسم حسابك في تويتر
وهذه الشكل الثاني
اذا اردته انسخ الكود الذي بالاسفل وضعه في اداة java scribt
<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON0/twitbutton.swf" width="250" height="150"><param name="movie" value="http://www.buzzbuttons.com/BUTTON0/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=blogger-face"></param><a href="http://24work.blogspot.com/" title="Blogger Widgets">Blogger Widgets</a><embed src="http://www.buzzbuttons.com/BUTTON0/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="250" height="150" menu="false" wmode="transparent" flashvars="username=blogger-face"></embed></object>
هذا الشكل الثالث
وهذا الكود الخاص به
<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" width="250" height="150"><param name="movie" value="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=blogger-face"></param><a href="http://24work.blogspot.com/" title="Blogger Widgets">Blogger Widgets</a><embed src="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="250" height="150" menu="false" wmode="transparent" flashvars="username=blogger-face"></embed></object>
الي هنا قد انتهي الدرس انتظرو باقي الاشكال مني في وقت قريب باذن الله ارجو ان اكون افتدكم ومنتظر تقيمكم واذا اردتم اي موضوع واي اضافة في مجال المدونة هذه صفحة طلب المواضيع من هنا  والسلام عليكم ورحمة الله

السبت، 25 أغسطس 2012

اضافة صندوق الشباكات الاجتماعية بتقنيةcss يوضع في العامود الجانبي boxsocial

8 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين واليوم مع درس واضافة يبحث عنها الكثيروهي  صندوق تضع به رابط حسابك علي تويتر وفيس بوك وفيد بنر (rss) وبتقنية css لن اطيل عليكم كثيرا لنبداء الدرس وقبل البداء ساريكم مشاهدة حية كالعادة






مشاهدة مباشرة


اذا اعجبتك  وتريد اضافتها  اترك تعليق قبل ان تذ هب Facebook Smileys - Wink Facebook Smileys - Grin واضغط علي الزر الذي بالاسفل




غير ما يلزم في الكود وهو 

http://www.blogger.com/facebook%20URL
http://www.blogger.com/TWITTER%20URL
http://www.blogger.com/FEED%20URL


بروابط حسابتك علي تويتر وفيس بوك وفيد بنر


ارجو ان يعجبكم الموضوع والاضافة ولتنسونا بدعائكم  ومنتظر تقيمكم

الجمعة، 17 أغسطس 2012

اضافة اداة اخر المواضيع مع عدد التعليقات وتاريخ نشر الموضوع وتاثير جميل علي الصور في بلوجر

8 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين ثم اما بعد اضافة اليوم اضافة جميلة جدا جداسوف تعجب الجميع اذن الله وانا نفسي ساضع منها في مدونتي وهي عبارة عن اداة مثل المشاركات الشائعة الموجودة في مدونتي ولكن زيادة بها ميزاتان اولهما تحت كل عنوان موضوع  عداد للتعليفات وتاريخ نشر الموضوع وهذا يسهل عليك الكثير ساريكم مثال حي كالعادة

مشاهدة مباشرة

اذا اعجبتك اكتب تعليق واضغط علي الزر الذي بالاسفل :)



الي هنا انتهي الموضوع اي استفسار اترك نعليق و منتظر تقيمكم للموضوع

الخميس، 16 أغسطس 2012

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

6 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين سيدنا محم صلي الله عليه وسلم درس يوم جميل جدا
وباذن الله سوف يعجبكم وهو عبارة عن ناف بار به ادة جوجل بلس وتوتير وزر اعجبني لصحفتك علي الفيس بوك لن اطيل عليكم في الشرح وساريكم مشاهدة حية للاضافة كالعادة




مشاهدة مباشرة


اذا اعجبتكم اكملوا معي الدرس
اولا نذهب الي لوحة تحكم بلوجر


</body>
ونضع قبله الكود التالي

<!-- Notification code by blogg-face.blogspot.com start -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuHmOBMCthm8PORPxwCjLDZCHDGREqKofC-zL6QJ7hH-7TfSvioJ2fBPW90AGjV5XpnRfM8geagkiiJ4Z71Gm4b-CPaRsuuqZSV57O1-Lfqp4QvVwdBkISzGoz9-MEZHGFAJLyIwr307e/s1600/ut-bg.png&#39;) repeat;
color:#fff;
margin:0 auto;
text
border-top: 1px solid #fff;
height:40px;
font-size:15px;
position:fixed;
bottom:0;
z-index:999;
width:98%;
border-top-left-radius:10px;
border-top-right-radius:10px;
text-align: center;
display:block;
font-weight: tahoma;
font-family: tahoma;;
font-color:#fff;
}
#ut-sticky:hover
{background:#000000;}

#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:tahoma; font-family:&quot;tahoma&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>

<p><script id="_wautd7">var _wau = _wau || []; _wau.push(["small", "ozklwgurcddl", "td7"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone> <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogger.face&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=21&amp;appId=374608635945221" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>

function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!-- Notification code by  blogg-face.blogspot.com/  -->



غير#000000 باي لون تريد وهو المسؤال عن لون الشريط عن اقترب الموس اليه وهذه صفحة توليد اكواد الالوان
lمن هنا

واستبدل هذا برابط صفحتك علي الفيس بوك blogger.face

واذا كان رابط صفحتك عبارة عن ارقام وحروف ادخل علي هذا الرابط واستبدله من هنا

اضافة صندوق باسكرول متحرك للمدونات الجماعية بها فريق العمل

6 التعليقات
بسم الله الرحمن الرحيم وبه نستعبن والصلاة والسلام علي اشرف المرسلين ثم اما بعد اضافة اليوم جميلة وانفردنا ويرجع الفضل لاخي عبد الغفور مصمم الاضافة وهذا السكربت خاص ولنبداء الدرس ولن اطيل في الحديث هاريكم مثال حي كالعادة انظر اسفل المدونة







لاضافة الكود اضغط علي الزر بالاسفل مع تغيير ما يلي




<li><img height="80" src="http://i.imgur.com/DeUs5.png" width="80"/><h3><a href="
http://blogg-face.blogspot.com/">مدونة بلوجر فيس</a></h3></li>
<li><img height="80" src="http://i.imgur.com/DeUs5.png" width="80"/><h3><a href="
http://blogg-face.blogspot.com/">مدونة بلوجر فيس</a></h3></li>
<li><img height="80" src="http://i.imgur.com/DeUs5.png" width="80"/><h3><a href="
http://blogg-face.blogspot.com/">مدونة بلوجر فيس</a></h3></li>
<li><img height="80" src="http://i.imgur.com/DeUs5.png" width="80"/><h3><a href="
http://blogg-face.blogspot.com/">مدونة بلوجر فيس</a></h3></li>
<li><img height="80" src="http://i.imgur.com/DeUs5.png" width="80"/><h3><a href="
http://blogg-face.blogspot.com/">مدونة بلوجر فيس</a></h3></li>
-غير ما باللون الاحمر برابط ملفك الشخصي
-غير ما باللون الازرق الفاتح برابط صورتك
-غير ما اللون الازرق باسم الكاتب او المدير

اي استفسار اترك تعليق ومنتظر تقيمكم والسلام عليكم ورحمة الله

الثلاثاء، 14 أغسطس 2012

اضافة قائمة افقية بتاثيرات جميلة جدا علي شكل اوراق الشجر بتقنية CSS

0 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين كل عام وانتم بخير اضافة اليوم اضافة مميزة وجميلة جدا
وهي عبارة عن قائمة افقية توضع فوق رسائل المدونة او تحتها حسب اردتك ساريكم مثل حي اضغط علي الزر بالاسفل
وادخل اانزل اسفل المدونة

مشاهدة مباشرة


اذا عجبتك تريد الاضافة اضغط علي هذا الزر

اسف علي قصر الدرس لاني مجهد من العمل ارجو ان ينال اعجبكم منتظر تقيمكم للموضوع

الاثنين، 13 أغسطس 2012

اضافة صندوق لاشتراك عبر البريد الالكتروني بثلاث اشكال روعة غاية في الجمال

2 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين سيدنا محمد ابن عبد الله اضافة اليوم باذن ستعجبكم كثيرا
هذا هو شكل الاضافة اذا اعجبتك

تايع مع الدرس
الشكل الاول


<style type="text/css">#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg15OseHHQ5YW0O03J2my_gEqHOQ4D6f2zOLIG17xc0XSt8CsgpQwox-JhcSB9rBhVHxEb_lO2JSi_IGl8a-hFhvmGawYGVmuc_c8uj9YSOdHyTqTJprZUV5op6aUcVO3jANwEVefnxQ_Ur/s1600/latesthack.com-blue.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}form#latesthack-searchform #sbutton{margin:-8px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}</style>   <div id="latesthack-searchbox"><form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogger-face', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="hidden" value="blogger-face" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />         <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>

هذا الشكل الثاني



<style type="text/css">
#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVEJyhtnGQ_PE_9mOJTMNBZTlPr-TA99s2S3eqfvXUoYTmAiR9LXCeOBqdNWIGxuN8Hy1U8b1GqWr1Js5a9iZ6G-T2TAxhUuZaTZntiWbEVRq-qqRpHqFOYPyCl4LuozGYEhMjGIo1IiO/s1600/latesthack.com-red.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}
form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#latesthack-searchform #sbutton{margin:-7px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="latesthack-searchbox">
<form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogger-face', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="blogger-face" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

هذا الشكل الثالث




<style type="text/css">#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMFlm8Go2O7dmfZ_FMe00ITHPxHuPGNVvUjUc0_tvDlUPc5sIGJS3Ior5mQkobQG5F77lIcyOa8a-MtLE0FDeEF3agPnaeGxEkWCJOE4FNihpx9v-6SywSHAhMdpzZ7k0XEfSdPJ-rv-Js/s1600/latesthack.com-silver.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}form#latesthack-searchform #sbutton{margin:-8px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}</style>   <div id="latesthack-searchbox"><form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogger-face', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="hidden" value="blogger-face" name="uri" /> <input type="hidden" name="loc" value="
AR_ar" />         <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>

ضع الشكل الذي تحب في اداة  html java script

واحفظ ومبروك عليك منظر تقيمكم للموضوع واي استفسار انا في الخدمة ما عليك سوي ترك تعليق

الأحد، 12 أغسطس 2012

كود اداة التبادل الاعلاني بتاثير جميل بتقنية css

10 التعليقات
بسم الله الرحمن الرحيم درس اليوم اضافة كود اداة التبادل الاعلاني الموجودة في مدونة بلوجر فيس بناء علي طلب الاخ او الاخت REDA  ولقد لبيت طلبه لمعاينة الاضافة انظر للعامود الجانبي لمدونة  بلوجر فيس لاضافة الاداة ضع هذا الكود في اداة html java script

ملاحظة غير ما يلزم في الكود

<style>
#advertise{
  margin: auto;
}
 .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
 .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
 .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 .adss img { max-height: 75px; max-width: 75px; }
 #adsanime:hover { opacity:0.2; }
 #adsanime a strong {
    -webkit-transition-property: opacity;
     -webkit-transition-duration: 500ms;
     -moz-transition-property: opacity;
      -moz-transition-duration: 500ms; }
 #adsanime a strong {
   opacity:0;
    -webkit-transition-property: opacity, top;
     -webkit-transition-duration: 300ms;
      -moz-transition-property: opacity, top;
       -moz-transition-duration: 300ms; }
 #adsanime {
    opacity:0.5;
     -webkit-transition-property: opacity, top;
      -webkit-transition-duration: 300ms;
       -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms; }
 #adsanime:hover { opacity:1; }
 #adsanime:hover a strong { opacity:1; top:-10px; }
</style>
<center>
<div class="adss" id='adsanime'>


<a href="رابط المعلن">
   <img src="رباط البنر" />
   <strong>اعلن هنا</strong></a>
    </div>


   <div class="adss" id='adsanime'>


<a href="رابط المعلن/">
   <img src="رابط البنر" />
   <strong>مدونة بلوجر فيس</strong></a>
    </div>




   <div class="adss" id='adsanime'>


<a href="رابط المعلن/">
   <img src="رابط البنر" />
   <strong>اسم مدونة المعلن</strong></a>
    </div>


   <div class="adss" id='adsanime'>


<a href="رباط المعلن/">
   <img src="رابط البنر" />
   <strong>اسم المدونة</strong></a>
    </div>




   <div class="adss" id='adsanime'>


<a href="رابط المعلن/">
   <img src="رابط البنر" />
   <strong>اسم مدونة المعلن</strong></a>
    </div>


   <div class="adss" id='adsanime'>


<a href="رابط المعلن">
   <img src="رابط البنر" />
   <strong>أعلن هنا</strong></a>
    </div>
   <div class="adss" id='adsanime'>


<a href="رابط المعلن">
   <img src="رابط البنر" />
   <strong>أعلن هنا</strong></a>
    </div>


   <div class="adss" id='adsanime'>


<a href="رابط المعلن">
   <img src="رابط البنر" />
   <strong>أعلن هنا</strong></a>
    </div>


   <div class="adss" id='adsanime'>


<a href="رابط المعلن">
   <img src="رابط البنر" />
   <strong>أعلن هنا</strong></a>
    </div>           </center>
 <br />
<a href="رابط صفحة التبادل الاعلاني">للتبادل الاعلاني يرجي الاتصال بنا هنا</a><br /><br /><div style="text-align: center;"><script language='Javascript'>
<!--
document.write(unescape('%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%6C%6F%67%67%2D%66%61%63%65%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%20%72%65%6C%3D%22%6E%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%41%64%64%65%64%20%62%79%20%74%68%69%73%3C%2F%61%3E%3C%2F%64%69%76%3E'));
//-->
</script></div>

وتم بحمد الله ومن يريد اي اضافة او تعديل في قالب يترك تعليق باللذي يريده ومنتظر تقيمكم واي شئ انا في الخدمة في اي وقت

والسلام عليكم ورحمة الله وبركاته

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

0 التعليقات
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين ثم اما بعد اليوم مع اضافة جميلة جدا ويبحث عنها الكثير و انا اليوم  اتيت بها من اجلكم علي مدونة بلوجر فيس وهذا الاضافة عبارة عن صندوق ينثق عندما تنزل الي اسفل الصفحة وبه زر اعجبني للصفحتك علي الفيس بوك بتقنة الجي كيوري مع خاصية الاغلاق ساريكم مثال حي علي ذلك

مشاهدة حية




اذا اعجبتك وتريدها في مدونتك تابع معي الشرح


بالنسبة للواجهة الجديدة  :                                           -   بالنسبة للواجهة القديمة :

لاتنسى اخد نسخة احتياطية للقالب                           لاتنسى اخد نسخة احتياطية للقالب 

1.لوحة التحكم                                                                              1 -.لوحة التحكم
2.القالب                                                                                      2  - .تخطيط أوتصميم  
3. ثم تحريرhtml;.                                                                      ثم 3 - تحريرhtml
4.متابعة                                                                                      4
-.توسيع القالب 
5 -.توسيع القالب



نبحث عن الكود التالي باستخدم f3  او  ctrl&f


</head>


بعد ما وجدت هذا الكود تضع قبله او فوقه الكود التالي


<style type="text/css">

.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em; 

-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}

.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }

.slidenote img:hover { margin-top: -1.95em; }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://latest-hacks.googlecode.com/svn/gadgets/Sliding Description Panel/jquery.slidenote.min.js" type="text/javascript"></script>

وغير ما باللون الاحمر اذا اردت بلون اخر بما يناسبك ويكمنك دخول صفحة اكواد الالوان من هنا

وبعدها تبحث عن


</body>

وتضع قبله او فوقه هذا الكود


<div class='slidenote' id='note'>

<div id='container'>

<h2>اذا اعجبتك المدونة اضغط اعجبني</h2>

<span><em>المدونة علي فيس بوك</em></span>

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogger.face&amp;send=false&amp;layout=standard&amp;width=300&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=80&amp;appId=374608635945221' style='border:none; overflow:hidden; width:300px; height:80px;'/>

</div>

</div>

<script type='text/javascript'>

$(&#39;#note&#39;).slideNote({

closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquQp7IL0YWGb5Pa0jaFJNBQq02jiTHbBG_18aJDsIOXpVm3QiqbOHm7TnNmTe6NlHBSl3iEtez8B2UUKMrDL-NNVw9QDTNbB7rPVtnFu38EU9q_c1n3GnXWmAqfq78-3ObC1oJxC4b-w/s320/slidenote.close.png&#39;

});

</script>

.ملاحظة غير ما يلزم .استبدل: blogger.face.برابط صفحتك واذا كان رابط صفحتك طويل استخدام هذا وبه ارقام كثير https://www.facebook.com/username.ادخل الرابط الذي بالاعلي واختار اسم لصفحتك.واستبدل الكلامات بما تريد
وعين الاضافة قبل الحفظ ثم احفظ ومبروك عليك الاضافة واي استفسار اترك تعليق ومنتظر تقيمكم للموضوع
والسلام عليكم و رحمة الله وبركاته
افلام اون لاين

اختارنا لكم

 
© 2014 جميع حقوق النشر محفوظة لدى المعرفة Blog | تصميم قوالب بلوجر