اعلان مدفوع

اخر الأخبار

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

الأحد، 25 أغسطس 2019

أغسطس 25, 2019

شرح طريقة اضافة اختصار روابط الى مدونة البلوجر

شرح طريقة اضافة اختصار روابط الى مدونة البلوجر


شرح طريقة اضافة اختصار روابط الى مدونة البلوجر


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

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

الطريقة فعالة ومضمونة لجميع المدونات على بلوجر ، و تعتبر أفضل طريقة في اختصار روابط المواضيع للمدونات .

شرح طريقة اضافة أختصار روابط الى مدونة البلوجر

أولا:  نتوجه الى المدونة ، ثم قالب
ثانيا:  نختار تحرير HTML
ثالثا:  نبحث عن الكود </head> التالي وذلك بالضغط علىctrl+f
رابعا: نضيف الكود التالي فوقه
<style>
#shorturl {
float: right;
background: #F8F8F8;
padding-bottom: 10px;
padding-top: 10px;
width: 290px;}
#shorternh2 {
float: right;
padding-left: 30px;
padding-right: 7px;
font-family: oswald,GESSTwoMediumRegular;}
.textinpo {
float: right;
font-family: oswald,GESSTwoMediumRegular;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: auto;
padding: 0px!important;
padding-right: 10px!important;
height: 20px!important;
margin: -4px!important;
}
</style>

خامسا: نبحث عن الكود
</body>

سادسا:  نضيف الكود التالي فوقه

<script src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>
<script type='text/javascript'>
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result[&#39;longUrl&#39;] = r;
break;
}
document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>شارك رابط المقالة</div> &lt;input type=&#39;text&#39;  class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}
BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);
});
</script>

سابعا: نبحث عن الكود الأخير
<div class=’post-footer-line post-footer-line-1′>

أو ابحث عن
<data:post.body/>


ثامنا:  نضيف الكود التالي من تحته (اسفل الكود سابق)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Short URLs Script-->
<div id='shoternUrl'>
<form id='shorturl'/>
<!-- Short URLs Script -->
</b:if>



تاسعا .نضغط حفظ ، ومبروك عليك تمت العملية بنجاح لاتنسى دعمنا
0
By - ليست هناك تعليقات:
تم النشر في قسم :
أغسطس 25, 2019

طريقة أضافة اسم الكاتب والصورة اسفل مدونة بلوجر

طريقة أضافة اسم الكاتب والصورة اسفل مدونة بلوجر



السلام عليكم ورحمة الله وبركاته

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

شخصية 

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

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

بالنسبة للمدونات الشخصية كل ماعليك فعله هو الذهاب إلى لوحة تحكم مدونتك والضغط على 

قالب ثم تحرير html ، وتضغط في الكيبورد على ctrl+f وتقوم بالبحث عن هذا الكود

]]></b:skin>

بعد أن تجده تضع قبله مباشرة هذا الكود


/* Author Bio */ .postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 0.7em; } .postauthor img { border: 5px solid #e2dede; float: right; margin-left: 1em; } .postauthor h3 { color: #666; font-size: 1.2em; margin-bottom: 5px; margin-top: 0; } .postauthor p { color: #515151; font-size: 12px; margin-bottom: 10px; margin-top: 0; } /* Author Bio End */

بعد أن تضيفه قم بالبحث عن  هذا الكود
<data:post.body/>


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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postauthor'>
<img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
<h3>بقلم <a href='Blog Link'> اسم الكاتب </a></h3>
<p> فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if>

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

 الأخير معلومات عنك أنت شخصيا ككاتب للمدونة

في الأخير قم بحفظ التغييرات ومبروك عليك الإضافة
______________________

*هذا بالنسبة للمدونة التي تحتوي على كاتب واحد ، أما إذا كانت مدونتك تحتوي عل كتاب كثر 

فتابع معي كيف تقوم بإضافة هذه الخاصية

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

]]></b:skin> 

* ثم المرحلة الثانية تقوم بالبحث عن هذا الكود مباشرة  (إن وجدت إثنين فالثاني  هو المقصود)

<data:post.body/>

ثم بعده مباشرة أضف هذا الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- تعريف الكاتب الأول --> <b:if cond='data:post.author == &quot;أحمد&quot;'> <div class='postauthor'> <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/> <h3>بقلم <a href='Blog Link'> إسم الكاتب الأول</a></h3> <p> فقرة تضم نبذة عن الكاتب الأول </p> </div> </b:if>
<!-- تعريف الكاتب الثاني --> <b:if cond='data:post.author == &quot;جواد&quot;'> <div class='postauthor'> <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/> <h3>بقلم <a href='Blog Link'> إسم الكاتب الثاني</a></h3> <p> فقرة تضم نبذة عن الكاتب الثاني </p> </div> </b:if> </b:if>

ملاحظة  : كرر كود تعريف الكاتب الثاني إن كنتم أكثر من كاتبين


*في الأخير وقبل حفظ التغييرات غير ما باللون الأخضر إلى معلومات الكاتب الأول والثاني 

وهكذا ...
0
By - ليست هناك تعليقات:
تم النشر في قسم :

اعلان اول الموضوع

اعلان وسط الموضوع

إعلان اخر الموضوع