قالب ملك التدوين | WORDPRESS |

قالب ملك التدوين قالب ووردبريس عربي بالكامل للمدونات الشخصية، يعمل علي المقاسات المختلفة للشاشات والموبايل، لوحة تحكم خاصة بالقالب بكل كبيرة وصغيرة مع تحديثات مجانية. 

• معاينة القالب
• تحميل من Firedrive
• تحميل من Gulfup

قوائم لعرض النصوص

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

مثال مباشر

الأكواد مع الشرح

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

.menu{
  width: 620px;
  margin: 100px auto; padding: 15px;   
  list-style: none;
  counter-reset: li;
  background: #eee;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.menu:before,
.menu:after {
  content: "";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  zoom:1;
}    

.menu li {
  position: relative;
  float: left;
  cursor: pointer;
  height: 120px; width: 200px;
  margin: 10px 0 0 10px;
  color: #fff;
} 

.menu li:hover, .menu li:focus{
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}

.menu .cover{
  z-index: 2;
}

.menu .cover .content{
  overflow: visible;
}

.menu .cover:focus{
  outline: 0;
}

.menu li::after{
  content: counter(li);
  counter-increment: li;
  font: italic bold 10px serif, georgia;
  position: absolute;
  color: rgba(255,255,255,.1);
  opacity: 0;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out; 
  -o-transition: all .2s ease-out;  
  transition: all .2s ease-out;    
}      

.menu li:hover::after, .menu li:focus::after{
  font-size: 100px;
  opacity: 1; 
}

.menu .cover::after{
  z-index: -1;
}

.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
  margin-top: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
  margin-left: 0;      
}  

.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
  background-color: #2c618f;
}         

.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
  background-color: #91ab31;   
}   

.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
  background-color: #714a28;   
}

.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
  background-color: #e58600;      
}

.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
  background-color: #c33a00;
}

.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
  background-color: #7f5dac;
}

.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
  background-color: #5672b7;     
}

.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
  background-color: #69003f;
}

.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
  background-color: #393043;
}

.menu .content{
  opacity: 0; display: none\9;
  overflow: hidden;
  font: 12px Arial, Helvetica;
  position: absolute;
  height: 120px; width: 200px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  -o-transition: all .3s ease-out;  
  transition: all .3s ease-out;      
}  

.menu .expanded{
  opacity: .95; display: block\9;
  padding: 40px;
  height: 300px; width: 540px;
}

.menu li:nth-child(3n) .content{ /* 3,6,9 */
  right: 0;
}

.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
  left: 50%;
  margin-left: -310px;
}

.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
  bottom: 0;
}                      

.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
  margin-top: -190px;
  top: 50%;
}     

.menu .title{
  position: absolute;
  height: 100%; width: 100%;
  text-align: center;
  font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
  opacity: .2;
}

.menu li:hover .title{
  opacity: .7;
}    

.menu .close {
  display: none;
  border: 5px solid #fff;
  color: #fff;
  cursor: pointer;
  height: 40px; width: 40px;
  font: bold 20px/40px arial, helvetica;
  position: absolute;
  text-align: center;
  top: -20px; right: -20px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;      
}

.menu .cover .close{
  display: block;
}

4. ابحث عن : <head/>

3. ضع الكود التالي قبله [ فوقه ]

<script type='text/javascript'>
//<![CDATA[
(function(){
      
        $('.menu .content').append('<span class="close">x</span>');        
        function showContent(elem){
            hideContent();
            elem.find('.content').addClass('expanded');
            elem.addClass('cover');    
        }
        function hideContent(){
            $('.menu .content').removeClass('expanded');
            $('.menu li').removeClass('cover');        
        }
        
        $('.menu li').click(function() {
            showContent($(this));
        });        
        $('.menu li').keypress(function(e) {
            if (e.keyCode == 13) { 
                showContent($(this));
            }
        });

        $('.menu .close').click(function(e) {
            e.stopPropagation();
            hideContent();
        });        
        $(document).keyup(function(e) {
            if (e.keyCode == 27) { 
              hideContent();
            }
        });
        
      })();
//]]>
    </script>

* كود HTML ضعه في المكان الذي تريد .. وغير النصوص 

<ul class="menu">
    <li tabindex="1">
      <span class="title">Satu</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Dua</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Tiga</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Empat</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Lima</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Enam</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1"> 
      <span class="title">Tujuh</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1"> 
      <span class="title">Delapan</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1"> 
      <span class="title">Sembilan</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>     
  </ul>

ملف كامل عن طرق إضافة خرائط جوجل إلى المواقع

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

خرائط جوجل Google maps : هى خدمة مجانية مقدمة من شركة جوجل العالمية ، وتعتبر من أفضل خدماتها التى تقوم بدعمها بشكل مستمر.

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

 

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

يمكن أيضًا إضافة ميزة التجول الإفتراضى "Street view" فى العديد من البلدان والمدن فى جميع أنحاء العالم.

إضافة خريطة العالم بالكامل للمواقع

 يمكن ذلك بالتوجه إلى Google Map وإختيار حجم الخريطة المناسب وطريقة العرض سواء كان عرض كخريطة أو صور بالقمر الصناعى ثم تضمين الخريطة ونسخ الكود الذى سيظهر بموقعك.

 أويمكن  نسخ رابط الخريطة داخل كود Iframe كالتالى:

إنسخ الكود التالى داخل موقعك

<iframe frameborder="0" height="450" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d130738366.7210043!2d0!3d0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1406632224957" style="border: 0;" width="850"></iframe></div>

إضافة خريطة لمكان محدد داخل موقعك

 1- توجه إلى موقع خرائط جوجل ثم قم بالبحث عن المكان الذى تريد أن تعرض له الخريطة

2 - ثم إضغط على الترس أسفل الصفحة وإختر " مشاركة الخريطة وتضمينها"

3- إضغط تضمين الخريطة داخل النافذة التى ستظهر

4- إنسخ الكود الناتج بموقعك

عرض خريطة جوجل مناسبة جميع الشاشات Responsive Google Map

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

أضف هذا الكود قبل كود الخريطة

<style>

   .google-maps {

      position: relative;

      padding-bottom: 75%;

      height: 0;

      overflow: hidden;

   }

   .google-maps iframe {

      position: absolute;

      top: 0;

      left: 0;

      width: 100% !important;

      height: 100% !important;

   }

</style>

إقرأ أيضًا:كيف يتوافق قالب مدونتك على بلوجر مع شاشات الموبايل ؟

أضف خرائط جوجل مع ميزة التجول الإفتراضى  Street View

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

 ولكن للأسف جوجل لن توفر إمكانية التجول الإفتراضى عند تضمين الخرائط داخل المواقع بالطرق التى ذكرناها سابقًا، لذلك يمكن إستخدام الكود التالى لعرض خريطة مكان ما مع ميزة التجول الإفتراضى .

إنسخ الكود التالى داخل موقعك

<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script type="text/javascript">
var myCenter=new google.maps.LatLng(30.028137, 31.260420);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:18,
  mapTypeId:google.maps.MapTypeId.HYBRID
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.setTilt(0);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googleMap" style="width:500px;height:380px;"></div>

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

معاينة

لمعرفة إحداثيات "خطوط الطول وخطوط العرض"  أى مكان على خرائط جوجل إتبع الآتى:

1. انقر بزر الماوس الأيمن على الموقع على الخريطة.
2. حدد ماذا هنا؟
3. أسفل مربع البحث، ستظهر بطاقة معلومات تحتوي على الإحداثيات.
4. إنسخ الأرقام وأضفها إلى الكود السابق

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

قالب Hm احترافي متميز | BLOGGER |

دائما مع القوالب الإحترافية والمميزة في نفس الوقت وهاته التدوينة بها قالب بلوجر جد إحترافي وخفيف الظل :) .. القالب معرب 

تعريب كامل طبعا من مدونة عرب ويب نحرص أن يكون العمل متقن ، به سلايدر تلقائي وسلايدر ثانوي والبوستات ( التدوينات) 

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

توجد علامة + بالضغط عليها يتم تحميل المواضيع ومحرك البحث بتقنية أجاكس يعني بحث بدون تحميل الصفحة والمزيد سأذكره في المميزات ..

الواجهة كاملة

المميزات

1.   متوافق مع جميع المقاسات
2.    تصميم HTML5 / CSS3
3.    سيو 100%
4.    سلايدر ثانوي
5.    سلايدر تلقائي 
6.    صفحة خطأ 404      
7.    محرك بحث ajax
8.    مشاركات بشكليين  
9.    أخر الأخبار + الأيقونات 
10.    4 بوستات لعرض كل قسم
11.   تعليقات فيسبوك وديسكس وبلوجر

• معاينة
• تحميل Firedrive
• تحميل Gulfup

الإضافات تضاف من التخطيط كأداة Html/JavaScript   

الإضافة رقم 1 

<div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5
});
</script>

الإضافة رقم 2

* غير أدوات بالتسمية الخاصة بك

<div id="webdespost"></div>
<script type='text/javascript'>
jQuery("#webdespost").RecentPostbyTag({
postType:"s",
MaxPost:8,
ImageSize:"s200-p",
tagName:"ادوات"
});
</script>

الإضافة رقم 3

* غير ثيمات بالتسمية الخاصة بك 

<div id="musicpost"></div>
<script type='text/javascript'>
jQuery("#musicpost").RecentPostbyTag({
postType:"v",
MaxPost:4,
tagName:"ثيمات"
});
</script>

الإضافة رقم 4

                                                         * غير أمثلة بالتسمية الخاصة بك 

<div id="combinepost1"></div>
<script type='text/javascript'>
jQuery("#combinepost1").RecentPostbyTag({
postType:"c",
MaxPost:8,
tagName:"امثلة"
});
</script>

الإضافة رقم 5

                                                        * غير أدوات بالتسمية الخاصة بك 

<div id="sportpost"></div>
<script type='text/javascript'>
jQuery("#sportpost").RecentPostbyTag({
postType:"h",
MaxPost:4,
tagName:"ادوات"
});
</script>

الإضافة رقم 6

<div id="rcentcomnets"></div>
<script type='text/javascript'>
jQuery("#rcentcomnets").RecentComments();
</script>

الإضافة رقم 7

                                                          * غير أمثلة بالتسمية الخاصة بك 

<div id="gallerypost1"></div>
<script type='text/javascript'>
jQuery("#gallerypost1").RecentPostbyTag({
postType:"g",
MaxPost:7,
tagName:"امثلة"
});
</script>

حزف كلمة التحقق المزعجة فى التعليقات مهم جداً

بسم الله الرحمن الرحيم 

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

توضيح بسيط لكيفية حزف كلمة التحقق

إلى هنا نكون وصلنا لنهاية الشرح والسلام عليكم ورحمة الله وبركاتة