اضافة التاريخ الميلادي لمدونات بلوجر

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

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

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

وهذا هو الكود الخاص به اضفه في المكان المناسب

<script src='https://cnmu.googlecode.com/svn/trunk/2015/date-melady.js' type='text/javascript'></script>

ويمكنك استخدام هذا الكود معه لتلوين الخط الاساسي يضاف فوق الوسم ]]></b:skin>

cnmumeladate {color: #fff;}
.fasel {color: #ddd;}

هذا اللون #fff هو لون التالريخ وهذا #ddd هو لون الفواصل

أما من يريد الكود بشكل منسق كالتالي

يضاف مباشرة في آداة HTML/JavaScript

<style>
#cnmumeladate {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 2px #000;
  display: block;
  height: 120px;
  width: 140px;
}
.cnmdaylabel {
  background-color: #e70307;
  border-bottom: 1px solid #bbb;
  border-radius: 5px 5px 0 0;
  color: #fff;
  float: right;
  font: bold 18px tahoma;
  margin-bottom: 5px;
  padding: 3px 0 5px;
  text-align: center;
  width: 100%;
}
.daylnum {
  color: #555;
  display: block;
  float: right;
  font: bold 70px/70px serif;
  height: 70px;
  overflow: hidden;
  text-align: center;
  width: 80px;
}
.month {
  float: left;
  font: 20px tahoma;
  margin-top: 12px;
  text-align: center;
  width: 60px;
}
.year {
  float: right;
  font: bold 18px serif;
  margin: 2px 5px;
}
.melady {font: bold 18px serif;}
.fasel {display: none;}
</style>
<script src='https://cnmu.googlecode.com/svn/trunk/2015/date-melady.js' type='text/javascript'></script>

يمكنك تغيير اللون الأحمر باللون الذي تريد

تجربة موفقة مع تحياتي

أكمل قراءة الموضوع

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

شريط اخباري منزلق مع الازرار الاجتماعية

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

معاينة

كود الشريط يمكنك اضافته في آداة HTML/JavaScript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type='text/css'>
#news {
  background:#fff;
  box-shadow: 0 0 1px #777;
  display: block;
  float: right;
  height: 30px;
  overflow: hidden;
  width: 100%;
}

.titlenews {
  background: #d1000e;
  color: #fff;
  display: block;
  float: right;
  font: bold 14px/2em Tahoma;
  height: 100%;
  text-align: center;
  width: 100px;
}

#cnmunsup {
  float: right;
  line-height: 1.7em;
  margin-right: 20px;
}

#cnmunsup ul, #cnmunsup li {
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

#cnmunsup li a {
  color: #D1000E ;
  font: bold 14px/2em Tahoma;
  text-decoration: none;
}
#cnmunsup li a:hover {color:#000;}
.sosiuln {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.sosiuln li {float: left;}
.sosiuln {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.sosiuln li {float: left;}
.sosiuln li a {
  background-color: #d1000e;
  background-image: url("https://lh4.googleusercontent.com/-I88QzSxT_Ro/VK0sbXS5VnI/AAAAAAAAFVk/UuNvaBc0wAQ/s456/socia-white.png");
  background-repeat: no-repeat;
  display: block;
  height: 30px;
  transition: all 0.8s ease 0s;
  width: 30px;
}
.sosiuln li a:hover {background-color: #777 !important;}
.neface a {
  background-color: #39599f !important;
  background-position: 3px 3px !important;
}
.netwetter a {
  background-color: #44b0e3 !important;
  background-position: 3px -50px !important;
}
.negplus a {
  background-color: #393939 !important;
  background-position: 4px -103px !important;
}
.neyoutube a {
  background-color: #da4038 !important;
  background-position: 3px -158px !important;
}
.neinstgram a {
  background-color: #614b3d !important;
  background-position: 3px -213px !important;
}
.neblogger a {
  background-color: #eb6302 !important;
  background-position: 3px -267px !important;
}
.nemail a {
  background-color: #017e22 !important;
  background-position: 3px -320px !important;
}
.nefeedb a {
  background-color: #ee3a43 !important;
  background-position: 3px -375px !important;
}
.nerss a {
  background-color: #e0a504 !important;
  background-position: 4px -428px !important;
}
 </style>
<div id='news'>
<span class="socialicne">
<ul class="sosiuln">
<li class="neface"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="netwetter"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="negplus"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="neyoutube"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="neinstgram"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="neblogger"><a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXX" rel="nofollow" target="_blank"></a></li>
<li class="nemail"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="nefeedb"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="nerss"><a href="http://cnmu.blogspot.com/feeds/posts/default" rel="nofollow" target="_blank"></a></li>
</ul>
</span>
<span class='titlenews'>آخر الأخبار</span>
<div id='cnmunsup'>جاري التحميل ...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://cnmu.blogspot.com',
numpostx     = 20;
$.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>';
            $('#cnmunsup').html(skeleton);
            function tick(){
            $('#cnmunsup li:first').slideUp( function () { $(this).appendTo($('#cnmunsup ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#cnmunsup').html('<span>لا توجد نتائج !</span>');
        }
    },
    error: function() {
            $('#cnmunsup').html('<strong>خطأ في تحميل الخلاصات !</strong>');
       }
});
});
//]]>
</script>

إعداد وتنسيق

استبدل http://cnmu.blogspot.com برابط مدونتك مكرر مرتين
 الرقم 20 هو عدد المواضيع التي تظهر في الشريط
الكود الرمادي في بداية الاكواد يمكنك حذفه ان كان لديك مكتبة جي كويري
 هذا #d1000e هو لون خلفية كلمة آخر الأخبار
مجموعة الروابط الملونة الموجوده بين الكودين المعلمان باللون الزهري
كل سطر يخص ايقونة اجتماعية بالترتيب من اليسار لليمين ان حذفت اى سطر تحذف ايقونة فيمكنك ان تختار فقط الأيقونات التي ستستخدمها وبالباقي تحذفه
كل سطر فيه رمز # تستبدله بالرابط المناسب
ما عدا سطر أيقونة بلوجر به هذه الأحرف XXXXXXX استبدلها بمعرف مدونتك

وللحصول عليه ادخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح

وسطر ايقونة الخلاصات موجود فيه رابط مدونتي كما وضحت سابقاً استبدله
تجربة موفقة (تحـياتـي)

أكمل قراءة الموضوع

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

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

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

فقط اضف الكود التالي داخل آداة HTML/JavaScript

<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:999999; overflow:hidden;}
#colorbox {z-index: 99999999;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:#bbb; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox {
  background-color:#fff;
  border: 5px solid #000;
  border-radius: 2px;
  outline: 0 none;
}
#cboxClose {
  background: url("https://lh4.googleusercontent.com/-QY-kdg8gIgM/VHxMypqxcrI/AAAAAAAAFHo/-TyH4brIxrE/s16/close.png") no-repeat scroll 0 0 #ccc;
  border: 0 none;
  display: block;
  font: 14px arial;
  height: 16px;
  position: absolute;
  right: 0;
  text-indent: -1e+7px;
  top: 0;
  width: 16px;
  z-index: 99999;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script src="https://cnmu.googlecode.com/svn/trunk/ColorBox/colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"500px",height:"400px",inline:true, href:"#cnmuligmes"});
}
});
</script>
<div style='display:none;'>
<div id='cnmuligmes' style='width: 450px; height: 350px; overflow: hidden;'>
هنا أكتب  ما  تشاء
</div>
</div>

اعدادات أولية

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

 تنسيقات

هذا #bbb هو لون الخلفية الذي يغطي على مظهر المدونة
وهذا #fff لون خلفية الرسالة نفسها
وهذا #000 لون الإطار
واترك لك الإبداع في تخصيص رسالتك تحياتي

أكمل قراءة الموضوع

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

كارت ادوات المتابعة الاجتماعية

أقدم لكم إضافة جديدة وحصرية من تصميمي لأزرار وادوات المتابعة الإجتماعية احببت أن جمل أدوات المتابعة في إضافة خفيفة وبسيطة وفي نفس الوقت تجمل غالبية المواقع الإجتماعية المعتمد عليها من قبل المدونين في بلوجر تم استخدام ادوات رسمية لموقعي جوجل بلس Google Plus وفيس بوك Facebook كونهم ازرار خفيفة وسريعة التحميل لتويتر Twitter ويوتيوب Youtube وبلوجر Blogger فضلت ان استخدم ازرار روابط فهي كافية وأخف من الأدوات الاصلية وفي نفس الوقت تؤدي نفس المهمة تماما لان اضافات الإشتراك الخاصة بتلك المواقع تحيل للموقع لتشترك به فالازرار العادية كافية وطبعا تم دمج نموذج اشتراك بالبريد لتكتمل الآداة 

وهذه معاينة حية للإضافة نرجوا لمن لم يتابعنا أن يسجل متابعته لنا عبرها

تويتريوتيوببلوجر

وهذا هو الكود أضفه في آداة HTML/JavaScript

<style>
#sosialandmail {
  box-shadow: 4px 4px 2px #444;
  width: 280px;
}
#sosialcnmes,.mailfcm {width: 100%;}
.gpluscm {
  background-color: #e01f28;
  display: block;
  float: right;
  height: 64px;
  overflow: hidden;
  padding: 10px;
  width: 95px;
}
.fbcm {
  background-color: #96c1e7;
  float: right;
  height: 64px;
  overflow: hidden;
  padding: 10px;
  width: 55px;
}
.ytweet {
  float: right;
  width: 90px;
}
.twittercm, .ytcm, .bfolcm {
  box-shadow: 0 0 1px #777 inset;
  display: block;
  float: right;
  color:#fff;
  font: bold 16px tahoma;
  overflow: hidden;
  padding: 3px 0 6px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
  width: 100%;
}
.twittercm {background-color:#55ACEE;}
.ytcm {background-color:#555;}
.bfolcm {background-color:#FD7E00;}
.twittercm:hover,.ytcm:hover,.bfolcm:hover {background-color:#000; color:#fff;}
#cmfotext {
  background-color: #000;
  border: 0 none;
  color: #fff;
  display: block;
  float: right;
  font: bold 16px tahoma;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
#cmfobu {
  background-color: #00A903;
  border: 0 none;
  color: #fff;
  cursor: pointer;
  font: bold 16px tahoma;
  padding: 10px 0;
  transition: all 0.7s ease 0s;
  width: 100%;
}
#cmfobu:hover{background-color: #1A4D17;}
</style>
<div id='sosialandmail'>
<div id="sosialcnmes">
<!---جوجل بلس--->
<div class="gpluscm">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="//plus.google.com/u/0/GPID" data-rel="publisher"></div>
</div>
<!---فيس بوك--->
<div class="fbcm">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FPageID&amp;width=55&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=65&amp;appId=185398838186125" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>
</div>
<div class="ytweet">
<!---تويتر--->
<a class="twittercm" href='https://twitter.com/TwID' target="_blank" rel="nofollow">تويتر</a>
<!---يوتيوب--->
<a class="ytcm" href='https://www.youtube.com/user/YTID' target="_blank" rel="nofollow">يوتيوب</a>
<!---بلوجر--->
<a class="bfolcm" href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxx' target="_blank" rel="nofollow">بلوجر</a>
</div>
</div>
<div class='mailfcm'>
<form id='cmforb' action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedId', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input id='cmfotext' type="text" value="أكتب بريدك الإلكتروني" onfocus="if (this.value == &quot;أكتب بريدك الإلكتروني&quot;) {this.value = &quot;&quot;;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;أكتب بريدك الإلكتروني&quot;;}" name="email"/>
<input id='cmfobu' type="submit" value="إشترك" />
<input name="uri" type="hidden" value="FeedId"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
</div>

الإعدادات

استبدل GPID بمعرف صفحة جوجل بلس
للحصول عليه ادخل الى صفحة مدونتك في جوجل بلس وانسخ الرقم او الغسم التعريفي منها مثال

استبدل PageID بإسم رابط صفحتك على فيس بوك
استبدل TwID بإسم حسابك في تويتر
استبدل YTID بإسم رابط قناتك على اليوتيوب
استبدل xxxxxxxxxx بمعرف مدونتك

وللحصول عليه ادخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح

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

أكمل قراءة الموضوع

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

قالب Porto معرب ومطور

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

يمكنك معاينة وتحميل القالب عبر الازرار التالية

معاينة تحميل

يمكنك تحرير القالب بالدخول لصفحة القالب ثم تختار تخصيص ثم متقدم 

وعدل الألوان كيفما شئت

لتخصيص القائمة العلوية ابحث عن الكود التالي

           <li class='active'><a href='/'>الرئيسية</a></li>
          <li><a href='#'>تعديل</a></li>
          <li><a href='#'>قائمة</a>
            <ul>
              <li><a href='#'>فرعي</a></li>
              <li><a href='#'>فرعي</a></li>
              <li><a href='#'>فرعي</a></li>
            </ul>
          </li>
          <li><a href='#'>تعديل</a></li>
          <li><a href='#'>تعديل</a></li>
          <li><a href='#'>تعديل</a></li>

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

لتخصيص ازرار المتابعة إبحث عن الكود التالي

        <a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
        <a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
        <a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
        <a href='#' rel='nofollow' target='_blank'><i class='fa fa-google'/></a>
        <a href='#' rel='nofollow' target='_blank'><i class='fa fa-rss'/></a>

رمز # في كل سطر تستبدله بالرابط المناسب
ويمكنك حذف سطر ان لم ترد أحد الأيقونات
يرجى الحفاظ على حقوق التعريب والتطوير والإلتزام بشروط الإستخدام

أكمل قراءة الموضوع

1 تعليق واحد