IwanBerbagi.com - Mungkin kamu pernah lihat di blog Mbak Arlina, maupun di blog tempat membagikan template blogger. Mungkin pernah berfikir bagaimana sih halaman tersebut bekerja, atau juga bagaimana sih cara menerapkannya pada blog.

Cara ini bisa saya katakan sangat keren dan tentunya yang lebih menarik adalah dapat menambah pageview blog kita. Karena halaman yang direct itu adalah halaman kita sendiri. Jadi ketika kita menyebar demo template orang lain, maka pageview blog kita juga senantiasa bertambah. Tertarik mencobanya, silahkan ikuti cara berikut ini :

Membuat Laman Kosong
Pertama kamu buat laman kosong untuk difungsikan sebagai direct link demo template, untuk yang belum bisa membuat laman blog, bisa lihat gambar dibawah ini :
Membuat Halaman Demo Template dan Download di Blogger
Setelah itu beri nama sesuai yang kamu mau, saran saya sih beri judul "Demo" aja supaya lebih nyambung. Setelah itu simpan hasilnya dan catat url halaman yang kamu buat tadi. Kalau punya saya sebagai berikut : 
http://www.iwanberbagi.com/p/laman.html

Mulai Memasang Di blog
Cari code <body> pada template kamu dan simpan kode dibawah ini tempate dibawah kode <body> tadi, dan sesuaikan lamannya dengan laman yang kamu buat pada langkah pertama tadi. Beberapa template menyesuaikan aja yah. Kalau bingung kita bahas di kolom komentar.
<b:if cond='data:blog.url != &quot;http://www.iwanberbagi.com/p/laman.html&quot;'>
Simpan tag penutupnya </b:if> sebelum kode </body> lakukan dengan benar supaya tidak ada yang salah dan membuat bingung nantinya.

Menambahkan Kode Penting
Tambahkan kode javascript, css dan html dibawah ini tepat diatas kode </body>
<b:if cond='data:blog.url == &quot;http://www.iwanberbagi.com/p/laman.html&quot;'>
    <style type='text/css'>
body{background:#fff}
#view{padding:0;margin:0;border:0;position:fixed;top:60px;left:0;right:0;bottom:0;width:100%;height:94%;transition:all .4s ease-out}
#tab-demo{width:100%;height:60px;top:0;left:0;background:#34495e;color:#fff;z-index:99999;position:fixed;-webkit-transform:translateZ(0)}
.closebutton{background:#169fe6;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:0;line-height:60px;cursor:pointer;color:#fff;right:20px;transition:all .3s}
.closebutton:before{content:&#39;\f00d&#39;;position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
a.closebutton {color:#fff;text-decoration:none;}
.closebutton:hover {background:#2c3e50}
.closebutton:hover:before {transform:rotate(360deg);}
.dlbutton,a.dlbutton{background:#3f5870;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:146px;line-height:60px;cursor:pointer;color:#fff;text-decoration:none;transition:all .3s}
.dlbutton:before{content:&#39;\f019&#39;;position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
.dlbutton:hover {background:#2c3e50}
.dlbutton:hover:before {transform:rotate(360deg);content:&#39;\f00c&#39;;}
.demologo,a.demologo{padding-left:75px;font-size:18px;font-weight:700;text-transform:uppercase;line-height:60px;left:20px;position:fixed;color:#fff;letter-spacing:.5px;text-decoration:none}
.demologo:before{content:&#39;\f011&#39;;position:absolute;left:0;background:#169fe6;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;}
.demologo:after {content: &#39;- Responsive Blogger Template&#39;;text-transform:capitalize;opacity:0;visibility:hidden;padding-left:5px;transform:scale(0.9) translate(-34px,0);transition:all.3s;}
.demologo:hover:after {opacity:1;visibility:visible;transform:scale(1.0) translate(0,0);}
    </style>
    <script type='text/javascript'>
        //<![CDATA[
        function getQueryVariable(e) {
            for (var r = window.location.search.substring(1), t = r.split("&"), n = 0; n < t.length; n++) {
                var a = t[n].split("=");
                if (a[0] == e) return a[1]
            }
            return !1
        }
        window.onload = function() {
            var e = getQueryVariable("url"),
                r = getQueryVariable("download");
            document.getElementById("view").src = e, document.getElementById("dl").href = r
        };
        //]]>
    </script>

    <div id='tab-demo'>
        <a class='demologo' href='http://iwanberbagi.com/'>Demo Theme</a>
        <a class='dlbutton' href='' id='dl'>Download</a>
        <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove</a>
    </div>
    <iframe id='view' />
    <style>
        body {
            background: white;
        }
    </style>
</b:if>
Pada kode diatas tersebut, kamu hanya perlu sesuaikan lamannya dan sesuakan url blognya dengan url blog kamu. Dan sesuaikan juga alamat lamannya sesuai dengan alamat laman yang sudah kamu buat tadi. Silahkan simpan template kamu.

Menerapkan Pada Link Demo Template
Membuat Halaman Demo Template dan Download di Blogger
Untuk menerapkannya, kamu hanya perlu menyiapkan Url Demo Template, dan juga Link Download untuk template yang dimaksud yah. Sebagai contoh, coba perhatikan kode berikut :
http://www.iwanberbagi.com/p/laman.html?url=http://blogsimini.blogspot.co.id/&download=https://drive.google.com/file/d/0B_ljWXOPMwNGRTN6VGhTQ3FlcFE/view
Nah pada contoh tersebut kan ada beberapa komponen berikut ini :
  1. http://www.iwanberbagi.com/p/laman.html (ganti dengan laman url kamu, atau pakai yang ini juga gak papa, lebih baik buat sendiri)
  2. http://blogsimini.blogspot.co.id/ (ganti dengan blog demo template yang kamu inginkan)
  3. https://drive.google.com/file/d/0B_ljWXOPMwNGRTN6VGhTQ3FlcFE/view (ganti dengan link download yang kamu inginkan, sesuai dengan demo templatenya)
Selanjutnya kamu hanya perlu mencobanya pada blog kamu sendiri, manfaat menggunakan cara ini adalah. Kita dapat menambah pageview kita sendiri karena pembaca akan membuka link demo yang juga sebenarnya tetap dari url blog kita. Dan juga pada tollbar atas ada menu download yang sudah saya contoh dari mbak arlina, dan juga sudah responsive. Semoga mengerti dan semoga bermanfaat.
Cara ini menggunakan font-awesome, jadi kalau ditemplate mu belum memiliki font-awesome maka iconnya tidak akan tampil. Cara ini saya adopsi dari Blog Kang Ismet dan saya optimasi, serta melihat di blog Arlina Design. Terima kasih
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed