TIME
12:01 م
الاثنين، 21 أكتوبر 2013
توافقه مع جميع المتصفحات إلا انترنت إكسبلورر
أولا و قبل كل شيء أتمنى عدم حذف الحقوق لاني تعبت في جعل القالب للبلوجر
طريقة تركيب القالب :
عوض في هذا الرابط رابط المدونة و القسم المراد عرض مواضيعه
الأحد، 20 أكتوبر 2013
TIME
6:01 ص
شرح كامل | أضف صندوق تعليقات فيسبوك إلى بلوجر بدون مشاكل
يواجه الكثير من مستخدمي بلوجر مشاكل عديدة عند إضافة صندوق تعليقات الفيسبوك إلى مدوناتهم
لكن هذا الشرح المفصل سيكون نهاية لهذه المشاكل والعقبات التي تواجه مدون بلوجر
والطريقة مضمونة وسليمة 100% - بإذن الله - ^^
_____________________
أولا عليك إنشاء تطبيق خاص بك في الفيسبوك .. وذلك عبر الرابط التالي
https://developers.facebook.com/apps
ثم اتبع الخطوات التالية كما في الصور
( الخطوة الأولى )
( الخطوة الثانية )
( الخطوة الثالثة )
( الخطوة الرابعة )
( الخطوة الخامسة )
( الخطوة السادسة)
سيصلك كود التفعيل كرسالة نصية لجوالك .. أعد كتابة الكود وفعل حسابك
( الخطوة السابعة )
( الخطوة الثامنة )
( الخطوة التاسعة )
( الخطوة العاشرة والأخيرة )
_____________________
الآن توجه في مدونتك إلى: تصميم > تحرير html > توسيع القالب (لا تنس أخذ نسخة قبل ذلك)
ابحث عن الوسم التالي
<html
ثم ألصق الكود التالي بجانبه مباشرة
xmlns:fb='http://www.facebook.com/2008/fbml'
"دع مسافة بينهما ليظهر الكود في الأخير على هذا الشكل "
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >
ابحث الآن عن الوسم التالي
<body>
وبعده مباشرة ألصق الكود التالي
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'ألصق الـID الذي نسخته سابقا هنا',status : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : true // parse XFBML});};(function() {var e = document.createElement('script');e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script>
قم بلصق الـID الخاص بك الذي احتفظت به سابقا في المكان المشار إليه
افتح المفكرة وألصق بها الكود التالي
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='اسم مدونتك' property='og:site_name'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8KtDRhxthz3gUGyYPyiMU4EZlPJVNcGFJRLXimjti296H3FllNFW0nqHOxcRejDF8MPSWCeZL_KYe66UGM3elRXwxkfb0zMB3Zsg7DcR4QtBsZC7CS_jmVd73GivIvoznnPP-YHOeQE3/s1600/asma-logo.png' property='og:image'/>
<meta content='اكتب الـID الذي نسخته سابقا هنا' property='fb:app_id'/>
<meta content='انسخ المعرّف (ID) الخاص ببروفايلك في الفيسبوك' property='fb:admins'/>
<meta content='article' property='og:type'/>
قم الآن بتغيير المعلومات المشار إليها في الكود بما يناسبك
واستبدل رابط صورة الشعار الخاص بي في كود
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8KtDRhxthz3gUGyYPyiMU4EZlPJVNcGFJRLXimjti296H3FllNFW0nqHOxcRejDF8MPSWCeZL_KYe66UGM3elRXwxkfb0zMB3Zsg7DcR4QtBsZC7CS_jmVd73GivIvoznnPP-YHOeQE3/s1600/asma-logo.png
لإيجاد المعرّف الخاص ببروفايلك في الفيسبوك قم بزيارة هذا الرابط بعد تعديله
https://graph.facebook.com/YourProfile
مثلا الرابط الخاص ببروفايلي هو :
https://graph.facebook.com/omnidal
بعدما غيرت كل المعلومات في الكود السابق بمعلوماتك الخاصة، عد إلى تحرير html مدونتك
وابحث عن الوسم التالي
</head>
وألصق الكود الذي غيرت معلوماتك فيه قبله مباشرة
هذا الكود يجعل صفحتك تظهر على حائط صاحب التعليق في الفيسبوك كالتالي
(منقول من مدونة اسماء...)
TIME
5:53 ص
الجزء الثاني | مجموعة إضافات احترافية (إضافات موقع الفيسبوك لمدونات البلوجر)
في تدوينة سابقة قمنا بشرح كيفية إضافة أدوات من شأنها أن تضفي على المدونات لمسات احترافية
إلا أنه في تدوينتنا لليوم وددت تخصيصها لأدوات وإضافات الفيسبوك فقط ،،
___________________________
إضافة | أزرار "Like" و"Send" من الفيسبوك
تعتبر هذه الإضافة من أشهر إضافات الفيسبوك على مدونات بلوجر
لما تتمتع به من خفة وسلاسة وكذلك عملية جدا للذين لا يحبذون التعليق على التدوينات ^_^
توجه من لوحة التحكم لديك إلى :
تصميم > تحرير html > تنزيل نسخة احتياطية > توسيع القالب > ابحث عن الكود التالي
<data:post.body/>
( ستجد هذا الكود مكرر أكثر من مرة في القالب والمقصود هو الكود الثاني )
إذا رغبت أن تظهر الأزرار في بداية التدوينة فأضف الكود التالي قبل الوسم السابق
وإذا رغبت أن تظهر في نهاية التدوينة فأضف الكود بعد الوسم
إضافة زر "Send" - "أرسل" فقط
<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='tahoma'/>
</b:if>
إضافة زر "Like" - "أعجبني" فقط
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>
إضافة زر "أرسل - Like" + "Send - أعجبني" معا
<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light' action='like' layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/></b:if>
لتخصيص الأزرار اتبع التالي :
- احذف المكتوب باللون الأخضر إذا أردت أن تظهر الأزرار في التدوينة وأيضا في الصفحة الرئيسية
إذا رغبت أن تظهر في التدوينة فقط فلا تغير شيئا في الكود
- light : هو اللون الفاتح للأزرار (الأزرق)، إذا رغبت في أن تكون الأزرار باللون الغامق فاستبدل
"light" بـ "dark"
- button_count | standard : هو شكل "ستايل" زر "Like" اختر الشكل الذي ترغب به من الخيارات التالية
واستبدل اسمه باسم الزر الذي تريده
standard
___________________________
إضافة | زرّ " Like - أعجبني" الخاص بصفحة مدّونتك في الفيسبوك
زر جميل جدا يختصر عليك إضافة "صندوق الإعجاب" الخاص بصفحة مدونتك على مدونتك
فهو يشابه زر "أعجبني - Like" الذي يكون بجانب اسم صفحتك على الفيسبوك
لإضافته إلى مدونتك توجه في لوحة التحكم التحكم لديك إلى :
تصميم > عناصر الصفحة > إضافة أداة HTML/JavaScript > ألصق الكود التالي
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Your_Page_URL%2F&send=false&layout=box_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=90&appId=Your_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:90px;" allowtransparency="true"></iframe>
- استبدل "Your_Page_URL" برابط صفحة مدونتك على الفيسبوك.
- استبدل "box_count" باسم شكل "ستايل" الزر الذي ترغب به من الخيارات التالية
button_count
box_count
standard
- استبدل "Your_ID" برقم التطبيق الخاص بك على الفيسبوك
___________________________
إضافة | صندوق " Facebook Live Stream " للمناقشة الحية
لإضافته إلى مدونتك، يكفي أن تنسخ الكود التالي وتلصقه في أي موضع ترغب به (كأداة html أو تدوينة بذاتها)
<iframe src="http://www.facebook.com/plugins/livefeed.php?app_id=Your_APP_ID&width=500&height=500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:500px;" allowTransparency="true"></iframe>
استبدل "Your_APP_ID" برقم معرّف التطبيق الخاص بك في الفيسبوك
يمكنك تغيير عرض الصندوق بتغيير القيمة "500" في الكود
___________________________
TIME
5:30 ص
شرح مفصل | التدوين السريع المصغر | اجعل بلوجر ينافس تويتر
نعرف جميعاً ما هو التدوين المصغر المنتشر حالياً والذى عُرف مع إنطلاق خدمة تويتر رسمياً
وهو عبارة عن تحديثات كتابية تصف الأحداث التي تعاصرها في يومك علي مدار الساعة
فإذا كان التدوين من خلال تويتر هو للإجابة على السؤال ’’ماذا تفعل الان؟‘‘ فالتدوين المصغر داخل blogger
هو لكتابة أفكار صغيرة وتلميحات وأسئلة لا تحتمل كتابة مواضيع طويلة ونقاشات لنفس التخصص
وهو ما يضمن لنا بشكل أو بآخر عدم الإنقطاع عن التدوين لفترات طويلة في إنتظار كتابة مواضيع طويلة تتطلب بحثا وتنسيقا
يبقى القول أن التدوين المصغر داخل blogger ليست ميزة جاهزة مضافة داخل القالب
بل هي طريقة جديدة نتعلمها سوياً عن طريق تخصيص القالب بطريقة احترافية
وبالإعتماد على أدوات الشرط المختلفة لتحديد تصنيف معين " Label "
تظهر داخله تلك التدوينات دون غيره
_______________________________
خطوات تطبيق هذه الميزة الاحترافية في مدونتك
_______________________________
توجه إلى : تصميم > تحرير HTML > أخذ نسخة احتياطية > توسيع القالب > ابحث عن التالي
<b:includable id='post' var='post'>
وأضف فوقه مباشرة " أعلاه - فوقه " الكود التالي
<b:includable id='minipost' var='post'> <b:if cond='data:blog.pageType != "item"'> <div class='minipost'><a expr:name='data:post.id'/> <div class='entry'><data:post.body/></div> <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>…</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p> </div> <b:else/> <div class='minipost'><a expr:name='data:post.id'/> <h2 class='title'><a expr:href='data:post.url'><data:post.title/></a></h2> <div class='entry'><data:post.body/></div> <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>…</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p> </div> </b:if> </b:includable>
_______________________________
ثم قم بالبحث عن الكود التالي
<b:include data='post' name='post'/>
واستبدله بالكود التالي
<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> <b:if cond='data:label.name != "minipost"'> <b:include data='post' name='post'/> <b:else/> <b:include data='post' name='minipost'/> </b:if> </b:if> </b:loop> <b:else/> <b:include data='post' name='post'/> </b:if>
_______________________________
الآن قم بالبحث عن الوسم التالي
]]></b:skin>
(إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصور)
للمعاينة الحية للتدوينات المصغرة التي بهذه الصورة اضغط هنا |
أضف قبل الوسم السابق مباشرة هذا الكود
/* MINIPOST */ .minipost { background: #FFF6C7 url(http://lh4.ggpht.com/_dInhsEHH_98/S9XNkXGx8rI/AAAAAAAAACY/EtZcz9T63Cw/s00/bg-minipost.gif) no-repeat 100% 2px; padding: 15px 95px 15px 15px; border:1px solid #FFF6C7; margin-bottom:20px; position:relative; } .minipost .entry { -webkit-text-shadow: #FFFBD8 0 1px 0px; text-shadow: #FFFBD8 0 1px 0px; text-align:justify; font: bold 15px/1.2 Arial, sans-serif; color:#515151; } .minipost .entry a { color:#B40000; }
.minipost .entry a:hover { color:#3A3A3A; } .minipost .entry, .minipost .entry p { margin-bottom: 15px; } .minipost p.meta {
margin:-10px 0 0;
font-weight:normal; font-size: 12px;
color:#B9B197;
} .minipost p.meta a { color:#B9B197;} .minipost p.meta a:hover { color:#807970;}
(أما إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصورة - مصغرات مدونة أبو إياد )
للمعاينة الحية للتدوينات المصغرة التي بهذه الصورة اضغط هنا |
فأضف هذا الكود قبل الوسم السابق مباشرة
.minipost { -moz-border-radius: 5px 5px 5px 5px; background: #CFE1ED url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqB15lvu7Vk3x3z2Bx6sS4pvbFy4E3qHUyWp7D3U4igzPJ87rNcukcjUXjIpLKheQr5OhD_HcWFhajsivDi-4CwmN7t2a421GzHwuGbRMZuSrudqv-SRsCG7Qzd-C5Rk-YOGfp2Jo6iqhL/s1600/lam7a.png") ; height: 1%; padding: 20px; border-left:1px solid #1D5C88; border-top:1px solid #1D5C88; border-right: 1px solid #1D5C88; border-bottom: 1px solid #1D5C88; margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:1.5em; padding-right:7px; padding-left:7px; }
.minipost .entry { -webkit-text-shadow: #FFFFFF 0 1px 0px; text-shadow: #FFFFFF 0 1px 0px; text-align: right; font: 15px Tahoma, Arial, sans-serif; color:#4C4C4C; }
.minipost img { border: 1px solid #245CAA;
float: right;
margin-left: 1em; } .minipost h3 { color: #666;
font-size: 1.2em;
margin-bottom: 5px;
margin-top: 2; } .minipost p { color: #54524F;
font-size: 15px;
margin-bottom: 10px; margin-top: 0; } .minipost blockquote { background: url(http://lh6.ggpht.com/_4_wf1DKMvX4/TMWm472NmPI/AAAAAAAABmw/aioU52gp7Zw/box-bgr.gif) #ffffff repeat-x top; border-left:1px solid #CFCFCF; border-top:1px solid #CFCFCF; border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; margin:10px; padding:10px }
(أو إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصورة - مصغرات مدونة ذؤيب )
فأضف الكود التالي قبل الوسم السابق مباشرة
/* blogger minipost */
.minipost {
background: #F5F5F5;
padding: 15px;
border: 1px solid #DDDDDD;
margin-bottom: 20px;
padding-bottom: 30px;
font: 12px tahoma;
text-align: justify;
line-height:1.5em;
}
.minipost img {
float: right;
margin-left: 1em;
}
.minipost div.title2 {
font:1.3em arial;
font-weight:bold;
letter-spacing:0em;
display:block;
padding-bottom:5px;
text-shadow: 0px 2pt 0px #ECECEC;
}
.minipost div.entry {color:#333333;}
.minipost p.meta {
font: 12px tahoma;
}
_______________________________
قم بحفظ التغييرات التي أحدثتها على قالبك
_______________________________
جرّب كتابة تدوينة سريعة مصغرة بطريقة عادية جدا كما تكتب أي تدوينة في بلوجر
لكن قبل نشر هذه التدوينة قم بإضافة هذه التسمية " minipost" في المكان المخصص لذلك
أي أنك قبل نشر التدوينة المصغرة يجب عليك كتابة minipost بجانب خانة "التسميات" - كما بالصورة
انشر تدوينك المصغرة الآن وعاينها في مدونتك ..!!
_______________________________
الآن ليس عليك سوى تخصيص هذه الميزة الاحترافية بما يناسب مدونتك
وذلك بالعودة إلى : تصميم > تحرير html > توسيع القالب > ابحث عن التالي (لتغيير التسمية minipost بما يناسبك)
<b:if cond='data:label.name != "minipost"'>
ثم غّير " minipost " في الكود بالتسمية التي تريدها
_______________________________
تم بحمد الله ◕‿◕
الاشتراك في:
الرسائل (Atom)