اضافة اداة اقوال العلماء

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

صورة الاضافة

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

1. أذهب الى بلوجر ثم التخطيط
2. واضعط على اضافة اداة جديدة
3. ثم HTML/JAVASCRIPT
4. واضف هذا الكود في الفراغ

<style type='text/css'> .pull-left{float:left} .pull-right{float:right} .clearfix:after,.clearfix:before{content:'';display:table} .clearfix:after{clear:both;display:block} .author-quote-wrap .author-quote, .author-quote-wrap .author-photo:before{ top:0; left:0; right:0; bottom:0; position:absolute; } .author-quote-wrap{ color:#fff; width:100%; overflow:hidden; max-width:560px; min-height:390px; margin:0 auto; background:linear-gradient(to left, #f44904, #fe9807); position:relative; box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21); } .author-quote-wrap .author-quote{ display:none; } .author-quote-wrap .toggle-quote{ display:none; } .author-quote-wrap .toggle-quote:checked + .author-quote{ display:block; } .author-quote-wrap .author-quote a{ color:inherit; text-decoration:none; } .author-quote-wrap .author-photo, .author-quote-wrap .quote-content{ height:100%; position:relative; } .author-quote-wrap .author-photo{ width:140px; background-size:cover; z-index: 1; background-position:center; background-repeat:no-repeat; quotes:'\201C''\201D''\2018''\2019'; } .author-quote-wrap .author-photo.photo-a{ background-image:url(https://blogger.googleusercontent.com/img/proxy/AVvXsEiLRzYl00CgZLnByAZ4FiSEfzK-T5MjBV8t44xXgCasJO34oXWfJ_6fpykkuqGapJqWvPMFIhkBgEV1-SQGYWeCNZtAlT42xpeYQdMk5rQr7ltj4e_BtO1vCjRwsWP9OyFHyxRGJiGfi8T3u6yxe9fOvSBFKas6o36ZtgBEDIfhjiCv=s0-d); } .author-quote-wrap .author-photo.photo-b{ background-image:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cd96b8b2-42c2-49ab-99f1-4bc976d6fbae/d8zz8j-0b72b2c8-15fb-4b11-ad28-f8781598ddb9.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NkOTZiOGIyLTQyYzItNDlhYi05OWYxLTRiYzk3NmQ2ZmJhZVwvZDh6ejhqLTBiNzJiMmM4LTE1ZmItNGIxMS1hZDI4LWY4NzgxNTk4ZGRiOS5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.2-YFL9hUio7rNIwyIoZbI7zQDOKErKxHPO5YwNvTtes); } .author-quote-wrap .author-photo.photo-c{ background-image:url(https://rommanmag.com/uploads/posts/bposts20170701005610.jpg); } .author-quote-wrap .author-photo.photo-d{ background-image:url(https://pbs.twimg.com/profile_images/1096339282443292672/p9XWB-6q_400x400.jpg); } .author-quote-wrap .author-photo.photo-e{ background-image:url(https://modo3.com/thumbs/fit630x300/221231/1556402018/%D8%A3%D9%87%D9%85_%D9%82%D8%B5%D8%B5_%D9%86%D8%AC%D9%8A%D8%A8_%D9%85%D8%AD%D9%81%D9%88%D8%B8.jpg); } .author-quote-wrap .author-photo:before{ content:''; background:linear-gradient(to left, #f4490459, #fe98076e); } .author-quote-wrap .author-photo:after{ top:15px; left:60px; font-size:72px; line-height:72px; position:absolute; font-family:serif; content:open-quote; } .author-quote-wrap .author-photo .navigate{ left:15px; z-index:10; right:15px; bottom:15px; position:absolute; text-align:center; } .author-quote-wrap .author-photo .navigate .label{ width:15px; height:30px; cursor:pointer; position:relative; display:inline-block; background: none; } .author-quote-wrap .author-photo .navigate .label.left{ left:-30px; } .author-quote-wrap .author-photo .navigate .label.right{ right:-30px; } .author-quote-wrap .author-photo .navigate .label.disabled{ cursor:not-allowed; } .author-quote-wrap .author-photo .navigate .label:before, .author-quote-wrap .author-photo .navigate .label:after{ content:''; height:2px; width:15px; background:#ccc; position:absolute; } .author-quote-wrap .author-photo .navigate .label:before{ top:62%; } .author-quote-wrap .author-photo .navigate .label:after{ bottom:62%; } .author-quote-wrap .author-photo .navigate .label.left:before, .author-quote-wrap .author-photo .navigate .label.right:after{ transform:rotate(45deg); } .author-quote-wrap .author-photo .navigate .label.right:before, .author-quote-wrap .author-photo .navigate .label.left:after{ transform:rotate(-45deg); } .author-quote-wrap .author-photo .navigate .label.left:before, .author-quote-wrap .author-photo .navigate .label.left:after{ left:0; } .author-quote-wrap .author-photo .navigate .label.right:before, .author-quote-wrap .author-photo .navigate .label.right:after{ right:0; } .author-quote-wrap .author-photo .navigate .label.disabled:before, .author-quote-wrap .author-photo .navigate .label.disabled:after, .author-quote-wrap .author-photo .navigate .label.disabled:hover:before, .author-quote-wrap .author-photo .navigate .label.disabled:hover:after{ background:#bbb; } .author-quote-wrap .author-photo .navigate .label:hover:before, .author-quote-wrap .author-photo .navigate .label:hover:after{ background:#fff; } .author-quote-wrap .quote-content{ padding:15px; width: 100%; height: 80%; position: absolute; z-index: 1; } div#HTML4 .widget-content { border: none !important; } .quote-text.animated.bounceInRight { font-size: 44px; } .quote-content .quote-like{ font-size:12px; font-weight:400; padding:4px 8px; border-radius:15px; display:inline-block; background:rgba(0,0,0,.5); } .quote-like.pull-right button { background: none !important; padding: 0 !important; } .quote-content .quote-like .love{ position:relative; display:inline-block; } .quote-content .quote-like .love:before, .quote-content .quote-like .love:after { } .quote-content .quote-like .love:after { } .quote-content .quote-text, .quote-content .quote-author{ text-transform:uppercase; } .quote-content .quote-text{ font-size:48px; font-weight:900; line-height:55px; height: 80%; overflow: hidden; } .quote-content .quote-author{ bottom:15px; font-size:14px; font-weight:500; position:absolute; } .quote-content .quote-author:before{ content:'- '; } </style><div class="author-quote-wrap"> <input class="toggle-quote" type="radio" id="AQ-1" name="quote" checked=""> <div class="author-quote"> <div class="pull-left author-photo photo-a animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-5">&nbsp;</label> <label class="label right" for="AQ-2">&nbsp;</label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span><button onclick="copyToClipboard('#p1')">نسخ</button> </div></div> <div id="p1" class="quote-text animated rotateInDownRight">ما فائدة الدنيا الواسعة إذا كان حذاؤك ضيقا؟</div> <div class="quote-author animated lightSpeedIn">جون ويليامز</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-2" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-b animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-1">&nbsp;</label> <label class="label right" for="AQ-3">&nbsp;</label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span><button onclick="copyToClipboard('#p2')">نسخ</button></div></div> <div id="p2" class="quote-text animated zoomInDown">العظماء : هم الذين يتكلمون عن الأفكار</div> <div class="quote-author animated lightSpeedIn">محمد مصطفى</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-3" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-c animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-2">&nbsp;</label> <label class="label right" for="AQ-4">&nbsp;</label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span><button onclick="copyToClipboard('#p3')">نسخ</button> </div></div> <div id="p3" class="quote-text animated bounceInRight">المريض النفسي هو الانسان الذي يفهم كل ما يجري</div> <div class="quote-author animated lightSpeedIn">ويليام بوروز</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-4" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-d animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-3">&nbsp;</label> <label class="label right" for="AQ-5">&nbsp;</label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span><button onclick="copyToClipboard('#p4')">نسخ</button></div></div> <div id="p4" class="quote-text animated lightSpeedIn">اللحظات لا تعلن عن نفسها عندما تأتي</div> <div class="quote-author animated lightSpeedIn">جوزيه ساراماغو</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-5" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-e animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-4">&nbsp;</label> <label class="label right" for="AQ-1">&nbsp;</label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span><button onclick="copyToClipboard('#p5')">نسخ</button></div></div> <div id="p5" class="quote-text animated flipInX">العقل الواعي هو القادر على احترام الفكرة حتى ولو لم يؤمن بها</div> <div class="quote-author animated lightSpeedIn">نجيب محفوظ</div> </div> </div> </div&gt

اي استفسار في التعليقات شكرا لكم ❤️