Membuat Sitemap Ganteng Sesuai Label di Blog

Sitemap disebut juga peta situs yang dapat diartikan sebagai daftar isi. Daftar isi adalah lembar halaman yang biasanya terletak pada halaman pertama menjadi petunjuk pokok isi buku beserta nomor halaman. Bedanya dengan di blog daftar isi tidak terletak pada halaman pertama melainkan terdapat pada menu navigasi.

Di sini saya akan sampaikan cara membuat sitemap atau daftar isi blog yang sesuai dengan kategori blog. Kenapa harus ada sitemap pada setiap blog, karena sitemap atau daftar isi akan mempermudah pengunjung dalam mencari artikel pada blog anda yang sudah memiliki pulusan, ratusan, bahkan ribuan artikel.

Sebelumnya saya pernah juga share tentang pembuatan sitemap pada blog di farhanweb. Akan tetapi yang saya share dulu tidak terpisah dari suatu judul label dengan yang lainnya.  Membuat Sitemap Tabel Flat di Blogger

Berikut Cara Membuat Sitemap atau Daftar isi Ganteng Sesuai Label di Blog

1. Login Blog

2. Laman - Buat Laman Baru

3. Copy kode di bawah ini kemudian simpan pada mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="f-web">
<script src="https://rawgit.com/farhanweb/farhanweb-javascript/master/sitemap-fast.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=farhan_web_Load"></script>
</div>
<style type="text/css">.f-web{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.f-web a{color:black;}
.f-web p .farhan_web_Label{background:#ED7FFD;display:block;padding:12px;}
.f-web ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.f-web ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#7F1AA5;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.f-web ol li:hover:after{left:-.5em;border-left-color:#7F1AA5;}
.f-webol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.f-web ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.farhan_web_Postname li:nth-of-type(odd){background:#43F28F;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
</div>

4. Publis. Lihat hasilnya

Demikian tutorial Membuat Sitemap Ganteng Sesuai Label di Blog. Jika bermanfaat silahkan boleh dishare artikel ini. Terimakasih..

Memasang Kotak Iklan x4 di Blog

Tuturial berikut ini akan memberikan cara memasang iklan yang berukuran 125x125 pixels x4. Sobat blogger pasti tau bahwa kegiatan menulis artikel di blog sekarang tak lagi hanya sekedar pelepas hobi atau mengisi kekosongan waktu. Membuat blog dan mengelolanya dengan baik dan benar juga dapat menghasilkan materi berupa uang yang sebagian besar para blogger menjadikannya sebagai salah satu mata pencaharian sehari-hari.

Menampilkan atau membuat ruang iklan berupa banner di website / blog biasanya dijadikan peluang bisnis tersendiri oleh blog atau website yang memiliki visitor atau pengunjung yang banyak dan memiliki kepopuleran di mesin pencari. Tapi tidak menutup kemungkinan blog anda yang masih baru di internet dapat tawaran oleh pihak pengiklan untuk memasang iklan mereka ke dalam blog yang anda miliki. Jika anda tertarik untuk menyediakan atau membuat kotak iklan di blog, ikuti tutorial blogger yang akan Saya jelaskan berikut ini.a

Perlu anda ketahui sebelum anda membuat kotak iklan pada blog adalah hal yang perlu diperhatikan dalam menampilkan ruang banner iklan adalah letak serta susunannya agar rapi dan semakin menarik minat orang banyak. Jadi jangan asal memasang banner yang akhirnya iklan yang ditampilkan menjadi kurang menarik perhatian pengunjung karena berantakan.

Memasang Kotak Iklan x4 di Blog

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode  ]]></b:skin> atau  </style>

/* Kotak Iklan */
.kotak_iklan {text-align: center;}
.kotak_iklan  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.kotak_iklan  img:hover {border:1px solid #aaa}
.kotak_iklan  img.noborder {border:0;}

4. Simpan template

5. Tata Letak

6. Simpan kode di bawah ini ke dalam Widget HTML/JavaScript

<div class="kotak_iklan">
<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
</div>

7. Simpan

Mudah bukan. Semoga dengan sedikit tips tutorial ini anda dapat mendapatkan usaha sampingan menjadi pengiklan pada blog anda.

Membuat Halaman Demo dengan Toolbar di Blogger

Tips nih buat para anda sahabat blogger yang ingin memiliki blog tentang demo template agar terlihat lebih professional. Cara ini pasti work, karena saya sudah mencari-cari kesana-kemari akhirnya dapat yang work. Pertama saya mendapat di blognya Seocips.com namun tidak bisa. Setelah saya mencari-cari akhirnya dapat juga, beginilah hasilnya.

Kelebihan dari Halaman Demo ini yaitu tidak perlu membuat blog baru, loading lebih cepat, dan penambahan link download otomatis.

Baiklah simak langkah demi langkah berikut ini

1. Login Blogger

2. Buatlah halaman statis dengan judul Demo atau Demo Blog maupun Demo Template, itu terserah Anda. Pada bagian isi tidak usah diisi lalu langsung Publikasikan saja.

3. Template - Edit HTML

4. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://www.ajaxload.info/cache/FF/FF/FF/64/5B/5B/25-1.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#3A841A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOpNpk14Tdghfs-5TNlbjZP6G4BSHxZ9PsMCUn4r4oNDLePJ8oIlgbzbzDTQjyZnQHW1EVSVqFA5yMjpj-H90pTE6vnB4HZ5eyUFfuLBWrMVuIUDOuFDE1L8l2jNfkW4f9rQlaWK-qrA/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#3C7F1F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOpNpk14Tdghfs-5TNlbjZP6G4BSHxZ9PsMCUn4r4oNDLePJ8oIlgbzbzDTQjyZnQHW1EVSVqFA5yMjpj-H90pTE6vnB4HZ5eyUFfuLBWrMVuIUDOuFDE1L8l2jNfkW4f9rQlaWK-qrA/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#3C7F1F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2iqZJUUK-E81s0QtyT-cZ651Uy9CieKP1PIZ3lXulto4MF9a4kRvAzPOSBK95Aq32B_DHBWSWFGyHvi_7hb9iwKQ8s-c6XZ8Z8rkE-XEW5-7T7q88aXajKe3ektTJo68RaMwRNFaylI/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2iqZJUUK-E81s0QtyT-cZ651Uy9CieKP1PIZ3lXulto4MF9a4kRvAzPOSBK95Aq32B_DHBWSWFGyHvi_7hb9iwKQ8s-c6XZ8Z8rkE-XEW5-7T7q88aXajKe3ektTJo68RaMwRNFaylI/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQArBAOlmQyCh5lc-QEUwGfsvJwFhyIXf7jTrQwRUR6mXxmnT0SXNfogcKVMu22WJQnHF9p9gGyqKMiLhUtXQyxFJG3xXfzpMEXoPytIIuco0qwyvM7H5AGenyDbhO01h2nPFk6TNP8I/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}

5. Letakkan kode di bawah ini di bawah kode <body>

<b:if cond='data:blog.url != &quot;http://www.rumahmedia.id/p/demo.html&quot;'>

Ganti URL di atas dengan URL halaman Demo blog Anda

6. Tambahkan kode di bawah ini tepat sebelum kode </body>

</b:if>
<b:if cond='data:blog.url == &quot;http://www.rumahmedia.id/p/demo.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
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);
}
window.onload = function() {
 var url  = getQueryVariable("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='http://rumahmedia.id/'>Demo</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 Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white; }
</style>
</b:if>

Ganti URL di atas dengan URL Demo Blog Anda

7. Simpan template

Untuk format penulisan pada Artikel Anda dengan kode di bawah ini

http://www.farhanweb.com/p/demo.html?url=https://www.jalantikus.com&download=https://www.youtube.com

http://www.farhanweb.com/p/demo : Ganti dengan url blog anda
https://www.jalantikus.com : Ganti dengan url demo template yang anda ingin kan
https://www.youtube.com : Ganti dengan url download template yang ingin kan

URL demo template dan url download wajib menggunakan http atau https (jika ssl)

Selamat mencoba. Apabila ada yang kurang paham atau kesusahan dalam penerapan ataupun pengeditan silahkan berkomentar saja.

Membuat Button Demo & Download dengan Efek Slide

Tidak henti hentinya saya akan membagikan tutorial untuk para anda pecinta blogger. Kali ini Saya akan membagikan Cara memasang Tombol demo dan download yang di mana ini mempunyai fungsi untuk menuju link yang telah tersimpan di dalamnya apabila di klik.

Tombol Demo dan Download yang saya bawakan ini cocok untuk Anda yang blognya Flat Design.

• Inilah Game yang dapat dimainkan pada Browser Chrome
• Tips Jitu Merakit Komputer untuk Kebutuhan Game
• 5 Aplikasi Download Video Terbaik untuk Android

Berikut tutorialnya dan simak baik-baik

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.bie-slide, .bie-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #F9690E;
    margin: 10px;
    transition: .5s;
}
.bie-slide2 {
    border: 2px solid #36D7B7;
}
.bie-slide:hover {
    background-color: #F9690E;
}
.bie-slide2:hover {
    background-color: #36D7B7;
}
.bie-slide:hover span.circle, .bie-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #F9690E;
}
.bie-slide2:hover span.circle2 {
    color: #36D7B7;
}
.bie-slide:hover span.title, .bie-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.bie-slide:hover span.title-hover, .bie-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.bie-slide span.circle, .bie-slide2 span.circle2 {
    display: block;
    background-color: #F9690E;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.bie-slide2 span.circle2 {
    background-color: #36D7B7;
}
.bie-slide span.title,
  .bie-slide span.title-hover, .bie-slide2 span.title2,
  .bie-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #F9690E;
    transition: .5s;
}
.bie-slide2 span.title2,
  .bie-slide2 span.title-hover2 {
    color: #36D7B7;
    left: 80px;
}
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
    color: #fff;
}

4. Tambahkan kode di bawah ini di bawahnya kode <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika kode di atas sudah terdapat pada template anda maka tidak perlu lagi memasangnya

5. Save template Untuk kode format pemanggilan tombol tersebut pada Postingan Anda dengan menggunakan kode di bawah ini pada mode HTML

<div id="wrap"> <a href="http://www.juhdialfarhan.id/" class="bie-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Click here</span> </a> <a href="http://www.rumahmedia.id/" class="bie-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">Click here</span> </a> </div>

Ganti URL di atas dengan URL tujuan Anda

Cukup sekian tutorial ini selamat mencoba, dan semoga work

Membuat Animasi Hover Pada Gambar di Blog

Di sini saya akan perkenalkan gaya css3 animasi pada gambar yang dapat menampilkan kode menggunakan efek animasi tersebut. Misalkan Anda akan menyisipkan gambar dengan tampilan akan ada tulisan yang keluar pada saat gambar itu tersentuh pointer mouse atau touch pad.

• Demo

Setelah Anda Melihat demo nya apakah tertarik? Jika tertarik berikut caranya di bawah ini

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

jm-item {
    padding: 10px;
    display: inline-block;
    text-align: left;
}
.jm-item-wrapper {
    position: relative;
    padding: 7px;
    background: #E8D7B6;
}
.jm-item-image {
    position: relative;
    overflow: hidden;
}
.jm-item-image img {
    display: block;
}
.jm-item-title {
    position: absolute;
    left: -10px;
    bottom: 17px;
    background: #FF6B0E;
    color: #FFFFFF;
    font-size: 1.4em;
    line-height: 1.5em;
    font-weight: normal;
    padding: 7px 9px 6px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
}
.jm-item-overlay {
    background: #000;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.5s ease-in 0s;
    -moz-transition: opacity 0.5s ease-in 0s;
    -o-transition: opacity 0.5s ease-in 0s;
    transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
    opacity: 0.3;
}
.jm-item-button {
    height: 50px;
    width: 50px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -25px;
}
.jm-item-button a {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #FF6B0E;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 50px;
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s;
    text-decoration: none !important;
    display: block;
}
.jm-item-button a:hover {
    background: #3b3b3b;   
}

/** first **/
.first .jm-item-button {
    -webkit-transition: all 0.5s ease-in 0.5s;
    -moz-transition: all 0.5s ease-in 0.5s;
    -o-transition: all 0.5s ease-in 0.5s;
    transition: all 0.5s ease-in 0.5s;
    top: -50px;   
}
.first .jm-item-wrapper:hover .jm-item-button {
    top: 20%;   
}

/** second **/
.second {
    overflow: hidden;
}
.second .jm-item-wrapper .jm-item-title {
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-title {
    left: -100%;
}
.second .jm-item-description {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;   
    background: rgba(0,0,0,0.4);
    color: #fff;
    top: 100%;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;
    transition: all 0.5s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-description {
    top: 0;
}

4. Simpan template

Untuk kode pemanggilnya pada mode HTML di postingan, copy kode di bawah ini

<div class="jm-item second">
    <div class="jm-item-wrapper">
        <div class="jm-item-image">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh3CYknBoH8n_YBGcOzEPLRsSrA9Ocro96f_kQ9nZq7SIgfSLgxyZ2cHcLPigxjcmYPu0KkkMys7OWmXmR1OxX9f2AN4aqwZ5rokYirzTbqWD4BI9SE2ZQFkwmo55r_I3pJ5IfHg96To-q/s1600/cofee.jpg" alt="Cofee Capucino" />
            <div class="jm-item-description">
                Lorem ipsum dolor sit amet.
                1. Lorem
                2. Ipsum
                3. Dolor
                <div class="jm-item-button"><a href="#">View</a></div>
            </div>
        </div>
        <div class="jm-item-title">Cofee Capucino</div>
    </div>
</div>

Ganti url di atas dengan url gambar anda.

Kemudian Publikasikan. Semoga bermanfaat.

Widget Followers G+ Efek Hover pada Blog

Sekarang ini saya akan sampaikan tutorial membuat Widget G+ yang keren. Widget G+ ini berfungi menampilkan jumlah pengikut akun G+ Anda.

Apa salahnya jika kita menyimpan followers G+ kita di sidebar blog, siapa tau nambah karena banyak visitornya kan.

Di atas adalah contoh Widget G+ nya dengan efek Hover. Jika tertarik silahkan ikuti Tutorial di bawah ini.

1. Login Blogger

2. Tata Letak

3. Simpan kode di bawah ini ke dalam Widget HTML

<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 285px;
    padding: 10px 0 10px 10px;
    height: 300px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 3px solid #E50913;
}
.bloggerspiceGplus:hover {
    border: 3px solid #A0060E;
    background-color: #E50913;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/112185154047816917381" data-source="blogger:blog:followers" data-width="280">
</div>
</div>

Ubah ID G+ di atas dengan ID G+ Anda dan juga Anda dapat mengreasikannya sendiri dengan warna yang anda suka dengan kode angka yang sudah di tandai di atas.

4. Simpan

Semoga bermanfaat

Membuat Blockquote Menjadi Keren

Blockquote sangat berguna untuk menampilkan teks yang direkomendasikan si penulis pada blognya agar lebih diperhatikan oleh pembaca.

Di sini saya akan berbagi mengenai tips memperindah tampilan blockquote pada blog anda

Caranya sebgai berikut

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

.post blockquote{line-height:1.6em!important;position:relative;width:auto;padding:1.7em 1.5em;margin:20px auto;background:#f5f8fa;border:1px solid #a0d3fb;overflow:auto;color:#666;font-family:Georgia,serif;font-size:14px;border-radius:3px;display:block}

4. Simpan

Untuk penerapannya tinggal anda gunakan "Quote" pada saat anda sedang berada di dalam halaman pembuatan atau pengeditan artikel dengan menyeleksi teks yang akan anda quote terlebih dahulu

Jika tips di atas tidak berfungsi di blog anda, berkomentarlah pada kolom komentar di bawah. Agar nantinya dapat saya terapkan sedikit perubahan kodenya khusus pada blog anda.

Terimakasih sudah membaca artikel ini

Semoga bermanfaaat

Memasang 3 Komentar Disqus, Blogger, dan Facebook

Komentar adalah suatu tanggapan yang diberikan untuk suatu bacaan atau tulisan. Bila untuk blog mungkin komentar menjadi penanda suatu popularitas blog tersebut, semakin banyak komentar yang dipublikasikan maka blog tersebut akan semakin naik daun di mata para pengunjung blog tersebut.

Nah, di sini saya akan berbagi tutorial atau cara membuat 3 kolom komentar yang berbeda. Yaitu Disqus, Blogger, dan Facebook.

Bagi yang ingin memasangnya, simak langkahnya di bawah ini dengan teliti.

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#comments2{clear:both;padding:10px 0;margin-top:0;font-family:Roboto,Arial,sans-serif}
#comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd}
#comment_block{padding-top:25px}
.comment_header{margin-left:5px}
.comment_avatar{height:48px;width:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyan_j78SZiV-jk1b8GK4UFC_J35m0H699C4cDLFEUXOZeUCNYsjxxLXCB0IY2TE1YdPzpE6sKTqqDKT9nOAtrhXJG7YNdG-zI61T65EQYdW8yXGjdnmx8lovfWjRT2qrDUscdCA1bajc/s48/anon48.gif) center center no-repeat #F0F0F0;float:left;margin-top:-1px;margin-right:10px;margin-left:-5px;overflow:hidden;border-radius:3px}
.comment_admin .comment_author_flag,.comment_reply,a.comment-delete{border-radius:3px;text-decoration:none}
.comment_name{line-height:19.5px;display:inline-block;text-decoration:none;position:relative;margin-top:-3px}
.comment_name a{text-decoration:none;font-weight:500}
.comment_name a:hover{color:#0088b2;text-decoration:none}
.comment_service{margin-right:10px;margin-top:2px;position:relative;line-height:1em}
.comment_body p{font-size:16px;color:#444;line-height:1.3em;font-weight:300;margin:5px 0}
.comment_body p img{vertical-align:middle}
.comment_body{margin:-12px 0 10px 47px;padding:0 10px 10px;position:relative;z-index:1}
.comment_date{color:#999;font-style:italic;font-size:11px;line-height:1.2em;cursor:pointer;font-weight:400;margin-right:20px}
.comment-set{margin-bottom:30px}
.comment_child .comment_body{margin-top:-5px;margin-bottom:10px;margin-left:39px}
.comment_child .comment_wrap{padding-left:50px}
.comment_reply{cursor:pointer;color:#f1f1f1!important;font-size:12px;font-weight:500;margin-top:5px;margin-right:10px;padding:3px 5px;float:left;background:#666}
.comment_reply:hover,a.comment-delete:hover{text-decoration:none;background:#888!important}
.unneeded-paging-control{display:none}
.comment_reply_form{padding:0 0 0 48px}
.comment_reply_form .comment-form{width:100%}
.comment_reply,.comment_service a{display:inline-block}
.comment_avatar *{max-width:1000%!important;display:block;max-height:1000%!important;width:48px!important;height:48px!important;margin-right:10px}
.comment-form,.comment_img,.comment_youtube{max-width:100%!important}
.comment_child .comment_avatar,.comment_child .comment_avatar *{width:40px!important;height:40px!important;float:left;margin-right:10px}
.comment_form{margin-top:-20px}
.comment_form a{color:#444;text-decoration:none;font-size:16px;font-weight:700}
.comment_form a:hover{color:#fff}
.comment_author_flag{display:none}
.comment_admin .comment_author_flag{background-color:rgba(34,59,74,.3);display:inline-block;color:#fff;font-family:arial;font-size:10px;font-weight:700;padding:2px 5px;line-height:1em;position:absolute;top:2px;right:-51px}
a.comment-delete{color:#f1f1f1!important;font-size:12px;font-weight:500;margin:5px 0 0;padding:3px 5px;float:left;background:#666}
#comment-editor{width:100%!important;background:url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) 50% 30% no-repeat #fff;margin-top:10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.comment-form{margin-top:25px!important}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:10px 0 0}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
.comment_youtube{width:400px;height:225px;display:block;margin:auto}
.comment-form p{background:#666;padding:10px 10px 5px;margin:5px 0;color:#eee;font-weight:300;font-size:16px;font-family:Roboto,sans-serif;line-height:1.3em;width:100%;border-radius:3px;position:relative;box-sizing:border-box}
.comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent}
.deleted-comment{display:block;color:#efefef;font:italic 13px Arial;margin-top:-10px;background:#DB6161;padding:10px}
.blogger-bar,.comment-text,.disqus-bar,.facebook-bar{font-family:Roboto,Arial,sans-serif;font-weight:500;color:#555}
iframe.blogger-iframe-colorize{max-height:250px}
.small-button a{color:#f1f1f1!important}
.small-button a:hover{color:#fff!important}
.blogger-bar,.disqus-bar,.facebook-bar{display:inline;float:right;padding:5px 10px;cursor:pointer;background:#eee}
.blogger-bar,.disqus-bar{margin-left:5px;margin-top:20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.facebook-bar{margin:20px 20px 0 5px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.blogger-box,.disqus-box,.facebook-box{width:100%;padding:0;border-top:1px solid #ddd;box-sizing:border-box}
.blogger-box,.facebook-box{display:none}
.fb-comments,.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff}
.comment-text{display:inline;float:left;padding:5px 10px 5px 0;margin-top:20px}
.comment-text:after{content:'\f061';font-family:FontAwesome;color:#555;margin-left:5px}
/*]]>*/
</style>
</b:if>

4. Pada tahap ini kita akan mengganti kode komentar blogger menjadi komentar disqus, blogger, dan facebook. Saya harap anda perhatikan hal ini dengan teliti untuk tujuan maksimal.

Silahkan Anda cari kode seperti di bawah ini pada Edit HTML

              <b:includable id='comment-form' var='post'>...</b:includable>
              <b:includable id='commentDeleteIcon' var='comment'>...</b:includable>
              <b:includable id='comment_count_picker' var='post'>...</b:includable>
              <b:includable id='comment_picker' var='post'>...</b:includable>
              <b:includable id='comments' var='post'>...</b:includable>

Contoh seperti di bawah

Kemudian ganti kelima kode di atas dengan kode di bawah ini

              <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
  </p>
<div id='emo-box' style='display:none'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
      </div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);
    </script>
  </div>
</b:includable>
              <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' title='delete comment'><i class='fa fa-trash'/></a>
    </b:if>
  </span>
</b:includable>
              <b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
      </span>
    <b:else/>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:post.commentLabelFull/>:
      </a>
    </b:if>
  </b:if>
</b:includable>
              <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='comments'/>
      <b:else/>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>
              <b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='facebook-bar commentbtn' onclick='toggleVisibility(&apos;facebook-box&apos;)'>
Facebook
</div>
<div class='blogger-bar commentbtn' onclick='toggleVisibility(&apos;blogger-box&apos;)'>
Blogger
</div>
<div class='disqus-bar commentbtn btncurrent' onclick='toggleVisibility(&apos;disqus-box&apos;)'>
Disqus
</div>
<div class='comment-text'>
Pilih Sistem Komentar Yang Anda Sukai
</div>
<div class='clear'>
</div>
<div class='disqus-box' id='disqus-box'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>
</div>
<div class='blogger-box' id='blogger-box'>
<div class='comments' id='comments2'>
        <b:if cond='data:post.allowComments'>
         <h3 id='total-comments'><data:post.commentLabelFull/></h3>           
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
                    
         <div class='clear'/>
         <div id='comment_block'>
          <b:loop values='data:post.comments' var='comment'>
           <div class='data:comment.adminClass comment-set' data-level='0' expr:id='data:comment.anchorName'>
            <b:if cond='data:post.adminClass == data:comment.adminClass'>
             &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
            <b:else/>
             &lt;div class=&#39;comment_inner&#39;&gt;
            </b:if>
             <div class='comment_area'>
             <div class='comment_header'>
             <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
               <b:if cond='data:comment.author == data:post.author'>
                  <span class='comment_author_flag'>Admin</span>
               </b:if>
              </div>         
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>           
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'><i class='fa fa-reply'/> Balas</a>           
               <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'><i class='fa fa-trash'/></a>                                               <div class='clear'/>                                       
              </b:if>                                     
             </div>
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            </div>
            <div class='comment_child'/>
            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>           
           </div>
          </b:loop>           
         </div> 
         <div class='clear'/>
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
         <div class='clear'/>
         <div class='comment_form' id='comment-form'>       
      
          <b:if cond='data:post.embedCommentForm'>
           <b:if cond='data:post.allowNewComments'>                                                     
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
            <data:post.noNewCommentsText/>
           </b:if>
          <b:else/>
           <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>           
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
       //]]>
       </script>   
       <script type='text/javascript'>   
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&quot;maxThreadDepth&quot;:&quot;0&quot;};
        </b:if>
       //<![CDATA[
function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/comment-hack.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;      //]]>
         </script>
</div>
<div class='facebook-box' id='facebook-box'>
<div class='comments-fb'>
<b:include data='post' name='fb-comments'/>
</div>
</div>
</b:if>
</b:includable>
              <b:includable id='disqus-comment' var='post'>
            <script type='text/javascript'>
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
            </script>
            </b:includable>
              <b:includable id='fb-comments' var='post'>
            <div class='fb-comments' data-colorscheme='light' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>
            </b:includable>

5. Cari kode seperti di bawah ini pada Edit HTML

              <b:includable id='threaded-comment-form' var='post'>...</b:includable>
              <b:includable id='threaded_comment_js' var='post'>...</b:includable>

Contoh gambar

Ganti dengan kode di bawah ini

              <b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
    <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
  </p>
<div id='emo-box' style='display:none'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
      </div>
    </b:if>
</div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);
    </script>
  </div>
</b:includable>
              <b:includable id='threaded_comment_js' var='post'>
  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;
       //<![CDATA[
function downloadJSAtOnload3(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/threaded-comment.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3;      //]]>
  </script>
</b:includable>

6. Simpan kode JS di bawah ini sebelum kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname="USERNAME DISQUS";
var disqus_url = disqus_blogger_current_url;

(function () {
    "use strict";
    var get_comment_block = function () {
        var block = document.getElementById('comments');
        if (!block) {
            block = document.getElementById('disqus-blogger-comment-block');
        }
        return block;
    };
    var comment_block = get_comment_block();
    if (!!comment_block) {
        var disqus_div = document.createElement('div');
        disqus_div.id = 'disqus_thread';
        comment_block.innerHTML = '';
        comment_block.appendChild(disqus_div);
        comment_block.style.display = 'block';
        var dsq = document.createElement('script');
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
    }
})();

!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");

    var divs = ["disqus-box", "blogger-box", "facebook-box"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});
//]]>
</script>
</b:if>

Ganti USERNAME DISQUS dengan user name disqus blog Anda

7. Simpan

Saya harap anda perhatikan dengan teliti langkah-langkah di atas untuk bertujuan mendapatkan hasil yang optimal pada blog anda. Jika ada lebar yang tidak sesuai pada blog Anda, silahkan edit kode CSS yang ada di atas kode </head> tadi.

Sekian artikel hari ini semoga bermanfaat bagi Anda sahabat blogger.

Membuat Penanda atau Tag Khusus pada Teks di Blogger

Sebenarnya bingung saya mau ngasih judulnya apa karena lebih mirip seperti judul di atas lah tutorial yang akan saya share ke sahabat blogger kali ini. Fungsinya hampir sama dengan tag "blockquote" atau juga tag "pre".

• Demo

Bila anda tertarik setelah melihat demo atau gambar di atas, maka ikuti langkahnya di bawah ini.

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;border-radius:2px;color:#39484d;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;
position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}

4. Taruh kode Fontawesome di bawah ini sebelum kode </head>

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

Bila sudah ada pada template anda tidak perlu lagi memasang kode Fontawesome di atas

5. Simpan

Berikut untuk kode pemanggilnya yang di gunakan pada mode HTML artikel anda

/*----Success message----*/

<div class="alert-message success">
Success message : You successfully read this important message. <i class="fa fa-check-circle"></i>
</div>

  /*----Alert message-----*/

<div class="alert-message alert">
Alert message : This alert needs your attention. <i class="fa fa-info-circle"></i>
</div>

  /*----Warning message-----*/

<div class="alert-message warning">
Warning message : Warning! Best check your self. <i class="fa fa-exclamation-triangle"></i>
</div>

  /*----Error message-----*/

<div class="alert-message error">
Error message : Oh snap! Change a few things up. <i class="fa fa-exclamation-circle"></i>
</div>

Ganti teks yang bertanda di atas sesuai keinginan anda!

Yang bingung dengan caranya silahkan tuliskan di kolom komentar. Dan terimakasih sudah membaca artikel ini sekian dan terimakasih. Semoga bermanfaat.

Membuat Button Menuju ke Google Play

Kali ini saya akan membagikan tutorial membuat tombol download yang menuju google play store.

Bila blog anda menampilkan aplikasi-aplikasi yang banyak download dari google play store saya rasa tips ini cocok untuk memperindah tampilan pada blog anda.

Berikut caranya

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode </style>

#download {list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:-webkit-inline-box;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.googlep,.download{padding:12px 15px!important;color:#fff!important;font-weight:600;font-size:13px;font-family:Open Sans;text-align:center;border-radius:3px;border:0;transition:all .2s ease-out;margin-right:10px;}
.googlep {background-color:#2D9E3B;}
.download {background-color:#1A66BC;}
.googlep:hover {background-color:#35BA45; opacity:1;}
.download:hover {background-color:#2073D2;opacity:1;}
.googlep:before {content:'\f04b';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.main h3 {  width: auto;margin-top: 10px;}}

4. Simpan

Gunakan kode pemanggil pada mode HTML di bawah ini untuk blog anda

<div style="text-align: center;">
<ul id="download">
<li><a class="googlep" href="#" target="_blank">Get it from Google Play</a></li>
<li><a class="download" href="#" target="_blank">Direct Download</a></li>
</ul>
</div>
</div>

Ganti tanda # dengan link tujuan anda

Sekian semoga bermanfaat

Cara Membuat Tombol Result Dengan Efek Hover di Blogger

Saya mau berbagi tips blogger yaitu membuat tombol result. Tombol result ini kurang lebih sama saja dengan tombol download yang bertujuan jika di klik tombol tersebut maka akan diarahkan ke link tujuan yang sudah tertanam pada tombol tersebut.

• Demo

Berikut simak caranya

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

4. Simpan Template

Jangan lupa untuk menyisip kan kode Font Awesome pada blog anda bila belum terpasang Font Awesome

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Untuk kode pemanggilnya gunakan kode di bawah ini pada mode HTML artikel anda

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle">
<i class="fa fa-rocket"></i>
</span>
<span class="title">Result</span>
<span class="title-hover">Click here</span>
  </a></div>

Sekian tutorial kali ini semoga bermanfaat.

Membuat Widget Breaking News di Blog

Setelah saya jalan-jalan untuk mengunjungi blogger-blogger ternama, saya mendapatkan sesuatu yaitu Membuat Breaking News pada blog dan saya mendapat cara ini dari blognya mba Arlina.

Widget berikut ini sederhana dan anda tidak perlu khawatir karena widget ini ringan untuk anda pasang pada blog anda.

Saya rasa anda semua cukup tau fungsi dari widget Breaking News pada blog ini. Saya sampaikan sedikit untuk yang saya share ini akan menampilkan artikel terbaru anda berurutan hingga ke artikel yang lawas dengan disertai gambar dan efek slide dari bawah ke atas.

Anda bisa melihat contohnya pada blog saya tepatnya berada di atas artikel saya.

Simak caranya sebagai berikut

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

 /* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Anda bisa mengubah warnanya di atas sesuai selera anda.

4. Simpan kode JavaScript di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by http://www.arlinadzgn.com
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

5. Simpan kode HTML di bawah ini di antara tag <body> sampai tag </body>

<div class='ticker-wrap' data-domain='rumahmedia.id'>
<div id='ticker'>
</div>
</div>

Contoh pemasangan pada blog saya

Ganti URL blog di atas dengan URL blog anda.

6. Simpan

Sekian semoga bermanfaat bagi kita semua.