Posts

Showing posts with the label Blogger

Responsive AMP Social Sharing Button

Image
I also share responsive AMP social sharing buttons for Blogger AMP HTML. Responsive AMP social sharing button is quite complete ie the share button for Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, Whatsapp, SMS, and Email, Adding BBM and Whatsapp Here Tutorial . If you want to try installing it yourself, please follow the steps below. Please save the js amp-social-share code above </ head> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/> </b:if> Then add this Css into your Template. /* Social Share */ .sharethis{position:relative;margin:20px 0;padding:0;font-size:0} .sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inli

How to create sticky widget on sidebar blogger

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 ($(&#

Simple Recent Posts Blogger Plus Thumbnails

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-

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

Tutorial Membuat Blogspot Safelink Converter Work 100%

Image
Dikesempatan kali ini saya bakal* share Tutorial Membuat Blogspot Safelink Converter Work 100%. Apa blog safelink converter tersebut* ?? Yaitu blog guna* mengkonversi atau menciptakan* encypted link untuk seluruh* link dari suatu* blog supaya* link-link itu* menjadi aman dengan dikonversi menjadi base64. Dan andai* ada pengunjung yang meng-klik link itu* maka pengunjung bakal* dibawa ke halaman redirect safelink converter guna* mendapatkan link aslinya. Untuk* sobat yang memiliki* blog download sobat dapat* membuat blog safelink ini guna* mendapatkan pendapatan* tambahan dari iklan yang sobat pasang. Berikut Tutorial Membuat Blogspot Safelink Converter Work 100%, simak baik" dengan teliti tutorial ini: Pertama silakan bikin* blog baru dan ganti template Kompi-ajaib Safelink Converter download Disini .Upload Ke Blog Baru kamu. Lalu edit HTML lewat blogger. Langkah-langkah Build Safelink Converter (Jika sobat memakai* domain TLD (misalnya: domain.com, domain.net, domain.org) si

Widget untuk meningkatkan traffic blogger

Hari ini saya akan share widget untuk meningkatkan traffic blog setiap harinya. Script ini bertujuan agar webcrawler ikut membuat tester untuk website anda. Ga pake lama ikuti tutorial dibawah ini: 1. Buka dashboard blogger --> Layout --> Cari mau dibagian manakah yang ingin anda tambah kan widget ini. Saran saya sih di footer atau sidebar. --> add widget html/javascript --> masukkan kode berikut ini: <script async='async' type="text/javascript"> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } var ref = getQueryVariable("target"); //add target= in last iframe source var url = window.location.href; var host = window.location.hostname;   document.write('<a target="_blank" href="https://geo

Cara Simple Membuat Blogger Safelink Converter 2017 100% Work

Image
Kali ini saya akan share bagaimana cara simple membuat Blogger Safelink Converter. Requirements: jQuery Library Tentunya blog. Bisa semua macam jenis blog. Fitur: Membuat semua external link menjadi redirect ke halaman Safelink Converter. Meningkatkan Traffic blog Cocok buat blog yang bertema download. Tutorial: Pembuatan Halaman Statis untuk Safelink Redirector. Buat Halaman/Page Baru untuk Safelink redirector ( Masuk Dashboard blogger -> Pages -> Add New). Isi title halaman Safelink redirector sesuai keinginan anda. Contoh -> https://web-manajemen.blogspot.com/p/redirect.html Isi body halaman anda sesuai keinginan anda.  URL halaman Safelink Redirector kamu akan sama dengan nama judul halaman Safelink Redirector kamu (misal: Title= Link Redirector maka URL nya= link-redirector.html jadi full URL nya= http://namaBlog-Kamu.blogspot.com/p/link-redirector.html). (Jangan di save dahulu halamannya, ikuti dulu tutorial ini sampai selesai). Ok. Bagian hal

AMP-Accordion Modification Being an AMP HTML Blog Spoiler

Image
Problem: U nfortunately for AMP HTML still has 1 deficiency that is  -img  not appear in spoiler unless spoilernya open first.  This means that  amp-img  can not be stored in a  div  that has a  display: none;  style  display: none;   Except by using an  amp-accordion  .   For that, this time we will modify the amp-accordion to  spoiler for AMP HTML blog  so it is safer to use (can display image inside spoiler).   Demo spoiler below: (Demo  only, no live) Spoiler: Hint <div class="spoiler-amp">  <span class="spoiler_title">Spoiler: </span>  <amp-accordion>  <section>  <h4>Hint</h4>  <div><p>  Simpan konten atau gambar (amp-img) di sini ....  </p></div>  </section>  </amp-accordion>  </div>  Spoiler: Hint Equation billions upon billions!   Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death.   Light years incon

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;

Dapatkah Anda Mendapatkan Persetujuan AdSense dengan Situs Subdomain?

Image
Saya telah mengajukan pertanyaan ini berkali-kali bahwa " Dapatkah saya mendapatkan persetujuan Adsense dengan Subdomain? " Sebelum kita menyelami jawabannya disini beberapa informasi tentang Subdomain. Subdomain: subdomain adalah domain yang merupakan bagian dari domain tingkat atas. Misalnya, Blogspot.com adalah domain tingkat atas dan yourdomain.blogspot.com adalah subdomain. Subdomain bisa dua jenis yaitu subdomain dari domain sendiri dan subdomain dari domain pihak ketiga. Jika Anda menggunakan subdomain Anda sendiri dan Anda telah menyetujui akun AdSense maka Anda dapat menempatkan kode Adsense di subdomain Anda. Tapi pastikan konten situs subdomain Anda sesuai dengan AdSense. Sekarang pindah ke nama domain pihak ketiga seperti Blogspot.com, WordPress.com dll Jadi pertanyaan kita adalah " Apakah Google menyetujui iklan Adsense untuk situs subdomain? " Jawabannya adalah YA . Jika Anda menggunakan Blogspot atau Weebly. Blogspot juga merupakan layana

How to Modify Blogger Share Button Tweak Valid HTML5 CSS3

Image
Actually Blogger has been updating its share button quite a bit by adding Pinterest button.   But just now I am thinking of making it valid HTML5 and CSS3. At some time ago I have made a post about Blogger share button but still without the Pinterest button because at that blogger has not updated its share button so that it appears only 4 buttons added by G + key. Well this time there is a different from the previous post.   Besides now there is Pinterest button, I also will bring up the Orkut button.   In the previous post I also can not display the default button Blogger share button on the template using  CSS Reset Blogger Tweak  .   But at that time I outsourced it by making its own sharenya button to be displayed in a template that already uses a trick to hide CSS Reset Blogger. Well this time I use a different way to make Blogger share button is valid HTML5 and CSS3 and can be used in the default template Blogger, custom templates, and templates that use the trick

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

Update Code Auto Syntax Highlighter Prettyprint js

Image
Jumpa lagi dengan topik JavaScript Dan jQuery. Sebelumnya saya sudah share Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading website 100% Work Tested , namun kali ini saya improvisasi codenya jadi lebih ringan dan simpel. Note: Taruh kode dibawah ini diatas </body></html> //Defer Syntax Higlighter function downloadJSAtOnload() { (function(scripts) { var i = 0, l = scripts.length; for (; i<l; ++i ){ var element = document.createElement("script"); element.src = scripts[i]; document.body.appendChild(element); } })(['https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst']); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; $("pre&q

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