سما بلوجر تجريبية

‏إظهار الرسائل ذات التسميات اضافات وادوات بلوجر. إظهار كافة الرسائل

اجعل مدونتك اسرع في التصفح من الهاتف النقال - blog ready to mobile

3:29 ص |

من المشاكل التي يواجهها المدون على منصة بلوجسبوت - هي عدم وجود اضافة او قالب خاص بمتصفحي المدونة بواسطة الهاتف النقال ، وكما تعلمون فأن عدد مستخدمي الانترنت في ازدياد وتضاعف مستمر ، وبسبب التطور الهائل في شبكات الهواتف المحمولة وتقنيات 3G's فأن اعداد المستخدمين قد تضاعف بشكل كبير اذ بلغ عدد من يستخدمون الانترنت بواسطة الجوال عام 2009 ما يقارب 74 مليون شخص بشكل متواصل ، وهذه صورة توضيحية لما هو متوقع في السنوات القادمة فقط داخل الولايات المتحدة من الموقع نفسه .

حتى يتحفنا بلوجر بأحد الحلول لهذه المشكلة ، اقتبست من مدونة bloggertricks كود يعمل على تسريع تصفح المدونة حتى لا تفقد زوارك من الهواتف المحمولة وهم ينتظرون تحميل صفحة مدونتك ، ولتركيب الكود اتبع هذه الخطوات البسيطة :

1- من لوحة التحكم اضغط على تصميم – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم :
2- ابحث عن :

<b:include data='blog' name='all-head-content'/>

3- اضف الكود التالي بعدها/تحتها مباشرة

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

5- احفظ قالب مدونتك ، وتمتع بهذه الاضافة

التسميات: اضافات وادوات بلوجر, التدوين من الجوال |

1 التعليقات

هاك لتحويل الزائر من مدونة الى اخرى - redirect blog

12:01 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

السلام عليكم ،

(تدوينة سريعة)
الكثير من المدونين قد ينشأ مدونة ما ويكتشف بعد ذلك بأن رابطها غير ملائم ، او يريد ان يغير اسم الرابط ليعبر اكثر عن محتوى المدونة ، ومن المشاكل التي يقع فيها صاحبنا هذا هو كيف يحول زواره من الرابط القديم الى الرابط الجديد لمدونته ، حتى الان لا توفر بلوجر هذه الميزة في منصتها ، أمل ان يتم ذلك في اقرب وقت ممكن للمدونات المجانية (blogspot- كمدونتي سما بلوجر ) حتى ذلك الوقت نحل هذه المشكلة بأضافة كود يعمل على تحويل الزائر الى الرابط الجديد بشكل تلقائي ، ولكي تضيف هذا الكود الى قالب مدونتك اتبع الشرح البسيط التالي :
1- من لوحة التحكم اضغط على تصميم – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم

2- ابحث عن :

<head>

3- اضف هذا الكود تحتها مباشرة :

<meta HTTP-EQUIV='REFRESH' content='0; url=ضع الرابط الجديد هنا'/>

4- احفظ القالب ومبروك عليك

بالتوفيق

التسميات: اضافات وادوات بلوجر |

1 التعليقات

اضافة " عداد التعليقات " بجانب عنوان التدوينة - comments bubble

2:30 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

السلام عليكم ،

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

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

اذا اعجبتك الاضافة تابع قراءة طريقة التركيب .....

__________________________________________________________________

الخطوة الاولى

من لوحة التحكم اضغط على تصميم – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم

الخطوة الثانية

1- ابحث عن :

]]></b:skin>

2- واستبدلها بـ :كود رقم1

/*------Commment Bubble Start------*/

.comment-bubble {
float : left;
width : 48px;
height : 48px;
background : url(http://farm5.static.flickr.com/4138/4759798941_0051d9bd44_t.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}

/*------Commment Bubble End Introblogger------*/

]]></b:skin>

3- ابحث عن :

<h3 class='post-title entry-title'>

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

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

5- اذا لم تجد الجملة في النقطة رقم 3 ابحث عن :

<b:if cond='data:post.link'>

6- واضف الكود رقم 2 قبلها او اعلاها مباشرة

7- احفظ القالب ومبروك عليك الاضافة .

8- هذا ملف يحتوي على مجموعة من الايقونات الجميلة لهذه الاضافة حمله من هذا الرايط :
http://www.box.net/shared/8qauybczns

وبالتوفيق دائما ادعو لي ولكم

التسميات: اضافات وادوات بلوجر |

11 التعليقات

اضف اداة البيج رانك - اشكال جديدة وجذابة pagerank

11:03 م |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

السلام عليكم ،

احبائي متابعي وزوار مدونة سما بلوجر ، اقدم لكم اليوم اداة البيج رانك pagerank لتضيفها الى مدونتك ، لا تتعجل وتقول وما الجديد في ذلك فالاضافة معروفة ومتواجدة في كل مكان ، نعم متواجدة في كل مكان ولكن الجديد هنا هو هذه الاشكال الرائعة المقدمة لكم من عدة مواقع اجنبية " تعرف عليها من خلال الاكواد " ، اتمنى ان تجدون الشكل الملائم لكم في هذه الاشكال الجميلة ، وعلى بركة الله نبدأ بمشاهدة الاشكال والاكواد :

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://www.pagerankbar.com/pr.png" alt="Google Page Rank Checker" border="0" /></a>

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://www.pagerankbar.com/prdisplay.png" alt="Display Google Page Rank" border="0"

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://www.pagerankbar.com/prbutton.png" alt="Page Rank Checker Button" border="0" /></a>

<a href="http://sma-b.blogspot.com" title="Free PageRank checking tool" target="_blank"><img src="http://www.free-pagerank-checker.com/pr.php?url=www.yoursite.com" border="0" alt="PageRank" /></a>

<a href="http://sma-b.blogspot.com" target="_blank" title="Get your Google PageRank"><img src="http://www.urltrends.com/pagerankimg.php" border="0" height="25" width="100" alt="Get your Google PageRank"></a>

<a href="http://sma-b.blogspot.com" target="_blank"><img src = "http://www.pagerank-button.com/pagerank5.php" alt="PR Checker" border="0" /></a>

<a href="http://sma-b.blogspot.com" target="_blank"><img src = "http://www.pagerank-button.com/pagerank3.php" alt="PR Checker" border="0" /></a><br />

<a href="http://sma-b.blogspot.com" target="_blank"><img src = "http://www.pagerank-button.com/pagerank6.php" alt="PR Checker" border="0" /></a><br />

<a href="http://sma-b.blogspot.com"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=vgsun" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>

<a href="http://sma-b.blogspot.com"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=Technical" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>

<a href="http://sma-b.blogspot.com"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=csblue" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>

<a href="http://sma-b.blogspot.com"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=Google" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>

<a href="http://sma-b.blogspot.com"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=wpblue" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>

<a href="http://sma-b.blogspot.com"><img src="http://www.prbuttons.com/pagerank-display.php?a=getCode&s=gsblack" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a>

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=small" alt="Do it yourself SEO" border="0">

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=pink" alt="Webmaster Tools" border="0">

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=apple" alt="Search Engine Optimization Articles" border="0">

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://www.selfseo.com/pagerank.php?type=large" alt="Search Engine Optimization Articles" border="0">

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://pr.proxin.cn/pr.php?u=http://YourSite.Com&s=44" alt="Google PageRank Checker" border="0" /></a><br />

<a href="http://sma-b.blogspot.com" target="_blank"><img src="http://pr.proxin.cn/pr.php?u=http://YourSite.Com&s=42" alt="Google PageRank Checker" border="0" /></a>

كما يمكنكم زيارة هذا الموقع لمزيد من الاشكال الجميلة :

http://www.goingup.com/pagerank/

وبالتوفيق دوما ادعو لي ولكم .

التسميات: اشهار مدونات, اضافات وادوات بلوجر |

9 التعليقات

اضافة " عن المؤلف " في كل تدوينة - about author

7:18 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

السلام عليكم ،

اعتقد بأنك قد شاهدت مدونات منصة wordpress ، وكيف تكون كل تدوينة متبوعة بصندوق يظهر بعض المعلومات التي يكتبها المؤلف عن نفسه مع صورة له ، والكثير منا تمنى ان يحصل على هذه الاضافة في مدونات blogspot ، في هذه التدوينة سأبين بأذن الله طريقة اضافة هذا الصندوق الجميل في مدونات بلوجر ، قبل اي شيء شاهد معاينة لهذه الاضافة من الرابط التالي :

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

تابع بقية التدوينة اذا اعجبتك الاضافة ....

__________________________________________________________________

- طريقة تركيب الاضافة -

الخطوة الاولى

من لوحة التحكم اضغط على التصميم– تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم

الخطوة الثانية

1 - ابحث عن :

]]></b:skin>

2- واستبدلها بـ هذا الكود :كود رقم 1

/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: right;
margin: 0 0 10px 10px;padding: 4px;
border: 1px solid #E6E6E6;
}

]]></b:skin>

3- ثم ابحث عن :

<div class='post-footer-line post-footer-line-1'>

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

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='http://2.bp.blogspot.com/_0JSsw4H6sns/TDBi2u-pkzI/AAAAAAAADbU/HpGA8el0h_U/S220/adi+arar.png' width='70'/><b>اكب هنا العنوان</b><br/>
اكتب عنك ما تريد داخل الصندوق<br/></p>
</div>
</b:if>

5- تستطيع ان تضيف الكود السابق في عدة اماكن اخرى في قالب مدونتك مثل:

بعد او قبل : <div class='post-footer'>

لتظهر في اول التدوينة اضف الكود قبل : <data:post.body/>

6- احفظ القالب ومبروك عليك الاضافة .

__________________________________________________________________

الخطوة الثالثة

طريقة تخصيص الاضافة

في الكود رقم 1 :

القسم الاول الكتابة والحدود في الصندوق :

.author-box {

background: #F7F7F7; لون الخلفية الرئيسية للصندوق

margin: 20px 0 40px 0; الابعاد عن الهوامش

padding: 10px; بعد الكتابة عن الحد

border: 1px solid #E6E6E6; لون الحد وسمكه

overflow: auto;

}

القسم الثاني - الصورة داخل الصندوق :
.author-box img {
background: #FFFFFF; : لون الخلفية قبل اظهار الصورة

right - left مكان الصورة float: right;

margin: 0 0 10px 10px; الابعاد عن الهوامش

padding: 4px; عرض اطار الصورة

border: 1px solid #E6E6E6; سمك خط اطار الصورة ولونه
}

في الكود رقم 2 :

height='70 ارتفاع الصورة
width='70 عرض الصورة

وهذا هو رابط صورة المدون غيره برابط صورتك ، على ان تكون الصيغة png

http://2.bp.blogspot.com/_0JSsw4H6sns/TDBi2u-pkzI/AAAAAAAADbU/HpGA8el0h_U/S220/adi+arar.png

اتمنى ان يكون الشرح وافي ومتكامل ، وبالتوفيق دوما ادعو لي ولكم .

التسميات: اضافات وادوات بلوجر, نصائح وتوجيهات للمدونين |

12 التعليقات

ازار مشاركة المواقع الاجتماعية متوفرة الان في بلوجر blogger

9:08 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

السلام عليكم ،

تأخرت قليلا في نشر هذا الموضوع نظرا لأنشغالي ببعض امور الحياة الصعبة هذه الايام اعانني واعانكم الله تعالى ، ولكن لأهمية هذه الاضافة اخترت ان اطرح هذا الموضوع حتى لو جاء متأخرا ، لأن منصة بلوجر هي الافضل للمدونات ، ولأن بلوجر يسعى دائما الى مواكبة التطورات الجديدة في عالم الانترنت ، ولأن شركة جوجل هي عملاق الشبكة العنكبوتية ، فكل من ينشأ مدونته على بلوجر سيتمتع بكل خدمات واضافات جوجل ، طبعا انا لا اروج لمنصة بلوجر ولكن هذه هي الحقيقة بالنسبة لكونها مجانية 100% ، بعكس منصة ورد بريس المدفوعة ،( اخذني الحديث عن بلوجر ونسيت الموضوع الرئيس لهذه التدوينة) ، بما ان هذه الاضافة متوفرة على بلوجر فسأتحدث عن طريقة تركيبها في المدونة .

اولا : هذه صورة للازرار بالحجم الطبيعي :

ثانيا : طريقة تركيب الاضافة

1- في القوالب التقليدية الموجودة في بلوجر

- ندخل الى لوحة التحكم ومن ثم التصميم - عناصر الصفحة - نضغط على تحرير في جسم رسائل المدونة الالكترونية

- يمكنك وضع الازرار في المكان الذي تريده عن طريق السحب والافلات .

لا تنسى ان تستعرض مدونتك وتشاهد مكان ظهور الازرار .
اذا لم تظهر الازرار فتابع الشرح التالي - وحافظ على الخطوات السابقة .

2- طريقة تركيب الاضافة في القوالب المتقدمة

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

<p class='post-footer-line post-footer-line-3'>

او

<div class='post-footer-line post-footer-line-3'>

او

<data:post.body/>

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

الكود الاول : اذا كنت تريد ان تظهر الازرار في صفحة التدوينة فقط ، دون ان تظهر في الصفحة الرئيسية للمدونة.

<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

الكود الثاني : اذا اردت ان تظهر الازرار في صفحة التدوينة وفي الصفحة الرئيسية ايضا .

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

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

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>

او

<p class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-2'>

وبذلك سيتغير مكان ظهور الازرار حسب الكود الذي اضفت كود الازرار بعده

____________________________________________________________________

ثالثا : اذا اردت ان تخفي احد الازرار من الظهور ، فلك ذلك .

ابحث عن :

]]></b:skin>

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

.sb-blog{display:none}

وبالتالي سيتم حذف ايقونة بلوجر وبنفس الطريقة بالنسبة الى - sb-email , sb-twitter, sb-facebook, sb-buzz

ارجو ان اكون قد وفقت في طريقة ايصال الشرح لكم ، وبالتوفيق ادعو دائما لي ولكم .

التسميات: اضافات وادوات بلوجر, تطوير بلوجر, مواقع النشر الاجتماعية |

11 التعليقات

اضافة ارقام الصفحات (شكل جديد وجميل) blogger

2:42 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

السلام عليكم ،

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

تابع بقية التدوينة اذا اعجبتك الاضافة ....

__________________________________________________________________

- طريقة تركيب الاضافة -

الخطوة الاولى

من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم

الخطوة الثانية

ابحث عن :

]]></b:skin>

واضف قبلها مباشرة (فوقها) :

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:tahoma;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; right:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; right:50%;
 margin-right:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:550px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}

الان ابحث عن :

</body>

واستبدلها بـ :

  <script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>

شرح الرموز باللون الاحمر :

var postperpage=5; : عدد التدوينات في الصفحة الواحدة

var numshowpage=10 : عدد الصفحات التي ستظهر ارقامها في العداد

اذا اكتفيت بهذا القدر ولا تريد ان تظهر عدد الصفحات في كل تبويب او تصنيف تدخل اليه بحيث اذا كان يحتوي هذا التصنيف على 20 تدوينة فسيتم تقسيمها الى 5 تدوينات لكل صفحة ( طبعا هذا يرتبط بوجود قائمة التصنيفات في مدونتك )

ان رغبت في الاستمرار فتابع للاسفل :

الان ابحث عن :

'data:label.url'

واستبدلها بـ :

'data:label.url + &quot;?&amp;max-results=5&quot;'

الرقم 5 هو عدد التدوينات في كل صفحة .

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

شكرا لصاحب هذه الاضافة الاخ abu-farhan

التسميات: اضافات وادوات بلوجر |

17 التعليقات

ثلاثة اشكال جديدة لأضافة التواصل (feedburner +facebook&twitter)

3:09 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

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

الشكل الاول

الكود

<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sma-b', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><b style="color: rgb(102, 51, 255);">اعجبتك تدويناتي?</b> كن الاول في معرفة جديد المدونة عبر البريد الالكتروني ، واستمتع بالخدمة!

<div style="text-align: center;">
<input autocomplete="off" value="ضع بريدك الالكتروني..." id="subbox" onfocus="if (this.value == 'ضع بريدك الالكتروني هنا...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email address...';}" name="email" style="width: 200px; background-repeat: no-repeat ! important; background-image: url("chrome://sxipper/skin/images/field_icon_R.png") ! important; background-position: right center ! important; padding-left: 0px ! important;" type="text" />
<input value="sma-b" name="uri" type="hidden" />
<input name="loc" value="en_US" type="hidden" />
<input value="OK" id="subbutton" type="submit" />
</div></form>

<div>
<center>
<table>
<tbody><tr>
<td>
<a href="http://feeds.feedburner.com/sma-b "><img src="http://feeds.feedburner.com/%7Efc/sma-b%20?bg=99CCFF&fg=111111&anim=1" style="border: 0pt none;" alt="" height="26" width="88" /></a>
</td><td>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/adiarar1/000000/99ccff"></script>
</td>
</tr>
</tbody></table></center>
</div>

<div style="padding-left: 10px;">
<table>
<tbody><tr><td>
<a href="http://feeds.feedburner.com/sma-b%20" target="_blank" title="اشترك في اخر التدوينات"><img style="float: left; margin-right: 5px; width: 20px; height: 20px;" src="http://img243.imageshack.us/img243/2619/10rssicon.png" /></a><a href="http://feeds.feedburner.com/sma-b%20" target="_blank" title="اشترك في اخر التدوينات">اشترك عبر RSS Feed</a>
</td></tr>
<tr><td>
<a href="http://www.facebook.com/adiarar1" target="_blank" title="Facebook "><img style="float: left; margin-right: 5px; width: 20px; height: 20px;" src="http://img163.imageshack.us/img163/8637/10facebookicon.png" /></a>
<a href="http://www.facebook.com/adiarar1" target="_blank" title="Facebook ">تواصل عبر facebook</a>
</td></tr>
<tr><td>
<a href="http://twitter.com/adiarar1" target="_blank" title="Twitter time"><img style="float: left; margin-right: 5px; width: 20px; height: 20px;" src="http://img189.imageshack.us/img189/6853/10twittericon.png" /></a><a href="http://twitter.com/adiarar1" target="_blank" title="Twitter "> اتبعني عبر Twitter</a>
</td></tr>
</tbody></table></div>

______________________________________________________________________

الشكل الثاني

الكود

<div style="background-color: rgb(255, 255, 255); background-image: url("http://img171.imageshack.us/img171/2742/rssbg.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: 0% 0%; -moz-background-size: auto auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-top: 0px;">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sma-b;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<p><a href="http://feeds.feedburner.com/sma-b" target="_blank" title="subscribe to the latest posts"><img src="http://img171.imageshack.us/img171/162/rssicons.jpg" style="float: left; width: 38px; height: 38px; margin-right: 5px;" /></a><a style="font-weight: bold; color: rgb(51, 0, 153);" href="http://feeds.feedburner.com/sma-b" target="_blank" title="اشترك في اخر التدوينات"><u>اشترك في rss</u></a>
واحصل على الجديد اولا بأول !</p>

<div style="text-align: center;"><b style="color: rgb(204, 0, 0);">احصل على اخر التدوينات بالبريد الالكتروني</b>
<input autocomplete="off" id="subbox" name="email" onblur="if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}" onfocus="if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}" style="width: 215px; background-repeat: no-repeat ! important; background-image: url("chrome://sxipper/skin/images/field_icon_R.png") ! important; background-position: right center ! important; padding-left: 0px ! important;" value="ضع بريدك الالكتروني" type="text" />
<input name="uri" value="sma-b" type="hidden" /> <input name="loc" value="en_US" type="hidden" /> <input id="subbutton" value="OK" type="submit" /> <div style="clear: both;"> <center><table border="0"> <tbody><tr> <td><a href="http://www.facebook.com/adiarar1" target="_blank" title="connect to us on facebook"><img src="http://img29.imageshack.us/img29/3497/facebookiconf.jpg" style="width: 54px; height: 54px;" /></a></td><td><a href="http://twitter.com/adiarar1" target="_blank" title="follow us">
<img src="http://img291.imageshack.us/img291/3765/twittericon.jpg" style="width: 54px; height: 54px;" /></a>
</td><td>
</td><td><a href="http://feeds.feedburner.com/sma-b"><img alt="Fellow Readers" src="http://feeds.feedburner.com/%7Efc/sma-b?bg=000000&fg=FFFFFF&anim=1" style="border: 0pt none; padding-top: 5px;" height="26" width="88" /></a>
<div id="twittercounter"><a href="http://twittercounter.com/adiarar1?from=button" target="_blank" title="adiarar1"><img alt="TwitterCounter for adiarar1" src="http://srv2.twittercounter.com/counter/ani/adiarar1/ffffff/111111" style="border: medium none;" height="26" width="88" /></a></div></td> </tr> </tbody></table></center> </div></div></form></div>

________________________________________________________________________

الشكل الثالث

الكود

<a href="http://feeds2.feedburner.com/sma-b" title="اشترك عبر rss"><img alt="RSS" src="http://i50.tinypic.com/esnlvc.jpg" style="float: left; vertical-align: middle; padding-right: 10px;" border="0" /></a>
<p style="padding: 5px 0pt;"><a href="http://feeds2.feedburner.com/sma-b" title="اشترك عبر rss">احصل على الجديد عبر rss!</a>
(ماذا يعني هذا? — <a href="http://www.youtube.com/watch?v=0klgLsSxGsU" target="_blank" title="RSS in Plain English">اعرف المزيد عن هذه الخدمة</a>)</p>

<a href="http://feedburner.google.com/fb/a/mailverify?uri=sma-b" title="احصل على الجديد عبر البريد الالكتروني"><img alt="اشترك" src="http://i45.tinypic.com/xmk8w6.jpg" style="float: left; vertical-align: middle; padding-right: 10px;" border="0" /></a>
او اشترك عبر البريد الالكتروني من هنا :
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(\" com="" fb="" a="" uri="sma-b" scrollbars="yes,width=550,height=520\');return" true="" style="text-align: center;" target="popupwindow">
<input autocomplete="off" name="email" style="width: 140px; background-repeat: no-repeat ! important; background-image: url("chrome://sxipper/skin/images/field_icon_R.png") ! important; background-position: right center ! important; padding-left: 0px ! important;" type="text" />
<input name="uri" value="sma-b " type="hidden" />
<input name="loc" value="en_US" type="hidden" />
<input onmouseover="style.cursor=\" style="margin: 5px; cursor: pointer;" value="موافق" type="submit" />
</form>

اخترت ما يناسبك ، انسخ الكود ومن لوحة التحكم اختار- التخطيط - عناصر الصفحة - اضافة اداة - html/java ومن ثم الصق الكود ..... الان قم بتخصيص الكود بروابطك الخاصة .
_______________________________________________________________________

- تخصيص الكود -

1. غير كل sma-b اينما تجدها برابط مدونتك على feedburner .
مثال : http://feeds2.feedburner.com/sma-b

2. غير روابط مدونتي في فيس بوك بروابطك الخاصة مثل : http://www.facebook.com/adiarar1

3. غير روابط مدونتي في تويتر بروابطك الخاصة ان وجدت مثل :"http://twitter.com/adiarar1"

4. تستطيع تغيير الجمل والكلمات داخل الكود وكل ما يمكن تغييره مكتوب بخط احمر .

5. كما يمكن تخصيص بعض الاشياء الاخرى مثل الاتجاه والخلفية والعرض الخ ...

6. قد يكون هنالك ما غفلت عنه ولذا يمكنك ان تترك تعليق باستفسارك ، ومبروك عليك الاضافة .

التسميات: اضافات وادوات بلوجر, مواقع النشر الاجتماعية |

22 التعليقات

اضافة ازرار مواقع النشر الاجتماعية اسفل التدوينة - social bookmarking

11:27 م |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

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

اولا : عاين الاضافة من هنا

ثانيا : اذا اعجبتك الاضافة فتابع للاسفل لمعرفة طريقة تركيب الاضافة

طريقة تركيب اضافة ازرار المشاركة

_____________________________________________________________________

الخطوة الاولى

من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم

الخطوة الثانية

ابحث عن :

<data:post.body/>

واضف بعدها هذا الكود :(كود الاضافة)

<div align='center'>
<span class='post-icons'>


<p align='right'>
<img alt='' border='0' id='BLOGGER_PHOTO_ID_5441163760466269298' src='http://farm2.static.flickr.com/1288/4675198157_65ab0a9db2_m.jpg'/></p>


<a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EGwH7wJXcXcSViLEVQgs_H-BCJJoSvNXZ1HrhLKpmTYDatqAE4kIBwFtUB8kzAaNEdOctmKbJ9G-XK3QJMXy3_CSrBrGJMV_8nVK315mzLWEYmQf3nlnFHnu2xWh_TqeAr52PWW-1Q4/s200/stumbleupon.png'/></a>



<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqOdOlQTnzXOeEpssTglbL9sK8Ca46uHML4fGF707h05w7qnnfYX7eJY5UgSDYb8DG_EcWUd0-WHbf6fY4wiHiab3xIMIPbeThYFhcdva_ixd8nwfTQ0jK3sB78CjSxU1J9MkqPUxuBMw/s200/technorati.png'/></a>



<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLh5NEZ36gKOSQRD84ENJaJZ1nsWKWMm67r5EXSMCHEr5rrCd06fWsvDK10CIUmX-t4qzqaygfXV8yWRNjpvp4yIjtP6d7HBcXsL47BTDxOPe3T7vuEHfM3y5ffVRj6fXmnQiDDJuvbQ/s200/delicious.png'/></a>



<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aHKM8yYfTOBgXiM9UpvHdNeSJm14Ko1RNX_seFsrkdDkRSRJpPFNRa9Cp-Zn2JleAlfILp42PJzWCAfYEnosAHeOe1yEuneSTq26qcygYVt_UhG-CS3Aulw2rhDplIBoLkGwlOLRDvg/s200/digg.png'/></a>



<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOsHnynswAbQ-N63OdWrwmJCvMThdri9mQ11yE9aQrfx9shGS-R7JO5BJ-MBIwU3BXRcsL867r7rx99Lw4bYJ1HiMZdojMiCMo_UEYCrMOksp-bPLSFlsVTiEossSeGHov7h8983ty5mY/s200/reddit.png'/></a>



<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwbzboIVH3CoCmh2yUvmb065JoBxANPSlEBhIRftaOwgpwnQwuv-PcDwMbCSLGgBlOqMp9Q1Ca31XKFx50UC7Gd3tOaAICON5QW5bk9dELGeDcfguJPlory8KM3yteupPqJyEio_DpZY/s200/facebook.png'/></a>



<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Yahoo'><img alt='Add To Yahoo' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9gBknz36P0RkTuN3FCXvoP0gWHjFMrsugm7tFtliCxWG3n_qHgmb6R0wQd0bTemXSlYNFm0xCt91_UGKmtALOXd9qFaWkeXVnJkVUDKlu88s385_jmYC1T3ucjyvHu-nkMGzcDxSDGuk/s200/yahoo.png'/></a>



<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>
<span style='display:none;'>I'm reading: <data:post.title/></span><img alt='Add To Yahoo' border='0' class='icon-action' src='http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png'/></a>


</span>
</div>

الان احفظ القالب ومبروك عليك الاضافة .

لتخصيص الاضافة بما يناسبك تابع التدوينة

_____________________________________________________________________

اولا : تستطيع ان تحذف اي ايقونة من هذا الكود وهذا مثال :

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


<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLh5NEZ36gKOSQRD84ENJaJZ1nsWKWMm67r5EXSMCHEr5rrCd06fWsvDK10CIUmX-t4qzqaygfXV8yWRNjpvp4yIjtP6d7HBcXsL47BTDxOPe3T7vuEHfM3y5ffVRj6fXmnQiDDJuvbQ/s200/delicious.png'/></a>


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

ثانيا : غير صورة عبارة شارك هذه الصفحة بأي صورة اخرى

هذا رابط الصورة في الكود :
http://farm2.static.flickr.com/1288/4675198157_65ab0a9db2_m.jpg

ونفس الامر بالنسبة للايقونات تستطيع تغيرها عن طريق تغيير روابط الصور، وعلى سبيل المثال هذا هو رابط صورة ايقونة تويتر :
http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png

ثالثا : كلمة center وتعني المنتصف وهي تخص الايقونات وتستطيع تغييرها الى right او left (يمين - شمال )

رابعا : اتمنى ان تكون الاضافة في متناول الجميع بدون اية عوائق في القالب ، ولا انسى ان اشكر allblogtools .

بالتوفيق للجميع

التسميات: اشهار مدونات, اضافات وادوات بلوجر, مواقع النشر الاجتماعية |

14 التعليقات

اضف زر اعجبني من فيس بوك الى التدوينة - like button

10:19 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

الفيس بوك وما ادراك ما الفيس بوك ، 200 مليون مشترك قبل عام كانوا مسجلين في موقع الفيس بوك عملاق التواصل الاجتماعي على الشبكة العنكبوتية ، ما يهمنا منه هو كيفية استقطاب المزيد من الزوار من هذا الموقع ، وبعد موضوع اضافة ايقونة مشاركة فيس بوك ، اعرض لكم اليوم اضافة زر الاعجاب الى مدونات blogger ، طبعا هذا الزر غني عن التعريف لكل من يستخدم موقع فيس بوك ، لا اريد ان اطيل عليكم ولنبدأ بطريقة تركيبه اسفل التدوينة :

__________________________________________________________________

لاضافة زر الاعجاب تابع الخطوات .

الخطوة الاولى

الخطوة الثانية

ابحث عن :

<div class='post-header-line-1'/>

واضف الكود بعدها

واذا لم تجدها ابحث عن :

<data:post.body/>

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

اما كود الاضافة فانسخه من هنا :

<b:if cond='data:blog.pageType == "item"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&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>

لا تنسى الكلمات باللون الاحمر يمكن تعديلها
tahoma : نوع الخط
light : يعني خفيف ، ويمكن تغييرها الى dark
450px : العرض الذي ستأخذه الاضافة ويمكن تغييره حسب قالب مدونتك

الان احفظ القالب ومبروك عليك الاضافة .

التسميات: اضافات وادوات بلوجر, مواقع النشر الاجتماعية |

9 التعليقات

سما بلوجر تجريبية

الاقسام

قائمة المدونات الإلكترونية

ارشيف سما بلوجر

اجعل مدونتك اسرع في التصفح من الهاتف النقال - blog ready to mobile

هاك لتحويل الزائر من مدونة الى اخرى - redirect blog

اضافة " عداد التعليقات " بجانب عنوان التدوينة - comments bubble

الخطوة الاولى

الخطوة الثانية

اضف اداة البيج رانك - اشكال جديدة وجذابة pagerank

اضافة " عن المؤلف " في كل تدوينة - about author

الخطوة الاولى

الخطوة الثانية

الخطوة الثالثة

طريقة تخصيص الاضافة

ازار مشاركة المواقع الاجتماعية متوفرة الان في بلوجر blogger

اضافة ارقام الصفحات (شكل جديد وجميل) blogger

الخطوة الاولى

الخطوة الثانية

ثلاثة اشكال جديدة لأضافة التواصل (feedburner +facebook&twitter)

اضافة ازرار مواقع النشر الاجتماعية اسفل التدوينة - social bookmarking

الخطوة الاولى

الخطوة الثانية

اضف زر اعجبني من فيس بوك الى التدوينة - like button

الخطوة الاولى

الخطوة الثانية

Search

عبر فيس بوك

زوارنا الاعزاء