بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين سيدنا ومولانا محمد عليه افضل الصلاة والسلام اما بعد السلام عليكم ورحمة الله وبركاتة اليوم في تدوينة جديدة على مدونة بروتك نقدم لكم طريقة اضافة اداة لعرض افضل القوالب في مدونتك بشكل جذاب وتأثيرات خرافية لعرض قوالبك في اسفل المدونة او اعلاها حسب رغبتك نذهب الان لطريقة التركيب لاتنسى الاشتراك في المدونة
صورة الاضافة
طريقة التركيب
- أضف هذا الكود في اي مكان تريدة
<div id='BAimgEffect'> <div class='contentBAEffect'> <div class='grid'><figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5byWbF2DFe2vuEh36ctYIzZFnrGGciVf1RxE06Wu7nXArnZok6xKyfRw83cUWGG-xc7HqegiijuqRH0qm41d-RWDaAXxSQuMDa-dRLGj6mNypReF3t6Jq91NicPfMUGcGkgacYiniBKs/'/> <figcaption style=' background: #f2660f; '> <h212>قالب بروتك v8</h212> <span>من تصميم الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2019/07/blog-post_17.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure><figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_aI3K-ks67WfVTfF1czTlKxNZ7OxsZvC_xN0Vbzpsz5drO96uSkyG_Gt7BWYEZho9MGhAWvSxyIfjFzDIa1bjyqw53ab0Aql7BVx8WVHcnW3f94lOkYSp4d1Qq6RZYCqlJxPZqjVqRc/'/> <figcaption style=' background: #16ce61; '> <h212>قالب بروتك v7</h212> <span>من تصميم الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2019/07/Th3protk-Material.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure><figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrD6hTp-LioKBIIcI4tCEVwuURxxf_a8Ti2sw-sShtn8LhA0BStzeKv0v3Lt9k9A-omF8A6fv_y0CjTqnYzdmajK4wCqGV8wdrLFyISui-IL3Zay3owM-7-2fCROgg__seNce0E1eM8uY/'/> <figcaption style=' background: #2b89c7; '> <h212>قالب بروتك v6</h212> <span>من تصميم الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2019/01/v6-2018.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure> <figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWTud8i_HLq3xmD2ksOK5BOS0Iwk6HzlROmcB-juZPiYGJ1ydeSucWw0DmOUHvuaqHPb8Jn0u_geXgJRyGTLpeYY22mdTmteI3QFfMMbcS7SkTKyeyZ1sLdmrgeXNRR55l5yoba459J64/'/> <figcaption style=' background: #e7b800; '> <h212>قالب بروتك v5</h212> <span>من تصميم الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2018/12/Template-Th3protk.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure> <figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfGCH3kqSGYXx7LsCOllL5hV2oGZSvA7ETvT9MPDtsN3sY-DF6fHG5df2tHgPQDEEAG_NOBcFdJiFyijEWR11rBfnxSepzjCfla6pEUlz6RoLBGLXeNLdPPsTWybdvVu_kM62hIzLJw9A/'/> <figcaption style=' background: #42f117; '> <h212>قالب بروتك v4</h212> <span>من تصميم الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2018/07/Noqta-Web.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure> <figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMxXI-mkriTepeZT4bOql9Sb7Z7Qvoid0d6WGNfSijIE0u7cGiJ2gKBcYthki3DG6ipdsmCgY5uYJSPooe8ivnc0wA-Il0q4HwftDeZMOsaJ5n_FOJ0tw5ZiSdzdcg3UCppRpm3tBdi30/'/> <figcaption style=' background: #e22949; '> <h212>قالب بروتك v3</h212> <span>من تصميم الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2017/07/Template-V5.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure> <figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3itXdBikqBzQ9nJ_o_EpAFh-yJ_UHHdgiETFs5g8RZEUvZ0XhouQhso2JAj-6zB7f_-1wgCh8okjSAIzG7CbP7U0H26YwucK0IlBsHiETh-8Thh1488IshzJ1lZbo3h1tqIadXukY0I/'/> <figcaption style=' background: #b91619; '> <h212>قالب بروتك v2</h212> <span>من تصميم الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2017/06/Template-v4.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure><figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdZ4KXdOeTub4p6HG5vx3qXj6tTxvOyswTVNuryqgWFtuYPcIUFIMz16Fw-05do-zmaJrumA_cwSgyVrKPl1dX4TP8ojWktMxDvHAoIUZlXcHStVX1PpVNlBygLk2U-aSHHA7i-ILO54/'/> <figcaption style=' background: #dc11cc; '> <h212>قالب بروتك v1</h212> <span>من تعريب الموقع</span> <p> <a href='https://th3pro-tk.blogspot.com/2017/01/Template-Pro-tk.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure> <figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdZ4KXdOeTub4p6HG5vx3qXj6tTxvOyswTVNuryqgWFtuYPcIUFIMz16Fw-05do-zmaJrumA_cwSgyVrKPl1dX4TP8ojWktMxDvHAoIUZlXcHStVX1PpVNlBygLk2U-aSHHA7i-ILO54/'/> <figcaption style='background: #34495e;'> <h212>قريبا</h212> <span><i class='fa fa-circle-o-notch fa-spin fa-fw'/></span> <p> <a href='/2018/02/livia-luna.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure><figure class='effect-winston'> <img alt='altالصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdZ4KXdOeTub4p6HG5vx3qXj6tTxvOyswTVNuryqgWFtuYPcIUFIMz16Fw-05do-zmaJrumA_cwSgyVrKPl1dX4TP8ojWktMxDvHAoIUZlXcHStVX1PpVNlBygLk2U-aSHHA7i-ILO54/'/> <figcaption style='background: #34495e;'> <h212>قريبا</h212> <span><i class='fa fa-circle-o-notch fa-spin fa-fw'/></span> <p> <a href='/2018/02/livia-luna.html'><i class='fa fa-fw fa-search'/></a> <a href='#'><i class='fa fa-fw fa-comments-o'/></a><a href='#'><i class='fa fa-fw fa-heart'/></a> </p> </figcaption> </figure> </div> </div></div> <style> i.fa.fa-fw.fa-search { border-radius: 100px; padding: 5px 5px 5px 5px; color: #424E5A; font-size: 85%; text-align: center; } .grid figure span { color: #f9f9f9; background-color: #2b3743; text-align: center; font-size: .7rem; border-radius: 1px; position: relative; bottom: 20%; padding: 2px 6px; margin: 0 auto; display: table; } figure.effect-winston:nth-child(10) h212 { background: #34495e; } figure.effect-winston:nth-child(9) h212 { background: #34495e; } figure.effect-winston:nth-child(8) h212 { background: #dc11cc; } figure.effect-winston:nth-child(7) h212 { background: #b91619; } figure.effect-winston:nth-child(6) h212 { background: #e22949; } figure.effect-winston:nth-child(5) h212 { background: #42f117; } figure.effect-winston:nth-child(4) h212 { background: #e7b800; } figure.effect-winston:nth-child(3) h212 { background: #2b89c7; } figure.effect-winston:nth-child(2) h212 { background: #16ce61; } figure.effect-winston:first-child h212 { background: #f2660f; } figure.effect-winston { background: #162633; text-align: left; } figure.effect-winston img { -webkit-transition: opacity 0.45s; transition: opacity 0.45s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } i.fa.fa-fw.fa-heart { border-radius: 100px; padding: 3px 0px 3px 0px; color: #e22949; padding: 5px 5px 5px 20px; font-size: 85%; margin-right: 2px; } figure.effect-winston figcaption::before { position: absolute; top: 0; left: 115px; width: 100%; height: 100%; background: url(https://cdn.rawgit.com/ortilex/slidersrc/1e142a7a/triangle.svg) no-repeat center center; background-size: 122% 120%; content: ''; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s, transform 0.45s; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } figure.effect-winston h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); } figure.effect-winston p { position: absolute; right: 0; bottom: 0; padding: 0 1.5em 7% 0; } figure.effect-winston a { margin: 0 10px; color: #5d504f; font-size: 170%; } figure.effect-winston a:hover, figure.effect-winston a:focus { color: #cc6055; } figure.effect-winston p a i { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); } figure.effect-winston:hover img { opacity: 0.6; } figure.effect-winston:hover h2 { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-winston:hover figcaption::before { opacity: 0.7; -webkit-transform: rotate3d(0,0,1,5deg); transform: rotate3d(0,0,1,20deg); } figure.effect-winston:hover p i { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-winston:hover p a:nth-child(3) i { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } figure.effect-winston:hover p a:nth-child(2) i { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-winston:hover p a:first-child i { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }html.dark body div#blog-themesONE div#HTML1 .widget-content div#BAimgEffect .contentBAEffect .grid figure.effect-winston { border: 10px solid #052535; }figure.w-100.d-none.d-lg-block { margin: 0; } .grid figure:nth-child(6) span { } i.fa.fa-fw.fa-comments-o { border-radius: 100px; padding: 3px 0px 3px 0px; color: #0894D8; font-weight: bold; padding: 5px 5px 5px 5px; font-size: 85%; } h212 { display: block; text-align: center; margin: -51px 0 !important; background: rgba(43, 55, 67, 0.77); position: absolute; width: 100%; left: 0; } figure.effect-winston:before { font-family: fontawesome; content: '\f004\f004\f004'; display: inline-block; position: absolute; color: #2b3743; text-align: center; bottom: 0; left: 0; margin: 3px 3px; font-size: 11px; padding: 0; font-weight: normal; line-height: normal; transition: all .3s; padding: 2px 4px 2px 4px; z-index: 9; } #BAimgEffect *, #BAimgEffect *:after, #BAimgEffect *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } #BAimgEffect a {outline: none;color: #3498db;text-decoration: none;} #BAimgEffect a:hover, #BAimgEffect a:focus { color: #528cb3; } .contentBAEffect { margin: 0 auto; border-bottom: 10px solid white; width: 100%; } .contentBAEffect > h212 { clear: both; margin: 0; padding: 4em 1% 0; color: #484B54; font-weight: 800; font-size: 1.5em; } .contentBAEffect > h212:first-child { padding-top: 0em; } .grid { position: relative; width: 100%; clear: both; margin: 0 auto; list-style: none; text-align: center; } /* Common style */ .grid figure { position: relative; overflow: hidden; min-width: 20%; max-width: 478px; max-height: 306px; width: 190px; height: 118px; cursor: pointer; } .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; width: 100%; height: 100%; } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h212 { word-spacing: 0em; font-weight: 300; } .grid figure h212 span { font-weight: 800; } .grid figure h212, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-size: 68.5%; } /* Individual effects */ /*-----------------*/ /***** Winston *****/ /*-----------------*/ figure.effect-winston { background: #162633; text-align: left; float: right; margin: 0 0 0 0; border: 10px solid white; } figure.effect-winston img { -webkit-transition: opacity 0.45s; transition: opacity 0.45s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure.effect-winston figcaption::before { position: absolute; top: 0; left: 45px; width: 100%; height: 100%; background: url(https://cdn.rawgit.com/ortilex/slidersrc/1e142a7a/triangle.svg) no-repeat center center; background-size: 122% 120%; content: ''; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s, transform 0.45s; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } figure.effect-winston h212 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); } figure.effect-winston p { position: absolute; right: -14px; bottom: -10px; padding: 0 1.5em 7% 0; } figure.effect-winston a { margin: 0 0px; color: #5d504f; font-size: 125%; } figure.effect-winston a:hover, figure.effect-winston a:focus { color: #cc6055; } figure.effect-winston p a i { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); } figure.effect-winston:hover img { opacity: 0.6; } figure.effect-winston:hover h212 { } figure.effect-winston:hover figcaption::before { opacity: 0.7; -webkit-transform: rotate3d(0,0,1,20deg); transform: rotate3d(0,0,1,5deg); } figure.effect-winston:hover p i { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-winston:hover p a:nth-child(3) i { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } figure.effect-winston:hover p a:nth-child(2) i { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-winston:hover p a:first-child i { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } </style>شكرا لكم على متابعة الموضوع ❤️