Posts

Showing posts with the label JS

Random Posts Widget Blogger

By Anonymous -
Image
How to create random posts widget blogger (simple and stylish). 1. Login to dashboard blogger -> navigate to layout tab -> create widget html/javascript -> insert this code to the widget. <style scoped='' type="text/css"> #arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} #arlina-random li:last-child{border-bottom:0;} #arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline} </style> <div id='arlina-random'>Memuat...</div> <script> //<![CDATA[ // Random Post Widget var homePage = ' https://www.web-development.cf ',     maxResults = 10 ,     containerId = 'arlina-random'; function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffleArray(arr) {     var i = a
Post a Comment
Read more

Powerful Ways to Remove Active Links in Blog Comments

By -
Image
Link is active in the comment, what does it mean? An active link is a link that contains hyperlinks to point to a specific page or site.Means if combined, the meaning of the active link in the comment is the active link in the comment. Usually embedded by other blogger people or admins in the comments column as a response to the article in a blog post. If there is an active link, is there any inactive link? Correct. Inactive links mean the opposite of active links. Physically, an inactive link when clicked using a mouse will not generate a new page. In contrast to active links. Clicking will redirect to a specific page according to the URL embedded in it. Backlink effect The blog walker or admin term used to make comments on other blogs, usually aim to get backlinks. They then insert a link to his blog on the comments they wrote. In addition, he also hopes to get a response from people who visit the blog. Why was it removed Then why do active l
Post a Comment
Read more

SCSS Animate Hover Scale Letters

By -
Demo HTML Full Page <!DOCTYPE html><html><head> <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet" /> <style>html, body { height: 100%; } body { background: #e74c3c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'Passion One', cursive; } .scale { font-size: 10vw; text-transform: uppercase; letter-spacing: 4px; color: #fff; cursor: pointer; } .scale span { display: inline-block; -webkit-transition: -webkit-transform 0.1s; transition: -webkit-transform 0.1s; transition: transform 0.1s; transition: transform 0.1s, -webkit-transform 0.1s; } .scale span:hover { -webkit-animation: rotate-scale-up 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; anim
Post a Comment
Read more

Hiding javascript to increase blogger blog speed

By Anonymous -
Image
Me often find comments on blogs Mascots inquiring about blogger widgets that can not be performed, such as the blog's stat widgets and more. Well that's because Maskolis add a code that hides JavaScript Widget widget Blogger so that all bloggers are using JavaScript automatically become unworkable. It turned out that this is done in order to speed up the loading of the blog. With the existence of this code, the browser can not recognize native JavaScript code Blogger.As we have seen, that the amount of JavaScript code in the blog, the more burdensome loading the blog. Perhaps some of you ask what the hell that Blogger Widget Javascript? If you look at the page source of your blog as CTRL + U, then you will see at the bottom of the HTML template you like the code below. <
Post a Comment
Read more

How to create blogger sitemap per tables 100% Worked

By Anonymous -
Image
Stylish blogger sitemap per tables Tutorial Create Blogger Sitemap Per Tables: Open dashboard blogger. Navigate to pages tab Create New Page Enter the code below in html editor mode <div-wrapper id='wrapper'><div-wrapper dir="ltr" style="text-align:left;" trbidi="on"><div-wrapper class="table-of-content" id="table-of-content"><div-wrapper class="loading"><img class='loading' src='https://res.cloudinary.com/dimaslanjaka/image/fetch/http://www.amcsscentry.gov.in/asset/images/please_wait.gif'></div-wrapper></div-wrapper></div-wrapper><div-wrapper><script async='async' custom-element='div-wrapper' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <link href='https://codepen.io/dimaslanjaka/pen/eWWzrL.css' rel='stylesheet'> <style type="text/css&q
Post a Comment
Read more

How To Create a Blogger Contact Popup Comes With Google Maps

By -
Image
The function of the contact form on a blog is to make it easier for blog visitors to contact the blog admin.   Blogger itself has provided a contact form that is already connected with the Gmail account admin blog.   Well this time I will share how to create a contact form Blogger popup with Google Maps equipped, so this (Google Maps) will be more to give visitors trust to the blog admin, especially if the blog is used for business or online store.   Visitors or consumers will be more confident because the business location is clear.   DEMO Please try on the menu " Contact " Interested to try it?   Please follow the steps below.   The first thing to do is to register your business location on Google My Business by storing our business location on Google Maps.   If you have not yet saved your business location on Google Maps, please follow the following tutorial:   How to Spot Your Places In Google Maps   And it will be better, verify also where your business is
Post a Comment
Read more

Cara convert HTML ke Javascript document.write otomatis

By Anonymous -
Image
Bagaimana cara convert HTML ke Javascript document.write secara otomatis Biasanya orang yang membuat website atau blog yang menggunakan fitur javascript biasanya bingung dalam membuat LIKE BOX maupun SOCIAL SHARE BOX untuk website nya. Agar tombol like atau share dapat tepat merujuk like atau share terhadap artikel yang dikunjungi visitor. Nah berikut cara nya: 1. Masuk ke website berikut ini : HTML to Javascript Converter 2. Copy Kode HTML yang anda ingin terapkan dalam penerjemahan javascript. Kemudian paste Kode HTML tersebut ke dalam box yang sudah di sediakan. Kemudian klik Convert to javascript syntax . Selesai. HTML anda sudah siap untuk di terapkan di javascript untuk di print secara dinamis.
Post a Comment
Read more

Javascript detect bot crawler

By -
Image
function botCheck(){ var botPattern = "(googlebot\/|Googlebot-Mobile|Googlebot-Image|Google favicon|Mediapartners-Google|bingbot|slurp|java|wget|curl|Commons-HttpClient|Python-urllib|libwww|httpunit|nutch|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|biglotron|teoma|convera|seekbot|gigablast|exabot|ngbot|ia_archiver|GingerCrawler|webmon |httrack|webcrawler|grub.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|bibnum.bnf|findlink|msrbot|panscient|yacybot|AISearchBot|IOI|ips-agent|tagoobot|MJ12bot|dotbot|woriobot|yanga|buzzbot|mlbot|yandexbot|purebot|Linguee Bot|Voyager|CyberPatrol|voilabot|baiduspider|citeseerxbot|spbot|twengabot|postrank|turnitinbot|scribdbot|page2rss|sitebot|linkdex|Adidxbot|blekkobot|ezooms|dotbot|Mail.RU_Bot|discobot|heritrix|findthatfile|europarchive.org|NerdByNature.Bot|sistrix crawler|ahrefsbot|Aboundex|domaincrawler|wbsearchbot|summify|ccbot|edisterbot|seznambot|ec2linkfinder|gslfbot|aihitbot|intelium_bot|facebookexternal
Post a Comment
Read more

(FontAwesome) CSS3 Text Animation

By -
Image
Text Animation CSS and FontAwesome Import font-awesome from cdn ->  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css CSS: @import url('https://fonts.googleapis.com/css?family=Anton|Roboto'); .word { font-family: 'Anton', sans-serif; perspective: 1000px; perspective-origin: 200px 40px; } .word span { cursor: pointer; display: inline-block; font-size: 100px; user-select: none; line-height: .8; } .word span:nth-child(1).active { animation: balance 1.5s ease-out; transform-origin: 0% 100% 0px; } @keyframes balance { 0%, 100% { transform: rotate(0deg); } 30%, 60% { transform: rotate(-45deg); } } .word span:nth-child(2).active { animation: shrinkjump 1s ease-in-out; transform-origin: bottom center; } @keyframes shrinkjump { 10%, 35% { transform: scale(2, .2) translate(0, 0); } 45%, 50% { transform: scale(1) translate(0, -150px); } 80% { transform: scale(1) translate(0, 0); } } .word span:n
Post a Comment
Read more

(SCSS) Responsive Menu Hover Effect

By -
Responsive Menu Hover Effect : Call jquery library -> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async'></script> SCSS -> @import url("https://fonts.googleapis.com/css?family=Anton|Josefin+Sans"); ::-webkit-scrollbar { width: 10px; height: 10px; background-color: white; border-top: 1px solid #000; } ::-webkit-scrollbar-thumb { background-color: #1a1a1a; height: 5px; } * { box-sizing: border-box; } /*html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; background: #000; } .page { width: 720px; float: left; position: relative; left: 50%; margin-left: -360px; padding: 10px; } .page h1, .page p { float: left; width: 100%; color: #fff; font-family: 'Josefin Sans', sans-serif; } .page h1 { text-transform: uppercase; margin-top: 115px; text-align: center; letter-spacing: 10px; } .page p { line-height: 20pt; font-size: 14pt
Post a Comment
Read more

How to create sticky widget on sidebar blogger

By Anonymous -
Image
In the previous article I once shared a tutorial on Installing Sticky Functions On Blogger Widgets , this time I will share a tutorial with the same function that is to make a particular widget sticky or float following the page when scrolled down and up. This tutorial is an improvement as well as answering your comment from the previous tutorial which when the page is scrolled down sticky widget will pass the Footer Wrapper and it will be a bit annoying because it blocks the widgets that are installed in the Footer area. I will share this code more suitable to be installed on all content in Sidebar or can also be installed on one particular widget. For buddy who want to try it, please follow tutorial  How to Make Sticky Widget in Sidebar Blog . How to Create a Sticky Widget in Blog Sidebar 1. Login to Blogger --> Go to Template editor -->  Put below script before </body> tag <script type='text/javascript'> //<![CDATA[ $(function() { if ($(&#
Post a Comment
Read more

Cara menambah query di html image source

By -
Image
Cara menambahkan query di source image. Di World Wide Web , Query String adalah bagian dari uniform resource locator (URL) yang berisi data yang tidak sesuai dengan struktur jalur hierarkis. Query String umumnya mencakup bidang yang ditambahkan ke URL dasar oleh browser Web atau aplikasi klien lainnya, misalnya sebagai bagian dari bentuk HTML. Server web dapat menangani permintaan Hypertext Transfer Protocol baik dengan membaca file dari sistem file berdasarkan jalur URL atau dengan menangani permintaan menggunakan logika yang spesifik untuk jenis sumber daya. Dalam kasus di mana logika khusus dipanggil, string kueri akan tersedia untuk logika tersebut untuk digunakan dalam pemrosesannya, bersama dengan komponen jalur URL. Nah bersangkutan dengan artikel sebelumnya: Membuat semua link dan source html http menjadi https . Kali ini saya akan share bagaimana cara menambah Query String Atau Back Query di html source image. Berikut kode untuk menambah Query String di html image sou
Post a Comment
Location: (balai, Jl. Peneleh, Alun-alun Contong, Bubutan, Kota SBY, Jawa Timur 60274, Indonesia
Read more

Simple Recent Posts Blogger Plus Thumbnails

By -
Image
Installing a recent post widget is one way to minimize bounce rate blog by providing information for the latest posts on readers. With so readers will easily find the most warm posts on the blog. Many kinds of recent post widgets like recent posts or recent carousel shaped posts. Well this time I will share a blogger widget recent posts are quite simple and stored in the sidebar blog. In addition to simple, recent posts widget has a fairly light loading, so you need to try also hehehe ... Demo If you are interested to try it, please follow the steps below. Please save the following CSS code above </head> code (you may need to customize some sections to customize it to the theme you are using). <style> /*<![CDATA[*/ ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none} ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-
5 comments
Read more