اكواد HTML لمدونات بلوجر

الفضلات الاجتماعية اسفل تدوينة بلوجر
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

]]></b:skin>

ثم ضع الكود التالي فوقه :

.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:200px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}

top:200px : تعني المسافة الفاصلة بين بداية الصفحة و الأداة,قم بتعديلها حسب مدونتك
ثم قم بالبحث عن الكود التالي : فإذا وجدت 2 من هذا الكود ،فالثاني هو المقصود

<data:post.body/>

ثم ضع الكود التالي فوقه :

<b:if cond='data:blog.pageType == "item"'>

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://sites.google.com/site/mohamedabuiyad/abu-iyad-social/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' onClick='return buzzPopup(this, 'Buzz this')' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZARCDdCN_yzbFuJLY2ov3Xvox5oIKVyEGyyp9b1q-MMSDOF8uk4EV081WWRY-jk-MxcoN6fG_nfU_sDiyP3pBIXk5umbnDWCCg54Dq374Cgff6Iu_chqFXKOg8bJpN1MoWiOe35d4YVU/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url="<data:post.url/>";
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
</a>
</span>
</b:if>

<b:include data='post' name='postQuickEdit'/>
</span>
</center>
</div>
</div>
<font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>
</b:if>

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

======================================================

إضافة مقطع صوتي بتقنية HTML5

السلام عليكم

بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته مع ال HTML5

حان الان دور audio ; لدالك دعونا نأخد وقتنا لنتعلم هذا العنصر الرائع

تحميل (Download)مثال (Demo)

فالأن وبعد طول انتظار اتت لنا خاصية ال HTML5 لتسريع الاستماع من جهة

و من جهة أخرى نجد متصفحات اكثر تعقيدا و أكثر ذكاءا ...

لكن هذا ليس معنى أن تكون لغة HTML5 في غير صالحنا

لأن الذي برمج audiojs جعل هذه الاخيرة تتوافق مع كل من

Mobile Safari iOS 3

Android2.2+, w/Flash

Safari 4

Chrome 7

Firefox 3+, w/ Flash

Opera 10+, w/ Flash

IE 6, 7, 8, w/ Flash

هل يمكنني استعمال هته الخاصية في مدونتي؟

نعم يمكن و اليوم سنضع شرح بسيط

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم " تحرير HTML "

ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.

ثالثا : ضع علامة في خانة توسيع القوالب .

ثم ابحث عن هذا الوسم

</head>

و ضع فوقه هدا كود

أو يمكنك تحميل الملف من الموقع الاصلي

و اعادة رفعه...

الان نبحث عن هدا الوسم

]]></b:skin>

و نضع فوقه هدا الكود

.audiojs {
width: 460px;
height: 36px;
background: #404040;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}

أخيرا : استعرض مدونتك ثم احفظ قالبك.

شرح كيفية الإستخدام

قم بكتابة تدوينتك بالطريقة المعتادة

و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,

أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة

هناك خاصيتان اساسيتان في الاضافة

التشغيل التلقائي للملف الصوتي autoplay

او تشغيل الى غير مسمى loop

كما يمكنك اختيار احد المواقع لرفع ملفات mp3

dropbox

fileden

هذا كل شيئ أتمنى لك الاستفادة

=========================================================================

عرض اخر مواضيعك بطريقة فريدة

السلام عليكم

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

وتوفّر الإضافات المميزة يزيد من إختصار العمل في أسطر قليلة من الشفرات،

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

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

يمكن أن ستفيد منه مطورين ومصممين آخرين لكي يجدوا ضالتهم.

معنا في الموضوع عمل بسيط ..بحيث وجدت ضالتي في احد المكتبات

بحيث أنني وضعت اضافة واحدة فقط جمعت فيها 3 اضافات..

قائمة + اخر 6 مواضيعك + اخر مواضيعك مع صورة مصغرة

وسأستخدم صورة سريعة لطرح فكرة الدرس،

في هدا العمل قمت بتجهيز تقويم مصمم بـ html css

و قمت بربطه مع مكتبة jQuery لإنشاء التفاعل مع واجهة مستخدم..

الاضافة هي مازالت في طور التطوير..اترككم مع المشاهدة و الشرح

تحميل (Download)مثال (Demo)

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "

ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.

ثالثا : ضع علامة في خانة توسيع القوالب .

ثم ابحث عن هذا الوسم

<head>

نقوم بتضليله و نعوضه بالكود التالي

<link href='http://blogspacetech.googlecode.com/files/ArticleListblogger.css' rel='stylesheet' type='text/css'/> <head>

أخيرا : استعرض مدونتك ثم احفظ قالبك.

شرح كيفية الإستخدام

الان ننتقل الى اضافة اداة HTML ; ونضع الكود التالي

هدا كل شيء أتمنى لكم الاستفادة..

=================================================================================