Browse »
الرئيسية »
Posts filed under تنسيق القالب
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين سيد الخلق اجمعين سيدنا محمد صلي الله عليه وسلم ثم اما بعد هذا الموضوع طلبه مني عضونا العزيز amir aliraQi وهذا الدرس علي شرفه ونتوكل علي الله في شرح الموضوع سهل وجميل جداً ولكن يحتاج الي بعض التركيز
هذا الكود ولكن نحن سنعدل فيه ليتلائم مع المدونة والاضافة
<--start add to blogger by blogger-face.com--><center><form action="http://www.blogger.com/add-widget" method="post" target="_blank"><span style="font-size: large;"><b>Widget Title: </b></span> <input name="widget.title" size="25" type="text" value="Widget Title Here" /></center><br><center><input name="go" style="font-size: 20px; width: 180px;" type="submit" value="Add to Blogger" /><textarea name="widget.content" style="display: none; height: 0px; width: 0px;">هنا ضع كود الاضافة</textarea><input name="infoUrl" type="hidden" value="ضع هنا رابط مدونتك او موقعك" /><input name="logoUrl" type="hidden" value="رابط شعار مدونتك" /></form></center><--end add to blogger by blogger-face.com-->
هذ فقط كل ما في الامر وشكر خاص لـ amir aliraQi
والسلام عليكم ورحمة الله وبركاته
ومنتظر تقيمكم للموضوع
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين سيدنا محمد خير البشر اجميعن ثم اما بعد
اضافة اليوم في غاية الجمال والروعة وانا اذا كان هناك مكان في مدونتي لها لا كنت وضعتها
وهذا الاضافة مكونة من خليط بين 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>
غير باللون الازرق بالكلمة بجملة اخري حسب ما تريد
واغير علامة# برابط صفحاتك
والي هنا قد انتهي الدرس ارجو ان يكون قد نال اعجبكم واي استفسار انا في الخدمة ومنتظر تقييمكم للموضوع
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين صلي الله عليه وسلم
موضوع اليوم اعتقد انه بحث عنه الكثير حتي انا كنت ابحث عنه حتي قررت صنع الكود هيا بنا نبداء الدرس
ساريكم مثال حي الان كالعادة
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>
والي هنا قد انتهي الموضوع والسلام عليكم ورحمة الله وبركاته منتظر تقيمكم للموضوع باذن الله نلتقي في موضوع اخر
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين واضافة اليوم اضافة جميلة واعتقد ان الكثير بحثوا عنها كثيرا وحولو حتي تعلم صنع الفلاش وانا الحمد لله وجدت لكم الحل لندخل في الموضوع ولن اطيل عليكم كثيرا لكي لا تملوا مني ساريكم المشاهدة المباشرة الان
مشاهدة مباشرة
اضافة لها اشكال كثيرة وانا ساضع بعضها فقط وهذا الشكل الاول
اذا اردته انسخ الكود الذي بالاسفل وضعه في اداة 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>
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين واليوم مع درس واضافة يبحث عنها الكثيروهي صندوق تضع به رابط حسابك علي تويتر وفيس بوك وفيد بنر (rss) وبتقنية css لن اطيل عليكم كثيرا لنبداء الدرس وقبل البداء ساريكم مشاهدة حية كالعادة
مشاهدة مباشرة
اذا اعجبتك وتريد اضافتها اترك تعليق قبل ان تذ هب 
واضغط علي الزر الذي بالاسفل
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين ثم اما بعد اضافة اليوم اضافة جميلة جدا جداسوف تعجب الجميع اذن الله وانا نفسي ساضع منها في مدونتي وهي عبارة عن اداة مثل المشاركات الشائعة الموجودة في مدونتي ولكن زيادة بها ميزاتان اولهما تحت كل عنوان موضوع عداد للتعليفات وتاريخ نشر الموضوع وهذا يسهل عليك الكثير ساريكم مثال حي كالعادة
مشاهدة مباشرة
اذا اعجبتك اكتب تعليق واضغط علي الزر الذي بالاسفل :)
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين سيدنا محم صلي الله عليه وسلم درس يوم جميل جدا
وباذن الله سوف يعجبكم وهو عبارة عن ناف بار به ادة جوجل بلس وتوتير وزر اعجبني لصحفتك علي الفيس بوك لن اطيل عليكم في الشرح وساريكم مشاهدة حية للاضافة كالعادة
مشاهدة مباشرة
اذا اعجبتكم اكملوا معي الدرس
اولا نذهب الي لوحة تحكم بلوجر </body>
ونضع قبله الكود التالي
<!-- Notification code by blogg-face.blogspot.com start -->
<style type='text/css'>
#ut-sticky
{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuHmOBMCthm8PORPxwCjLDZCHDGREqKofC-zL6QJ7hH-7TfSvioJ2fBPW90AGjV5XpnRfM8geagkiiJ4Z71Gm4b-CPaRsuuqZSV57O1-Lfqp4QvVwdBkISzGoz9-MEZHGFAJLyIwr307e/s1600/ut-bg.png') 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:"tahoma"; 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&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=tahoma&height=21&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("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
<!-- Notification code by blogg-face.blogspot.com/ -->
غير#000000 باي لون تريد وهو المسؤال عن لون الشريط عن اقترب الموس اليه وهذه صفحة توليد اكواد الالوان
lمن هنا
واستبدل هذا برابط صفحتك علي الفيس بوك blogger.face
واذا كان رابط صفحتك عبارة عن ارقام وحروف ادخل علي هذا الرابط واستبدله من هنا
بسم الله الرحمن الرحيم وبه نستعبن والصلاة والسلام علي اشرف المرسلين ثم اما بعد اضافة اليوم جميلة وانفردنا ويرجع الفضل لاخي
عبد الغفور مصمم الاضافة وهذا السكربت خاص ولنبداء الدرس ولن اطيل في الحديث هاريكم مثال حي كالعادة انظر اسفل المدونة
لاضافة الكود اضغط علي الزر بالاسفل مع تغيير ما يلي
-غير ما باللون
الاحمر برابط
ملفك الشخصي
-غير ما باللون ا
لازرق الفاتح برابط صورتك
-غير ما اللون ا
لازرق باسم الكاتب او المدير
اي استفسار اترك تعليق ومنتظر تقيمكم والسلام عليكم ورحمة الله
بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين سيدنا محمد ابن عبد الله اضافة اليوم باذن ستعجبكم كثيرا
هذا هو شكل الاضافة اذا اعجبتك
تايع مع الدرس
الشكل الاول
<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 == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" 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 == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" 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 == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" 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
واحفظ ومبروك عليك منظر تقيمكم للموضوع واي استفسار انا في الخدمة ما عليك سوي ترك تعليق
بسم الله الرحمن الرحيم وبه نستعين و الصلاة والسلام علي اشرف المرسلين وعلي اله وصحبه اجميعن درسنا اليوم باذن الله يتكلم عن اضافة غاية في الجمال والروعة وتضيف لمدونتك الاناقة والاحترافية وكما عودتكم علي ان اتي لكم باضافات جميلة درس اليوم هو عبارة عن ان تختار رابط معين ولكن مشاهدة اضافة فستتضع صورة او رابط صحيح سنجعل الرابط هكذا
وهذه امثلة اخري والوان واحجام كثيرة
لن اطيل في كلامي كثيرا ولكن الاضافة جميلة من اعجبته فليكمل معي الدرس
اولا اولا :سنذهب للوحة تحكم بلوجر
سانضيف الان كود css داخل القالب لانها من دونها لن تعمل الاضافة
نبحث عن الكود التالي باستخدم f3 او ctrl&f
]]></b:skin>
.awesome, .awesome:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOmDP2XXEiliN7szL8snF70aFMZwBaMdq3uBKCREVOaTwDryotxq89epnAsshU3SxUAcoEXlD965W6ZdI_xH6CkGXaQ8OldK1I3Frvg02iv9YZkjY1BJeZe_7NdpXn9k-Y3jJunVTxJQc/s1600/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 30px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited { background-color: #e22092; }
.pink.awesome:hover { background-color: #c81e82; }
ونضع قبله الكود التالي
وقم بحفظ قالبك
عندما تريد وضع زر من الازرار في موضوع تضغظ علي تحرير html
وتضع احد من هذه الاكواد بالحجم المعين واللون الذي تريده
هذا الحجم الكبير
زر بحجم كبير
<a class="large blue awesome" href="هنا رابطك">مشاهدة مباشرة"</a>
<a class="large pink awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large magenta awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large green awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large red awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large orange awesome" هنا رابطك">مشاهدة مباشرة</a><a class="large yellow awesome" href="هنا رابطك">مشاهدة مباشرة</a>
مثال: اذا اردت مثلا ان تضع اللون الاحمر ستضع هذا الكود فقط
<a class="large red awesome" href="هنا رابطك">مشاهدة مباشرة</a>
وايضا في باقي الالوان والاحجام
هذا الحجم الوسط
<a class="medium awesome" href="هنا رابطك">مشاهدة مباشرة</a>
<a class="medium blue awesome" href="هنا رابطك">مشاهدة مباشرة</a>
<a class="medium pink awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium magenta awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium green awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium red awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium orange awesome" هنا رابطك">مشاهدة مباشرة</a><a class="medium yellow awesome" href="هنا رابطك">مشاهدة مباشرة</a>
هذا الحجم الصغير
زر بالحجم الصغير
<a class="small blue awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small pink awesome" هنا رابطك">مشاهدة مباشرة</a><a class="small magenta awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small green awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small red awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small orange awesome" هنا رابطك">مشاهدة مباشرة</a><a class="small yellow awesome" هنا رابطك">مشاهدة مباشرة</a>
والي هنا انتهي الدرس وارجو ان اكون افتدكم منتظرتقيمكم واي استفسار انا في الخدمة مع عليك هو ترك تعليق فقط
بسم الله الرحمن الرحيم وبه ونستعين وكل عام وانتم بخير بحلول شهر رمضاتن2012 كتبت لكم هذا الموضوع في 8/8/2012
باذن الله وسوف وموضوع اليوم عن تغيير شكل الاصدار الثاني وستكلمنا في الدرس السابق
واليوم سنتكلم عن الاصدار الثانيمن هذه الاداة الجميلة التي تعطي مدونتك الاحترافية للمساهدة المباشرة اضغط علي الزر بالاسفل
مميزات الاضافة:-
1. خفيفة في التصفح
2.متوافقة مع جمبع المتصفحات حتي العقيم internet exploer
3.تعطي الاناقة والاحترافية للمدونة
لن اطيل في الكلام سنذهب للشرح
اولا :سنذهب للوحة تحكم بلوجر
سانضيف الان كود jqurey
نبحث عن الكود التالي باستخدم f3 او ctrl&f
</head>
ونضع قبله او فوقه مباشرة الكود التالي
<!--Animated Label Links For Blogger http://blogg-face.blogspot.com/--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script><!--End Animated Label Links For Blogger http://blogg-face.blogspot.com/-->
ثم سانضيف الان اكواد css
نبحث عن الكود التالي باستخدم f3 او ctrl&f
]]></b:skin>
ونضع قبله او فوقه مباشرة الكود التالي
/*-----list-label css Blogger widget by blogg-face.blogspot.com/----*/
.list-label-widget-content li {
display: inline-block;
line-height: 28px;
margin-right: 4px;
padding: 0;
white-space:nowrap;
}
.list-label-widget-content li a {
-moz-border-radius: 8px;
-moz-box-shadow: 0 0 3px 0 #E9E9E9;
border: 1px solid #88BBC8;
font-size: 10px;
font-weight: bold;
padding: 4px;
text-transform: uppercase;
}
.list-label-widget-content li span{
display:none;
}
عين الااضافة ثم احفظ واي استفسار او طلب اضافة اترك تعليق ومنتظر تقكيمكم للموضوع
وانشاء الله في دروس جديدة علي مدونة بلوجر فيس
بسم الله الرحمن الرحيم والسلام عليكم اخواني الكرام ورحمة الله وبركاته واليوم في درس جديد وهو طريقة تغيير شكل ولون صندوق اعجابات الفيس بشكل ولن اخر جميل في بلوجر بتقنية css وتكلمنا في الدرس السابق عن كيفية تغيير شكل اداة المتابعين ولون اداة المتابعين
ودرس اليوم سيعجبكم باذن الله
 |
| صندوق اعجابات الفيس بوك |
مميزات الاضافة
- متوافقة مع جميع المتحصفحات
- يكمن التعديل علي لون وشكلها كما ترديد
- وخفيفية في التحميل ولا تثقل من تحميل المدونة
لن اطيل اكثر من هذا لنذهب الي شرح الدرس للمعاينة الحية
ارجو التركيز قليلا في الشرح
اولا توجه لوحة تحكم بلوجر
واضف هذا الكود فيها
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogger.face&width=260&height=290&colorscheme=dark&show_faces=true&border_color=%23FDFDFD&stream=false&header=true&appId=374608635945221" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:290px;" allowtransparency="true"></iframe></b:widget>
 |
| انسخ هذا الاي دي id وضعه في ملف تكست |
وبعدها ذلك تبحث عن هذا الوسم
]]></b:skin>
وضع قبل اوفوق الوسم مباشرة هذا الكود
/*----- like box css Blogger widget by blogg-face.blogspot.com/----*/#like box css { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh17GkKiO8gA8BgBH_K6myEIczJMeCj7nVGyjiid_2KwZWLqzxVA6BeazbRGcb75Zx8ZnDQciEfLxDqbU2BQ2ZW6bLKnZg-75VgUe37dAKbb4BRsNXI8yOUmMyjJbziEeDzLNCDwN3sieg/s1600/codeview4.png) no-repeat top left; border:1px dotted #EFDFC2; color:#716349 width:270px;-webkit-border-radius: 16px;border-radius: 16px;-webkit-box-shadow: 5px 5px 5px 5px #f45050;box-shadow: 5px 5px 5px 5px #f45050;}
*وايضا استبدل #f45050
وهذا الكود هو المسؤال عن ظل الاداةغيره الي اللون الذي ترديه
وهكذا انتهي الموضوع ارجو ان يكون الشرح مبسط لكم ومنظر استفسارتكم وتقيمكم للموضوع
ارجو عدم نسخ الموضوع الا بذكر المصدر والرابط المؤدي اليه
