✔ Widget Recent Post Keren Simple Ala Park Simple

Kali ini aku akan membagikan tutorial hasil request dari teman-teman yaitu Cara Membuat Widget Recent Post Simpel Ala Reboza Sambirejo. Sebenarnya script widget ini aku sanggup dari blog kompi ajaib, disana juga sudah dibahas cara membuatnya, hanya saja untuk tampilan memang agak berbeda sedikit alasannya ialah sudah aku edit CSSnya dan juga sudah aku tambahkan fitur lazy load pada thumbnailnya. Dikarenakan banyak teman-teman yang meminta tutorial cara membuatnya maka akan aku bagikan disini.

Cara Membuat Widget Recent Post Simpel

Pertama silahkan masuk ke hidangan Tema >> edit HTML

Kemudian silahkan pasang script ini sebelum </body>

<script type='text/j4vascript'> //<![CDATA[ var homePage = window.location.origin,numPosts = 7; function d0wnl0adJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/rebozasambirejo/hostingjs/44009fad/recent-post-thumbnai.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",d0wnl0adJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",d0wnl0adJSAtOnload):window.onload=d0wnl0adJSAtOnload;  function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function d0wnl0adJSAtOnload(){loadScript("https://cdn.rawgit.com/mastamvan/backup/master/lazyload.js")}window.addEventListener?window.addEventListener("load",d0wnl0adJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",d0wnl0adJSAtOnload):window.onload=d0wnl0adJSAtOnload; //]]> </script>

Setelah itu tambahkan CSS berikut sebelum aba-aba </style>

/*<![CDATA[*/ ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none} ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);border-left:2px solid #3f91ce} ul#recent-posts li img{width:90px;height:70px;margin:0 0 0 10px;float:right;} ul#recent-posts li .title_post{padding:10px!important;line-height: 1;position:relative;margin-right:90px;text-align:left} ul#recent-posts li a{color:#333;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none} ul#recent-posts li a:hover{color:#FF1744;} ul#recent-posts:after{content:"";display:block;clear:both} /*]]>*/

Jika sudah silahkan simpan dan masuk ke hidangan tata letak

lalu silahkan klik tambahkan widget pada bab sidebar(setiap template belum tentu sama, silahkan pilih sesuai yang anda inginkan)

Pilih HTML/Javascript

Kemudian silahkan isikan judul dan pasang aba-aba berikut pada bab konten

<ul id="recent-posts"></ul>

Mungkin cukup hingga disini tutorial kali ini, jikalau ada aba-aba yang error atau pertanyaan lainnya sanggup ditanyakan di kolom komentar

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: