Minggu, 07 Juni 2020

Cara Menghilangkan Kode ?m=1 dan kode ?m=0 Pada Akhiran Url Di Blogger Dengan Mudah

Lapakinfo.net
Lapakinfo.net - Di kesempatan kali ini saya akan berbagi tutorial tentang Cara Menghilangkan Kode ?m=1 dan kode ?m=0 Pada Akhiran Url Di Blogger Dengan Mudah, pasti kalian masih belum tahu apa itu kode ?m=1 dan kode ?m=0, Oke sebelum langsung ke tutorialnya saya akan menjelaskan sedikit ulasan tentang kode tersebut.

Kode ?m=1 ialah suatu tambahan Url yang digunakan oleh situs yang menggunakan platform Blogger yang di akses oleh melalui perangkat Handphone / Mobile. 

Selain kode ?m=1 masih ada kode lagi yaitu kode ?m=0 yang artinya jika kalian membuka situs yang menggunakan platform Blogger dengan menggunakan perangkat Komputer / PC, pada akhiran Url tersebut akan keluar kode ?m=0, walaupun  pada kenyataanya jarang sekali kita temui pada komputer / PC.
Pada umumnya kode tersebut tidak berdampak buruk pada blog kalian, karena kode tersebut memang di buat untuk mengetahui jenis perangkat yang sedang mengakses blog kalian. Tapi jika blog kalian mempunyai banyak artikel atau postingan maka akan ada dampak negatifnya yaitu bisa menyebabkan Duplicate Title Tags dan Avoid Multiple Page Redirects.
Jadi kesimpulannya ialah jika yang keluar kode ?m=1 itu menandakan bahwa kalian sedang mengakses sebuah situs dari perangkat mobile / handphone. Jika yang keluar kode ?m=0 berarti kalian sedang mengakses sebuah situs dari perangkat komputer / PC. Seperti itulah sedikit penjelasan dari saya tentang kode ?m=1 dan kode ?m=0. Nah sekarang saya akan menghilangkan kode tersebut menggunakan Javascript supaya tampilan Url blog kita kelihatan rapih walaupun di akses oleh perangkat mobile maupun komputer maka kode tersebut tidak akan muncul.

Untuk caranya saya akan membaginya menjadi dua cara yaitu cara pertama kalian bisa menempelkan kode tersebut pada bagian Tata Letak dan untuk cara kedua kalian bisa menempelkan kode tersebut pada Edit HTML.

Cara Menghilangkan Kode ?m=1 dan kode ?m=0 Pada Akhiran Url Di Blogger Dengan Mudah ( Melalui Tata Letak Pada Blog Kalian )

1. Cara Pertama ( Melalui Tata Letak )

1. Buka Blog kalian.
2. Pilih Tata Letak.
3. Tambahkan Gadget Baru.
4. Pilih HTML/Javascript.

Lapakinfo.net

5. Salin kode di bawah ini dan pastekan di dalam Gadget HTML/Javascript tersebut.
<script type='text/javascript'>
var uri = window.location.toString();
if (uri.indexOf("%3D","%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("%3D%3D","%3D%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));

window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("&m=1","&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
</script>

6. Simpan dan selesai.

Cara Menghilangkan Kode ?m=1 dan kode ?m=0 Pada Akhiran Url Di Blogger Dengan Mudah ( Melalui Edit HTML Pada Template Blog Kalian )

2. Cara Kedua ( Melalui Edit HTML Pada Template )

1. Buka Blog kalian.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Silahkan kalian cari kode </head> jika sudah ketemu silahkan salin kode di bawah ini dan pastekan di atas kode tersebut.
<script type='text/javascript'>


var uri = window.location.toString();

if (uri.indexOf("%3D","%3D") > 0) {

var clean_uri = uri.substring(0, uri.indexOf("%3D"));

window.history.replaceState({}, document.title, clean_uri);

}

var uri = window.location.toString();

if (uri.indexOf("%3D%3D","%3D%3D") > 0) {

var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));

window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("&amp;m=1","&amp;m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&amp;m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
</script>

5. Simpan template kalian dan selesai.

Bagaimana sangat mudah bukan untuk tutorial tentang Cara Menghilangkan Kode ?m=1 dan kode ?m=0 Pada Akhiran Url Di Blogger Dengan Mudah, nah jika kalian mempunyai pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar yang ada di bawah ini. Semoga bermanfaat dan terimakasih sudah berkunjung.

Selasa, 02 Juni 2020

Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger

Lapakinfo.net
Lapakinfo.net - Halo teman - teman lapak info, pada kesempatan kali ini saya selaku admin lapakinfo.net akan berbagi tutorial tentang Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger yang keren. Presentase scrollbar ialah merupakan fitur yang sangat menarik yang bisa menghitung berapa persen di saat kalian melakukan scroll ke bawah atau ke atas di blog kalian. Dengan membuat presentase scrollbar pada blog kalian sudah tentu membuat blog kalian menjadi lebih lengkap.

Sebelum langsung ke tutorial saya akan jelaskan sedikit dari kegunaan presentasi scrollbar, kegunaan dari presentasi scrollbar ialah untuk mengetahui atau membantu pengunjung sejauh mana mereka pada artikel yang sedang di baca, pengunjung akan mengetahuinya dari persen pada scrollbar tersebut. Untuk membuat atau memasangnya pun sangat gampang sekali, kalian bisa ikuti beberapa langkahnya si bawah ini.

Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger


1. Buka Blog kalian.
2. Pilih Template lalu pilih Edit HTML.
3. Cari kode ]]></b:skin> lalu pastekan kode di bawah ini tepat di atas kode tersebut.
/* Persentase Scrollbar Lapakinfo.net */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

4. Lanjut, silahkan kalian salin kode di bawah ini dan letakan di atas kode </body>.
<div id='scrollPersentase'/>

5. Terahir salin kode di bawah ini dan letakan di atas kode </body> juga.
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>

6. Simpan template kalian dan selesai.

Sangat mudah sekali bukan untuk tutorial tentang Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini atau melalui halaman Contact. Terimakasih sudah berkunjung dan semoga bermanfaat.

Rabu, 27 Mei 2020

Cara Gampang Membuat Featured Post Otomatis Slider Di Blog

Lapakinfo.net
Lapakinfo.net - Di kesempatan ini saya akan membagikan sebuah tutorial tentang Cara Gampang Membuat Featured Post Otomatis Slide Di Blog, Featured Post berfungsi memberikan informasi artikel terbaru yang kalian publish, tapi pada kali ini saya akan memodifikasi Featured Post tersebut menjadi Slider dengan menggunakan owl carousel, dan sudah pasti membuat blog kalian lebih menarik dan keren. Saya sarankan buat kalian yang mempunyai traffic tinggi jangan menggunakan widget ini karena dengan menggunakan widget ini blog kalian akan terasa berat dari segi loading maupun segi kecepatan. karena dalam memodifikasi Featured Post tersebut saya menggunakan Javascript External Owl, sebab itulah nanti efeknya akan sedikit memberatkan loading dan kecepatan blog kalian.

Sebenarnya dengan memasang Featured Post ini banyak manfaatnya buat perkembangan blog kita, selain memudahkan pengunjung dengan memasang Featured Post di blog kita juga bisa mempercantik tampilan blog kita. Sudah tentu dengan mempunyai tampilan yang cantik dan menarik itu akan menarik pengunjung dan membuat pengunjung betah berlama di blog kita. Caranya pun sangat mudah untuk di terapkan, kalian cukup menambahkan Javascript, Html pada template kalian dan tentu kalian harus menambahkan CSS juga agar hasilnya lebih sempurna.


Cara Gampang Membuat Featured Post Otomatis Slider Di Blog


1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Cari kode </head> lalu pastekan kode di bawah ini tepat di atas kode tersebut.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

4. Salin kode di bawah ini dan letakan di atas kode </head> juga.
<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>

5. Cari kode ]]></b:skin> atau </style> dan letakan kode di bawah ini tepat di atas kode tersebut.
<b:if cond="data:blog.url == data:blog.homepageUrl"> <style id='owl-carousel' type='text/css'> *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto} #featured-slider h2.title,#featured_slider .widget h2.title{display:none} #featured_slider{margin:0 0 30px} .slider-wrappper{max-width:970px;margin:0 auto;padding:0} .owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em} .slider-item{position:relative;height:100%} .slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:.7;z-index:1;background-image:linear-gradient(to bottom,transparent,rgb(0, 0, 0));transition:opacity 0.25s ease;} a.slider-image{height:100%} .thumb.overlay{height:200px} @media screen and (max-width: 800px){ .thumb.overlay{height:280px;} } .post-descript{position:absolute;bottom:20px;left:-5%;right:8%;z-index:99;padding:25px;border-radius:6px;transition:all .3s} .slider-item:hover .post-descript{} .slider-wrapp .post-inner{padding:0 40px;margin:auto} .slider-item h2.post-title{font-size:24px;margin:0;padding:0;} @media screen and (max-width: 480px){ .slider-item h2.post-title a{ font-size:16px!important; } } .slider-item h2.post-title a{color:#fff;transition:all .3s;font-size:24px;} .slider-item h2.post-title a:hover{color:#fff} .slider-item .post-date{display:inline-block;color:#ddd;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase} .slider-item .post-tag a{display:inline-block;background:#0081ff;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .slider-item .post-tag a:hover{background:#000;color:#fff} .feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff} .featured-posts{display:inline-block;width:100%} .feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0} .feature-item:last-child{margin:0} .feature-item .thumb.overlay{height:150px;width:100%;position:static} .feature-item .thumb.overlay a.slider-image{} .feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s} .feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden} .feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)} .feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400} .feature-item h2.post-title a{color:#000} .feature-item:hover h2.post-title a{color:#aaa} .feature-item .post-meta{margin:0} .feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .feature-item .post-tag a:hover{background:#000;color:#fff} .feat-home{height:320px;margin:0 0 50px;position:relative} .feat-home:before,.slider-item:before{content:&quot;&quot;;right:0} .feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1} .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative} .owl-carousel{display:none;width:100%;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden} .owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0);overflow:hidden;border-radius:8px;} .owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none} .owl-carousel .owl-item img{display:block;width:100%} .owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none} .no-js .owl-carousel,.owl-carousel.owl-loaded{display:block} .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:3px;width:60px;padding:3px;background:#e2e2e2;border:none;border-radius:7px;outline:none;}button.owl-dot.active{background:#1a73e8;padding:3px;border:none;border-radius:7px;outline:none;} @media screen and (max-width: 480px){ .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{ } .owl-dots{ bottom:0px!important; } } .owl-carousel.owl-loading{opacity:0;display:block} .owl-carousel.owl-hidden{opacity:0} .owl-carousel.owl-refresh .owl-item{visibility:hidden} .owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} .owl-carousel .animated{animation-duration:1s;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut} .owl-height{transition:height .5s ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease} .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000} .owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease} .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)} .owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none} .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease} .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent} .owl-theme .owl-nav{margin-top:10px} .owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px} .owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none} .owl-theme .owl-nav .disabled{opacity:.5;cursor:default} .owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px} .owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1} .owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#1a73e8;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px} .owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} .owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)} .owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)} .owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s;outline:none;} .owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0} .owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)} #HTML33 .widget-content{overflow:visible} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} @media screen and (max-width: 768px){ .feature-item{width:50%;margin:0 auto 15px auto}} @media screen and (max-width: 640px){ .owl-prev,.owl-next{top:18%} .owl-carousel .owl-item{height:auto} .post-descript{padding:15px 10px;left:-2%;right:5%;bottom:10%;} .slider-wrapp .post-inner{padding:0 10px} .slider-item h2.post-title{font-size:16px;padding:0;display:flex;} .feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}} @media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}} .content-wrapper{overflow:hidden;max-width:1000px;margin:0 auto;margin-top:60px;margin-bottom:-85px;} .owl-dots{ position:absolute; bottom:0; width:100%; margin:0 auto; padding:20px 0 15px 0; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; text-align:center; } @media screen and (max-width: 480px){ .slider-wrappper{ padding:15px; } .content-wrapper{margin-top: 35px;} } @media screen and (max-width: 800px){ .content-wrapper{margin-top: 35px;} .slider-wrappper{ padding:15px; } } .owl-dots .owl-dot{ width:50px; } </style> </b:if>

6. Masih dalam Edit HTML, sekarang kalian salin kode di bawah ini dan letakan di atas kode </body>.
<script src='https://cdn.statically.io/gh/Aslori/file/master/OwlCarousel2.js' type='text/javascript'/>

7. Simpan template kalian.
8. Sekarang kalian pilih Menu Tata Letak.
9. Tambah Gadget lalu pilih Javascript/HTML
10. Salin kode di bawah ini lalu letakan pada form Javascript/HTML tersebut.
<script> document.write("<script src=\"/feeds/posts/default/-/Adsense?max-results="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>"); </script>

Silahkan kalian rubah kode yang saya tandai dengan warna Merah dengan Label blog kalian.
Untuk demonya kalian bisa lihat di bawah ini dengan menekan tombol demo.


Bagaimana sangat mudah bukan untuk tutorial tentang Cara Gampang Membuat Featured Post Otomatis Slider Di Blog, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini. Terimakasih atas kunjungannya dan semoga bermanfaat.

Jumat, 22 Mei 2020

Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di Blogger

Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di Blogger

Lapakinfo.net - Di kesempatan ini ,saya akan membagikan tutorial tentang Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di Blogger dengan mudah, dengan menggunakan fitur ini kalian tidak bisa melihat adress bar dan tab browser, jadi kalian akan fokus pada artikel tersebut. Dan cara ini bekerja dengan baik pada perangkat mobile dan perangkat dekstop.

Mungkin kalian pernah lihat mode ini di Youtube, di Youtube ada salah satu tombol untuk melihat video dengan layar penuh atau full screen, namun pada kesempatan kali ini saya akan membuat mode tersebut pada halaman blogger. Tombol ini sudah banyak di gunakan oleh kalangan blogger, salah satunya mbak igniel. Tujuan memasang mode ini tidak lain untuk mempermudah pengunjung ketika ingin membaca suatu artikel dengan fokus.

Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di blogger


1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Salin kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>.
#openfull,
#exitfull {
background: 0 0;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
text-align: center;
width: 30px;
height: 55px;
line-height: 55px;
float: left;

}
#openfull:active,
#exitfull:active,
#openfull:focus,
#exitfull:focus {
outline: 0;
}
#openfull svg,
#exitfull svg {
vertical-align: middle;
}
#exitfull {
display: none;
}
Untuk kode yang saya tandi dengan warna Merah kalian bisa mengubahnya sesuai blog atau penempatan kode kalian.
4. Lanjut, silahkan kalian salin kode di bawah ini dan letakan sesuai keinginan kalian.
<button aria-label="Open Fullscreen" id="openfull" onclick="openFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></svg></button>
<button aria-label="Exit Fullscreen" id="exitfull" onclick="closeFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg></button>

5. Langkah terahir silahkan kalian salin Javascript di bawah ini dan letakan tepat di atas kode </body>.
<script>
//<![CDATA[
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById("openfull").style.display = "none";
document.getElementById("exitfull").style.display = "block";
}

function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.getElementById("openfull").style.display = "block";
document.getElementById("exitfull").style.display = "none";
}
//]]>
</script>

6. Simpan template kalian dan selesai.

Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di blogger, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini. Terimakasih sudah berkunjung dan semoga bermanfaat buat kalian semua.

Rabu, 20 Mei 2020

Cara Terbaru Membuat Featured Post Responsive Di blogger

Lapakinfo.net
Lapakinfo.net - Pada kesempatan kali ini saya akan berbagi tutorial tentang Cara Terbaru Membuat Featured Post Responsive Di blogger, membuat featured post bisa di lakukan oleh kalian karena dengan memasang featured post ini bisa mempercantik tampilan blog kalian. Pada tutorial sebelumnya saya sudah menjelaskan tentang cara terbaru membuat recent post yang responsive di blogger hanya dengan menggunakan CSS dan Javascript saja, namun pada tutorial ini kita akan membuat featured post yang responsive menggunakan CSS, Html, dan Javascript.

Sebelum lanjut ke tutorial saya sarankan kalian mem back-up template kalian terlebih dahulu untuk menghindari hal yang tidak di inginkan, supaya nanti jika terjadi kesalahan bisa kembali seperti semula dan bisa di gunakan seperti biasanya. Baiklah sobat Lapak info di bawah ini langkah - langkah untuk membuat featured post responsive terbaru, simak baik - baik langkah di bawah ini supaya dalam pembuatan tidak terjadi error.

Cara Terbaru Membuat Featured Post Responsive Di blogger


1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Salin kode di bawah ini dan letakan di bawah kode <div id='wrapper'>.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Featured Post Start -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){document.write('<ul class="'+outerclass+'">');for(var e=0;e<numposts;e++){var r,i=t.feed.entry[e],n=i.title.$t,l=i.category[0].term;if(e==t.feed.entry.length)break;for(var o=0;o<i.link.length;o++) if("alternate"==i.link[o].rel){r=i.link[o].href;break} var u;try{u=i.media$thumbnail.url}catch(m){s=i.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmQfeQfaiwOg9JeEFcR3BErYgDP5kBmhpIir9WfiTnEKsNxaYQgT7iytQa6ydt0lUAOmuJtG3As45z34ABiIdcj3N3nGxzlxBtRzfmmL8cMZxnHP_UQm5jV-wtxEWmr5NroZp_heJNcDY/s66-c/no-image.png"} var p=i.published.$t,v=p.substring(0,4),h=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December";var A=g[parseInt(h,10)]+" "+f+", "+v;document.write(starttag+"<"+intag+' class="post">'),document.write('<div class="post-media"><div class="image-wrap"><img src="'+u.replace("/s72-c/","/s400-p/")+'" alt="'+n+'"/></div></div><div class="post-body">'),"featured-slider"==outerclass&&document.write('<span class="cat"><a href="/search/label/'+l+'">'+l+'</a></span><div class="post-title"><h4><a href="'+r+'">'+n+'</a></h4></div><div class="post-meta"><span class="post-date">'+A+"</span></div></div>"),"sub-menu"==outerclass&&document.write('<div class="post-title"><h2><a href="'+r+'">'+n+'</a></h2></div><span class="post-date">'+A+"</span></div>"),document.write("</"+intag+">"+endtag)} document.write("</ul>")};function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)} function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++) if("alternate"==n.link[m].rel){i=n.link[m].href;break} for(var m=0;m<n.link.length;m++) if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break} if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++) if(parseInt(f)==h[u]){f=p[u];break} if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)} j++}} imgr=new Array,imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmQfeQfaiwOg9JeEFcR3BErYgDP5kBmhpIir9WfiTnEKsNxaYQgT7iytQa6ydt0lUAOmuJtG3As45z34ABiIdcj3N3nGxzlxBtRzfmmL8cMZxnHP_UQm5jV-wtxEWmr5NroZp_heJNcDY/s66-c/no-image.png",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="5";
//]]>
</script>
<div class='bungkus-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'>
<script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
<!-- Featured Post End -->
</b:if>

4. Lanjut, silahkan kalian salin kode di bawah ini dan letakan tepat di atas kode </style>.
/* Featured Post Lapakinfo.net */
.bungkus-wrapper{padding:15px 0px 20px 0px;width:100%}#featured-posts-section{min-height:380px;overflow:hidden}.featured-post a{color:#fff}.featured-post a:hover{color:#fff}.main-post.featured-post a{margin:0;font-size:17px}.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 0px 0 0}.featured-post .main-post{background:#D84E1A;width:41.4%;padding:0}.featured-post .secondary-post{background:#227B96;width:29%;margin:0 0 2px 2px}.featured-post .secondary-post:nth-child(4){background:#7D2DA7}.featured-post .secondary-post:nth-child(5){background:#28943A}.featured-post .secondary-post:nth-child(7){background:#CA9215}.featured-post span{background:#1565c0;color:#fff;font-weight:bold;position:absolute;transition:all .4s;font-size:12px;line-height:1.0;padding:3px 6px;top:10px;right:10px;z-index:1;border-radius:1px}.featured-post img{margin-bottom:-10px;height:100%;opacity:0.4}.featured-post .main-post img{height:380px;width:100%;object-fit:cover;transition:all 0.4s}.featured-post .secondary-post img{height:191.5px;object-fit:cover;width:100%;transition:all 0.4s}.featured-post .main-post:hover img, .featured-post .secondary-post:hover img{background-color:transparent;backface-visibility:hidden;opacity:1}.featured-post header{position:absolute;background:transparent;bottom:0px;left:0;right:0;padding:10px;z-index:2;margin-bottom:0px}.featured-post header:hover{background:transparent;opacity:1}.featured-post .secondary-post header{padding:0px 10px;margin-bottom:0px}.featured-post header h3{font-size:12px;line-height:1.0;font:700 16px Noto Sans, sans-serif}.featured-post h4{font-size:12px;line-height:1.0;font:700 16px Noto Sans, sans-serif}.featured-post .main-post:hover img{background:transparent;opacity:1;transition:all 0.4s;transform:scale(1.2)}.featured-post .secondary-post:hover img{background:transparent;opacity:1;transition:all 0.4s;transform:scale(1.2)}@media only screen and (max-width:700px){.featured-post .main-post{width:39%}.featured-post .secondary-post{width:30%}.featured-post .main-post img{height:320px;width:100%;object-fit:cover}.featured-post .secondary-post img{height:161px;object-fit:cover;width:100%}.featured-post header h3{font:700 12px Noto Sans, sans-serif}.featured-post h4{font:700 12px Noto Sans, sans-serif}}@media only screen and (max-width:640px){.featured-post .secondary-post{margin:0;width:50%}.featured-post .main-post{width:100%}.featured-post .main-post img{height:200px;width:100%;object-fit:cover}.featured-post .secondary-post img{height:150px;object-fit:cover;width:100%}.featured-post header h3{font:700 14px Noto Sans, sans-serif;text-align:center}.featured-post h4{font:700 12px Noto Sans, sans-serif}.featured-post span{display:none}}

5. Simpan template kalian dan selesai.

Silahkan kalian cek pada homepage blog kalian untuk featured postnya sudah muncul apa belom, dan jika featured post tersebut sudah muncul namum tidak ada gambarnya atau thumbnailnya kalian bisa ikuti cara di bawah ini.
  • Buka setelan blog kalian lalu pilih lainnya
  • Pada bagian Feed Situs, silahkan kalian rubah feed tersebut dari penuh menjadi sampai batas postingan
  • Jika sudah jangan lupa simpan


Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Featured Post Responsive Di blogger, jika kalian mempunyai pertanyaan seputar postingan di atas atau seputar blogger silahkan kalian bertanya melalui kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih sudah berkunjung.

Selasa, 12 Mei 2020

Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah

Lapakinfo.net
Lapakinfo.net - Pada kesempatan ini saya akan berbagi tutorial yaitu Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah, tombol back to top ini biasa kita jumpai pada  bagian bawah sudut kanan blog, ketika tombol back to top ini kalian klik maka akan otomatis langsung ke atas tanpa kalian melakukan scroll lagi. Tombol back to top ini salah satu komponen yang wajib kalian pasang pada blog kalian,karena dengan memasang tombol back to top ini akan mempermudah pengunjung untuk melompat ke bagian atas blog.

Tombol back to top menggunakan icon svg ini pertama kali saya lihat pada template viomagz, setelah saya coba ke beberapa template lainnya dan sukses tanpa ada error sedikitpun. Untuk contohnya kalian bisa lihat pada blog saya sendiri lapakinfo.net di bagian bawah kanan blog ini maka akan terilhat tombol back to top menggunakan icon svg. Jika pada template kalian belum ada tombol back to top dan ingin memasang tombol back to top menggunakan icon svg kalian bisa ikuti tutorialnya di bawah ini.

Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah


1. Buka Blog kalian.
2. Pilih Tema dan pilih Edit HTML
3. Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
#back-to-top{background:#000080;color:#fff;padding:6px 8px;font-size:24px;border-radius:22px;}
.back-to-top{position:fixed!important;position:absolute;bottom:75px;right:20px;z-index:998;}
.back-to-top svg{width:24px;height:24px;vertical-align:middle;margin-top:-5px;}
.back-to-top svg path{fill:#fff;}

4. Lanjut kalian cari kode </footer> dan letakan kode di bawah tepat di bagian bawah kode tersebut
<div class='back-to-top'>
<a aria-label='back to top' href='#' id='back-to-top' title='back to top'>
<svg viewBox='0 0 24 24'>
<path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/>
</svg>
</a>
</div>

5. Sekarang copy kode di bawah ini dan letakan di atas kode </body>
<script>            
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

6. Untuk kode di atas kalian juga bisa meletakannya di bagian bawah kode No 5, nanti hasilnya akan seperti ini.
<div class='back-to-top'>
<a aria-label='back to top' href='#' id='back-to-top' title='back to top'>
<svg viewBox='0 0 24 24'>
<path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/>
</svg>
</a>
</div>

<script>
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>
Silahkan kalian atur posisi back to top pada CSS, atur sesuai kalian dan jika perlu rubah warna iconnya pada CSS tersebut.
7. Simpan template kalian dan selesai.

Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah, jika kalian memiliki pertanyaan seputar postingan di atas atau seputar blogger silahkan kalian bertanya pada kolom komentar di bawah ini. Semoga bermanfaat buat kalian semua dan terimakasih sudah berkunjung.

Senin, 11 Mei 2020

Cara Terbaru Membuat Pengalihan Link Menggunakan Javascript Dengan Mudah

Lapakinfo.net
Lapakinfo.net - Pada kesempatan kali ini saya mau berbagi sebuah tutorial yaitu Cara Terbaru Membuat Pengalihan Link Menggunakan Javascript, pengalihan link atau mengalihkan link dari link utama ke link yang di tuju, cara ini biasa di lakukan untuk mengalihkan link blog lama ke link blog baru. Bahkan dengan menggunakan Javascript ini bisa digunakan untuk menuju halaman download, dan yang lebih kerennya lagi bisa kalian modifikasi sendiri untuk gaya tampilannya.

Pada tutorial ini hanya menambahkan Javascript saja yang nantinya tidak memberatkan blog kalian saat loading. Banyak manfaat dan kegunaan dengan membuat pengalihan link ini yaitu salah satunya bisa menaikan DA dan PA pada blog kalian. Nah, jika kalian mau memasang pengalihan link ini bisa ikuti tutorialnya di bawah ini.

Cara Terbaru Membuat Pengalihan Link Menggunakan Javascript


1. Buka Blog kalian.
2. Pilih Postingan kalian yang mau di pasang Redirect
3. Salin kode di bawah ini dan letakan di mode HTML ( Bukan Compose )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var url = "https://www.lapakinfo.net/"; // url tujuan
var count = 10; // dalam detik
function countDown() {
if (count > 0) {
count--;
var waktu = count + 1;
$('#kata').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
setTimeout("countDown()", 1000);
} else {
window.location.href = url;
}
}
countDown();
</script>
<html>
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<center>
<body>
<b>please disable adblock and active javasript to acess this page... if you use ucbrowser or operamini change it to default browser, because that browser disable javascript function.</b>
<br />
<center style="color: red;">
if you not redirected to download page click <a href="https://www.lapakinfo.net/"><b>HERE</b></a>
<br />
<div class="loader">
</div>
</center>
</body>
</center>
</html>

4. Publish postingan kalian dan selesai.
Catatan : Ganti : https://www.lapakinfo.net/ dengan link kalian
Ganti : var count = 10 dengan waktu yang kalian inginkan
Selebihnya silahkan kalian modif sendiri.


Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Pengalihan Link Menggunakan Javascript, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih atas kunjungannya.

Minggu, 10 Mei 2020

Cara Terbaru Membuat Iklan Melayang Di Blog Dengan Mudah ( Floating Ads ) Responsive

Lapakinfo.net
Lapakinfo.net - Pada kesempatan kali ini saya akan membagikan sebuah tutorial yaitu Cara Terbaru Membuat Iklan Melayang Di Blog Dengan Mudah ( Floating Ads ) Responsive, tujuan dari tutorial ini yaitu untuk meningkatkan klik pada blog kalian, selain untuk meningkatkan klik pada blog kalian dengan membuat iklan melayang juga bisa meningkatkan earning iklan kalian. Biasanya iklan dengan banner yang ukurannya 728px dan juga 970px akan terpotong bila di pasang di mobile ( Tidak Reponsive ), akan tetapi pada tutorial ini saya akan sedikit menambahkan kode CSS supaya untuk ukuran tersebut akan responsive bila di buka lewat mobile.

Untuk pembuatannya pun cukup mudah kalian hanya menambahkan beberapa kode JavaScript dan sedikit CSS, yang pasti dalam pembuatan iklan melayang ini saya tidak menggunakan kode Jquery Library sehingga tidak mengganggu atau memberatkan loading iklan dan loading blog kalian, yang pasti sangat sederhana. Jika kalian mau membuat iklan melayang ( floating ads ) di blog kalian silahkan ikuti tutorialnya di bawah ini.

Cara Terbaru Membuat Iklan Melayang Di Blog Dengan Mudah ( Floating Ads ) Reponsive


1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Salin kode di bawah ini dan letakan di atas kode </body>.
<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#btm_banner&#39;).hide(90);});});
</script>
<!--start: floating ads-->
<div id='floatads' style='width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999'>
<div><a id='close-floatads' onclick='document.getElementById(&apos;floatads&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAMX9z54TrQwWHJMmkSEqRqBJpFtk48ph8x8O3kA1rOG3cng65f6YWaiQ1jEOOrMWgsc4dHJ_EfP8S7Ql7_nj0PUbk4MvAzqDMftKm459SnzK3o4YWe4_9XxgjgNcfnBxyu2GeF8SueqA/s1600/btn_close.gif' title='close button'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<!-- Awal Script iklan-->
<!-- LETAKAN IKLAN DISINI 728x90 -->
<!--Akhir script iklan-->
</div>
</div><!--end: floating ads-->

4. Simpan template kalian.
Catatan : Untuk kode max-widh:728px ( Lebar Banner ), jika kalian ingin memasang iklan dengan lebar 970 maka rubah saja bagian 728 menjadi 970 yang nanti hasilnya akan seperti ini max-widh:970px, tapi jika ukuran lebar iklan kalian di bawah 728 maka kalian tidak usah merubah kode ukuran tersebut.
5. Hapus kode <!-- LETAKAN IKLAN DISINI 728x90 --> lalu ganti dengan kode iklan kalian.
6. Selesai.

Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Iklan Melayang Di Blog Dengan Mudah ( Floating Ads ) Reponsive, jika kalian memiliki pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini. Semoga bermanfaat dan Terimakasih atas kunjungannya.

Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis Di Postingan Blog ( Tombol Download Countdown Timer )

Lapakinfo.net
Lapakinfo.net - Pada postingan sebelumnya saya sudah membagikan sebuah tutorial yaitu Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog, nah pada kesempatan kali ini saya akan membagikan tutorial yang sama dengan tutorial sebelumnya tapi kali ini saya akan menggunakan timer pada tombol tersebut. Dengan menggunakan fitur ini kalian bisa menaikan Bounce Rate apalagi jika blog kalian dengan niche blog download, dengan menggunakan fitur ini juga bisa menaikan CPM iklan dan masih banyak keuntungan lainnya.

Pasti kalian sering menjumpai tombol download otomatis dengan timer ini ketika kalian mau mengunduh file dari blog download tersebut. Tombol ini di setting dengan waktu mundur otomatis yang biasanya antara 15 detik atau 10 detik dan bahkan ada juga yang hingga 1 menit, jika angka mundur sudah mencapai angka 0 maka link yang tertuju atau file tersebut akan keluar. Nah, buat kalian yang mau memasang Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis Di Postingan Blog ( Tombol Download Countdown Timer ) bisa ikuti langkah di bawah ini.

Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis Di Postingan Blog ( Tombol Download Countdown Timer )

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Salin kode di bawah ini dan letakan di atas kode </head>.
<style type='text/css'>
/* Auto Download */
#btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#1589E3;float:right;text-transform:uppercase;font-weight:700}
#btn:hover, a#download:hover{background:#BC4634;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.paling-jobo{display:block;width:60%;margin: 20px auto;border-radius:4px;font-family:'PT Sans Narrow', sans-serif}
.bungkus-down{background:#1589E3;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;}
.file-info{color:#fff;display:inline-block;font-size:1.3em;line-height: 38px;text-align:left}
.catatan-sikil{padding:10px 20px;background:#EAEBED;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555}
#download{float:right}
a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center}
.embuh span{display:inline-block;line-height: 38px;float:right}
.iklan-down{float:right;width:40%;padding-left:10px;margin:20px 0;text-align:right}
.file-deskripsi{display:block}
.file-deskripsi span{margin-right:3px}
.iklan-ngisore, .iklan-duwure{display:block;width:100%;margin:0 auto}
h2.entry-title{margin-top:10px}
.post-labels, .post-timestamp{display:none}
a.home-link{color:#555;font-size:20px;}
a.home-link:hover{color:#222}
@media screen and (max-width:600px){
.paling-jobo{float:none;width:100%}
.iklan-down{float:none;width:100%;text-align:center;padding:0}
}
@media screen and (max-width:320px){
/* CSS styles */
.file-info{display:block;text-align:center}
#btn, a#download{width:100%;margin-bottom:10px}
.embuh span{float:none;width:100%;text-align:center}
.file-deskripsi{text-align:center}
}
</style>

4. Cari kode </body> dan letakan kode di bawah ini tepat di atas kode tersebut.
<script type='text/javascript'>
//<![CDATA[
function generate() {
var linkDL = document.getElementById("download"),
btn = document.getElementById("btn"),
direklink = document.getElementById("download").href,
waktu = 10;
var teks_waktu = document.createElement("span");
linkDL.parentNode.replaceChild(teks_waktu, linkDL);
var id;
id = setInterval(function () {
waktu--;
if (waktu < 0) {
teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
clearInterval(id);
window.location.replace(direklink);
linkDL.style.display = "inline";

} else {
teks_waktu.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "File siap diunduh dalam " + "" + waktu.toString() + " Detik....";
btn.style.display = "none";
}
}, 1000);
}
//]]>
</script>

5. Salin juga kode di bawah ini dan letakan di atas kode </body>.
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");
//]]>
</script>

6. Jika sudah silahkan simpan template kalian.
7. Terakhir silahkan kalian buka postingan kalian yang ingin kalian pasang tombol download tersebut, lalu masuk ke mode HTML ( bukan Compose ) dan letakan kode di bawah ini ke dalam mode HTML.
<div class="paling-jobo">
<div class="bungkus-down">
<div class="embuh">
<div class="file-info">
Nama File Mu
</div>
<button onclick="generate()" id="btn"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button>
<a id="download" href="linkdownload" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Lapak Info</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
File Size 5MB</span>
</div>
</div>
<div class="catatan-sikil">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
</div>
</div>

8. Publish postingan kalian dan selesai.


Untuk penempatannya silahkan sesuaikan dengan isi artikel kalian
Sangat mudah bukan untuk tutorial Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis Di Postingan Blog ( Tombol Download Countdown Timer ), jika kalian memiliki pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih atas kunjungannya.

Minggu, 03 Mei 2020

Cara Terbaru Membuat Syntax Highlighter Di Blog Dengan Scroll Navigasi Dengan Mudah

Lapakinfo.net
Lapakinfo.net - Pada kesempatan ini saya akan membagikan tutorial yaitu Cara Terbaru Membuat Syntax Highlighter Di Blog Dengan Scroll Navigasi, Syntax Highlighter ialah sebuah text editor yang menyoroti penulisan markup kode di halaman website, selain itu Syntax Highlighter juga memiliki fungsi untuk mempermudah pengunjung dalam mengenali keseluruhan sebuah kode. Biasanya Syntax Highlighter terdapat pada blog dengan niche tutorial seperti blog ini ( Lapakinfo.net ).

Syntax Highlighter hampir mirip dengan Blockquote, hanya saja pada blockquote memiliki fitur warna tulisannya yang biasa saja dan jika ingin merubah warna tulisannya harus dilakukan secara manual. Syntax Highlighter yang akan saya bagikan ini  memilki tulisan yang berwarna, sehingga bisa membuat pengunjung tidak bosan untuk melihatnya. Nah, jika kalian tertarik untuk memasang Syntax Highlighter ini pada blog kalian caranya juga sangat mudah, kalian bisa ikuti caranya di bawah ini.

Cara Terbaru Membuat Syntax Highlighter Di Blog Dengan Scroll Navigasi

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Salin kode di bawah ini dan letakan di atas kode </head>

<style type='text/css'>
/* Highlighter */
pre{max-height:250px;white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

4. Lanjut salin kode di bawah ini dan letakan tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

5. Simpan template kalian.

Untuk menerapkannya kalian masuk ke postingan kalian lalu pilih Mode HTML (Bukan Compose ) dan letakan kode di bawah ini tepat di Mode HTML

CSS <pre><code class="language-css">
Isi disini dengan kode CSS dan Parse kode bila diperlukan
</code></pre>

JS <pre><code class="language-javascript">
Isi disini dengan kode CSS dan Parse kode bila diperlukan
</code></pre>

HTML <pre><code class="language-html">
Isi disini dengan kode CSS dan Parse kode bila diperlukan
</code></pre>
Pilih salah satu kode di atas sesuai dengan kebutuhan kalian.
Bagaimana sangat mudah bukan untuk Cara Terbaru Membuat Syntax Highlighter Di Blog Dengan Scroll Navigasi, untuk hasilnya kalian bisa lihat pada postingan ini. Nah, jika kalian ada pertanyaan silahkan bertanya di kolom komentar di bawah ini, dan terimakasih sudah berkunjung semoga postingan kali ini bermanfaat buat kalian semua.

Cara Terbaru Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog Dengan Mudah

Lapakinfo.net - Pada kesempatan kali ini saya akan membagikan sebuah tutorial yaitu Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog, infinite scroll ialah sebuag script yang berfungsi untuk memanggil postingan lain yang tidak muncul pada homepage blog kalian, postingan lain yang di maksud ialah postingan lama yang tidak muncul pada home page atau halaman depan blog kalian.

Infinite scroll ini memiliki dua versi yaitu versi manual click dan versi auto load, tapi pada kesempatan ini saya akan membagikan tutorial infinite scroll versi manual click. Infinite scroll ini pengganti tombol page navigation yang terletak di bawah postingan homepage blog, untuk memasangnya juga sangat mudah. Jika kalian ingin memasang infinite scroll ini kalian bisa ikuti caranya di bawah ini.

Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

/* Infinite Lapakinfo.net */
#blog-pager {
clear:both !important;
padding:2px 0;
text-align: center;
}
#blog-pager-newer-link a {
float:left;
display:block;
background: #ffffff;
}
#blog-pager-older-link a {
float:right;
display:block;
background: #ffffff;
}
.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {
font-size: 14px;
padding: 8px 12px;
margin: 2px 3px 2px 0px;
display: inline-block;
color: #000000;
border: 1px solid #000000;
}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-link:hover, .displaypageNum a:hover,.showpage a:hover, .pagecurrent {
color: #000000;
border: 1px solid #000000;
}
.showpageOf {
display: none !important;
}
#blog-pager .pages {
border: none;
}
#blog-pager a.home-link {display:none}
#blog-pager {padding:0;margin:20px auto; text-align:center;}
#blog-pager-older-link {float:none; display:block}
#blog-pager-older-link img {max-height:50px}
#blog-pager-older-link a {
background: #1589E3;
color:#fff;
font-size:14px;
font-weight:600;
border-radius:3px;
padding:10px 20px;
display:inline-block;
position:right;
transition:0.3s;
float: right;
border: 1px solid #1a73e8;}
#blog-pager-older-link a:hover {
background:transparent;
border: 1px solid #1589E3;
color: #1589E3;
}


#blog-pager-newer-link a {
background: #1589E3;
float: left;
font-size: 14px;
font-weight: 600;
border-radius: 3px;
padding: 10px 20px;
display: inline-block;
position: left;
transition: 0.3s;
border: 1px solid #1589E3;
color: #fff;
}
#blog-pager-newer-link a:hover {
background:transparent;
border: 1px solid #1589E3;
color: #1589E3;
}

4. Lanjut salin kode di bawah ini dan letakan di atas kode </body>

<!-- Load More Post -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>//<![CDATA[//
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0,
target: {
posts: '.blog-posts',
post: '.post-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<a class="js-load" href="javascript:;">Artikel Berikutnya</a>',
loading: '<a class="js-load" >Loading...</a><div class="load"></div>',
loaded: '<a class="js-load" href="#" data-text="Loaded! Back To Top">END</a>',
error: '<a class="js-load">Hadeh error!</a>'
}
});
//]]>//</script>
</b:if>
</b:if>
Keterangan :
Silahkan rubah kata - kata di bawah ini sesuai kemauan kalian
- Artikel Berikutnya ( Merupakan pesan yang muncul pada tombol infinite, kalian bisa menggantinya dengan Next Article atau Artikel Selanjutnya )
- Loading ( Merupakan pesan yang muncul ketika sedang  memuat artikel selanjutnya )
- END ( Merupakan pesan yang muncul ketika artikel yang di muat sudah mencapai batas )
- Hadeh Error! ( Merupakan pesan yang muncul saat script tidak bekerja, sehingga ada peringatan error )
5. Simpan template kalian dan selesai.


Bagiamana sangat mudah bukan untuk tutorial Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog, untuk hasilnya kalian bisa klik tombol demo yang ada di atas atau kalian cukup klik tombol beranda yang ada bagian menu navigasi header.

Jika kalian ada pertanyaan seputar postingan di atas silahkan bertanya melalui kolom komentar di bawah ini, dan terimakasih atas kunjungannya semoga bermanfaat buat kalian semua.

Cara Terbaru Membuat Menu Navigasi Bar Di Bawah Footer Blog Dengan Mudah

Lapakinfo.net - Pada kesempatan kali ini saya akan membagikan tutorial yaitu Cara Membuat Menu Navigasi Bar Di Bawah Footer Blog. Menu navigasi ialah syarat wajib jika kalian mau mendaftar ke Adsense, selain syarat wajib untuk mendaftar ke adsense menu navigasi ini juga bisa mempercantik tampilan blog kalian karena menu navigasi ini memiliki tampilan yang sangat clean.

Menu navigasi ini akan muncul ketika di akses lewat mobile saja, dan tentunya dengan memasang menu navigasi ini akan memberikan kesan tersendiri terhadap pengunjung dan mempermudah pengunjung untuk mengakses blog kita. Oke tanpa basa - basi kita langsung saja ke tutorial Cara Membuat Menu Navigasi Bar Di Bawah Footer Blog.

Cara Membuat Menu Navigasi Bar Di Bawah Footer Blog

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Copy kode di bawah ini dan pastekan tepat di atas kode </Footer>

<div class='menubottom '><!--float menubottom by gurudzgn.com-->
<nav>
<ul>
<li class='ripple'>
<a href='#' itemprop='url' title='Home'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg><span itemprop='name'>Home</span></a>
</li>
<li class='ripple'>
<a href='#' itemprop='url' title='Menu'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z'/></svg><span itemprop='name'>Menu</span></a>
</li>
<li class='ripple'>
<a href='#' itemprop='url' title='Share'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'/></svg><span itemprop='name'>Share</span></a>
</li>
<li class='ripple'>
<a href='#' itemprop='url' title='Kategory'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13C15,12.45 14.55,12 14,12H8V10H10C10.55,10 11,9.55 11,9V7H13C14.1,7 15,6.1 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16C9,17.1 9.9,18 11,18M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z'/></svg><span itemprop='name'>Kategori</span></a>
</li>
<li class='ripple'>
<a href='#' itemprop='url' title='Show Chat'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg><span itemprop='name'>WhatApp</span></a>
</li>
</ul>
</nav>
</div>

4. Lanjut cari kode </body> atau </head> dan pastekan kode di bawah ini tepat di atas kode tersebut.

<style>
/* Menunavbottom */
.menubottom{display:none}@media screen and (max-width:800px){.menubottom{position:relative/*fixed*/;right:0;left:0;z-index:5;/*add*/bottom:0}.menubottom nav ul{display:flex!important;width:100%!important;padding-left:0;justify-content:space-between!important;margin-bottom:0;flex-direction:row!important;list-style:none}.menubottom nav ul li{width:100%!important;list-style:none;}.menubottom nav ul li a{display:block;text-decoration:none;padding:.4rem 1rem}.menubottom nav ul li a svg{width:25px;height:25px;fill:#9aa3a9;}.menubottom nav ul li a span{color:#4b4f56;position:relative;font-size:8px;display:block;top:-5px}#openShare{display:block}#closeShare{display:none}#jpthemeFooter{padding-bottom:55px;position:relative;}}@media screen and (max-width:768px){.menubottom{left:0;text-align:center;width:100%;position:fixed;display:block}.menubottom nav{background-color:rgb(255,255,255);background-image: linear-gradient(110deg,rgba(33,150,243,0.1) 16%,rgba(33,150,243,0.1) 17%,rgba(33,150,243,0.05) 17%,rgba(33,150,243,0.05) 23%,transparent 8.5%,transparent 78%,rgba(33,150,243,0.05) 78%,rgba(33,150,243,0.05) 84%,rgba(33,150,243,0.1) 84%,rgba(33,150,243,0.1));display:block!important;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;box-shadow:0 -1px 3px rgba(0,0,0,.3);}.menubottom ul li{float:left;width:100px;height:100%;transition:/*background-color 0.2s linear 0s*/;transition:/*all .5s linear*/;background-position:center;display:block}
.float_wrapper_menubottom{position:fixed;left:0;bottom:0;right:0;transition:all .3s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0);font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif;}.floatscroll{bottom:0}.floatno-scroll{bottom:-55px;}.jpthemeMenu .menu-toggle{display:none}.jpthemeMenu .back-toggle{display:block!important}}.jpthemeMenu .back-toggle{display:none}
</style>

5. Simpan template kalian dan selesai.


Sangat mudah bukan untuk tutorial Cara Membuat Menu Navigasi Bar Di Bawah Footer Blog, buat kalian yang pengen lihat hasilnya bisa klik tombol demo yang ada di atas dan jika kalian mempunyai pertanyaan seputar postingan di atas silahkan bertanya melalui kolom komentar di bawah. Terimakasih sudah berkunjung.

Sabtu, 02 Mei 2020

Cara Membuat Tanda Double Click To Select Menggunakan Tag KBD Di Blog Dengan Mudah

lapakinfo.net
Lapakinfo.net - Pada kesempatan kali ini saya akan membuat tutorial yang sering di pakai oleh blogger dengan niche tutorial yaitu Cara Membuat Tanda Double Click To Select Menggunakan Tag KBD Di Blog, cara ini sudah banyak di pakai oleh blogger ternama seperti Arlina, Igniel , dan blogger lainnya. Double click ini berfungsi untuk menandai teks yang kita inginkan hanya dengan klik 2 kali tanpa harus menyeleksinya terlebih dahulu.

Apalagi jika blog kalian menggunakan script anti copy paste dan anti seleksi, dengan menggunakan double click to select ini akan memberikan efek khusus pada text atau kata yang kita inginkan agar dapat mudah di seleksi hanya dengan menggunkan double click to select. Selain itu juga masih banyak manfaat dari menggunakan double click to select ini seperti mempermudah membaca untuk memilih text dalam artikel tersebut tan harus memilih manual dan cukup dengan klik 2 kali saja. Nah, buat kalian yang ingin memasang double click to select di blog kalian bisa ikuti langkahnya di bawah ini.

Cara Membuat Tanda Double Click To Select Menggunakan Tag KBD Di Blog

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>

/* KBD LapakInfo.net */
kbd{position:relative;color:#770e0e;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
kbd:before{
position:absolute;
content:'Double click to select';
display:table;
bottom:23px;
left:0;
background:#1589E3;
color:#fff;
padding:4px;
border-radius:2px;
font-size:75%;
line-height:1;
opacity:0;
visibility:hidden;
transform:scale(0.8);
z-index:2;
transition:all .3s;}
kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

Keterangan.
  • 770e0e Warna text yang ada di dalam kode KBD 
  • 1589E3 Warna yang di tampilkan pada " Double Click To Select " 
 4. Lanjut copy kode di bawah ini dan pastekan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('kbd');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
//]]>
</script>

5. Simpan template kalian.

Cara Menerapkan Double Click To Select Di Blog Agar Aktif

Untuk menerapkanya juga sangat mudah ko, kalian buat postingan baru lalau pilih Mode HTML dan letakan kode di bawah ini kedalam Mode HTML

<kbd>KETIK-TULISAN-ANDA</kbd>

Kalian ganti text KETIK-TULISAN-ANDA dengan teks yang kamu inginkan.

Bagaimana sangat mudah bukan untuk membuat Double Click To Select untuk blog kalian, sekian dulu postingan dari saya tentang Cara Membuat Tanda Double Click To Select Menggunakan Tag KBD Di Blog. Jika ada pertanyaan silahkan berkomentar di bawah ini dan terimakasih atas kunjungannya.

Cara Membuat Menu Slide Navigasi Di Blogger

lapakinfo.net
Lapakinfo.net - Pada kesempatan ini saya akan membuat tutorial yang bisa mempercantik blog kalian dan lebih profesional yaitu Cara Membuat Menu Slide Navigasi Di Template Viomagz. Sebelumnya saya sudah posting tentang Cara Mudah Membuat Menu Navigasi Seperti Igniel Pada Viomagz, sebenarnya cara ini fungsinya sama yaitu membuat menu slide pada blog hanya saja berbeda di jenis tampilan dan warnanya saja dan untuk pemasangannya juga hampir sama.

Menu slide ini hanya akan tampil pada versi mobile saja, memasang menu slide ini sangat cocok buat kalian yang mengutamakan mobile friendly karena dengan memasang menu slide ini pada blog kalian itu bisa menjadikan nilai lebih buat blog kalian dan terlihat lebih profesional, dan yang paling penting bisa mempermudah pengunjung untuk mencari informasi yang terdapat di blog kalian. Cara memasangnya pun cukup mudah, jika kalian mau memasang menu slide ini kalian bisa ikuti caranya di bawah ini.

Cara Membuat Menu Slide Navigasi Di Template Viomagz


1. Buka Blog kalian.
2. Pilih Tema dan pilih Edit HTML.
3. Cari kode <nav id='cssmenu'> jika sudah ketemu hapus kode tersebut hingga berahrian </nav> dan ganti dengan kode di bawah ini.
<!-- menu navigasi header start -->
<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</div>

<!-- menu navigasi header start -->
<ul>
<li><a href='https://www.lapakinfo.net/'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10ZZ'/>
</svg>Beranda</a></li>
<li><a href='https://www.lapakinfo.net/search/label/Blogger' itemprop='url'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>Blogger</a></li>
<li><a href='https://www.lapakinfo.net/search/label/Adsense'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z'/>
</svg>Adsense</a></li>
<li><a href='https://www.lapakinfo.net/p/contact-us.html'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19C21,20.11 20.1,21 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94ZZ'/>
</svg>Guest Post</a></li>
<li><a href='https://www.lapakinfo.net/search/label/Template'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ'/>
</svg>Template</a></li>
</ul>
<!-- menu navigasi header end -->
</nav>

4. Lanjut cari kode .mline1, .mline2, .mline3 { hapus semua kode CSS tersebut lalu ganti dengan kode di bawah ini.

.mline1, .mline2, .mline3 {
position: absolute;
left: 0;
display: block;
height: 2px;
width: 18px;
background: #ffffff;
content: '';
transition: all 0.2s;
}
.mline1 {
top: 1px;
}
.mline2 {
top: 7px;
}
.mline3 {
top: 13px;
}
.button.menu-opened .mline1 {
background: #ffffff;
top: 3px;
border: 0;
width: 13px;
-webkit-transform: rotate(-45deg);
-o-transform: rotate(45deg);
-o-transform: rotate(-45deg);
-o-transform: rotate(45deg);
transform: rotate(-45deg);
}
.button.menu-opened .mline2 {
top: 7px;
left: 2px;
width: 19px;
}
.button.menu-opened .mline3 {
top: 11px;
height: 2px;
width: 13px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
cursor: pointer;
}
#cssmenu .submenu-button::after {
content: "\f0d7";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin: 0 20px;
color: #555555;
line-height: 42px;
}
#cssmenu .submenu-opened::after {
content: "\f0d8";
}
#cssmenu ul ul .submenu-button::after {
line-height: 36px;
}
#cssmenu ul ul ul li.active a{
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
border-top: none
}
}

5. Simpan template kalian dan selesai.


Bagaimana sangat mudah bukan untuk membuat menu slide yang responsive ini, nah untuk hasilnya kalian bisa menekan tombol demo yang ada di atas ( Gunakan mobile anda ). Jika ada pertanyaan silahkan bertanya di kolom komentar di bawah ini. Terimaksih sudah berkunjung.