إضافة أداة "حكمة اليوم" لمدونة بلوجر بطريقة احترافية

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

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

التركيب سهل للغاية و أنصحك بوضعها إما بالفوتر أو على الجوانب.

كل ما عليك فعله هو فتح لوحة تحكم مدونتك ثم تنتقل للتخطيط وتفتح آداة HTML/JavaScript وتضع فيها هذا الكود:

<style> .item{ display: none; font: 14px/1.615em; color: #fff; direction: rtl; width: 100%; font-size: 9px; height: auto; background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('http://maliactu.net/wp-content/uploads/2016/01/SteveJobs.jpeg') no-repeat; border-radius: 5px; padding: 5px 0; background-size: 150%; background-position: 17% 0%; } .item h1 { display: none; color: #ffffff; padding: 50px 20px; text-align: center; line-height: 35px; font-size: 16px;} .item img { width: 40px; margin: -6px; } .item h3 { font-family: sky; padding: 2px 0; font-size: 16px; font-weight: 700; color: #382918; margin: 8px 20%; background: rgba(255, 255, 255, 0.81); border-radius: 5px; } .item:hover{ background-size: 170%; background-position: 50% 5%; } .item:hover > center {display:none;} .item:hover > h3 {display:none;} .item:hover > h1 {display:block;} i.fa.fa-quote-left { font-size: 50px; position: absolute; left: 15px; bottom: 50px; color: rgba(255, 255, 255, 0.32); } i.fa.fa-quote-right { font-size: 50px; position: absolute; right: 15px; top: 5px; color: rgba(255, 255, 255, 0.32); } </style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript">$(function(){ var colors = []; var random = Math.floor(Math.random() * $('.item').length); $('.item').eq(random).show().css('background-color', colors[random]); }); </script> <div class="item"><h1><i class="fa fa-quote-right"></i> في بعض الأحيان الخطوة الأولى هي الخطوة الأصعب تقدم وأخطوها فقط وليكن لديك الشجاعة الكافية لان تتبع إحساسك وحاستك السادسة. <i class="fa fa-quote-left"></i></h1><center><h3>حكمة اليوم !</h3><img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center></div><div class="item"><h1><i class="fa fa-quote-right"></i> لا تيأس إذا رجعت خطوة للوراء ! فلا تنس أن السهم يحتاج أن ترجعه للوراء لينطلق بقوة إلى الأمام. <i class="fa fa-quote-left"></i></h1><center><h3>حكمة اليوم !</h3><img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center></div><div class="item"><h1><i class="fa fa-quote-right"></i> ‏الفقر لا يصنع ثورة وإنما وعي الفقر هو الذي يصنع الثورة .. الطاغية مهمته أن يجعلك فقيراً وشيخ الطاغية مهمته أن يجعل وعيك غائباً. <i class="fa fa-quote-left"></i></h1><center><h3>حكمة اليوم !</h3><img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center></div><div class="item"><h1><i class="fa fa-quote-right"></i> ‏القراءة المبالغ فيها لا تجعلنا أذكياء, بعض الناس يبتلعون الكتب وهم يفعلون ذلك بدون فاصل للتفكير، وهو ضروري لكي يُهضم المقروء ويُبني ويُتبني ويُفهم. <i class="fa fa-quote-left"></i></h1><center><h3>حكمة اليوم !</h3><img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center></div><div class="item"><h1><i class="fa fa-quote-right"></i> ‏يمكن تعلّم الحكمة بثلاث طرق : الأولى بالتفكَر وهي الأكثر نُبلا، والثانية بالتقليد وهي الأسهل ، أما الثالثة فبالتجربة وهي الأكثر مرارةً. <i class="fa fa-quote-left"></i></h1><center><h3>حكمة اليوم !</h3><img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center></div><div class="item"><h1><i class="fa fa-quote-right"></i> ‏عندما تصاب بلحظة غرور !!! تذكر أن فايروسا صغيرا لا يرى بالعين المجردة يستطيع أن يطرحك أرضا ويجعلك تتأوه لمدة أسبوع في فراشك. <i class="fa fa-quote-left"></i></h1><center><h3>حكمة اليوم !</h3><img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center></div><div class="item"><h1><i class="fa fa-quote-right"></i> ‏‎بعضُ القَسوة .. ضَعفْ ! ...و بعضُ الكبريَاءِ .. دفاَعْ ! بعضُ الغُرور .. خَوفْ ! ... و بعضُ الامتنَاعِ .. حِكمةٌ عَنْ جَرحْ ! فـ لـا تُترجم النَاسَ.... بـلا عِلمْ. <i class="fa fa-quote-left"></i></h1><center><h3>حكمة اليوم !</h3><img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center></div>

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

<div class="item"><h1><i class="fa fa-quote-right"></i> ضع الحكمة هنا <i class="fa fa-quote-left"></i></h1><center> <h3> حكمة اليوم !</h3> <img src='http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png'/></center> </div>