السلام عليكم
 |
أيقونات مواقع التواصل اإجتماعي | لمدونات بلوجر
|
اليوم راح أقدم لكم اليوم إن شاء الله إضافة رائعة لمدونتك مما تمكن الزائر ان يتابعك في جميع مواقع التواصل الاجتماعي
إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل
إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل
اضافة اشترك ليصلك جديد من الدروس والمواضيع
السلام عليكم
 |
| اضافة اشترك ليصلك جديد من الدروس والمواضيع |
اليوم راح اقدم لكم كيف نضيف صندوق الاشتراكات اسفل التدوينة حتي يتم التسجيل فيه بكل سهولة
طريقة التركيب :
- ادخل مدونتك .
- ثم قالب.
- ابحث عن الكود التالى <data:post.body/>
- ونضف الكود التالى قبل
لا تنسي الاشتراك في المدونة ليصلك كل جديد في مدونة عرب سوفت<img alt="اشترك في القائمة البريدية لمدونة اضافات بلوجر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvXgw_IF2QxlukH1CTx1bHs0-YTIo_srFlqLLng-srGXao1BFYu3X347qpXYD8X_YsmF9EXQz_2UcnrgRrL4LnurSMt556EfE7zWi8qxAJBdCQUgTCJpI_06iK3KYbAT3PVE5cDpByAo/s1600/ArrowDown.gif" title="اشترك في القائمة البريدية لمدونة حلول بلوجر" /><center>
<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#6CB5FF), to(#6CB5FF));background: -moz-linear-gradient(center top , #4D8DEE, #005CE6) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #6CB5FF, #6CB5FF) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #6CB5FF, #6CB5FF) repeat scroll 0 0 transparent}
</style>
<b:if cond="data:blog.pageType == "item"">
<div id="mbt-sub-box">
<h1>
أشترك ليصلك جديد الدروس والمواضيع!</h1>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogadditions',
'popupwindow', 'scrollbars=yes,width=550,height=520');r eturn true" rel="nofollow" target="popupwindow">
<center>
<input name="email" onblur="if (this.value ==
"") {this.value = "أدخل البريد الإلكتروني ...";}" onfocus="if (this.value == "أدخل
البريد الإلكتروني ...") {this.value = ""}" size="30" type="text" value="أدخل البريد الإلكتروني ..." />
<input name="uri" type="hidden" value="blogadditions" /> <input name="loc" type="hidden" value="en_US" /> <input class="submit" type="submit" value="أشترك" /></center>
</form>
</div>
</b:if> </center>
</h3>
</center>
ثم قم بتغيير blogadditoins باسم الحساب الخاص بك في Feedburner
وايض قم بتغيير جملة ( لمدونة عرب سوفت) الي اسم مدونتك
تصفح مواضيع مدونتك عبر لوحة المفاتيح
السلام عليكم
طريقة تركيب الأداة
وهي سهلة جدا وتتمثل في نسخ الكود ثم لصقه أو وضعه قبل/فوق </head> ثم بعد ذلك تقوم بحفظ القالب
<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
break;
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
}
};
};
</script>
ملحوظة
لا تخف لم يتم تبطى تحميل المدونة لانة سكريبت
اضافة شريط متحرك يضم اخر اخبار المدونه بثلاثة الوان
السلام عليكم
كيفية اضافة شريط احدث الاخبار الى مدوناتكم
1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
واضف احد اكواد الالوان التالية حسب رغبتك
كود لو الازرق
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>
كود اللون الاحمر
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>
كود اللون الاخضر
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;
line-height:37px;;overflow:hidden; margin-bottom: 20px;
max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>
وبعد ان ضفت احد الاكود السابقة تبقت خطوة واحد فقط وهى اضافة الاضافة تحت الهيدر
ملاحوظة هامة - ان كود الهيدر يختلف من قالب لاخر وانا سوفا اعطيك الكود الشهير
سنقوم بالبحث عن الكود التالى
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.arab-softe.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '', type: 'get', dataType: "jsonp", success: function(data) { var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++) { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href; break; } }
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
} }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
} }); });
//]]>
</script>
</b:if></b:if>
الان قم باستبدال الرابط التالى http://www.arab-softe.com/ برابط مدونتك
ستجده باللون الاحمر
واذا كان لديك اى استفسار لا تترد فى طرحه
الدرس 7 : كيف تركيب قالب بلوجر
اوضحنا في الدرس الاول من الدوره كيفية عمل مدونه بلوجر من هنا
والان سنتعلم كيفيه تركيب قالب بلوجر
ما اهمية القاب؟!
1/ يتيح لمدونك شكل جميل يليق بها
2/ يحرز لمدونتك شكل جميل يأتي لزوار من جميع انحاء الاعالم
......................................الخ
كيف احصل علي القالب؟!
تحصل علي القالب من مدونات ومواقع متخصصه في هذا ....
مثلاً ان كنت مدونتك تقنيه تكتب فب جوجل ( قالب تقني لبلوجر )
وهاكذا ................
وجأت لكم اليوم بموقع جميل فيه اكثر من 1000 قالب من هنا
ندخل في الموضوع.............
بعد انا اخترت القالب سوفت تدخل علي اعدادات المدونه وتختار القالب
الاشتراك في:
الرسائل (Atom)
