Cara membuat grid dan list mode di blog untuk viomagz
fagas official~pada kesempatan kali ini fagas official akan memberikan tutorial mudah Cara membuat tombol grid dan list mode di blog untuk viomagz.secara delfaut template viomagz sendiri memiliki tampilan list mode,tapi kita juga bisa membuat tampilan grid mode juga,pada kesempatan ini fagas official akan memberikan dua sekaligus yaitu grid mode dan list mode,bahkan ada tombol untuk merubahnya
selain membuat blog menjadi terlihat lebih menarik,tombol ini juga bermanfaat bagi pembaca yang ingin merubah tampilanya dari list mode ke grid mode,ini juga bermanfaaat bagi anda yang bosan dengan tampilan list mode,langsung saja simak tutorial berikut
Cara membuat tombol grid dan list mode di blog untuk viomagz
terlebih dahulu masuk ke blogger kalian masing masing
pilih tema > edit html
letakan kode css di bawah ini tepat diatas kode ]]></b:skin>
/* gridmode */
.menu-gridmode {position:relative;} .gridmode-switch .switch-title{color:#333} .gridmode-switch .slider{border:2px solid #333} .gridmode-switch .slider:before{background:#333} .gridmode-switch{position:absolute;top:0;right:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0} .gridmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:7px;text-transform:uppercase} .gridmode-switch .switch-title:before{content:"List Mode"} .gridmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle} .gridmode-switch .switch input{opacity:0;width:0;height:0} .gridmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s} .gridmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s} .gridmode-switch input:checked+.slider{background-color:#333;border:2px solid #fff} .gridmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)} body.gridmode .gridmode-switch .switch-title:before{content:"Grid Mode"} body.gridmode .post-outer {width: calc(50% - 10px);float: left;margin: 0 5px 10px 0px;} body.gridmode .post {margin-bottom: 10px;height: 300px;} body.gridmode .img-thumbnail {width: 100%!important;} body.gridmode h2.post-title {margin-left: 0;text-align: center;} body.gridmode .info-1, body.gridmode .post-snippet {margin-left: 0;display: none;} @media screen and (max-width: 800px){ body.gridmode .post-outer{margin:5px;} body.gridmode h2.post-title {font-size: 16px;} } @media screen and (max-width: 480px){ .post{margin-bottom:10px} .img-thumbnail{width:40%!important;margin:0!important;position:relative!important;height:auto!important;padding-right:10px} .img-thumbnail img{position:relative!important} body.gridmode h2.post-title,h2.post-title {font-size: 14px;} body.gridmode .img-thumbnail{margin:0!important;padding-right:0} .info-1{margin-left: 0;display: none;} } @media screen and (max-width: 320px){ .post-snippet{margin-left: 0;display: none;} body.gridmode .post-outer{width:100%} body.gridmode .post{height:auto} body.gridmode .img-thumbnail{margin:0 0 5px 0} }
.menu-gridmode {position:relative;} .gridmode-switch .switch-title{color:#333} .gridmode-switch .slider{border:2px solid #333} .gridmode-switch .slider:before{background:#333} .gridmode-switch{position:absolute;top:0;right:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0} .gridmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:7px;text-transform:uppercase} .gridmode-switch .switch-title:before{content:"List Mode"} .gridmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle} .gridmode-switch .switch input{opacity:0;width:0;height:0} .gridmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s} .gridmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s} .gridmode-switch input:checked+.slider{background-color:#333;border:2px solid #fff} .gridmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)} body.gridmode .gridmode-switch .switch-title:before{content:"Grid Mode"} body.gridmode .post-outer {width: calc(50% - 10px);float: left;margin: 0 5px 10px 0px;} body.gridmode .post {margin-bottom: 10px;height: 300px;} body.gridmode .img-thumbnail {width: 100%!important;} body.gridmode h2.post-title {margin-left: 0;text-align: center;} body.gridmode .info-1, body.gridmode .post-snippet {margin-left: 0;display: none;} @media screen and (max-width: 800px){ body.gridmode .post-outer{margin:5px;} body.gridmode h2.post-title {font-size: 16px;} } @media screen and (max-width: 480px){ .post{margin-bottom:10px} .img-thumbnail{width:40%!important;margin:0!important;position:relative!important;height:auto!important;padding-right:10px} .img-thumbnail img{position:relative!important} body.gridmode h2.post-title,h2.post-title {font-size: 14px;} body.gridmode .img-thumbnail{margin:0!important;padding-right:0} .info-1{margin-left: 0;display: none;} } @media screen and (max-width: 320px){ .post-snippet{margin-left: 0;display: none;} body.gridmode .post-outer{width:100%} body.gridmode .post{height:auto} body.gridmode .img-thumbnail{margin:0 0 5px 0} }
selanjunya letakan kode dibawah ini tepat di bawah kode <body>
<b:if cond='data:view.isMultipleItems'>
<script>
(localStorage.getItem('modegrid')) === 'gridmode' ? document.querySelector('body').classList.add('gridmode') : document.querySelector('body').classList.remove('gridmode') </script>
</b:if>
<script>
(localStorage.getItem('modegrid')) === 'gridmode' ? document.querySelector('body').classList.add('gridmode') : document.querySelector('body').classList.remove('gridmode') </script>
</b:if>
berikutnya letakan kode di bawah ini tapat diatas kode <div class='latest-post-title'>
<b:if cond='data:view.isMultipleItems'>
<div class='menu-gridmode'> <div class='gridmode-switch'><span class='switch-title'/><label class='switch'><input aria-label='checkbox' class='gridcheckbox' onclick='gridMode()' type='checkbox'/><span class='slider'/></label> </div>
</div>
</b:if>
<div class='menu-gridmode'> <div class='gridmode-switch'><span class='switch-title'/><label class='switch'><input aria-label='checkbox' class='gridcheckbox' onclick='gridMode()' type='checkbox'/><span class='slider'/></label> </div>
</div>
</b:if>
selanjunya letakan kode di bawah ini tepat diatas kode </body>
<b:if cond='data:view.isMultipleItems'>
<script>//<![CDATA[
function LMcheckCheckbox(){document.querySelectorAll(".gridcheckbox").forEach(function(e){"gridmode"===localStorage.getItem("modegrid")?e.checked=!0:e.checked=!1})}function gridMode(){localStorage.setItem("modegrid","gridmode"===localStorage.getItem("modegrid")?"light":"gridmode"),"gridmode"===localStorage.getItem("modegrid")?document.querySelector("body").classList.add("gridmode"):document.querySelector("body").classList.remove("gridmode"),LMcheckCheckbox()}function gridModeHide(){document.querySelectorAll(".gridmode-switch").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof AzidBloggerSetting&&(AzidBloggerSetting={tombolGridmode:!0}),0==AzidBloggerSetting.tombolGridmode&&gridModeHide();
//]]></script>
</b:if>
terakhir simpan dan lihat hasilnya
akhir kata
sekian tutorial Cara membuat tombol grid dan list mode di blog untuk viomagz semoga mudah dipahami dan bermanfaat,untuk anda yang kurang mengerti atau kurang paham bisa ditanyakan lewat kolom komentar di bawah dan nantikan juga artikel cara membuat popup ramadhan di blog yang akan di publikasikan menjelang ramaadhan,terimaksih
0 Response to "Cara membuat grid dan list mode di blog untuk viomagz"
Post a Comment