Cara Memasang Postingan Terpopuler yang Simple di Blog - Manggo News

/* No Script */ body,html{overflow:hidden} .noscript{background:#f24a4a;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden} .noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:500} .noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal}

Home › HTML › Widget

Cara Memasang Postingan Terpopuler yang Simple di Blog

Cara Memasang Postingan Terpopuler yang Simple di Blog. Pada kesempatan kali ini saya akan membahas cara memasang widget popular post yang simpel dan sederhana. Desain tampilan popular post yang sederhana, namun cukup elegan dan bersih alias Simple Popular Posts Widget. Tidak dianjurkan menampilkan Popular Posts Widget berupa judul dan gambar karena kadang membuat loading jadi berat.

Berikut ini kode posting terpopuler simple dan cara memasangnya di Blogger. Desainnya berupa angka dan judul postingan sehingga fast loading.

Cara Memasang Posting Terpopuler Simple Popular Posts Widget

#1. Tema > Edit HTML

#2. Copas saja kode berikut ini di atas kode ]]></b:skin>


.PopularPosts h2{padding-right:.4em;padding-left:1em}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit, ".");padding:0 .1em 0 0;font-size:20px;font-weight:700;color:#C4C4C4;float:left;margin-right:10px}
.PopularPosts li:first-child{border-top:1px solid #f0f0f0}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0!important}

#3. Save!

Cara Pasang Widget Popular Posts:
1. Layout > Add a Gadget di Sidebar
2. Pilih Entri Populer/ Popular Post
3. Konfigurasikan. Jangan centang apa pun!
4. Save!

Demikian Cara Memasang Postingan Terpopuler yang Simple di Blog. Selamat Mencoba!

 <!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/4290687098-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5mCyk7itJSvJIWN6eSZaLkLQKOsQ:1714609601965';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8766816720686312165','//rianidzgn.blogspot.com/2017/10/cara-memasang-postingan-terpopuler-yang.html','8766816720686312165');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8766816720686312165', 'title': 'Manggo News', 'url': 'https://rianidzgn.blogspot.com/2017/10/cara-memasang-postingan-terpopuler-yang.html', 'canonicalUrl': 'https://rianidzgn.blogspot.com/2017/10/cara-memasang-postingan-terpopuler-yang.html', 'homepageUrl': 'https://rianidzgn.blogspot.com/', 'searchUrl': 'https://rianidzgn.blogspot.com/search', 'canonicalHomepageUrl': 'https://rianidzgn.blogspot.com/', 'blogspotFaviconUrl': 'https://rianidzgn.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Manggo News - Atom\x22 href\x3d\x22https://rianidzgn.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Manggo News - RSS\x22 href\x3d\x22https://rianidzgn.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Manggo News - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8766816720686312165/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Manggo News - Atom\x22 href\x3d\x22https://rianidzgn.blogspot.com/feeds/7837177749278302026/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a26ecadc30bb77e6', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '7837177749278302026', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL4bMK40kr0yfkgTmT4LugVyF5Y4AFIXOBz8qSSPbzqwed3KoiwpMIJBR195ZT5Nym3X8ZnPUgbJ5rAFKK20FHIbg2u6RwmBCCsVoj2-fZ3j446Oeg2grFORR60lGn74XLyiuWBzWJC5T/s72-c/pp.PNG', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL4bMK40kr0yfkgTmT4LugVyF5Y4AFIXOBz8qSSPbzqwed3KoiwpMIJBR195ZT5Nym3X8ZnPUgbJ5rAFKK20FHIbg2u6RwmBCCsVoj2-fZ3j446Oeg2grFORR60lGn74XLyiuWBzWJC5T/s400/pp.PNG', 'pageName': 'Cara Memasang Postingan Terpopuler yang Simple di Blog', 'pageTitle': 'Manggo News: Cara Memasang Postingan Terpopuler yang Simple di Blog', 'metaDescription': 'Cara Memasang Postingan Terpopuler yang Simple di Blog'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Cara Memasang Postingan Terpopuler yang Simple di Blog', 'description': 'Cara Memasang Postingan Terpopuler yang Simple di Blog', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL4bMK40kr0yfkgTmT4LugVyF5Y4AFIXOBz8qSSPbzqwed3KoiwpMIJBR195ZT5Nym3X8ZnPUgbJ5rAFKK20FHIbg2u6RwmBCCsVoj2-fZ3j446Oeg2grFORR60lGn74XLyiuWBzWJC5T/s400/pp.PNG', 'url': 'https://rianidzgn.blogspot.com/2017/10/cara-memasang-postingan-terpopuler-yang.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 7837177749278302026}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1666805145-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML996', 'iklan-atas', document.getElementById('HTML996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML997', 'iklan-tengah1', document.getElementById('HTML997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'iklan-tengah2', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'iklan-bawah', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
</script>
</body>-->