تجريب قالب هادي: فبراير 2016

قالب مدونة هادى ستور للتحميل

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

معاينة القــــالب

مميزات القالب:

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

صورة للقالب من مدونة هادى ستور

تخصيص القالب:-
- أزرار المواقع الإجتماعية للتخصيص إبحث عن هذا الكود sorting-01 وستجد الروابط الثلاثة غيرها بما يناسبك

- لتغيير البنر الإعلانى واللوجو سنبحث عن عن هذا الكود mygallery للوجو والبنر adstore

- لتخصيص كود المواضيع الهامة أسفل المدونة إبحث عن wowpost

<h1 class='wowpost'>قوالب هادى ستور</h1>
<div class='latest-news-container' id='latest-news-container'>
<div class='single-wrapper'>
<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kYLIDZBhpE8HX6K__YTErFaXuyOsTZD8TMoVSCsP5B0LvHiFBhCPK6r-8S8H6M_v2dYHO2mJe2Y9nlR5f5IpX8YxSQvFnuKkbkgI5ea1ovxW54jrrYDTMPGVoRBlkgcV3IgljhHCJQnV/s1600/%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D9%87%D8%A7%D8%AF%D9%89+%D8%B3%D8%AA%D9%88%D8%B1.jpg' width='380'/>
<figcaption>
<h3>قالب Hippo mag</h3>
<span>مجانا</span>
<a class='mana' href='http://hadystore.blogspot.com/2015/04/hippo-mag.html' target='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>

</div>

</div>

<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVHFghmc-hHkLTqk-qDtqYyKbHwI4lMTRfLyJBbeV5l-XZnRCfgLNWh3FVlGxF11IZRHdj7cMqm8gvnfyc1ci5VJAbkWiuHzyvBWc8mRljuAFXOuOy639C_p97JOsop_rHIAaspQPKB5nr/s1600/hady+store.png' width='380'/>
<figcaption>
<h3>قالب مدونة مدوّن</h3>
<span>مجانا</span>
<a class='mana' href='http://hadystore.blogspot.com/2015/04/blog-post.html' target='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>

</div>

</div>

<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2zO47Zi6qbXv4AZt_JkVNztVtfBeKY9Oyla9noC_4-kqy0zxSPR_o8Ipto8sOxE_nLlu_gQHpXi3kGxc1ME6oBz8MnAf2Fwv9pwXzYxyjtONbD_-La8YzvXwbUJmpG8QB10L0igjdrka/s1600/%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D9%87%D8%A7%D8%AF%D9%89+%D8%B3%D8%AA%D9%88%D8%B1.jpg' width='380'/>
<figcaption>
<h3>قالب Elegant</h3>
<span>v.1</span>
<a class='mana' href='http://hadystore.blogspot.com/2015/05/eleganttemplate.html' target='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>

</div>

</div>

<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NkJaq_MtrFZJs_G90OELGc7n_-2ZWyVimAgwAsjuJEohkrBebJuFe0h_847FyJ7yCbP65ttRVvwCxGtjDOmvJv05c91jkVw-yUdnyG-zkFm4QKBAxAZaBamnYD0vJRS-DuPA-ZExIfVE/s1600/hady-store.jpg' width='380'/>
<figcaption>
<h3>تحت الإنشاء </h3>
<span>إنتظرونا</span>
<a class='mana' href='#' traget='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>

</div>

</div>

<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NkJaq_MtrFZJs_G90OELGc7n_-2ZWyVimAgwAsjuJEohkrBebJuFe0h_847FyJ7yCbP65ttRVvwCxGtjDOmvJv05c91jkVw-yUdnyG-zkFm4QKBAxAZaBamnYD0vJRS-DuPA-ZExIfVE/s1600/hady-store.jpg' width='380'/>
<figcaption>
<h3>تحت الإنشاء</h3>
<span>إنتظرونا</span>
<a class='mana' href='#'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>

- لتعديل نبذة عن الكاتب أسفل التدوينة إبحث عن هذا الوسم pro-me-left وغير بما يناسبك

- والأكواد الخاصة بالأزرار مع شكل كل زر كما هو موضح امامكم

الزر الأبيض الزر الأزرق الزر الأحمر الزر البرتقالي زر التحميل

<a class="button" src="...">الزر الأبيض</a>
<a class="blueButton" src="...">الزر الأزرق</a>
<a class="redButton" src="...">الزر الأحمر</a>
<a class="orangeButton" src="...">الزر البرتقالي<a>
<a class="button down" src="...">زر التحميل<a>

تابع القراءة

شرح خاصية Tooltip css وكيفية إستخدامها فى مدونتك

تطوير مواقع 2 تعليقات

السلام عليكم ورحمة الله وبركاتة.... سنتكلم عن خاصية الـ Tooltip css هذة الخاصية رائعة جداً تعطى مظهر جذاب لمدونتك / موقعك هى تستخدم بشكل أفضل سنشرح لك ما هى خاصية الـ Tooltip css وفيما تستخدم وكيفية إستخدامها.

ما هى خاصية Tooltip css :

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

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<div class="tooltip">مدونة هادى ستور
<span class="tooltiptext">مخزنك المفضل</span>
</div>

توضيح أكثر:

* عليك اولاً بكتابة الكود بلغة الـ HTML وإستخدام عنصر <div> مثل ما هو موضح فى المثال السابق هذا يتطلب ولو معرفة بسيطة عن HTML & CSS لإنجاز هذا العمل وحتى إذا كنت لا نجيد هذا لا عليك سأوجهك على موقع يقوم بعمل هذا والآن دعنا نوضح لك كلمة ( مدونة هادى ستور ) هى الكلمة الأساسية ولكن نحتاج ان نجلب كود الكلمة الذى سيظهر عند مرور الماوس سنحتاج لهذا العنصر وجلبة فى الكود <span> ونعطى له class أى تعريف له مثل مخزنك المفضل ستلاحظ
<span class="tooltiptext"> هذا كل ما نفعله بإستخدام HTML ، والآن عليك إنجاز الجزء الأكبر وهو إكمال المهمة بإستخدام CSS .

* بإستخدام CSS راح نظبط خاصية tooltip إذا لاحظنا المثال السابق سنجد خاصية position وهى خاصة بضبط الكلمة هذة تكلمنا عنها فى تدوينة سابقة توجهة إليها من فضلك إذا كنت تريد معرفة الخواص بهذة الخاصية الذهاب للتدوينة .

- راح نظبط الآن الألوان و padding و border-radius والخاصة بالحواف الدائرية إذا أحببت إضافتها

ضبط وضع التلميحات:

- يمكنك التحكم فى وضع التلميحات على أى جهة تريدها يمين،يسار،أعلى،أسفل هذا ما سنوضحة الآن.

- إذا أردناوضح التلميحات من جهة اليمين سنستخدم هذا

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

وإذا أردت إظهارها من جهة اليسار سيتم وضع هذا الكود :

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

أم إذا أردت أن تظهر فى الأعلى أو الأسفل ولاحظ إستخدامنا margin-left

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

* Tooltip Arrows

يعنى التحكم فى السهم الخاص بالمعلومات الإضافية الذى ستضاف يمكنك التحكم به لإظهارة فى جنب معين فعليك لإستخدام class ::after مع إستخدام الـ content بعد إضافة هذا سيظهر وكانه فقاعة كلام مثال للتوضيح بعد إضافة السهم

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

معاينة بعد إضافة السهم

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

تابع القراءة

موقع رائع فى إستخراج أكواد الألوان من الصورة

تدوينات عامة تعليق 0

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

الذهاب للموقع

* سنقوم بإختيار الصورة ثم الضغط على الكلمة التى بداخل المستطيل

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

تابع القراءة

طريقة الحصول على رابط معاينة لأكواد الcss و javascript

تطوير مواقع تعليق 0

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

الدخول للموقع

شرح إستخدام الموقع:-