سبتمبر 2014

الثلاثاء، 23 سبتمبر 2014

حصريا: نظام أخر التعليقات مع خاصية الإشعارات لمدونات البلوجر

بقلم: BR MED يوم الثلاثاء، 23 سبتمبر 2014 القسم : اضافات بلوجر 0 التعليقات

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

<style>
#warch-mocount {
margin: -4px -49px;
z-index: 9997;
position: absolute;
}
#show-total {
position: absolute;
cursor: pointer;
display: block;
z-index: 9999;
}
.total-show {
background-color: #0098d9;
border-radius: 4px;
color: white;
display: block;
font-size: 11px;
font-weight: bold;
height: 15px;
margin: -7px -16px 0 0;
text-align: center;
width: 34px;
z-index: 9999;
}
#bsnotif {
background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #bbb;
border-radius: 0 5px 5px 0;
cursor: pointer;
height: 24px;
padding: 3px 4px;
width: 24px;
z-index: 9997;
position: absolute;
}
#bsnotif2 {
background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #0098d9;
border-radius: 0 5px 5px 0;
cursor: pointer;
height: 24px;
padding: 3px 4px;
width: 24px;
z-index: 9996;
position: absolute;
}
#bs-wrapper {
width:352px;
position:fixed;
top:30px;
z-index:9999;
background-color:#fff;
padding:0 13px 0 0;
color:#666;
left:-369px;
font-family: Arial, Sans-serif;
border:4px solid #F51D4F;
border-left:none;
transition:0.5s ease;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#warch-mocomment-container {
color:#666;
font-family: Arial, Sans-serif;
}
#warch-mocomment-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
    background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #444;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:right;
}
.cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-bottom:1px dashed #777;
margin-left:10px;
}
.cm-outer code {
color:#a6a658;
    font-size:11px;
}
.cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
.cm-outer li:first-child {
border-top:none;
}
.cm-outer li:last-child {
border-bottom:none;
}
.cm-text {color:#555;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 60px 8px 0;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#0098D9;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#555;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-right:60px}
.cm-outer img {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW250zXD3Hgz0wJ8CzvPf598CZq_Yn5XLGgIxSoJ90GhIpVdnIWOobvZO_pi4xR4d-mnKBJPFoBlytzyaDYdFU0lph52H9HZ6i_kqyf7fe_qcOTYOWg244rYfjevdKyVFTFXeWI0HLN3Yv/s1600/BS+anon.png") no-repeat scroll 50% 50% #ddd;
border-radius: 100px;
box-shadow: 0 0 2px #222;
display: block;
float: right;
overflow: hidden;
padding: 2px;
position: absolute;
right: 0;
top: 10px;
}
.BS-Notif-footer {margin-top:7px;}
.BS-Notif-footer a {color:#04BDFA;text-decoration:none;}
.BS-Notif-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KPf55X2ScPKuvAWw7IHPz_I3ffly2lxhITaqiqRoPMJizybm42AYKRPQpltJFCJ7lzMSdyDPq3lGK5S06_oZn5mPaeXuoXTwdUdXl5uo1GfbV_zvx9VqfjUIsklkaSe4OBo5z1t3KdsS/s1600/BS+openid.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzhzbp1Be7lypDUEt3fEpcx39F1JJPQo6872PzwcDYWapiH9dihbro8akeLFn9o6Oflb4g9GXJmm_Pijs3UFdvibQ5kxoK8AX4NUsNOy9jT1HIKq1WibZXSEJTmBjI76ORGDWcVBpiizr/s1600/BS+gravatar.png);
}
.bs-ground{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley {
float:none;
position:relative;
display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}
.myframe {
display:none;
width:100%;
height:265px;
margin-bottom:5px;
border-radius:5px;
}
.jsfiddle-demo {
display:block;
width:100%;
height:250px;
border:1px solid #bbb;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjWe4XFIf9ch7DH1-1mAKDwk_Y5flEVwBuceyAO4R382Ws5Bx3oAVz6hVSeuR9o6lN01hZzFY0SKNWbP5isPnMnfBBNmpKRxTNqAib0SEo8v_SoC4L9tx1H7tvF3Fo4a1iMmWmMaV4L-e/s1600/bs+loading+dot.gif') no-repeat 50% 50%;
}
.sticky {
    position: fixed;
    top: 80px;
    z-index: 100;
    border-top: 0;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<div class='bs-ground' id='bg'></div>
<div id='bs-wrapper'>
<div id="warch-mocount">
<div id='bsnotif' title='Notification'></div>
<div id='show-total'></div>
<div id='bsnotif2' title='Notification'></div>
</div>
<div class='flexcroll' id='cm-scroll'>
<div id='warch-mocomment-container'></div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://warch-mo.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "warch-mocomment-container",
    new_cm: " تعليقات جديدة ",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#bsnotif').click(function(){$("#bs-wrapper").css({left: "0px"});$("#bg, #bsnotif2").show();$("#bsnotif").hide();});$('#bsnotif2').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});$('#bg').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});document.getElementById('bsnotif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#bs-wrapper").css({left: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
//]]>
</script>
<script src='https://dl.dropboxusercontent.com/s/jsomeh6jkz5gyvv/warch-mo.js' type='text/javascript'></script>

لا تنسى تغير الرابط باللون الأحمر برابط مدونتك

F51D4F# لون عداد التعليقات يمكنك تغيره

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

كان هذا هو موضوع اليوم أشكركم على تفاعلكم و إلى تدوينة أخرى بحول الله
ملاحظة مهمة هذه الإضافة من تطوير الأخ مصطفى عمرو مدير مدونة كن مدون و يمكنم زيارة موضوعه من هنا مع كامل الشكر له

إقرأ البقية

الخميس، 18 سبتمبر 2014

صندوق التبادل الإعلاني النصي للبلوجر

بقلم: BR MED يوم الخميس، 18 سبتمبر 2014 القسم : اضافات بلوجر 0 التعليقات

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

<div align="center">
<table border="3" width="320px" id="table1" dir="rtl" style="border: 1px solid #ccc" >
<tr>
<td width="150" style="border: 2px dotted #808080" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#808080" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #FF66CC" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#FF66CC" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #9999FF" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#9999FF" size="2">ضع إعلانك هنا</font></a></span></td>
</tr>
<tr>
<td width="150" align="center" style="border: 2px dotted #FF9900" bordercolorlight="#000000" bordercolordark="#000000">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#FF9900" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #33CCFF" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#33CCFF" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #99CC00" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#99CC00" size="2">ضع إعلانك هنا</font></a></span></td>
</tr>
<tr>
<td width="150" align="center" style="border: 2px dotted #FF9900" bordercolorlight="#000000" bordercolordark="#000000">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#FF9900" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #33CCFF" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#33CCFF" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #99CC00" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#99CC00" size="2">ضع إعلانك هنا</font></a></span></td>
</tr>
<tr>
<td width="150" style="border: 2px dotted #808080" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#808080" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #FF66CC" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#FF66CC" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #9999FF" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#9999FF" size="2">ضع إعلانك هنا</font></a></span></td>
</tr>
<tr>
<td width="150" style="border: 2px dotted #808080" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#808080" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #FF66CC" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#FF66CC" size="2">ضع إعلانك هنا</font></a></span></td>
<td width="150" style="border: 2px dotted #9999FF" bordercolorlight="#000000" bordercolordark="#000000">
<p align="center">
<span lang="ar-bh"><a target="_blank" href="http://warch-mo.blogspot.com">
<font color="#9999FF" size="2">ضع إعلانك هنا</font></a></span></td>
</tr>
</tr>
</table>
</div>

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

إقرأ البقية

جديد أزرار المشاركة الإجتماعية لمواضيع المدونة

بقلم: BR MED يوم القسم : اضافات بلوجر 0 التعليقات

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

1- نذهب للوحة التحكم ثم نختار القالب ثم تحرير html

2- نبحث عن الوسم </head>

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

        <style type='text/css'>
        ul.social { list-style:none; margin:15px auto;display:inline-block; }
        ul.social li { display:inline; float:left; background-repeat:no-repeat; }
        ul.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
        ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff;padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0,0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0,0.5);}
        ul.social li.facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGStpwBSDqgrEb9eihWn3DvLs4wUrRyYPWa-eYN-YcEHh8XbD8cjNW6b6Fs17_DyFnVN5P2jwNBf50c_qBtPfP3vmfOagr5LCugHLcEbt1FsUDkN_Gmz4dZ4en4vNPJPz_G-E6tFC8S4Lv/s1600/way2blogging-facebook.png"); }
        ul.social li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuTcgbnTyr2h-e0C0AlVWRfM1pluoMZ7i682kJGwESDeI23etROwuGXnwkPTYlgYLKZMn1a0uHBiggnagDG5txuxsHskPGf207IlV5hZQvq7_an2VlAuYWfht0gyVoJ5QrQ_6YyJCcLa-/s1600/way2blogging-twitter.png"); }
        ul.social li.googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkh0ZEFnwUGa7YQ9qvJtp_djbsqpllaEIVvBqPahyphenhyphenlaQGtFCcJam8zYe8iG7PnIH7ic-uNxcPlxt1Tj_kjhPcPegWJgEFUkXeO48NP6Z18WeOuvcR-P1onLMI19hKRgKRmzhPz49nWNOFF/s1600/way2blogging-googlebuzz.png"); }
        ul.social li.stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqCnsid5w8d4pqyZj-TI9tpHwZyBWQMBZqYSVWAgn_i6XIVp5gO2vjc-XQILm-ZAXtei6lcZUROomJFmvizPiSckpmMTq11tt6qbKKKYhsDl4JD5p7yrauw8LEKgDLC5CENy4LLzl6ivg8/s1600/way2blogging-stumbleupon.png"); }
        ul.social li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBwBOAtSzV3WMWFYixt26oQQl9ActQQqiFB9RTK3-AfZ8YI14zsn-Yz4DculXtyjMr0gZBNx_3TZbKiWszaVRjiK_WN_JU-OHkD6cdZW96wgOzDGRdZjw-WnC6l3IBF-f74tVWOSeJxqe/s1600/way2blogging-digg.png"); }
        ul.social li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1cYgcj4Qh3oVX6nptrd-SBIJOJTe3ZLoLfk398bEcFx7CpW0IVwdemS5W942CAUR_WE9gbYb9IatxG3yXwUnh04zwr2X2OV1D4Y2IQiBSRTBeJq10h6j28FY1niZk7YY-5WVJv6a1H3g/s1600/way2blogging-delicious.png"); }
        ul.social li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTwn3xR5L-U_-0fI6H-GlwCSdpnhI3b4XcKM2H3AgmB0hleHwD6IBL9HJzy0KihoyXmyuuXr7x3ByobdJvOkd_yyHvhrI6yu0Qd-ghWZuDxdykIdl1MHA3pIDoV0HRMV5cNI6SIDHvvQF/s1600/way2blogging-linkedin.png"); }
        ul.social li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPGBgW0Jv4cwLc4730EsVN_G0xgeTFMubbWB6OHb5nKZocIO0823K_JANmBNLdG88HtvEcexzDxbigVD2hwnHwAqFFIpoYwHhGI4Y0eHlW6HG48PCDEwOo2vzVl_iX92MyQLrXzd_IbaeY/s1600/way2blogging-reddit.png"); }
        ul.social li.technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyS_lbUY6iW9-VRHvUKiQf9prU5zbSEaZ-ubrZr1HcLxmYHAXrX8_6Jpk9M9BgeRD9ChcbtRQvxBvg1gnuqpIZ__bjY3P5IlUHMao09Wikq_JQ1VFZsmzNE5_ChoH3NJh5mNh2BcxAFpXp/s1600/way2blogging-technorati.png"); }
        #cssanime:hover li { opacity:0.2; }
        #cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
        #cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
        #cssanime li:hover { opacity:1; }
        #cssanime li:hover a strong { opacity:1; top:-10px; }
        </style>

3- ثم نبحث عن هذا الكود

<data:post.body/>

* ملاحظة قد نجد أكثر من كود الثاني هو المقصود

و نضع الكود التالي بعده

<b:if cond='data:blog.pageType == "item"'>
        <ul class='social' id='cssanime'>
        <li class='facebook'>
        <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
        </li>
        <li class='twitter'>
        <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
        </li>
        <li class='googlebuzz'>
        <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
        </li>
        <li class='stumbleupon'>
        <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
        </li>
        <li class='digg'>
        <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
        </li>
        <li class='delicious'>
        <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
        </li>
        <li class='linkedin'>
        <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
        </li>
        <li class='reddit'>
        <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
        </li>
        <li class='technorati'>
        <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
        </li>
        </ul>
        </b:if>

ثم قم بحفظ القالب و قم بمعاينة المدونة و إنشاء الله ستحصل على أزرار رائعة

دمتم بود في أمان الله

إقرأ البقية

الثلاثاء، 16 سبتمبر 2014

تحميل الإصدار الأخير من قالب المحترف النسخة الأصلية

بقلم: BR MED يوم الثلاثاء، 16 سبتمبر 2014 القسم : قوالب بلوجر 8 التعليقات

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

معاينة مباشرة معاينة الأجهزة الذكية

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

<div class='navtop'>

لتعديل القائمة الرئيسية ابحث عن

<div class='nav'>

لتعديل اللوغو "الشعار المدونة" و الإعلان الأدسنس إبحث عن

<div class='logoandads'>

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

إقرأ البقية

الخميس، 11 سبتمبر 2014

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

بقلم: BR MED يوم الخميس، 11 سبتمبر 2014 القسم : اضافات بلوجر 1 التعليقات

السلام عليكم ورحمة الله وبركاته
في هذه التدوينة أحبابي في الله إخترت طرح إضافة إجتماعية رائعة هي أزرار للصفحات والمواقع الإجتماعية و الخلاصات بحلة أنيقة و إحترافية و قد إخترت هذه الإضافة لكون الإضافات الإجتماعية هي الأكثر إنتشارا على واجهات المواقع أو المواضيع سواء كانت أزرار مشاركة أو تعرض المواقع فقط أو حتى المنشورات و المميز في هذ الإداة اليوم هو أنها خفيفة متحركة عند تمرير الماوس
طريقة تركيب الإضافة
1- الذهاب الى لوحة التحكم
2- انقر على تخطيط
3- اختار اضافة اداة
4- اختر اداة الـ html/javascript
بعدها ضع الكود التالي في الإطار تم قم بالحفظ

<div dir="rtl" style="text-align: right;" trbidi="on">
    <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <br />
    <center>
    <div id="social">
     <a href="http://feeds.feedburner.com/warch-mo" rel="nofollow" target="_blank" title="إشترك في خلاصة المواضيع"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-8RPypvewoiaItFeLI-lGGEjQkozDWILPai-kkeD1qn1S6mxhA15l25yANanGu1P6mmL5MEW_oCyWRa9K3XXNCQlCyz4c6oORQlgXZYi8HZGjhpJ0Jui0gBYSOUyqXauIapvNlZC-ds/s128/rss_11-20110811163952-00001.png" style="margin-right: 1px;" /></a>     <a href="https://www.facebook.com/magriblook" rel="nofollow" target="_blank" title="تابعنا على الفيس بوك"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCh3pO1-w4P0CE8Y_7fvzGoQuMD6f4oz6IT-vHbZiyJCTbpEBixiClp0-Yg0V1RW5uU5RDVBn9LNqiMi3IFTTkovMONgxGD9hIzllAmEDAq2muBkuq19nI_pZMbo22TopKuw_oA2BwE4g/s128/facebook_11-20110809213253-00001+%25281%2529.png" style="margin-right: 1px;" /></a>   <a href="https://twitter.com/motofbix" rel="nofollow" target="_blank" title="تابعنا على تويتر"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7zZ3ipfA0UEMHTt7g2s1cLvaBsxBcsV3-iDyb96XdqTDIbCZ6I5S0C8MRYw2f5wGOGwEl4GKZcYhOg1pHLGF1R2quikgx5wyC-JTSwZVt8hDll9Ras01hGRz09dme2V2Jrc8svlrc_4/s128/twitter_11-20110811174544-00001.png" style="margin-right: 1px;" /></a>   <a href="https://plus.google.com/u/0/104753369012716009644" rel="nofollow" target="_blank" title="تابعنا على جوجل+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJfHZgvBHB6B3yjEHvVUFEQqz4HA7eBBY2ZFHtPL3icxVa7oiazJ_Ga6IDhDpm0ma7vc8xjQ-9boJwrXu6fJoPfPWwTCfievxqAhrKCLGAXbhYjx-zBI1slv-qAs-l-J35tc9nICkia7E/s128/google_plus11-20110926163833-00001.png" style="margin-right: 1px;" /></a>  </div>
      </center>
    </div>

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

إقرأ البقية

الاثنين، 8 سبتمبر 2014

أزرار المواقع الإجتماعية بخاصية CSS

بقلم: BR MED يوم الاثنين، 8 سبتمبر 2014 القسم : اضافات بلوجر 0 التعليقات

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

1- الذهاب الى لوحة التحكم
2- انقر على تخطيط
3- اختار اضافة اداة
4- اختر اداة الـ html/javascript
بعدها ضع الكود التالي في الإطار تم قم بالحفظ

<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger */ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;} p#hb_socialicons img:hover { -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg);} /* Spinning Social Icons Widget By HelperBlogger */</style> <center><p id="hb_socialicons"> <a href="http://www.facebook.com/magriblook/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGZ0i1JAQE-hMHQyskMhiFofmH74s88toHgRUyjHmRQjqX-CU-S4VqtDnTEkn842qfbl-pfcjK7BqvjwKRrASC7VLksu8PeKVlfjCRmupQkJBKm4X7gmPlhJ6x8nqsdbNtRh3KWj105P4/s1600/helperblogger.com-facebook.png" /></a> <a href="http://www.twitter.com/mohtofbix/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThd4439RoDrGjFQvGq5Q6n-C5n0RITr7SNVi0FexZM96gQVYqQAx_38fh4sKyJ_KRTbvqH51ZUNlNWxB-AsvG-PNFYFmTmKDD57iyYtOruLLVGGziKbwOzZTKiK4Kts3u5TGQbP3xijo/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/104753369012716009644"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZH2gmoS91Gwuusid-o1yGkyI3n5YjQvlrWJI9ftMiUjUvVp9ugtYpqMALY1HDWwCjLfRW5Q0BCzT6hRwHc93PD7xXD2K_AwF1jrM5ekx3FHLuESdXxRFggrfkRwyKEdt1p7n7ckvswY/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://www.feeds.feedburner.com/warch-mo/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2OlKA6R42vfW4Am-rvST7grOBQvJOQC7_EMaCUXKsnDNnrb9lZQ8NOPcoD8rd5uhR8JdMq__EYXthZKocdDBZ5ueGgNDxvDVCgxrGUIfDKNYW48zuVJd7q4FFG_X05J1Wd-Hjl3r5ZNY/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/medosat99/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtOh_wlcWHv_AuKDoX5F1nedeO7RH7EtigAwIdSgClIeqyvHNjLoegUVzs03oo1EYnBD_cmzxIE16fMYHoITVx4A9OqS5y1TiZmHcNWMPTKZbgs6jNZJkqIisZL-YSjqLWypIoIRanFM/s1600/helperblogger.com-youtube.png" /></a></p></center>

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

إقرأ البقية

حصريا حل مشكلة توقف سلايدر شو المحترف على ورشة مدون

بقلم: BR MED يوم القسم : حلول بلوجر 2 التعليقات

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

اذهب الى للوحة تحكم مدونتك تم الى القالب تم تضغط على تحرير القالب بعد ذالك تبحث عن:

http://dl.dropbox.com/u/12924430/contentslider.js

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

https://dl.dropboxusercontent.com/s/2t0ulnjvt2kl4hy/slider%20warch-mo.blogspot.com.js

و سوف يعاود الإشتغال بإذن الله

إقرأ البقية

السبت، 6 سبتمبر 2014

تحميل قالب"Tracker Magazine" المعرب و المطور

بقلم: BR MED يوم السبت، 6 سبتمبر 2014 القسم : قوالب بلوجر 0 التعليقات

السلام عليكم

أحبابي في الله في هذه المشاركة قررت أن أطرح لكم هذا القالب المعرب و المطور إسم القالب "TRACKER MAGAZINE"

في الحقيقة هو قالب بلوجر إحترافي % 100 قالب باللون الأزرق الفاتح يحتوي على عمود واحد على اليسار و من مميزات هذا القالب أنه خفيف وسريع التصفح بالإضافة إلى توافقه مع الأجهزة الذكية ,

||معاينة|| ||تحميل||

يجب عليك التعديل على أكواد الميتاتاج

أما بالنسبة للقائمة الأفقية في أعلى الصفحة فيمكنك التعديل عليها من خلال البحث عن الكود التالي و تغير "#" برابط الصفحة المناسب

<i class='entypo-home'/>
</div>
<div class='nav-text'>
الرئيسية</div>
</a>
</li>
<li>
<a href='#'>
<div class='nav-icon'>
<i class='entypo-user-add'/>
</div>
<div class='nav-text'>
عني</div>
</a>
</li>
<li>
<a href='#'>
<div class='nav-icon'>
<i class='entypo-publish'/>
</div>
<div class='nav-text'>
الفهرس</div>
</a>
</li>
<li>
<a href='#'>
<div class='nav-icon'>
<i class='entypo-layout'/>
</div>
<div class='nav-text'>
تبادل إعلاني</div>
</a>
</li>
<li>
<a href='#'>
<div class='nav-icon'>
<i class='entypo-signal'/>
</div>
<div class='nav-text'>
اشترك</div>
</a>
</li>
<li style='background-color: #ff3333;'>
<a href='#'>
<div class='nav-icon'>
<i class='entypo-users'/>
</div>
<div class='nav-text'>
راسلنا</div>
</a>
</li>
</ul>
</nav>

قبل أن أنسى يحتوي القالب على قائمة تظهر أثناء التصفح من الهواتف الذكية و الألواح ذات أبعاد الشاشة الصغيرة ويمكنك تعديلها عبر البحث عن هذا الكود

<li><a href='#'>تقنية</a></li>
            <li><a href='#'>اخبار</a></li>
            <li><a href='#'>إضافات</a></li>
            <li><a href='#'>أجهزة ذكية</a></li>
          <li><a href='#'>معلومات</a></li>

في أمان الله إلى تدوينة أخرى إنشاء الله

إقرأ البقية

الأربعاء، 3 سبتمبر 2014

إظهار النسبة المئوية بجانب شريط التمرير للمدونة

بقلم: BR MED يوم الأربعاء، 3 سبتمبر 2014 القسم : اضافات بلوجر 0 التعليقات

السلام عليكم ورحمة الله وبركاته
أولا أحب أن أعتذر عن الإنقطاع جراء بعض مشاكل مع شركة الإتصال ,,, المهم كأول لقاء مع متابعي ورشة مدون الأوفياء أتيتكم بمشاركة بسيطة جدا وهي جعل النسبة المئوية تظهر بأحد جوانب المدونة عند التمرير إما للأعلى أو الأسفل هذه الإضافة هي فقط لتزين واجهة مدونتك تبين نسبة تصفحك للصفحة في أسفل الصفحة تظهر 100% أما في الأعلى فالعكس أي تبدأ من واحد في المئة ثم ترتفع, أما طريقة تركيبها فهي سهلة فقط إتبع المراحل التالية:
أولا ندهب للوحة التحكم > القالب >تحرير html
ثم نبحث عن هذا الوسم : </head>
ثم نضع الكود التالي فوقه مباشرة :

     <style>
    #scroll {
      display:none;
      position:fixed;
      top:0;
      right:20px;
      z-index:500;
      padding:3px 8px;
      background-color:#2187e7;
      color:#fff;
      border-radius:3px;
    }
    #scroll:after {
      content: " ";
      position: absolute;
      top:50%;
      right:-8px;
      height:0;
      width:0;
      margin-top:-4px;
      border:4px solid transparent;
      border-left-color:#2187e7;
    }
    </style>

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

<div id='scroll'></div>

ثم نبحث عن هذا الوسم </body>
ونضع فوقه الكود التالي مباشرة

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

و أخيرا نقوم بحفظ القالب و مبرروك عليك

إقرأ البقية

الثلاثاء، 23 سبتمبر 2014

حصريا: نظام أخر التعليقات مع خاصية الإشعارات لمدونات البلوجر

الخميس، 18 سبتمبر 2014

صندوق التبادل الإعلاني النصي للبلوجر

جديد أزرار المشاركة الإجتماعية لمواضيع المدونة

الثلاثاء، 16 سبتمبر 2014

تحميل الإصدار الأخير من قالب المحترف النسخة الأصلية

الخميس، 11 سبتمبر 2014

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

الاثنين، 8 سبتمبر 2014

أزرار المواقع الإجتماعية بخاصية CSS

حصريا حل مشكلة توقف سلايدر شو المحترف على ورشة مدون

السبت، 6 سبتمبر 2014

تحميل قالب"Tracker Magazine" المعرب و المطور

الأربعاء، 3 سبتمبر 2014

إظهار النسبة المئوية بجانب شريط التمرير للمدونة

مميزة

تعليقات الزوار

أرشيف المدونة الإلكترونية

تواصل معنا على الفيسبوك

أهم المواضيع

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

التسميات

نبذة عن المدونة

النشرة البريدية

تابع جديد الموقع