Posts

Showing posts with the label HTML

Create a Countdown Clock for the purposes of 1 Hour Promo

Image
If you happened to be holding promos and goods and service also aired on the blog, maybe one of the ways to attract the interest of visitors to follow ongoing promo can be tested by adding a countdown. With such expected visitors will jump list or follow the promo because see calculate a pullback so they feel worried not goto the promo hehehe .... For that I find simple countdown with javascript in JSFiddle Snippet . which later became Fox I look H:M:S and add the style as in the Fiddle below. Demo If interested to try it out please use the codes below. 1. Copy the CSS code below and save it in the style of your blog. @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(htt

Multilingual hreflang tag for blogger

Image
Hreflang Attribute The hreflang attribute (also referred to as rel="alternate" hreflang="x" ) discloses to Google which dialect you are utilizing on a particular page, so the web index can serve that outcome to clients seeking in that dialect. Code Sample <link rel="alternate" href="http://example.com" hreflang="en-us" /> What is Rel="Alternate" Hreflang="x"? Presented by Google in December 2011, the hreflang quality enables you to show web indexes what the relationship is between website pages in substitute dialects. It's helpful when you've made substance that is particular to a neighborhood group of onlookers. The hreflang characteristic adds a flag to web crawlers that a client questioning in dialect "x" will need this outcome rather than a page with comparative substance in dialect "y". For instance, in the event that you make a Spanish-dialect adaptation o

Responsive RSS Search Form With Bootstraps 4.0.0-beta

Image
Bootstraps 4, HTML, CSS, dan JS Framework yang paling populer di dunia. Latest Bootstraps 4 CDN Bila Anda hanya perlu menyertakan CSS dan JS Bootstrap yang dikompilasi, gunakan CDN Bootstrap, yang disediakan bebas oleh kawan-kawan Max CDN. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="htt

How to Create Social Share Buttons Without Javascript

Image
If you feel loading a blog a bit heavy or slow, one of the causes is the presence of javascript. Maybe one of them is social share buttons on your blog. Usually we use social share buttons from third parties like AddThis.com and others.Well to reduce the loading loading blog, you can replace this social share buttons with social share button without javascript. This means that share buttons are built using CSS code by including links for sharing articles to social media such as Facebook, Twitter, and Google+. If you are interested in trying to use it, please copy the code below: 1. Social Share Buttons Without Javascript With Images. <b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='border-top:3px solid #ccc; border-bottom:1px solid #ddd; width:100%;height:35px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;

How to Install Advertising Box on Blogger

Image
How to Install Advertising Box on Blog - On this occasion I will discuss about the tutorial to create an ad box on the blog size 125x125 pixels. Maybe you already know that the activities of writing articles on blogs is now no longer just a hobbyist release or fill the void of time. Creating a blog and managing it well and correctly can also produce material in the form of money that most of the bloggers make it as one of the livelihood Displaying or creating ad space in the form of banners on the website / blog is usually used as a separate business opportunity by a blog or website that has many visitors and has popularity in search engines. But do not rule out your new blog can bid by the advertise to put their ads into the blog you have. If you are interested in providing or creating an ad box on a blog, follow the blogger tutorial that I will explain below. I need to say before you make a box de blog ad is a matter to consider in displaying the ad banner space is the loca

Defer Loading File CSS untuk Mengurangi Waktu Pemuatan Halaman

Image
Waktu buka halaman adalah salah satu hal penting bagi pengunjung Anda, dan sama pentingnya bagi mesin telusur. Saat menyertakan beberapa file JavaScript dan CSS , browser harus menunggu sampai semua file tersebut telah diunduh untuk merender halaman. Bergantung pada kecepatan koneksi, diperlukan beberapa detik untuk memuat semua sumber dan pengunjung harus menganggur sampai saat itu. Teknik yang kita bahas di sini akan memungkinkan browser untuk menampilkan halaman HTML awalnya tanpa gaya apapun, sehingga pengunjung setidaknya bisa mulai membaca isinya. Begitu halaman di-load, style sheet akan dimuat dan diterapkan tanpa memblokir thread utama. Ini mirip dengan menunda pemuatan tombol media sosial . Anda mungkin berpikir mengapa seseorang harus mengekspos tampilan halaman yang jelek tanpa memuat gaya! Itu benar, meski itu akan membuat kesan buruk. Jadi, pendekatan terbaik bisa termasuk kode CSS kritis yang diperlukan untuk memberi gaya pada konten paruh atas di halaman HTML i

Cara defer loading multi css

Image
Definisi dan Penggunaan Atribut defer adalah atribut boolean. Saat ini, ia menentukan bahwa skrip dijalankan saat halaman selesai diurai. Catatan: Atribut defer hanya untuk skrip eksternal (seharusnya hanya digunakan jika atribut src ada). Catatan: Ada beberapa cara skrip eksternal dapat dijalankan: Jika async hadir: Script dijalankan secara asynchronous dengan sisa halaman (script akan dieksekusi saat halaman melanjutkan penguraian) Jika async tidak hadir dan menunda hadir: Script dijalankan saat halaman selesai diurai Jika tidak ada async atau defer yang ada: Script diambil dan dijalankan segera, sebelum browser melanjutkan penguraian halaman Nah berikut kode untuk defer loading multiple css : <script type="text/javascript"> var loadCSSFiles = function() { var links = ["//example.com/css/custom.css", "//fonts.googleapis.com/css?family=PT+Sans", "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css&quo

How to Make Colored Recent Post Widget Blogger

Image
This widget supports responsive which will follow the screen size used. For live view of this widget can visit my friend pen below: How, interested to install it on the blog? For my friend who want to install it, I will give the tutorial below How to Make Recent Post Widget Color Go to Blogger > Themes > Click the Edit HTML button Include material icon before </head> like this: <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/> Then add the CSS code below before the code ]]> </b:skin> or </ style> .gravityfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px} .gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%} .gravfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);op

Kode Recommend Dan Comments Facebook Based JavaScript

Apakah fungsi plugin komentar Facebook untuk website ? Plugin Komentar Dengan plugin komentar, orang dapat mengomentari konten di situs web Anda menggunakan akun Facebook mereka. Orang-orang juga bisa memilih untuk berbagi aktivitas komentarnya dengan teman-teman (dan teman dari teman mereka) di Facebook. Plugin komentar juga termasuk alat moderasi bawaan dan peringkat relevansi sosial. Dan apakah fungsi tombol suka/recommend di Website ?. Tombol Suka untuk Web Satu klik pada tombol Suka akan 'menyukai' beberapa bagian konten di web dan membagikannya di Facebook. Anda juga dapat menampilkan tombol Bagikan di samping tombol Suka untuk memungkinkan orang menambahkan pesan pribadi dan menyesuaikan dengan siapa mereka akan membagikan. Nah berikut kode lengkap untuk website berbasis javascript: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.

Memasang komentar facebook di Blogger​ AMP

Image
Blogger AMP Tutorial Parts Memasang Komentar Facebook di blogger AMP Berikut tutorial nya: Silahkan copy kode HTML ini.             <b:includable id='fb-comment' var='post'> <div class='fb-comments' id='fb_comments'> <amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'> </amp-facebook-comments> </div>             </b:includable> Jika background Blog Anda putih, hapus kode data-colorscheme='dark' Kemudian simpan kode HTML tadi di bawah kode berikut: <b:includable id='comments' var='post'> ............ ............ ............ </b:includable> Sehingga penampakannya seperti berikut: <b:includable id='comments' var='post'> ............ ............ ............ </b:includable>             <b:includabl

Create Awesome Shadow Effect Using HAML and LESS CSS

How to Create Awesome Shadow Effects Using HAML (HTML Processor) and LESS CSS (Preprocessor) HAML Code %h1.elegantshadow Elegant Shadow %h1.deepshadow Deep Shadow %h1.insetshadow Inset Shadow %h1.retroshadow Retro Shadow LESS CSS Code /*CSS RESET 2.0 */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}tab

Kerangka dan Platform Mobile Terbaik untuk Aplikasi HTML5 Hybrid

Image
Beberapa waktu yang lalu, saya masuk ke pengembangan aplikasi seluler menggunakan HTML5 dan PhoneGap. Ini adalah solusi bagus untuk membuat aplikasi untuk iOS dan Android saat mengkodekan dalam HTML, CSS, dan JavaScript.   Hari ini, kita memiliki lebih banyak pilihan di ruang ini.   Ada banyak kerangka kerja untuk membangun aplikasi seluler dan ada juga beberapa platform yang mengemas kode tersebut ke aplikasi yang dapat digunakan dan bahkan menyediakan hal-hal seperti monetisasi, analisis, dan pengujian. Hari ini, saya akan menganalisis ruang pengembangan mobile dan membahas  kerangka kerja mobile terbaik dan platform lintas perangkat untuk membangun dan menerapkan aplikasi mobile hibrida  . Aplikasi hibrida dibuat di sekitar wadah tampilan web asli atau mereka memanfaatkan alat lintas platform yang membuat aplikasi asli.   Karena WebView asli pada dasarnya adalah peramban web tertanam di dalam aplikasi, Anda dapat berfokus hanya pada pembuatan laman web dan platform tersebut aka