كيفية اضافة أداة مواضيع ذات صلة لمدونات بلوجر

بسم الله الرحمن الرحيم

كيفية اضافة أداة مواضيع ذات صلة لمدونات بلوجر

من تصميم ادخل علي تحرير HTML

ثم توسيع العناصر

لا تنسي أن تأخد نسخة إحتياطية لمدونتك قبل البدأ 

اضغط علي (CTRL+F) وابحث عن الكود التالي :

</head>

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

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdS5ltAKlYeMwAFzYE6ojn7igbi7iffxFSWuBXiC4RG7d0V1RP8oOp43KVTx27p5AxmQbWJrcUl1LP-CrJl70VRrvlxKTHebr4A-yGye6zc69wvS7Hpx33iAp8kVpx4qvRCJKEeCSEflQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة ";
</script>
<script src='http://sites.google.com/site/lightbox007/abuiyad/related-posts-with-thumbnails-for-blogger-pro.js.txt' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

بعد ذلك قم  بالبحث عن الكود التالي :

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

ثم قم بوضع الكود التالي تحت الكود تحت الكود السابق

 <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>

<!-- Related Posts with Thumbnails Code End-->

 بعد ذلك قم بحفظ القالب ومبروك عليك الاضافة

شكر خاص للأخ أبو اياد

اكمل القراءة...

أضف الشريط الاخباري لقناة العربية الي مدونتك أو موقعك

بسم الله الرحمن الرحيم

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

مميزات الشريط الاخباري المتحرك:

عرض جميع الأخبار الحالية بتحديث مستمر من قناه العربية

كيفية اضافة الشريط الاخباري

من تصميم اختر اضافة أداة ثم HTML

وقم بنسخ الكود التالي وقم بالحفظ وانقل الشريط الي أي مكان تحبه في مدونتك

 <div width="600"><script src="http://www.alarabiya.net/ara_v_ticker.html"></script></div>

لأصحاب المواقع والمنتديات

يمكنك وضعه تحت هيدر الموقع أو المنتدي من خلال التعديل في قالب موقعك

أي استفسار أكتب تعليقا بذلك وسأرد عليك

دمتم بود

اكمل القراءة...

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

بسم الله الرحمن الرحيم.

أهلا بجميع زوار ومشتركي مدونة EarnLessons الكرام.

درس جديد من دروس التدوين والمدونات وهو كيفية اضافاة أعلانات أسفل هيدر المدونة أو المنتدي.

الحل بسيط جدا ولا يحتاج الي أي مجهود 

ملاحظة :

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

الطريقة:-

قم بالدخول الي تصميم ثم اضافة أداة ثم HTML/JavaScript 

 قم بنسخ الكود التالي:-

<DIV align=center><A   href="1 رابط الاعلان"  target=_blank><IMG height=60   alt="وصف الاعلان 1" src="رابط  الصورة 1" width=150 border=0></A><A   href="رابط الاعلان 2"  target=_blank><IMG height=60   alt="وصف الاعلان 2" src="رابط  الصورة 2" width=150 border=0></A><A   href="رابط الاعلان 3"  target=_blank><IMG height=60   alt="وصف الاعلان 3" src="رابط  الصورة 3" width=150 border=0></A><A   href="رابط الاعلان 4"  target=_blank><IMG height=60   alt="وصف الاعلان 4" src="رابط  الصورة 4" width=150 border=0></A><A   href="رابط الاعلان 5"  target=_blank><IMG height=60   alt="وصف الاعلان 5" src="رابط  الصورة 5" width=150   border=0></A></DIV>

ملاحظات هامة:-

قم بنسخ الكود في ملف تكست وقم بالتعديل فيه كما شئت. 

يمكنكم التحكم الكامل بعدد الاعلانات ( عدد الاعلانات في الكود 5 فقط ) يمكنك زيادة العدد كما شئت.

يمكنك التحكم بطول وعرض الاعلان عن طريق تغيير القيم 150 - 60 الموجودة في الكود .

 أضف رابط الاعلان مكان كلمة رابط الاعلان في الكود.

أضف رابط صورة الاعلان في الكود وهكذا.

أي استفسار أكتب تعليقا بذلك

دمتم بود

اكمل القراءة...

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

بسم الله الرحمن الرحيم

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

الطريقة الأولي

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

 <data:post.body/>

  لإضافة الزر في آخرالمقال ألصق الكود التالي بعدها و ليظهرفي أول التدوينة ألصقه قبلها

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>

 او يمكنك أن تضيف الكود السابق بعد الكود التالي

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

يمكنك تغيير نوع الخط tohama لأي خط تحبه

الطريقة الثانية

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

 ضع رابط مدونتك في أول خانة من الجدول

يمكنك تغير قيم الجدول كما تحب

ثم اضغط علي Get Code

من تصميم اختار اضافة أداة ثم HTML/JavaScript 

 وقم بنسخ الكود فيه وقم بالحفظ

يمكنك نقل الأداة وتحريكها لأي مكان في المدونة

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

دمتم بود

أي استفسار أكتب تعليقا

اكمل القراءة...

أداة مواضيع جديدة مع صورة مصغرة

بسم الله الرحمن الرحيم

أهلا بجميع زوار مدونة EarnLessons الكرام

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

نبدأ علي بركة الله

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

اضغط علي تصميم ثم  اضافة أداة ثم HTML/JavaScript 

اضف هذا الكود

<script language="JavaScript">
 
imgr = new Array();
 
 
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
 
boxwidth = 298;
 
cellspacing = 8;
 
borderColor = "#ffffff";
 
bgTD = "#000000";
 
thumbwidth = 40;
 
thumbheight = 40;
 
fntsize = 12;
 
acolor = "#666";
 
aBold = true;
 
icon = " ";
 
text = "comments";
 
showPostDate = false;
 
summaryPost = 40;
 
summaryFontsize = 10;
 
summaryColor = "#666";
 
icon2 = " ";
 
numposts = 5;
 
 
home_page = "http://earnlessons.blogspot.com/";
 
</script>
 
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

 التعديلات علي الكود

( boxwidth ) للتعديل علي حجم الاضافة  

( home_page ) عنوان المدونة

( thumbwidth & thumbheight ) العرض و الطول 

( fntsize ) حجم العنوان 

( acolor ) لون العنوان 

( numposts ) عدد المواضيع التي تريد ان تظهر

ملاحظة

قم بتغير رابط دونتي برابط مدونتك (earnlessons)

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

دمتم بود

أي استفسار أكتب تعليقا وسأرد عليك      

اكمل القراءة...

كيفية إضافة إقرأ المزيد او تابع القراءة لمدونات بلوجر

 الناتج النهائي سيكون مثل هذا

--» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.

1 - الخطوة الأولى: من باب او قائمة " التخطيط" نختار "تحرير Html" و نوسع القالب عبر وضع علامة صح في المربع الصغير أعلى صندوق التحرير و نبحث عن

 </head>

و مباشرة  فوقها نضع هذا الكود :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/simoxisite/Home/read-moreotomatis.js' type='text/javascript'/>

» شرح الألوان:
- الأحمر لتعديل طول مقتطف التدوينة التي لا تضم صورا.
- الأزرق لطول مقتطف التدوينات التي بها صور.
- الأخضر لتعديل أبعاد المصغرات ( الصور الصغيرة التي تبدو في الرئيسية ).
- البرتقالي هو رابط ملف الجافاسكريبت يمكن إعادة رفعه و تحرير رابطه.

ثانيا

نبحث ( Ctrl+F ) على

<data:post.body/>

ونستبدله بالكود التالي

<p><b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> ...تابع القراءة</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

لجعل الصورة إلى جهة اليسار استبدل right ب left في الكود أعلاه .
و أخيرا احفظ القالب و مبروك عليك!

اكمل القراءة...

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

 قم بعمل الأتي
التخطيط ثم عناصر الصفحة ثم إضافة أداة واختر HTML/JAVASCRIPT


قم بنسخ هذا الكود :

<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">    <a href="url#1">LINK#1</a>  <a href="url#2">LINK#2</a>  <a href="url#3">LINK#3</a>  </marquee>

قم بالحفظ

وقم بنقل الاداة الي أي مكان في المدونة

ملاحظات :

لإضافة لون للشريط المتحرك قم بتغيير

bgcolor="#99CCFF"

لأي لون تحبه

------------------

لتغير اتجاه حركة النص عليك بتغير كلمة left

direction="left" (يسار)


direction="right" (يمين)


direction="up" (أعلى)


direction="down" (أسفل)

---------------------------------
اذا أردت سرعة أكبر فزد في قيمة scrollamount
---------------------------------
لتغيير لون النص يمكنك ذلك بإضافة
ضع الكود بأكملة بين 

<span style=""color:#FF0000"">ضع الكود السابق هنا</span>

------------------
لاضافة الروابط الي الشريط

 ما عليك الا وضع مكان Link#1,Link#2,Link#3 النص المراد أن يظهر و مكان url#1,url#2 و url#3 العناوين أو الروابط للنصوص التي اخترتها .

-----------------

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

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

اكمل القراءة...

هاك حذف الأرقام من أقسام مدونات بلوجر

 

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

لوحة التحكم نتوجه إلى باب "التصميم" ثم "تحرير Html"
--» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.
ثم نبحث عن الكود التالي :

data:label.count

ثم نمسح الكود المحدد في الصورة التالية و الموجود بين وسمي span

 

بعد ذلك احفظ القالب

اكمل القراءة...

كيفية ترقيم صفحات المدونة - خاص ببلوجر

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

كيفية اضافة الأداة:-

1. اذهب الى التخطيط  Layout

2. عناصر الصفحة  Page Elements

3.اضافة اداة  Add a Gadget

4. HTML/JavaScript

5. انسخ الكودCode HTML التالي :

ستظهر الصفحات مثل هذا المثال

الكود :

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.htm">Grab this Widget ~ Blogger Accessories</a></div>

-------------------------

بعد ذلك اضغط زر الحفظ ثم قم بسحب المستطيل الذي أنشأت إلى أسفل خانة الرسائل و احفظ الكل

أي استفسار أنا متواجد

فقط أكتب تعليقا بذلك وسنرد عليك فورا

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

اكمل القراءة...

كيفية فتح الراوبط الخارجية في صفحة جديدة

أفضل الطرق فلن تكون مضطرا لتعديل كل الروابط في المدونة ولن تسبب إزعاجا للزائر عدا عن بساطتها وسهولة تطبيقها، فقط كل ما عليك فعله هو إضافة كود جي كويري jQuery حيث يقوم بتفحص جميع الروابط الخارجية الموجودة في الصفحة وإضافة target=_blank لها بشكل تلقائي و يمكنك تركيبها كالآتي.

من لوح تحكم مدونتك توجه إلى صفحة التصميم ثم تحرير Html.

نبحث ( Ctrl+F ) عن</body> ونضيف هذا الكود فوقه مباشرة .
ملاحظة : إن كنت تستعمل مكتبة جي كويري في موقعك او مدونتك فلا داع لإضافة أول سطرين من الكود. و اكتف بما بعده.

الكود :

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

<script type="text/javascript">
//<![CDATA[
jQuery('a').each(function() {
// Let's make external links open in a new window.
var href = jQuery(this).attr('href');

if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
jQuery(this).attr("target", "_blank");
}
});
//]]>
</script>

و أخيرا نضغط على زر حفظ القالب.

اكمل القراءة...