صناديق اقتباس احترافية لتنسيق مواضيع مدونات بلوجر

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

السلام عليكم , الكثير منا يعلم ان المحتوى هو السبب الرئيسي وراء نجاح اغلب المواقع , وان المحتوى يمثل الاساس المتين للموقع لذلك لابد من الاهتمام به و العمل على تحسينه بعد كل فترة , ويكون تحسين المحتوى بتنسيقه وترتيبه ليعرض في افضل صورة للقارئ الذي سيسهل عليه تلقي المعلومة وسيستمتع بقراءة المقال لانه مرتب و منسق ومعروض في افضل صورة .

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

لمعاينة صناديق الاقتباس  اضغط على هذا الرابط (( من هنا ))

شرح طريقة التركيب

نتوجه الى لوحة التحكم في بلوجر > المظهر > تحرير HTML ثم نضغط على Ctrl+f ونبحث عن الوسم  <b:skin><[[ ثم نضع فوقه الكود التالي :

.pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 1px 1px          rgba(0,0,0,.08);
}
pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 15px;
    border-left: 2px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "اضغط مرتين لنسخ الكود";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}
pre.code-text code {
color:red;
}

ثم نبحث عن الوسم </body> ونلصق فوقه الكود التالي :

<script type='text/javascript'>
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

بعد ذلك نقوم بحفظ القاالب ونتوجه الى طريقة الاستخدام .

طريقة استخدام الصناديق

صناديق الاقتباس توضع تستخدم داخل المواضيع عند الحاجة لاضافة كود تعليمي او اضافة عبارة معينة لشرح نقطة معينة , حيث يتم وضع المحتوى بداخلها ومثال لذلك الصناديق التي استخدمتها في الاعلى , اذا اردت استخدام هذه الصناديق قم بوضع صندوق الكتابة في تبويب " HTML " بدلا عن وضع " تأليف " والصق احد الاكواد التالية :

<pre class='code code-html'><label>HTML</label><code>... Code HTML  ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... Code CSS ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... Code JavaScript ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... Code jQuery ...</code></pre>

<pre class='code code-text'><label>اقتباس</label><code>... اقتباس ... </code></pre>

نوع المحتوى الذي تريد وضعه داخل الصندوق سيحدد الكود الذي ستسخدمه فمثلا اذا ارت استخدام صندوق لتكتب كود CSS بداخله ستستخدم الكود الثاني او اردت ان تكتب بداخله كود HTML ستسخدم الكود الاول او اردت ان تكتب نص عادي او اقتباس ستسخدم الكود الاخير وهكذا ...

ستنسخ كود الصندوق الذي تريد استخدامه وتلصقه في صندوق الكتابة وستسبدل العبارة باللون الازرق بالمحتوى الذي تريد اضافته داخل الصندوق وهكذا سيظهر المحتوى داخل الصندوق في اجمل صورة , لاي سؤال او استفسار انا في خدمتكم .

ودمتم في حفظ الله ورعايته

الكاتب : Unknown

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

شارك المقال

شاركه على فيسبوكشاركه على جوجل+