إضافة إعلانات جوجل أدسنس داخل المواضيع

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

اتبع الخطوات التالية:

1. من لوحة تحكم مدونتك اذهب إلى قالب ثم تحرير HTML و بعد النقر على الكود اضغط CTRL + F من لوحة المفاتيح.

2. بعد الضغط على CTRL + F سيظهر لك مستطيل فارغ للبحث ، ابحث به عن الوسم التالي في القالب:

<data:post.body/>

 3.  سوف تجد اكثر من واحد ، الثاني هو المقصود غالباً.

 4. ضع كود جوجل أدسنس في صندوق التحويل محول أكواد أدسنس  ، ليتناسب مع القالب دون تعارض .

5.   ضع قبله وبعده شفرة جوجل أدسنس المحولة .



6. بعد وضع الكود اضغط حفظ وانتظر 5 الى 7 دقائق ليتم ظهور الاعلانات .

باقي التفاصيل »

إظهار أو إخفاء أداة على الصفحة الرئيسية أو على صفحة محددة على بلوجر .

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

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

<b:widget id='HTML

 والآن نحتاج إلى القليل من التركيز حيث يجب عليك تحديد أو تعليم الأداة المراد تعديلها (إظهارها أو إخفاؤها)،وهذا المثال يوضح كيفية البحث عن هذا الكود :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

1. والآن مباشرة بعد تحديد إسم الأداة كما هو موضح باللون الأحمر ،ولإظهارها فقط على" الصفحة الرئيسية" ،قم بإضافة الكودين باللون الأحمر . كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

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

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

2. ولإضافة هذه الأداة فقط على صفحة محددة ، قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == " أدخل رابط الصفحة المحددة "'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3. ولإضافة هذه الأداة فقط على صفحات التسمية ،قم بإضافة الكود باللون الأحمر كما هو موضح في الكود التالي مع تحديد إسم التسمية :

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;التسمية&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

4. ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحة الرئيسية  ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

 <b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

5. ولإضافة هذه الأداة في كل الصفحات بإستثناء  صفحات المواضيع ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

6. ولإضافة هذه الأداة في الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

7.  ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

  <b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

8. ولإضافة هذه الأداة في كل الصفحات لكاتب معين ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي مع إدخال إسم الكاتب :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:post.author == &quot;إسم الكاتب &quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

شرح طريقة الاستفادة من : <b:else/>
 نستخدم هذا الكود في حين أردنا عرض أداة أو إضافة بشكل معين في صفحة وتظهر بشكل آخر في الصفحات الاخرى .
بحيث لو أردنا عرض أداة ما في الصفحة الرئيسية وفي نفس الوقت عرض أداة ما في كل الصفحات عدا الرئيسية فنستخدم هذا الكود :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ضع كود الإضافة هنا (الإضافة تظهر فقط في الرئيسية )
<b:else/>
ضع كود الإضافة هنا (الإضافة تظهر في كل الصفحات إلا الرئيسية )
</b:if>

يمكنكم الإستفادة من هذه الحيل خصوصا عند إضافة إعلانات جوجل أدسنس google Adsense حيث يكون عادة عدد الإعلانات في الصفحة الرئيسية مغاير لعدد الإعلانات في صفحات المدونة.

المصدر : مدونة أبو إياد

باقي التفاصيل »

كيف تحصل على 15692 باك لينك لموقعك مجانا .

ماهو الباك لينك وماالفائدة منه ؟

 الباك لينك هي روابط تدل على موقعك تأتي من مواقع أخرى , أي هي الروابط التي تدل على مدونتك او موقع تأتي من مواقع اخرى وتتحول الى موقعك , وكلما كان عدد الروابط الخارجية كثير كلما زدات قوة موقعك في محركات البحث العالمية واهمها جوجل , والباك لينك يعتبر من اهم العوامل التي تقوم بترتيب البيج رانك موقعك , لأن كل ما كان لك روابط كثير في مواقع.

شرح الحصول على 15692 باك لينك

• اذهب للموقع -  من هنا  و اتبع الصورة

يتطلب ذلك الكثير من الوقت , لذلك اترك الصفحة مفتوحة حتى الإنتهاء

باقي التفاصيل »

إضافة مواضيع ذات صلة متحركة بشكل أنيق مع الصور لبلوجر .

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

طريقة تركيب اداة مقالات مشابهة :

اتبع الخطوات التالية:

1. من لوحة تحكم مدونتك اذهب إلى قالب ثم تحرير HTML و بعد النقر على الكود اضغط CTRL + F من لوحة المفاتيح.

2. بعد الضغط على CTRL + F سيظهر لك مستطيل فارغ للبحث ، ابحث به عن الوسم التالي في القالب:

</head>

( احرص على ان تلصق الوسم حرفياً مع التأكد من عدم وجود فراغات قبله او بعدة لضمان العثور عليه)

3. الان الصق الكود التالي قبل الوسم السابق مباشرة:

 

<!--Related Posts with thumbnails Scripts Start--> <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: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI_buMRpNXo-CfMy1YuFTE2RWNrGuh-1gyNZOt50eEuGWHU8w22Qg2wC-WEKiNdn8k9HI8b8553siyi5PM3-4BvaOmUT2ntmWa7puU3W-X9GVbxmSFaSf1At3yAD9xBR9M_RDPVk1RSqY/s400/noimage.png"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a> <script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Script End-->

4. إبحث عن الوسم التالي :

<div class='post-footer'>

إذا لم تعثر عليه أو لم ينجح هذا الكود جرب استخدام هذا الكود :

<data:post.body/>

5. الصق اسفل  الوسم السابق الكود التالي :

<br/><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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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=5&quot;' type='text/javascript'/></b:if></b:loop> <h3 style='border-bottom: 3px #5D7D91 solid;padding-bottom:10px!important'><b>مقالات مشابهة :</b></h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=10; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div> </b:if><a href='http://www.blogger-archive.com/2013/11/add-Related-Posts-for-Blogger.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>

6. إحفظ القالب واستمتع بالإضافة

باقي التفاصيل »

طريقة اضافة تأثير جميل على التسميات في بلوجر بكود CSS

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

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

اذهب للوحة تحكم مدونتك .
1. القالب.
2. تحرير HTML'
3. اضغط Ctrl+F من لوحة المفاتيح.
4. ابحث عن الوسم التالي:

  ]]></b:skin>

7. قم بلصق الكود التالي اسفله مباشره:

/*-----Custom Labels Cloud widget by www.blogger-archive.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

8.  الان اضغط حفظ.

باقي التفاصيل »

إضافة أداة آخر المواضيع مع الصور أفقي , أوتوماتيكي و بشكل أنيق .

هذه الأداة الكثير يبحث عنها , و هى تعرض آخر مواضيع القسم

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

الأداة الأولى :

لتركيب الإضافة يرجى إتباع الخطوات التالية :

1 . إذهب إلى مدونتك

2. ثم إلى تبويب تخطيط

3. ثم إضافة أداة

4. ثم تختار صنف HTML / JAVASCRIT

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

<center><div id='bp_recent'></div><div class='bp_footer'>
<script style='text/javascript'>
//Featured Posts Script by crounji.org
var postTitleOriginal,  myLink, myDiv, myImage,mySeparator;
var    main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
    var entry = json.feed.entry[i];
    var postTitle = entry.title.$t;
    postTitleOriginal = postTitle;
    if (isNaN(titleLength) || titleLength == 0) {
        postTitle = '';
    }
    else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
    var postUrl="";
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            var commentText = entry.link[k].title;
            var commentUrl = entry.link[k].href;
        }
        if (entry.link[k].rel == 'alternate') {
            postUrl = entry.link[k].href;
            break;
        }
    }
    if (showThumbs == true) {
        var thumbUrl = "";
        try {
            thumbUrl = entry.media$thumbnail.url;
            thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        } catch (error) {
            if ("content" in entry) s = entry.content.$t; else s="";
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                 regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
                videoIds = s.match(regex);
                if (videoIds != null) {
                    videoId = videoIds[4];
                }
                if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
            }
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                a = s.indexOf("<img");
                b = s.indexOf("src=\"", a);
                c = s.indexOf("\"", b + 5);
                d = s.substr(b + 5, c - b - 5);
                if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;
            }
        }
        if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
        thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
        if (thumbUrl == "" && showNoImage == true)
        {
        thumbUrl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihD05Zl2La3uY-QmLZidesCGyTLyCPmv4Ji-4-73jd4Eqd05SzmmmDSqkvDpOy4VgYRH6MUHaPJ6wjR4ndv4FFcDYaaFr1gTJtvXmr-VLiItPuWko6wRrnbT1cjOWRRYdC22eUf_HiW1ab/s1600/default.png";
        try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
        thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        }
    }
    if (showPostDate == true) {
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
    }
    code = "";
        main = document.getElementById('bp_recent');
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_title");
        myLink = createLink(postUrl,"_top",postTitleOriginal)
        if(main.innerHTML!=""){
        mySeparator = createDiv("bp_recent_separator");
        main.appendChild(mySeparator)
        }
        if(postTitle != ''){myDiv.appendChild(myLink);}
        main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;

    if (showThumbs == true && thumbUrl != "") {
        myImage = document.createElement('img');
        myImage.setAttribute("src", thumbUrl);
        if(imgFloat!="none")
        {
        float_clear=true;
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        }
      try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
        myImage.setAttribute("alt", postTitleOriginal);
        myImage.setAttribute("width", imgDim);
        myImage.setAttribute("height", imgDim);
        myLink = document.createElement('a');
        myLink.setAttribute("href", postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");
        myLink.setAttribute("target", "_top");
        myLink.setAttribute("title", postTitleOriginal);
        myLink.appendChild(myImage);
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_thumb");
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }
 try {
        if ("content" in entry) {
            var postContent = entry.content.$t;
        }
        else if ("summary" in entry) {
            var postContent = entry.summary.$t;
        }
        else var postContent = "";
        var re = /<\S[^>]*>/g;
        postContent = postContent.replace(re, "");
        if (showSummary == true) {
            myDiv = createDiv("bp_item_summary");
                if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
            else {
                postContent = postContent.substring(0, summaryLength);
                var quoteEnd = postContent.lastIndexOf(" ");
                postContent = postContent.substring(0, quoteEnd);
                myDiv.appendChild(document.createTextNode(postContent + '...'));
            }
            main.appendChild(myDiv);
        }
    } //end try
    catch (error) {}
    myDiv =  createDiv("bp_item_meta");
    myDiv.style.clear="both";
    myDiv.style.marginBottom="4px";
    if (showPostDate == true) {
        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
        flag = 1;
    }
    if (showCommentCount == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        if (commentText == '1 Comments') commentText = '1 Comment';
        if (commentText == '0 Comments') commentText = 'No Comments';
        var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML=commentText;
        flag = 1;;
    }
    if (showReadMore == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        var myLink = createLink(postUrl,"_top",postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML = readMore+" &raquo;";
        flag = 1;;
    }
    if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent_link").style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWSDeEKj-99FuwofvIEQh-aOzDjyNzlZM9PJ7-LqUihtTo5iYMq-bQyI8TdTQYQLQT0UI_m-4uq4SrcuzWDegArOIsBMYwbUBaiV0uo0zEUBGOuMt581g6k4Xas5cVMmETwDRlewhS5PFV/s1600/blogger-widgets.png')";
document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
        if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent"+"#comment-form";myLink.setAttribute("href", href);}
        else myLink.setAttribute("href", href+"?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent");
        myLink.setAttribute("target", target);
        myLink.setAttribute("title", title);
        return myLink;
}
</script>
<script style='text/javascript'>
 var numberOfPosts = 5;
 var showPostDate = false;
 var showSummary = false;
 var titleLength = 0;
 var showCommentCount = false;
 var showThumbs = true;
 var showNoImage = true;
 var imgDim = 115;
 var imgFloat = 'left';
 var myMargin = 5;
 var mediaThumbsOnly = true;
 var showReadMore = false;
</script>
<script src='http://www.enjoywithblogger.com/feeds/posts/default/-/أدوات بلوجر?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'>
</script></div></center>

ثم تستبدل :  - الرابط الملون بالأحمر " www.enjoywithblogger.com "برابط مدونتك .
               - " أدوات بلوجر " بإسم القسم الذي تود أن يظهر على مدونتك .
               - " var numberOfPosts = 5 " و "  max-results=5 " تغير قيمة عدد الصور .
              -  " var imgDim = 115  " تغير حجم الصور .

ثم احفظ الإضافة .

الأداة الثانية :

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

لتركيب الإضافة يرجى إتباع الخطوات التالية :

1 . إذهب إلى مدونتك

2. ثم إلى تبويب تخطيط

3. ثم إضافة أداة

4. ثم تختار صنف HTML / JAVASCRIT

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

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #random-posts li{width:145px;height:150px;margin-right:12px;float:left;list-style:none;position:relative} #random-posts li:last-child{margin-right:0} #random-posts li img{width:145px;height:150px} #random-posts li img a{border:#333 solid 2px}; #random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:2px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0} #random-posts li:last-child .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:90%;color:#B30B0B} .isinyako p{font-size:90%;} </style> <span class="glap"> <ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 4; var rdp_snippet_length = 150; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default/-/صحة عامة?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVeFmmfon2IZcEn4JEkSgcDpUh2K6bsDvSSfl671isItJv5cubhRlQptbtBvpb5ndhk_LbRtn0bVqcTfQfUdZHA2MRyZEIU7VPc9QZ01wTuWDC-f8ZdTYi1WHD1j-LhB9g3QfL2lt9MJg/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default/-/صحة عامة?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script> </ul></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script>
</b:if>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEiCwNHsCurfLlFSVeu1EQM4Uf6cuBhZK9DkCJ6NmZ3yW9rbRb0pL4YmRKaNJnc_xgnVYk9Jd8ETB4P-3iDhcoxbkWRLrgaNe8bH9EyJGX98-PDDsO0IXSMSRWzcuU64XLIrp9SWfLqzii/s1600/222.JPG" />

 ثم تغير القيم الملونة باللون الأحمر بما يناسبك .

واحفظ الأداة .

باقي التفاصيل »

إضافة ترقيم الصفحات بشكل أنيق و مميز .

لتركيب الإضافة يرجى إتباع الخطوات التالية :

1 . إذهب إلى مدونتك

2. ثم إلى تبويب تخطيط

3. ثم إضافة أداة

4. ثم تختار صنف HTML / JAVASCRIT

و تضع الكود التالي فيه

<br />
<!--Page Navigation Starts By 3rab-help.com-->
<style>
/*Pagination Style*/
.pagination {
display:block;
text-align: center !important;
padding-left: 0px;
overflow: hidden;
margin-bottom: 20px;
float:right;
clear:right;
}
.pagination a, .pagination a:link, .pagination a:visited {
background: url(../images/pages-num-bg.png);
text-decoration: none;
color:#666 !important;
display: block;
text-align: center;
background: rgb(249,249,249);
background: -moz-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(234, 234, 234, 1)));
background: -webkit-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -o-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -ms-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea', GradientType=0 );
background: linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
border: 1px solid #d6d6d6;
text-shadow: 0px 0px 0px #fed4a8;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
float: right;
padding: 7px 15px;
margin-left: 7px;
}
.pagination a:hover {
color: #666;
background: #fff;
}
.pagination span.pages {
display:none;
}
.pagination span.current {
text-decoration: none;
color:#fff !important;
display: block;
text-align: center;
margin-left: 7px;
background: rgb(223,115,9);
background: -moz-linear-gradient(center top , #23375F 0%, #23375F 100%) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(223, 115, 9, 1)), color-stop(100%, rgba(207, 78, 7, 1)));
background: -webkit-linear-gradient(top, #23375F 0%, #23375F 100%);
background: -o-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
background: -ms-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df7309', endColorstr='#eaeaea', GradientType=0 );
background: linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
border: 1px solid #23375F;
text-shadow: 1px 1px 1px #23375F;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
display: block;
padding: 7px 15px;
float: right;
}
.pagination span.extend {
text-decoration: none;
color:#666 !important;
display: block;
text-align: center;
margin-left: 4px;
background: rgb(249,249,249);
background: -moz-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(234, 234, 234, 1)));
background: -webkit-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -o-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -ms-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea', GradientType=0 );
background: linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
border: 1px solid #d6d6d6;
text-shadow: 0px 0px 0px #fed4a8;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
padding: 7px 15px;
float: right;
}
</style>

<div class='pagination'>
<script type='text/javascript'>


                    var pageNaviConf = {
                      perPage: 8,
                      numPages: 8,
                      firstText: "الصفحة الأولى",
                      lastText: "الصفحة الأخيرة",
                      nextText: "&#187;",
                      prevText: "&#171;"
}
//<![CDATA[
function pageNavi(o) {
  var m = location.href,
    l = m.indexOf("/search/label/") != -1,
    a = l ? m.substr(m.indexOf("/search/label/") + 14, m.length) : "";
  a = a.indexOf("?") != -1 ? a.substr(0, a.indexOf("?")) : a;
  var g = l ? "/search/label/" + a + "?updated-max=" : "/search?updated-max=",
    k = o.feed.entry.length,
    e = Math.ceil(k / pageNaviConf.perPage);
  if(e <= 1) {
    return
  }
  var n = 1,
    h = [""];
  l ? h.push("/search/label/" + a + "?max-results=" + pageNaviConf.perPage) : h.push("/?max-results=" + pageNaviConf.perPage);
  for(var d = 2; d <= e; d++) {
    var c = (d - 1) * pageNaviConf.perPage - 1,
      b = o.feed.entry[c].published.$t,
      f = b.substring(0, 19) + b.substring(23, 29);
    f = encodeURIComponent(f);
    if(m.indexOf(f) != -1) {
      n = d
    }
    h.push(g + f + "&max-results=" + pageNaviConf.perPage)
  }
  pageNavi.show(h, n, e)
}
pageNavi.show = function (f, e, a) {
  var d = Math.floor((pageNaviConf.numPages - 1) / 2),
    g = pageNaviConf.numPages - 1 - d,
    c = e - d;
  if(c <= 0) {
    c = 1
  }
  endPage = e + g;
  if((endPage - c) < pageNaviConf.numPages) {
    endPage = c + pageNaviConf.numPages - 1
  }
  if(endPage > a) {
    endPage = a;
    c = a - pageNaviConf.numPages + 1
  }
  if(c <= 0) {
    c = 1
  }
  var b = '<span class="pages">الصفحة ' + e + ' من ' + a + "</span>";
  if(c > 1) {
    b += '<a href="' + f[1] + '">' + pageNaviConf.firstText + "</a>"
  }
  if(e > 1) {
    b += '<a href="' + f[e - 1] + '" class="inactive">' + pageNaviConf.prevText + "</a>"
  }
  for(i = c; i <= endPage; ++i) {
    if(i == e) {
      b += '<span class="current">' + i + "</span>"
    } else {
      b += '<a href="' + f[i] + '" class="inactive">' + i + "</a>"
    }
  }
  if(e < a) {
    b += '<a href="' + f[e + 1] + '">' + pageNaviConf.nextText + "</a>"
  }
  if(endPage < a) {
    b += '<a href="' + f[a] + '" class="inactive">' + pageNaviConf.lastText + "</a>"
  }
  document.write(b)
};
(function () {
  var b = location.href;
  if(b.indexOf("?q=") != -1 || b.indexOf(".html") != -1) {
    return
  }
  var d = b.indexOf("/search/label/") + 14;
  if(d != 13) {
    var c = b.indexOf("?"),
      a = (c == -1) ? b.substring(d) : b.substring(d, c);
    document.write('<script type="text/javascript" src="/feeds/posts/summary/-/' + a + '?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')
  } else {
    document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')
  }
})();
//]]>
</script>
</div>

<!--Page Navigation Ends By 3rab-help.com-->

 * ملاحظة / يمكنك تغيير اللألوان اللي تناسبك بالكود الملون باللون الأحمر .

ثم تحفظ الإضافة بدون عنوان

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

باقي التفاصيل »

معالج أكواد / HTML Processor

ضع الأكواد في المربع :
 

باقي التفاصيل »

شرح تقسيم (السايد بار-sidebar) لمدونة بلوجر الى قسمين

شرح تقسيم  (السايد بار-sidebar) لمدونة بلوجر الى قسمين  , شرح بسيط جدا  ولا يوجد به اي صعوبه ولا يحتاج حتى الى تركيز تابع......

ادخل الى لوحة اداررة مدونتك .
ثم اذهب الى التخطيط.
اختر المكان المناسب للقطعتين .
اضف اداة عبارة عن : HTML/JavaScript
انسخ هذا الكود وضعه داخلها  :

<div style="width: 45%; float: left;"> ضع هنا الكود الذي تريد - الجهة اليسرى </div> <div style="width: 45%; float: right;"> ضع هنا الكود الذي تريد - الجهة اليمنى </div> <div style="clear: both;"></div>

 

باقي التفاصيل »

إضافة أداة أو أداتين فوق ( أسفل ) صندوق رسائل المدونة في مدونات بلوجر

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

لذلك أود اليوم  أن أقوم بشرح سهل و بسيط عن كيفية إضافة عمودين أو أداتين Sections "إضافة أداة" فوق صندوق رسائل المدونة و / أو تحته. بعد ذلك يمكنك إضافة ادوات جافا سكريبت HTML/Javascript كما تشاء.

كالعادة و قبل أن نبدأ يجب علينا أخذ نسخة إحتياطية من القالب لتجنب أي خطأ قد يحصل .

نذهب إلى قالب --> تحرير HTML --> باستعمال F3 أو ctrl+F نبحث عن الكود التالي :

<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='false' title='Post sul blog' type='Blog'/> </b:section>

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

<div id='Widget1A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1a' preferred='yes' style='float:left;'/> </div> <div id='Widget1B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>

لإضافة عمودين / أداتي "إضافة أداة" تحت / أسفل صندوق رسائل المدونة نضع الكود التالي تحت / أسفل الكود الذي قمنا بالبحث عنه في الخطوة السابقة.

<div id='Widget2A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>

النسبة المئوية لعرض الأدواة يمكن أن يكون بأي نسبة تريدون أي بالقياسات التي تريدونها، المهم أن يكون مجموعهما أقل من 100%.

إذا ظهرت الأداتان فوق بعض فقم بتنقيص أو تصغير النسب المائوية / قياسات الأداتين حتى يظهرا جنبا إلى جنب.

أما إذا أردتم إضافة 3 أدوات "أضافة أداة" فيمكنكم الإعتماد على الكود التالي.

<div id='Widget2A' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:left;'/> </div> <div id='Widget2C' style='width: 31%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2c' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>

هنا أيضا يمكنكم التحكم بقياسات عرض الإضافات بنفش الشروط السابقة.

باقي التفاصيل »