Membuat Popular Post Grid Style dengan Thumbnail di Blog

Assalmualaikum Wr,Wb Salam Blogger Kali ini CrepictDGZ dan PazBlog yang masih dibawah satu bendera Admin ingin berbagi tutorial Cara Modifikasi Popular Post Blogger menjadi GRID style ( seperti pada gambar ). Widget Popular Post ini menampilkan postingan yang banyak dilihat (view oleh pengunjung ). Ukuran popularitas sebuah post ditentukan oleh seberapa sering post itu dibaca oleh pengunjung blog Sobat.

Popular Post adalah widget yang disediakan oleh Blogspot atau Blogger dengan kondisi default ( bawaan ), terkadang kita jenuh dengan tampilan yang itu itu saja dan bagi seorang NEWBIE tak ada yang bisa dilakukan  dengan tampilan tersebut selain menerima apa adanya.

Kita bisa memodifikasi tampilan Popular Post menjadi efek grid thumbnail, yaitu thumbnail dari post tersebut dibuat berjejer, seperti galeri gambar atau foto. Intinya widget modifikasi  ini bisa memberikan nuansa berbeda pada pembaca blog, untuk melihat post-post yang populer di blog kita.

Cara Modifikasi Widget Popular Post GRID style di Blog :

1. Silahkan masuk LAYOUT/Tata Letak >> Popularpost

2. Setelah muncul popup dari Widget Popularpost silahkan setting seperti gambar dibawah ini

3. Kemudian tekan SAVE/Simpan

Nah… sampai disini langkah editing untuk Widget Popularpost sudah selesai, sekarang kita akan menerapkan kode CSS kedalam Edit HTML Blog agar tampilan Widget Popularpost berubah menjadi GRID style.

Membuat Popular Post Grid Style dengan Thumbnail di Blog

1. Silahkan masuk ke Blogger >> Theme/Tema >> Edit HTML

2. Cari kode CSS dari Widget Popularpost yang sebelumnya terpasang pada template Sobat. Biasanya seperti ini #Popularpost atau .Popularpost atau #Popularpost1 gunakan Ctrl+F untuk mempercepat pencarian kodenya. Biasanya tampilannya kode CSS nya akan tampak atau umumnya seperti dibawah ini

3. Jika sudah ketemu hapus seluruh kode CSS tersebut. Lalu ganti dengan kode CSS dibawah ini

/*CSS Popular Posts */
.sidebar .popular-posts ul {counter-reset: popcount;margin: 0;padding: 0;}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {font-family:'Roboto','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif;height: 130px;list-style: none !important;overflow: hidden;padding: 0 !important;position: relative;margin: 2px;border: 0;width: 48%;float: left;}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts .item-thumbnail :after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:135px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49wOBmFcSB9Kx69Aaq_I5FqXDl8hpIhEqtUD5w6-iUzn2Sm4CnoKNgKzD-YVpfw7z2Z3WdY56ALbl4xl3kcBccOqlHo-N7BVW5MHEoWkH7DWmGnbqy3waQ9X_wVHyygl5cnzWOPFJgps/s1600-r/metabg.png) repeat-x;opacity:.8;background-size:100% 100%;overflow:hidden}
.sidebar .PopularPosts ul li img {display: block;float: left;padding: 0;width: 100%;height:135px;-webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/-moz-transition-duration: 1.0s; /*Mozilla Animation duration*/-o-transition-duration: 1.0s; /*Opera Animation duration*/transition:1.0s;}}   
.sidebar .PopularPosts ul li img:hover {-webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/-moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/-o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/transform:scale(1.06);overflow: hidden;}
.sidebar .PopularPosts .item-title {bottom:0;left: 0;right: 0;padding-bottom: 0;position: absolute;z-index: 999;}
.sidebar .PopularPosts .item-title a {background:none;color: #FFFFFF;display: block;font-size: 12px;text-align:center;line-height: normal;padding:5px 5px 10px 5px;text-transform: capitalize;transition: all .4s ease-in-out;}
.sidebar .popular-posts ul li:hover .item-title a {color: rgba(255, 255, 255, 1);background:none;text-decoration: none;}
.sidebar .popular-posts ul li:before {background: rgba(255, 252, 8, 1);color: #000;content: counter(popcount, decimal);counter-increment: popcount;font-size: 14px;line-height: 20px;list-style-type: none;padding: 3px 8px;position: absolute;top: 10px;left:110px;z-index: 4;}

4. Jika sudah selesai SIMPAN/SAVE. Dan lihat hasilnya…

Terkadang ada sedikit masalah terkait penggantian CSS Widget Popular Post diatas karena beberapa template ada perbedaan pada tag kodisional, namun jangan patah semangat semua bisa diatasi…

Bagaimana jika Gambar thumbnail Widget Popularpost Blog Buram atau Blur ?

Wah ….bisa puanjang nich tutorial, tapi jangan kuatir Admin sudah menyiapkan solusi dan tutorial jika terjadi BLUR atau BURAM pada gambar Widget Popularpost .

Silahkan baca : Cara Atasi GambarBuram/Blur pada Widget Popularpost

Demikian Tutorial Membuat Popular Post Grid Style dengan Thumbnail di Blog. Jika terjadi masalah atau kendala Sobat bisa menghubungi Admin lewat Contact Form yang sudah disediakan.

Terima Kasih semoga bermanfaat….

Cara Membuat Kotak Kode Script untuk Posting Blog

Tutorial kali ini cocok bagi Sobat Blogger yang suka berbagi kode semacam HTML,CSS,Javascript,jQuery pada posting Blognya. Sebenernya cara yang akan saya berikan ini tidak jauh beda dengan pembuatan Synthax Hightlighter yang sudah umum kita temukan tutorialnya.

Namun kali ini saya membuat kotak kode yang lebih sederhana ( simple precode disertai seleksi ) dan memiliki fungsi yang sama dan tampilan yang tidak kalah menariknya di banding Synthax Hightlighter .

Pada konsepnya simple precode ini sama fungsinya dengan Synthax Hightlighter. Langsung aja kepada tahan dan proses pembuatan simple precode dengan seleksi. Sobat bisa melihat DEMO dibawah ini

Demo
Click here

Cara Membuat Simple precode dengan seleksi

1. Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin>  atau </style>

/* CSS Simple Pre Code */
pre {background: #fff;white-space: pre;word-wrap: break-word;overflow: auto;}
pre.code {margin: 20px 25px;border: 1px solid #d9d9d9;border-radius: 2px;position: relative;box-shadow: 0 1px 1px rgba(0,0,0,.08);}
pre.code label {font-family: sans-serif;font-weight: normal;font-size: 13px;color: #444;position: absolute;left: 1px;top: 16px;text-align: center;width: 60px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;pointer-events: none;}
pre.code code {font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display: block;margin: 0 0 0 60px;padding: 15px 16px 14px;border-left: 1px solid #d9d9d9;overflow-x: auto;font-size: 13px;line-height: 19px;color: #444;}
pre::after {content: "double click to selection";padding: 0;width: auto;height: auto;position: absolute;right: 18px;top: 14px;font-size: 12px;color: #aaa;line-height: 20px;overflow: hidden;-webkit-backface-visibility: hidden;transition: all 0.3s ease;}
pre:hover::after {opacity: 0;visibility: visible;}
pre.code-css code {color: #0288d1;}
pre.code-html code {color: #558b2f;}
pre.code-javascript code {color: #f57c00;}
pre.code-jquery code {color: #78909c;}

2. Berikutnya simpan script di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
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>

Script di atas berfungsi untuk menyeleksi otomatis setiap pengunjung blog Anda  melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

3. Setelah itu simpan template.

Cara penerapan pada postingan Blog

Silakan tambahkan kode di bawah ini pada tab HTML post

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Demikian Tutorial Cara penerapan Simple Pre Code dengan Seleksi pada Posting Blog.

Dan apabila Sobat mendapati kendala silahkan tulis kendala/problem pada kotak komentar dibawah….

Semoga bermanfaat.

Cara Menampilkan tombol Pin It ( Pinterest ) pada Gambar Blog

Salam Blogger, Ok kali ini CrepictDGZ akan memerikan tips cara menampilkan tombol Pin It (Pinterest ) otomatis ketika gambar blog disentuh.

Demo Click here

Fungsi dari tombol Pin It ini adalah untuk membagikan gambar blog kita secara langsung ke akun Pinterest milik pengguna atau pengunjung Blog, yang secara otomatis Artikel blog kita di share ke dalam Akun Pinterest pengunjung Blog. Cara kerja dari Tombol share Pin It ini yaitu tombol akan muncul saat sobat memfokuskan kursor pada setiap gambar di dalam blog.

Bagaimana Cara Menampilkan Logo Pin It pada Gambar Blog ?

Sebenernya caranya amat sangat simple dan sederhana, Sobat cukup menambahkan kode dibawah ini sebelum kode </body>

<script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>

Kemudian Save atau Simpan Template…… Selesai

Selamat mencoba semoga bermanfaat….

Cara Sederhana Mempercepat Loading Blog

Banyak dari sahabat Blogger yang mengeluhkan lambatnya proses loading blog ketika di akses, bahkan ketika di test pada Speed page insight Google juga dapat skor yang tidaK MEMUASKAN.

Umumnya masalah yang terjadi adalah terlalu banyakknya template dengan Javascript, CSS, dan Widget Bundle bawaan Blogger. Kebanyakan  pengguna tidak sadar dengan memasang terlalu banyak widget yang didalamnya menyimpan ( CSS dan Javascript ) sebenernya berpengaruh besar terhadap loading Blog ketika di akses.

Dibawah ini adalah contoh link Javascript Bundle dan CSS Bundle bawaan yang sebenernya kita tidak begitu butuh namun terpasang pada template ber-platform blogspot.

<!-- dibawah ini contoh link yg memperlambat loading blog -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>

<script type='text/javascript' src='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-widgets.js'></script>

<link href='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-css_bundle_v2.css' rel='stylesheet' type='text/css'/>

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=33xxxxxxxx=33xxxxxxxx8'/>

Bagaimana Cara Hapus JS, CSS, Bundle dan Widget Bundle di Blogger

Silahkan masuk ke Akun Blogger >> Theme >> Edit HTML.

Silahkan cari kode <head> silahkan ganti dengan kode dibawah ini

&lt;!--<head>--&gt;&lt;head&gt;

Silahkan cari kode </head> kemudian ganti dengan kode dibawah ini

&lt;!--</head>--&gt;&lt;/head&gt;

Lanjut cari kode <body> .Kemudian ganti dengan kode sperti dibawah inisilahkan ganti dengan kode dibawah ini

&lt;!--<body>--&gt;&lt;body&gt;

Lalu cari kode </body>  silahkan ganti dengan kode dibawah ini

&lt;!--</body>--&gt;&lt;/body&gt;

Kemudian cari kode <b:skin><![CDATA[  lalu ganti dengan kode dibawah ini:

<style type="text/css">
&lt;!-- /*<b:skin><![CDATA[

Simpan template

Bagaimana cara cek hasilnya ?

1. Silahkan tulis atau copy pastekan link ini : view-source:http://nama-blog-anda.blogspot.com/ pada address bar ( browser anda ) lalu tekan enter. Untuk nama-blog-anda silahkan ganti dengan URL blog milik anda yaaa….

2. Silahkan scroll kebawah dan lihat hasilnya kode Javascript, CSS, dan Widget bawaan Blogger berubah menjadi warna hijau.. Kode yang berwarna hijau tersebut akan dianggap sebagai HTML comment tag dan tidak lagi dieksekusi sebagai script.

3.Untuk cek Speed loading Blog silahkan cek disini

Selesai, semoga bermanfaat.....

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

CrepictDGZ berbagi lagi, kali ini saya akan memberikan Tips Cara Mempercepat Loading Blog dengan menggunakan Ikon SVG. Selama ini Fontawesome adalah ikon yang umum digunakan dalam setiap desain template ( termasuk desain saya sendiri ) hehehehe… ntar ja templatenya diupdate, maklum lagi sibuk kerja.

Namun ada sisi yang kurang enak dengan memasang FontAwesome yaitu memperlambat loading blog. Karena dengan menggunakan  Font Awesome template harus manggil script sebelum menampilkan Ikon FontAwesome. Pemanggilan script eksternal jadi salah satu point penting yang perlu dipertimbangkan bagi pengguna platform Blogger yang tidak bisa mengatur cache dan expired header. FontAwesome memang tak memperlambat blog secara signifikan, namun untuk test page speed loading akan berdampak pada score saat dilakukan test seperti di GTMetrix atau Google Page Speed Insight dll.

Dari judul diatas berarti Anda harus mengganti penggunaan Ikon FontAwesome yang sebelumnya terpasang di Blog dengan SVG ikon.

Contoh HTML script Font Awesome yang terpasang di template seperti dibawah ini :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Dan Anda wajib menghapus kode diatas jika sudah mempergunakan SVG Ikon.

Bagaimana Cara Memasang Ikon SVG di Blog ?

Kita harus masuk ke situsnya untuk mendapatkan Ikon SVG yang akan kita pasangkan di Blog. Silahkan masuk ke  Material Design Icon. Disini Anda bisa milih berbagai jenis icon SVG yang akan kita pasangkan di Blog dengan mengambil kodenya untuk dipasangkan pada template blog.

Silahkan klik pada ikon yang dipilih. Pilih toggle kode '</>' lalu pilih view SVG maka akan tampil kotak dengan kode seperti di bawah ini sebagai contoh saya akan mengambil ikon Account-Multiple.

Kemudian simpan kode SVG di atas pada Edit HTML template. Saya akan contohkan misalnya Anda ingin mengganti  ikon "account" pada link profil ( yang masih menggunakan FontAwesome ) di rubah ke SVG ikon Account-Multiple seperti .

Pada umumnya kode HTML ikon link profile adalah seperti dibawah ini

 <span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
               <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                        <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </span>

Setelah Anda tambahkan Kode dari SVG ikon akan tampak seperti dibawah ini 

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Pastekan dibawah kode SVG ikon -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG ikon -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Supaya gambar SVG pas ukuran baik tinggi dan lebarnya di Blog, maka kita pindahkan inline style-nya style="width:24px;height:24px" dan fill="#000000" ke dalam style CSS menjadi seperti dibawah ini

.post-author svg {width:24px;height:24px;}

Dengan menghapus inline style dan menggantinya dengan kode CSS di atas diharapkan kita bisa dengan mudah mengatur besar kecil ukuran ikonnya.

Dan jika ingin mengganti warna ( fill="#000000" )  pada ikon-nya, kita gunakan css berikut.

.post-author svg path {fill: white;}

Penting : Jika Anda sudah menambahkan style CSS seperti diatas, maka kode HTML SVG ikon diatas harus di revisi/ganti ( lihat HTML SVG ikon langkah sebelumnya diatas ). Maka perubahannya adalah seperti dibawah ini

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Jika sudah memasang kode style CSS kode SVG seperti ini -->
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG  -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Demikian Tutorial Cara Menggunakan Ikon SVG untuk Mempercepat Loading Blog, meski mungkin sulit dipahami bagi Sahabat Newbie namun belajar dari kesalahan adalah cara bagaimana agar kita tahu dan menemukan cara yang benar.

Sekian dan Semoga bermanfaat…

Membuat Tombol Download dengan Countdown Timer Responsive

Salam Blogger, CrepictDGZ kali ingin berbagi tips bagaimana cara membuat tombol download dengan disertai countdown timer ( hitung mundur ). Maksud dari countdown timer disini adalah hitungan mundur setelah tombol download di klik, sebelum menuju ke link download yang sebenernya…nanti bisa dilihat demonya biat lebih jelas.

Keuntungan dari countdown timer adalah membuat space waktu kepada pengunjung selama 10 detik, tentu waktu ini akan memberikan sedikit peluang kepada Adsense ( iklan ) yang ada di Blog kita.

Lebih cocok tombol semacam ini dipasang pada Blog Download Software atau bagi-bagi Aplikasi Andoid.

DEMOBLOG – DEMO on Codepen

Membuat Tombol Download dengan Countdown Timer Responsive

1. Silahkan masuk ke Akun Blogger Sobat lalu masuk ke menu Tema >> Edit HTML

2. Simpan kode dibawah ini sebelum kode < /head>

/*Auto Download with Countdown Timer*/
#btn{cursor:pointer;margin-top:10px;padding:10px 20px;border:none;border-radius:3px;background:#fdfdfd;color:#3cc091;float:right;text-transform:uppercase;font-size:16px;font-weight:600;text-shadow:none;}
#btn:hover, a#download:hover{background:#3cc091;margin-top:10px;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;}
.dgzwrap{display:block;width:100%;margin: 20px auto;border-radius:4px;font-family:'Poppins', sans-serif}
.dgz-wrap1{background:#576269;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;margin-bottom:2px}
.size-wrap{color:#fff;display:inline-block;font-size:1.5em;font-weight:700;line-height: 38px;text-align:left}
.bottom-wrap{padding:10px 20px;background:#3cc091;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#fff}
#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}
.title-wrap span{display:inline-block;line-height:38px;float:right;margin-top:10px;background:#3cc091;padding:0 10px;border-radius:3px;}
.area-size{display:block}
.area-size span{margin-right:3px}
.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){
.dgzwrap{float:none;width:100%}}
@media screen and (max-width:320px){
.size-wrap{display:block;text-align:center}
#btn, a#download{width:100%;margin-bottom:10px}
.title-wrap span{float:none;width:100%;text-align:center}
.area-size{text-align:center}
}

3. Kemudian simpan kode dibawah ini diatas kode < /body>

<script type='text/javascript'>
//Download button with Countdown Timer by crepictdesign.blogspot.co.id
//<![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>

4. Simpan Template Sobat..

Penerapan Tombol Download Countdown Timer pada Posting Blog

1. Silahkan membuat artikel terkait dengan tombol download yang nanti akan Sobat pergunakan, Setelah selesai letakkan kode dibawah dimana Sobat ingin meletakkan, semisal dibawah artikel Blog ( seperti gambar diatas ).

Untuk menulis Artikel tetap pada menu compose ya…..Sob

2. Untuk meletakkan kode Download dibawah ini silahkan masuk ke HTML ( jangan Compose )

<div class="dgzwrap">
<div class="dgz-wrap1">
<div class="title-wrap">
<div class="size-wrap">
Whatsapps 3.1.200.1 Apk
</div>
<button onclick="generate()" id="btn">Download</button>
<a id="download" href="https://crepictdesign.blogspot.co.id/" style="display:none"> Try Again</a>
</div>
<div class="area-size">
<span class="uploader"></span> <span class="file-size">
 File Size 89 MB</span>
</div>
</div>
<div class="bottom-wrap">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
</div>
</div>

3. Copy dan pastekan kode diatas, dibagian paling bawah artikel Blog Sobat ( masih pada posisi HTML bukan Compose ), lalu tekan “Preview/Pratinjau”. Jika sudah sesuai silahkan tekan “Publikasikan/Publish”.

4. Selesai….

Selamat mencoba..

Mau Beli Domain Name di Google Domains ?

Kira kira akhir Agustus 2017 lalu Google meluncurkan Google Domainsnya di Indonesia.Google domain ini sebenernya diluncurkan pertengahan April 2016 namun hanya tersedia dibeberapa Negara saja, namun tidak untuk Indonesia pada waktu awal peluncurannya.

Kita akan mengetahui lauch Google Domain ini ketika membuka Akun Blogger Dashboard yang masih menggunakan custom domain ( masih blogspot ), maka akan muncul popup seperti dibawah ini.

Disini pengguna custom domains atau Admin Blog yang masih menggunakan Custom Domains akan diberikan tawaran atau pilihan yang tertera pada popup ketika kita meng-klik tombol search. Berikut contoh nama domain anda dan extensinya

Dalam popup sebelah kanan terlampir harga sekaligus jangka waktu dari expired domain tersebut. Jangan kaget harganya memang sedikit lebih mahal dibanding penyedia domain yang lain seperti namecheap,hostgator atau penyedia domain lokal.

Namun kita bisa mempertimbangkan hal yang lebih menguntungkan jika membeli domain name yang disediakan oleh Google sendiri Tentu kita tak lagi memikirkan problem jika dibanding membeli domain name diluar yang tentu akan berpengaruh jika terjadi masalah dengan server Si penyedia domain.

Nah Jika Google sendiri yang menyediakan domain name, mungkin lebih sedikit kekwawatiran kita tentang gangguan server.

Jika Anda tertarik untuk membelinya silahkan klik tombol BUY pada domain yang Anda pilih, kemudian Anda akan di arahkan pada halaman pendaftaran seperti pada gambar di bawah ini.

Kemudian Anda  tinggal isi formulir yang disediakan dan ikuti langkah-langkahnya.Harga yang ditampilkan adalah dalam bentuk Rupiah ( IDR ) yang pembayarannya bisa Anda lakukan via transfer Bank Lokal di Indonesia.

Mungkin akan menjadi kabar yang lebih baik lagi jika Kita membeli domain name dari Google ini tanpa harus men-setting custom domain ( langsung berubah extensi domainnya ke com,net,info ) tidak seperti ketika kita membeli domain TLD dari penyedia domain pada umumnya lalu masih mensetting lagi di dashboard Blogger yang mungkin  masih dianggap ribet oleh Blogger Newbie.

Saya kira Google sudah memikirkan apa yang terbaik bagi penggunanya…