العالم الرقمي

السلام عليكم ورحمة الله وبركاته ،اليوم سوف نتعرف على كيفية إضافة الروابط الأوتوماتيكية لتدوينات بلوجر تحت كل موضوع ،حيث يُعرض على شكل جدول أسفل كل تدوينة ويتضمن روابط المقال على شكل 3 صيغ : URL ,HTML ,BBCODE

كيفية تطبيق الإضافة :

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

]]></b:skin>

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

    #table {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        font-size: 13px;
        margin: 10px -12px;
        width: 580px;
        text-align: left;
        border-collapse: collapse;
       direction:ltr;
    }
    #table th {
        font-size: 13px;
        font-weight: normal;
        padding: 8px;
        background: #b9c9fe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAZEKrUOlhO53DYFcD7Eepi0sQ90rVl_uogr_SH9gAmybTLwuxPIBFVN01VY6oYFdPkNqnqlURmB851fSJ9v13L3idL_IEgFGQsKbohWwqlRqWeF-ojFXeUh9q0zvsUUY4OBARP_bb1O3/s1600/gradhead.png') repeat-x;
        border-top: 2px solid #d3ddff;
        border-bottom: 1px solid #fff;
        color: #039;

    }
    #table td {
        padding: 8px;
        border-bottom: 1px solid #fff;
        color: #4c4c4c;
        border-top: 1px solid #fff;
        background: #e8edff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHrzfe1HkwgRhSF8nZkyLSG9449wEi0eoC3zCYCBmeN0NtoYjtvvoPc9Nfik-2ZHjajDuqx6orILKw4WhDLJ1PJHG7cZKMuBMG9ghdwJ6N_9w3G_u-WiW6fs3DpXB7qCNsVS4Dko5FUpZ/s1600/gradback.png') repeat-x;
    }
    #table tfoot tr td {
        background: #e8edff;
        font-size: 20px;
        color: #99c;
        text-align:center;
    }
    #table tbody tr:hover td {
        background: #d0dafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqug39LTb3x-cBfPfCerPZMBv0HEBV5POTDscwIRE7feY-3dhdAC0ZgqdatPabhdAgnqXBUvgnjP9_wJGZCkIAyIEqBSvQhh1SX5HC-YlwVoFUGCEIIXIroanxXDX8aJIwGaHNnY1V5Y03/s1600/gradhover.png') repeat-x;
        color: #339;
    }
    #table a:hover {
        text-decoration:underline;
    }

والآن قم بالبحث عن هذا الكود (إن وجدت منه أكثر الكثيير فالكود الأخير هو المقصود):

<data:post.body/>

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

    <b:if cond='data:blog.pageType == "item"'>
    <table id='table' summary='روابط الموضوع'>
      <tfoot>
        <tr>
          <td colspan='2'>روابط هذه التدوينة قابلة للنسخ واللصق</td>
        </tr>
      </tfoot>
    <tr>
      <td>URL</td>
      <td><input expr:value='data:post.canonicalUrl' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
    </tr><tr>
      <td>HTML</td>
      <td><input expr:value='"<a href=&quot;" + data:post.canonicalUrl + "&quot; title=&quot;" + data:post.title + "&quot;>" + data:post.title + "</a>"' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
    </tr><tr>
      <td>BBCode</td>
      <td><input expr:value='"[url=" + data:post.canonicalUrl + "]" + data:post.title + "[/url]"' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
    </tr>
    </table> </b:if>

وأخيرا قم بحفظ القالب ،لأي إستفسارالمرجو تركه كتعليق أسفل الموضوع.

.

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

- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.

الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.

الخطوات :

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

]]></b:skin>

ثم نضيف الكود التالي قبله .

    /*sus code by Amizmiz-Soft */
     .Azrar-Amizmiz-Soft {
    border-radius: 50%; /* الحدود الدائرية */
    box-shadow: 0px 0px 15px #000; /* الظل*/
    padding:0;
    border:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .Azrar-Amizmiz-Soft:hover {
    box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
    border-radius: 0; /*لحذف الظل عند مرور المأشر */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }

    .Amizmiz-Soft-center {
            text-align: center /*لتوسيط الأزرار */
    }
     /*sus code by Amizmiz-Soft */

ثم قم بحفظ القالب.

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

HTML/Javascript

و ضع الكود التالي في الأداة :

    <div class="Amizmiz-Soft-center">
    <a href=" رابط صفحتك على الفيسبوك هنا" target="_blank" title="Find us on Facebook!"><img class="Azrar-Amizmiz-Soft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vcuriU-tiYyKCm6CmnIrX6mLMc8Ut0BUHvSLtvKY1umgZP48yVO9NrYVD2AYdM0ocbwcyV5jo383xbDDkWHDxCGUNhuICL8qlfX8LX6dsCZPaDFeKpuSDJIqjDFNUipqcOFqEhyphenhyphenUNnbL/s1600/amizmiz-soft-facebook.png" /></a>
    <a href="رابط حسابك على تويتر هنا" target="_blank" title="Find us on Twitter!"><img class="Azrar-Amizmiz-Soft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2zDyE4uDpq7tmAtfiKQN3tgK8xmvYkgVTljQWGBoSA5DK6U0k1bnfXAKH1ErBP2V-llwW0BnRHMBDl8lDGaBc7E5s_ag4Af1Ypkt4zgqc4I2fg5vDDZtzPgCSm_kYYUNm9QJ5BufGXGc/s1600/amizmiz-soft-twitter.png" /></a>
    <a href="رابط صفحتك على جوجل بلس هنا" target="_blank" title="Find us on Google Plus!"><img class="Azrar-Amizmiz-Soft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaHBd7ODVHZDllGAioBqYZu-iLIkJrYf2gMtWw2PPHvQYfcCVXKRWhUrgZiVhWO12NhVdwXlvdlk3i3zJtnmL2Pqv-39e_a2L6io507U2eWdK3eOVv62JefnFoxKz2KGVaAjR4lk_FYknk/s1600/amizmiz-soft-google-plus.png" /></a>
    <a href="رابط الخلاصة للمدونة هنا" target="_blank" title="Find us on RSS!"><img class="Azrar-Amizmiz-Soft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKL4YwIBfxHOa7xcKueWCLOjg1ZYqx5TPqvpEBxg8jW75F3oRaliCzg0dBspSUhVHW9XBNrvnaR7C2uUa2LUDPydnBlvUJXCDIXdpOtBNlqmWdVgaWoDkdY6gwGBTTUNssONeFaFSSJrku/s1600/amizmiz-soft-rss.png" /></a>
    </div>

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

.

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

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

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

تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

<b:widget id='HTML

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

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>

<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>

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

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<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"'>

<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.url == " أدخل رابط الصفحة المحددة "'>

<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:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "التسمية"'>

<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.url != data:blog.homepageUrl'>

<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"'>

<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 == "static_page"'>

<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 != "static_page"'>

<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:post.author == "إسم الكاتب "'>

<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>

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

لأي استفسار أو سؤال حول الموضوع المرجو ترك رد.

.

بسم الله و الحمد لله و الصلاة و السلام على نبينا و حبيبنا محمد الأمين. السلام عليكم و رحمة الله. أقدم لكم اليوم إضافة سريعة، جميلة و سهلة التركيب، من خلالها ستعرض على زوارك متابعة جديدك على المواقع الاجتماعية كتويتر أو يوتيوب أو عبر الخلاصات و المفضلات... كما و يمكنكم تخصيصها لتوافق مبتغاكم. تركيبها يسير، فقط ازرع كود css في ملف القالب style ثم ضع كود html في أي مكان بين وسمي body. يمكنكم معاينة الإضافة من خلال الصورة المرفقة.

كود css

.follow-box {
  border:0 none;
  clear:both;
  margin:0;
  padding:0;
  position: fixed;
  top:199px;
  right:0;
  z-index:95;
}

 كود html

<div class="follow-box" >
 <img usemap="#follow-box" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtrvSQbhMgO9RjisAe9AhcZ-1oXu09bJ08u6-kK4WM8NSKns9M90dv96_aZG1SZO29gWfr1rJq6eg4byHcaAK5Ksl-oUBxeh1RENGhNk1sKgFRLtdLE2BiW-FcN0y1t89RctwXqhM9JPQ/" border="0" />
 <map name="follow-box">
  <area shape="rect" target="_blank" coords="5, 68, 29, 92" href="http://delicious.com/your-account" alt="delicious" title="delicious" />
  <area shape="rect" target="_blank" coords="5, 98, 29, 122" href="http://twitter.com/your-account" alt="twitter" title="twitter" />
  <area shape="rect" target="_blank" coords="5, 129, 29, 153" href="http://www.youtube.com/your-account" alt="youtube" title="youtube" />
  <area shape="rect" target="_blank" coords="5, 159, 29, 183" href="http://feeds.feedburner.com/your-account" alt="الخلاصات RSS" title="الخلاصات RSS" />
 </map>
</div>

طريقة إضافة الأكواد :

يوضع كود css في القالب من صفحة تحرير html مباشرة قبل

]]></b:skin>

ثم يوضع كود html في أداة javascript/html بدون عنوان من صفحة عناصر الصفحة.

هام : لا تنس أن تستبدل الروابط الحمراء بروابطك الخاصة في الكود .

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

الأيقونات مقدمة من Icon Dock يمكن تحميلها من هذا الرابط.

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

.

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

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

فربط مدونتك أو موقعك بالموقع الاجتماعي رقم واحد سوف يزيد من زوارك و ترتيب موقعك بالتأكيد .

الاداة متاحة باللغة العربية و الانجليزية والفرنسية و كل اللغات تقريبا لتتناسب مع كل المواقع و المدونات ...

شكل الاداة :

أو

الطريقة :

اولا : ضبط اعدادات الفايسبوك و انشاء التطبيق

1. ادخل الموقع التالي : https://developers.facebook.com/apps/

قد يطلب منك تسجيل الدخول بحسابك في الفايسبوك

2. اضغط على زر انشئ تطبيق جديد أو Créer une application أو Create New App

على حسب اللغة المستعملة في البروفايل.

3. قم بالسماح للتطبيق من استخدام معلوماتك الشخصية لأنشاء التطبيق ( اضغط سماح ) Allow

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

ملاحظة : اسم التطبيق يجب ان يكون خالي من المسافات ولا يحتوي على اي حروف كبيرة Capital

5. قم بأدخال الرمز التأكيدي

ملاحظة : قد يظهر لك مربع احمر و محتواه ان حسابك الخاص بك في الفيسبوك يحتاج الى تأكيد او تفعيل ( هذا إذا لم تكن قد قمت بتأكيد حسابك من قبل ).

اتبع خطوات تأكيد الحساب عن طريق النقال (خطوات تأكيد الحساب سهلة و بسيطة و لا تحتاج لشرح)

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

أكمل الإعدادات كما في الصورة ثم اضغط حفظ ..

آخر خطوة و هي الحصول على اي دي البروفايل الخاص بك :

قم بفتح بروفايلك .. و لمن لا يعرف فقط قم بالضغط على صورة البروفايل,

سوف تجد رابط الصفحة من الاعلى كالآتي :

قم بأخذ الرقم او الاسم الذي يلي مباشرة ID= ( اسم او رقم )

و احتفظ به ...

اذا وجدت رابط بروفايلك بالشكل التالي :

http://www.facebook.com/Amizmiz.Soft

خد اخر اسم ... "Amizmiz.Soft"... فقط .

و هكذا نكون قد أنهينا إعدادتنا على الفليسبوك ...

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

1. تصميم
2. تحرير HTML
3. قم بالتأشير على توسيع قوالب عناصر المستخدم

الان ابحث عن :

<html

و قم بإضافة الكود التالي بنهايته مباشرة قبل

>

الكود :

xmlns:fb='http://www.facebook.com/2008/fbml'

ليصبح بالشكل الذي نراه بالصورة :

و الان قم بالبحث عن :

</head>

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

<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='رقم التطبيق الذي حصلنا عليه من قبل' property='fb:app_id'/>
    <meta content='اي دي البروفايل الذي حصلنا عليه من قبل' property='fb:admins'/>
    <meta content='article' property='og:type'/>

ملاحظة : لا تنسى استبدال المعلومات داخل الكود باللون الاحمر

الان ابحث عن :

<body>

او

</tbody>

ملاحظة : قوالب بلوجر الحديثة تستخدم </tbody> و القوالب العادية تستخدم </body>

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

<div id='fb-root'/>
    <script>
        window.fbAsyncInit = function() {
        FB.init({
          appId : 'رقم التطبيق الذي حصلنا عليه من قبل',
          status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the   session
          xfbml : true // parse XFBML
        });
      };
        (function() {
        var e = document.createElement('script');
          e.src = document.location.protocol +   '//connect.facebook.net/ar_AR/all.js';
        e.async = true;
          document.getElementById('fb-root').appendChild(e);
        }());
    </script>

ملاحظة : لا تنسى استبدال المعلومات داخل الكود . باللون الاحمر

الآن ابحث عن الكود التالي :

<div class='post-footer'>

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

ملاحظة : ابحث عن السطر الاول او الثاني حتى تجد السطرين بنفس الترتيب بالاعلى .

و ضع بعده مباشرة الكود التالي :

<b:if cond='data:blog.pageType == "item"'>
<p align='right'>
<img alt='' class='icon-action' height='83' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65fZ8Eoc35AxcX4LaiAPcEsPNOWA82IDID03WUEX3F6tOzbxvSTnc6Jda6YBal_JmWE-P27bryPeb5ECEmjiLxTdW2fyfYP-JfljtuTTa-dW3j4BoPIYXH74RHd7HQJeKx4wJxwsfb4uk/s1600/facebook-comment.png' width='300'/></p>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>
<script src='http://sites.google.com/site/javascripthtmlphpcode/apifcb.js' type='text/javascript'/></div>
</b:if>

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

و يمكنك تغييرها إذا لم تعجبك .

الرقم باللون الاخضر يمثل عرض الاداة و يمكنك تكبيره أو تصغيره ليناسب القالب الخاص بك.

و اخير : هذه الاداة مضافة باللغة العربية فإذا اردت تحويلها الى الانجليزية كل ما عليك فعله هو البحث عن هذا :

http://connect.facebook.net/ar_AR/all.js

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

http://connect.facebook.net/en_US/all.js

أو بهذا إذا أردت اللغة الفرنسية :

http://connect.facebook.net/fr_FR/all.js

اخيرا إضغط حفظ ... و قم بمشاهدة موضوعاتك.

لأي ملاحظات او اي استفسار اترك تعليقك و سوف يتم الرد عليه بأقرب وقت.

لتحميل الشرح على شكل كتاب إلكتروني

من هنــــــــــا

أو

رابط على mediafire

.

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

إضافة القرآن الكريم بصوت تسعة قراء مشهورين بكود لا يأخذ مكان في الموقع أو مدونات البلوجر

أولا شرح الأداة :

هي عبارة عن مشغل فلاشي لملفات mp3 , و في حالتنا, هذه الملفات هي عبارة عن سور القرآن الكريم كاملا بصوت تسعة من أشهر القراء في العالم العربي , و هي مقدمة من الموقع الشهير TVQuran.com حيث أن هذا الأخير يقدم كودا يسمح لمستخدميه بأن يضيفوا القرآن لمواقهم, و لكن العيب في هذا الكود المقدم , هو أنه يسمح لك بإضافة مقرئ واحد فقط دون الآخرين أنت تختاره قبلا.

حسنا, أين الجديد في كل هذا ؟

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

هذا دون التحدث عن ملايين الحسانات التي يمكن أن تربحها عن كل الزوار الذين يستمعون للقرآن الكريم عن طريقك.

اللهم تقبل من الجميع....

كل ما عليك هو إضافة أحد الأكواد الموجودة آخر الشرح و هو بدوره سيضيف أيقونة (طبعا يمكنك تغيير الأيقونة كما تشاء) إلى موقعك أو مدونتك , عند الضغط على هذه الأيقونة تفتح نافذة صغيرة بقياس 300 على 400 px يمكن من خلالها اختيار القارئ المفضل ليفتح في نفس النافذة.

واختصارا لمميزات الأداة:

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

2 التسعة شيوخ داخل اداة واحدة و اي شيخ تختاره سيكون مع باقي الشيوخ في نفس الأداة.

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

ثانيا : القراء الموجودون في الأداة :

ثالثا : صورة الأداة :

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

كود الأداة :

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

1. الشيخ / سعود الشريم

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Al-Shuraim.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

2. الشيخ / مشاري العفاسي

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Alafasi.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

3. الشيخ / سعد الغامدي

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Al-Ghamdi.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

4. الشيخ / هاني الرفاعي

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Hani.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

5. الشيخ / احمد ابن علي العجمي

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Al-Ajmy.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

6. الشيخ / عبد الرحمن السديس

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Alsudaes.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

7. الشيخ / ماهر المعيقلي

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/maher.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

8. الشيخ / فارس عباد

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Fares.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

9. الشيخ / عبد الباسط عبد الصمد

<p align="center"> <a href="javascript: void(0)" onclick="window.open('http://quranonline.heliohost.org/TVQuran/Listen2Quran/Abdulbasit%20Abdulsamad.htm', 'windowname1', 'width=300, height=400'); return false;"> <img src="http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png" border="0" /></a> </p>

الطريقة :

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

أما بالنسبة لأصحاب مدونات بلوجر :

1. لوحة التحكم البلوجر

2. تصميم

3. اضافة اداة

4. اضافة اداة HTML / JavaScript

5. انسخ كود الشيخ الذي اخترته داخلها

6. اضغط حفظ

و هكذا يمكن للأي إضافة الأداة بكل سهولة و يسر دون أدنى دراية بلغات البرمجة

و أيضا يمكن تغيير الأيقونة إلى أي صورة أو أيقونة أخرى كبيرة كانت أو صغيرة حسب ذوقك, كل ما عليك هو تغيير الرابط الأحمر إلى رابط الصورة التي تريد أو إلى إحدى هذه الصور:

http://2.bp.blogspot.com/-5LXHoAVRNSk/TvuaoWOiEQI/AAAAAAAADhE/wOKhH-Hj2JU/s1600/kor2an2.png

http://3.bp.blogspot.com/-0hqni7aR-5Y/TvuaqIjvDMI/AAAAAAAADhM/buW8sdt5AZo/s1600/kor2an3.png

http://1.bp.blogspot.com/-VJjqUJMYBX8/TvuasLTvr7I/AAAAAAAADhU/7Mks_PF7EgA/s1600/kor2an4.png

http://3.bp.blogspot.com/-ywlSGhbxtfo/TvuavtlW53I/AAAAAAAADhk/zeU5AEo19WU/s1600/kor2an6.png

http://1.bp.blogspot.com/--Ao4RDxC-r4/TvuatxwPc9I/AAAAAAAADhc/hJ_FyQoX33Q/s1600/kor2an5.png

http://3.bp.blogspot.com/-X_YGmlvkcBQ/Tvub4BN5DpI/AAAAAAAADh4/wCdWuOV8K6Y/s1600/kor2an8.png

http://2.bp.blogspot.com/-oOLlG83aEHo/Tvub6ta1_9I/AAAAAAAADiQ/U2Ff_mNrDSU/s1600/kor2an11.png

http://2.bp.blogspot.com/-P3pQKW8EMR4/Tvub29hxGbI/AAAAAAAADhw/QVat1z8zZl8/s1600/kor2an7.png

http://2.bp.blogspot.com/-c1W7LxV9VlE/Tvub5nAR_YI/AAAAAAAADiI/0paSc_jYKNQ/s1600/kor2an10.png

http://1.bp.blogspot.com/-YWr4R-MtvVA/Tvue_rgDceI/AAAAAAAADjI/82pls1emxxs/s1600/kor2an9.png

لتحميل الشرح على شكل كتاب إلكتروني (format pdf) إضغط هنا

رابط آخر من هنا

* New : قريبا إن شاء الله سأضع شرحا آخر (حصري لأول مرة) لوضع نفس الأداة بنفس المميزات و لكن هذه المرة ,,,, في صفحة الفيسبوك خاصتك أو أي صفحة أخرى شرط أن تكون Admin أدمن فيها.
فقط تابعوا جديدنا

اللهم تقبل من صاحب الفكرة ...
و اجزنا عليها خيرا يا رب العاليمن

********

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

و هي أداة هامة للمدونات و المواقع خصوصا لمن يريد ربط موقعه مع أهم موقع اجتماعي .

***

** و يمكنك ايضا اضافة صندوق تعليقات الفايسبوك لمدونتك >> من هنا :

أضف صندوق تعليق الفايسبوك الى موقعك أو مدونتك Facebook Comment Box

***

الطريقة :

اولا : إضافة الجي كويري لتتمكن من تحريك الاداة للداخل و الخارج :

1. اذهب للوحة التحكم

2. تخطيط

3. تحرير HTML

4. توسيع عناصر القالب

5. ابحث عن :

</head>

و ضع قبله مباشرة :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

اذا كنت قد اضفته قبلا فلا داعي لإضافته مرة اخرى.

ثانيا : لإضافة الأداة :

1. اذهب الى لوحة التحكم

2. تخطيط

3. اضافة اداة

4. اداة HTML

ثم انسخ الكود التالي :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$(".w2bslikebox").hover(
function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//]]>
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh09BYqHuReOS4eGVU9XvYWUKrefhPfVMnOmAOIkNR2rLxZLbowujr0hWX3quoJGLZYpxfKKJN446OWHXTs_EzwHAJICVAumcZSQuDHuLcU7LXpVDLkBaFuUMhN1vuDhdk7jCN4gLPYLAw1/s1600/facebook-page2.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>

<div class="w2bslikebox" style="z-index: 9999999999;">
<div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Amizmiz.Soft&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="z-index: 9999999999; border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;">
</iframe>
<span><a href="http://www.amizmiz-soft.com/2012/06/jquery-facebook-like-box.html">Get this </a></span>

</div>
<script type="text/javascript">
writeHTMLasJS();
</script>
</div>

الان كل ما عليك فعله هو استبدال الرابط التالي:

http://www.facebook.com/Amizmiz.Soft

برابط صفحتك.

و لتغيير صورة الفايسبوك ابحث عن الرابط التالي :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh09BYqHuReOS4eGVU9XvYWUKrefhPfVMnOmAOIkNR2rLxZLbowujr0hWX3quoJGLZYpxfKKJN446OWHXTs_EzwHAJICVAumcZSQuDHuLcU7LXpVDLkBaFuUMhN1vuDhdk7jCN4gLPYLAw1/s1600/facebook-page2.png

و استبدله برابط اي صورة من الصور التي بالاسفل :

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

*****

.

العالم الرقمي

إعلانات

البداية

قرآن

اتصل بنا

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

إضافة أزرار المواقع الإجتماعية و الخلاصة إلى المدونات و المواقع

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

إضافة - تابعني - على المواقع الإجتماعية لكل المدونات و المواقع

أضف صندوق تعليق الفايسبوك الى موقعك أو مدونتك Facebook Comment Box

أضف القرآن الكريم كاملا بصوت تسعة قراء إلى مدونتك أو موقعك

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

2 التسعة شيوخ داخل اداة واحدة و اي شيخ تختاره سيكون مع باقي الشيوخ في نفس الأداة.

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

تابع جديـدنــا

الأقسام

سجل إميلك وتوصل بمواضيعنا :

المواضيع الأكثر مشاهدة