Sudut Blogger: Blogger

Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Cara Membuat Iklan Parallax di Blogger Non AMP

Pada artikel ini saya akan membahas tentang cara membuat iklan parallax di blogger non amp. Sebenarnya iklan parallax ini di terapkan khusus blog AMP, namun masih banyak blog yang tidak menggunakan template amp, jadi iklan parallax non amp ini di buat bagi mereka yang tidak menggunakan blog amp.

Baca juga : Cara Memasang Auto Ads di Blogger

Iklan parallax ini bentuknya seperti background, mungkin iklan parallax ini bisa di sebut juga sebagai iklan background, iklan menempel di background, ataupun iklan background yang muncul saat di scroll, saya sendiri juga bingung menjelaskannya.

Iklan parallax ini berawal dari script amp-fx-flying-carpet namun Kang Adhy di blog Kompi Ajaib memodifikasi script amp-fx-flying-carpet agar bisa di gunakan pada iklan adsense. Di bawah ini bisa di lihat tampilan Iklan Parallax di blogger non amp, disini saya menggunakan template Evo Magz sebagai contoh.

Untuk menempatkan kode iklannya kalian harus menggunakan banner iklan ukuran 300×600. Untuk cara memasang iklan parallax di blogger non amp ini, silahkan ikuti langkah-langkah dari saya berikut ini.

Baca juga : Cara Menambah Kode Iklan AdSense Di Blog Lain

Cara Memasang Iklan Parallax di Template Blogger Non AMP

Langkah pertama masuk ke akun Blogger kalian.
Pilih menu Tema, kemudian klik Edit HTML.
Cari kode </head> kemudian masukan script di bawah ini sebelum kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 9999;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: -50px;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>

Selanjutnya cari kode <div class='post-body entry-content', kemudian masukan script dibawah ini setelah kode <div class='post-body entry-content'.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='paralax_div'>
  <div>
    <div>
      <div>
       <!--Masukan kode iklan yang sudah di Parse-->
      </div>
    </div>
  </div>
<span class='clear'/>
</div>
</b:if>

Pengaturan:

Ganti kode  dengan kode iklan yang sudah di parse.

Jika sudah selesai, silahkan klik Simpan tema.

Catatan: Jika tidak berhasil, silahkan coba cari script <div class='post-body entry-content' yang lain, dan silahkan coba sampai berhasil.

Baca juga : Cara Membuat Iklan AdSense Berada di Antara Tag Heading

Demikian tutorial dari saya mengenai cara membuat iklan parallax di blogger non amp. Jika ada pertanyaan mengenai iklan parallax ini atau mengenai cara memasangnya, silahkan kalian masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk kalian semua. Untuk tutorial yang lainnya mengenai teknik pemasangan iklan, silahkan tetap kunjungi blog Tutorial Umum.

blogger dashboard
blog editor
blogger indonesia
blogger login
blogger tutorial
blogspot sign in
instagram widget for blogger
blogger dashboard
blogger tutorial
mesothelioma info
mesothelioma survival rates
mesothelioma lawyer
mesothelioma lawyer new jersey
mesothelioma attorney
mesothelioma cancer
google key
google keyword suggestion tool
kw planner
google keyword tool free
google planner tools
google adwords keyword planner
google planner
keyword tool external
google keyword planner tools
google word planner
google key planner
high paying keyword
key plan
keyword generator online
keyword planner
keyword density
keyword checker
keyword suggestion
google keyword planner
keywordtool io
keyword check
keyword generator tool
keywordspy
keyword
daftar blog ke google
cara daftar di google adsense
daftar google adsense indonesia
cara bikin google adsense
create google adsense
membuat google adsense
cara mendaftar ke google adsense
cara daftar blog ke google
daftar adsense blog
daftar masuk google
daftar blog di google
mendaftar di google
cara mengaktifkan google adsense
daftar baru google
cara mendaftar di google adsense
cara daftar google adsense dari blogger
syarat daftar google adsense
cara masuk google adsense
pendaftaran google adsense
cara daftar google adsense di youtube
tutorial google adsense
cara mendaftar google adsense youtube
daftar google adsense youtube
adsense
adesene
cara daftar google
cara daftar adsense blog
cara diterima google adsense
mendaftar adsense
persyaratan google adsense
google adsense cara
cara daftar akun google adsense
cara daftar google adsense youtube
cara mudah daftar google adsense
cara ikut google adsense
adsense start
web adsense
google adsense blog
cara daftar ulang adsense
cara daftar google adsense indonesia
membuat akun adsense
daftar adsense lewat youtube
g adsense
cara daftar ke google adsense
adsense masuk
cara adsense blog
daftar youtube adsense
cara buat akun google adsense
syarat mendaftar google adsense
google daftar
cara mendapatkan google adsense
mendaftar google
app store android
android market app
clansmobile games
google android
game mobile
google android device
android 1
logo android
play store app
pubgplayer unknown battle ground
battlegrounds online
playerunknown's battleground
modmobile la
mobile mobile mobile mobile
mobile mobile mobile
of mobile
mobile mobile
mobile a
mobil usa
web game
game android
mobile games
game google gratis
permainan google gratis
donlot game terbaru
game online gratis
game online game online
game yang
game yang gratis
game tidak online
permainan tidak online
game web terbaru
gratisindo game
permainan yang baru
google game online gratis
permainan google
games co id
game web terbaru

Cara Membuat Widget Breaking News 2 Style di Blogger

Blogger Widget

Ivan Eka Add Comment

Ivan Eka

Breaking News atau headline news biasa kita lihat di televisi. Breaking news ini biasanya menayangkan berita-berita terbaru secara sekilas, namun tidak hanya di televisi saja kita bisa melihat breaking news atau headline news ini, di website berita juga selalu ada. Untuk itu pada tutorial kali ini saya akan memberikan tutorial cara membuat widget breaking news 2 style di blogger.

Widget breaking news ini biasanya di gunakan oleh situs atau blog dengan niche berita, namun bagi agan yang mau menggunakan widget ini selain niche berita juga di perbolehkan, karena berdampak positif bagi blog seperti menambah view dan memberitahukan kepada visitor bahwa ada artikel lainnya di dalam blog atau situs agan.

Cara Membuat Widget Breaking News 2 Style di Blogger

Style Widget Breaking News

Widget breaking news yang saya bagikan ini memiliki 2 style, berikut tampilan widget breaking news 2 style :

Style 1

Widget breaking news ini memiliki cara pemasangan yang tidak rumit, dan juga tambahan icon dengan menggunakan Font Awesome. Untuk pergeserannya, widget breaking news ini bergeser keatas sehingga terlihat elegan. Berikut adalah tampilan dari widget breaking news style 1.

Style 2

Widget breaking news yang terakhir ini sama seperti yang sering kita lihat di televisi, yaitu bergeser kesamping. Berikut adalah tampilan widget breaking news style 2.

Jika agan sudah melihat beberapa style dari widget breaking news ini, sekarang tinggal memilih style yang mana yang agan ingin pakai. Untuk cara memasang widget breaking news 2 style, silahkan ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Mudah Membuat Widget Artikel Pilihan Di Blog)

Cara Memasang Widget Breaking News 2 Style di Blogger

Cara Memasang Widget Breaking News Style 1

Langkah pertama silahkan agan masuk ke akun Blogger agan
Pilih menu Tema, pilih Edit HTML, cari kode <body> kemudian tempatkan kode dibawah ini tepat di bawahnya

<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #1194f2; border-top: 0px solid #333; display: block; float: left; height: 25px; line-height: 25px; overflow: hidden; padding: 8px 0 0 0px; width: 100%; }
.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 10px;margin: -7px 0 0 0; position: absolute; }
#ltsposts {float: left;margin: -2px 0px 0px 150px;text-align: left;}
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#fff !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_rk65wTK-N61j4jbHYW0USJR3Dd-M8es7Ov_vR_MGFMyO0z-PX5xD3SNwakgUCSLHspmKp0rrNgYA8x4s-ynoL3yczzd2A3CTYIUbo0blzmhnY84mybzo2ZQgemrQRs7CuENSaNZ7crrt/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>

<div id='news'><span class='titlenews'><i aria-hidden='true' class='fa fa-newspaper-o fa-lg'/> BREAKING <span style='color:#ff4f4f;'>NEWS</span> :</span>
<div id='ltsposts'>Loading...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.tutorialumum.com/', // Ganti dengan URL blog agan
numpostx     = 10;             // Maximum berita yang akan muncul
$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }                
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 3000); // kecepatan yang diinginkan
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Pengaturan :

Ganti URL http://www.tutorialumum.com/ dengan URL blog agan.
Ganti angka 10 dengan jumlah artikel yang agan ingin tampilkan.
Ganti angka 3000 dengan angka yang agan inginkan, gunanya adalah mengatur durasi jeda dari widget breaking news ini.

Setelah selesai mengatur pilih Simpan tema, jika berhasil maka akan muncul widget breaking news ini tepat di atas blog agan.

Cara Memasang Widget Breaking News Style 2

Langkah pertama silahkan agan masuk ke akun Blogger agan
Pilih menu Tema, pilih Edit HTML, cari kode </head> kemudian tempatkan kode dibawah ini tepat di atasnya

<style type="text/css">
#breaking-newsticker{margin:15px 0;position:relative}
#post_breakingnews{position:relative;z-index:9;overflow:hidden;padding:8px;width:100%!important;box-sizing:border-box;box-shadow:0 5px 5px -5px #3339}
.breakingnewstitle{float:left;background-color:#f54b4b;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase;position:relative}
.breakingnewstitle:after{height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-top:1px;border-left:13px solid #f54b4b;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999);margin-left:9px;margin-top: -3px;z-index:9}
.breakingnews marquee{width:80%;position:absolute}
@media screen and (max-width:800px){.breakingnews marquee{width:70%}}
@media screen and (max-width:500px){.breakingnews .breakingnewstitle{width:90px;font-size:11px;font-weight:normal}.breakingnews .breakingnewstitle:after{content:none}.breakingnews marquee{width:55%}}
.breakingnews marquee a{color:#1893fc;margin:0 15px;line-height:2}
#post_breakingnews .breakingnews{width:1120px;max-width:100%;margin:0 auto}
</style>
<script type='text/javascript'>
var url_breaking = "http://www.tutorialumum.com";
var jumlah_post = 10;
var marquee_speed = "6";
var close_button = false;
var info_text = true;
</script>

Pengaturan :

Silahkan ganti URL http://www.tutorialumum.com/ dengan URL blog agan.
Ganti angka 10 dengan jumlah artikel yang agan ingin tampilkan di widget breaking news.
Ganti angka 6 dengan angka yang agan inginkan, angka ini di gunakan untuk kecepatan breaking news.
Di close_button, silahkan ganti false dengan true jika agan ingin menampilkan tombol close.

Kemudian cari kode </body> masukan kode di bawah ini tepat diatasnya

<script src='https://rawgit.com/mastamvan/backup/master/breakingnews.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>

Selanjutnya masukan kode HTML di bawah ini tepat sesudah kode <body>

<div id='breaking-newsticker'/>

Setelah selesai memasukan semua kode di atas, silahkan klik Simpan tema, jika berhasil maka widget akan muncul di atas blog.

Demikian tutorial dari saya mengenai cara membuat widget breaking news 2 style di blogger. Jika ada pertanyaan mengenai cara mengatur atau pemasangan widget ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial umum, semoga artikel mengenai widget breaking news di atas bermanfaat untuk agan dan sista semua. Untuk tutorial yang lainnya mengenai widget di blogger, silahkan tetao kunjungi blog Tutorial Umum.

Cara Mendaftar dan Memasang Domain Gratis (tk, ml, ga, cf, gq)

Blog Blogger Tutorial

Ivan Eka Add Comment

Ivan Eka

Domain gratis, siapa orang yang tidak menginginkannya, Freenom adalah perusahaan yang memberikan domain gratis tersebut. Karena gratis, Freenom memiliki banyak user dari berbagai penjuru dunia. Pada tutorial kali ini saya akan memberikan tutorial tentang cara mendapatkan dan juga memasang domain gratis ini.

Domain gratis yang di sediakan diataranya adalah :

Tidak hanya domain gratis, Freenom juga menyediakan domain berbayar jika agan ingin membelinya. Saya sendiri pernah menggunakan domain ini untuk blog yang saya buat, yaitu domain dot tk. Saya tau domain ini juga dari seorang teman saya jadi saya mulai mencoba domain ini.

Sebelum memberikan tutorialnya mari kita bahas kelebihan dan kekurangan dari domain gratis ini.

(Baca juga : Cara Memasang Komentar Disqus di Blogger dengan Mudah)

Kelebihan dan Kekurangan Domain Gratis (tk, ml, ga, gq)

Kelebihan Domain Gratis (tk, ml, ga, gq)

Terlihat simple karena hanya menggunakan 2 huruf saja.
Lebih mudah di gunakan untuk review Google AdSense di bandingkan domain blogspot.
Terlihat unik, karena berbeda dengan domain yang biasa di gunakan.
Tidak mudah di hijack oleh hacker kelas teri, karena tidak menggunakan Costumer Service(CS) aktif.

Kekurangan Domain Gratis (tk, ml, ga, gq)

Domain kurang bisa di ingat pengunjung, karena bukan Top Level Domain(TLD).
Tidak memiliki Costumer Service(CS) aktif, jadi agan akan kesulitan dalam pemasangan domain.
Penjelasan di dalam Freenom tentang cara setting domain, hanya menggunakan bahasa internasional, jadi akan membuat user kebingungan jika user tidak mengerti.
Perusahaan Freenom bukan berasal dari Indonesia, jadi user akan kesulitan bila terjadi hal-hal yang tidak di inginkan pada Domain.

Setelah agan sista mengetahui kelebihan dan kekurangan domain gratis ini, untuk cara mendaftar dan memasang domain gratis dari freenom, silahkan ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Share Button Melayang Dengan Sumo Me)

Cara Mendaftar dan Memasang Domain Gratis (tk, ml, ga, cf, gq)

Cara Mendaftar Domain Gratis (tk, ml, ga, cf, gq) di Freenom

Langkah pertama langsung masuk ke situs Freenom
Silahkan isi nama domain yang agan inginkan
Pilih domain gratis yang agan inginkan dengan klik Get it now!
Setelah memilih, langsung klik Checkout
Kemudian silahkan agan pilih durasi domain yang ingin agan gunakan, silahkan pilih yang 12 Monts untuk menggunakan domain gratis selama 1 tahun
Kemudian silahkan pilih verifikasi yang agan inginkan, disini saya menggunakan email untuk verifikasi pendaftaran domain
Setelah selesai, silahkan cek email agan jika agan menggunakan email untuk verifikasi
Silahkan isi form berikut ini dengan lengkap
Akan muncul konfirmasi order domain agan, langsung saja klik Click here to your Client Area
Selanjutnya untuk mengatur atau memasang domain silahkan agan login terlebih dahulu dengan Email dan Password yang telah agan buat tadi.

Cara Memasang Domain Gratis (tk, ml, ga, cf, gq) di Blogger

Setelah login akun Freenom agan, klik menu Services, kemudian klik My Domains
Pilih Manage Domain
Pilih Manage Freenom DNS
Langkah selanjutnya masuk ke akun Blogger agan, pilih menu Dasar, kemudian klik + Siapkan URL pihak ke-3 untuk blog Anda
Isi kolom blog domain dengan domain yang agan daftarkan tadi, jika terjadi error biarkan saja, karena akan muncul CNAME
Kembali ke halaman DNS MANAGEMENT di Freenom, isi kolom pertama dan kedua dengan CNAME yang ada di Blogger tadi, pilih + More Records untuk menambah kolom
Kemudian tambahkan 4 kolom lagi dan masukan 4 IP ini pada kolom target dan Type A

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Setelah selesai pilih Save Changes
Jika berhasil, maka akan muncul tampilan seperti ini di samping halaman
Kembali ke Blogger, silahkan pilih Simpan
Jika berhasil maka tampilan akan menjadi seperti ini.

(Baca juga : 2 Cara Setting Robot.txt di Blogger & Mengatur Tag Tajuk Robot Khusus di Blogger)

Demikian tutorial dari saya mengenai cara mendaftar dan memasang domain gratis (tk, ml, ga, cf, gq). Bagi yang masih bingung tentang cara memasang domain gratis ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel diatas bermanfaat untuk agan atau sista semua. Untuk tutorial yang lainnya mengenai tutorial blog dan lainnya, silahkan tetap kunjungi blog Tutorial Umum.

Cara Membuat HTML kbd tag dengan Efek Double click to select

Blog Blogger CSS JavaScript

Ivan Eka Add Comment

Ivan Eka

Element <kbd> biasa di gunakan untuk membuat masukan perintah dari keyboard, dan bisa juga di gunakan untuk membuat perintah (voice command). Namun tag kbd ini juga di gunakan para pengguna situs web untuk membuat perintah di tengah teks, seperti blog Tutorial Umum sendiri juga menggunakan tag kbd untuk membuat sebuah perintah untuk pengunjung. Untuk itulah pada tutorial kali ini saya akan memberikan cara membuat HTML kbd tag dengan efek double click to select.

(Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS)

Agan juga bisa mengatur warnanya sesuai keinginan agan. Dan juga untuk efek hover teksnya, agan juga bisa menggantinya sesuai keinginan agan. Apabila agan tidak ingin menggunakan JavaScript dari tag kbd ini, agan tidak perlu memasukan JavaScriptnya, karena JavaScript dari tag kbd ini di gunakan agar memudahkan pengunjung untuk memblok text kbdnya.

Cara Membuat HTML kbd tag dengan Efek Double click to select

Untuk tampilan element kbd tag ini, silahkan lihat di bawah ini.

Langsung saja untuk cara memasang HTML kbd tag ini, silahkan ikuti langkah-langkah dari saya di bawah ini.

(Baca juga : Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger)

Cara Memasang HTML kbd tag dengan Efek Double Click To Select di Blog

Langkah pertama silahkan masuk ke akun Blogger agan
Pilih menu Tema, klik Edit HTML, kemudian masukan kode CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

kbd{position:relative;color:#28a1f0;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;}
kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

Pengaturan :

#28a1f0 adalah warna teks kbdnya, silahkan ganti warnanya sesuai keinginan agan.
Double click to select adalah efek hover teks, silahkan ganti sesuai keinginan agan.
#4c4c4c adalah warna background dari hover teks, silahkan ganti sesuai keinginan agan.

Selanjutnya masukan kode JavaScriptnya sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('kbd');
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>

Setelah selesai, pilih Simpan tema.

Cara Menggunakan HTML kbd tag

Langkah pertama silahkan masuk ke artikel agan.
Masuk ke tab HTML.
Kemudian masukan tag kbdnya seperti contoh di bawah ini.
Setelah selesai, silahkan lihat artikel blog agan yang sudah di edit.

Demikian tutorial dari saya mengenai cara membuat HTML kbd tag dengan efek double click to select. Jika ada pertanyaan mengenai HTML kbd tag ini dan cara pemasangannya, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel ini bermanfaat untuk agan atau sista. Untuk tutorial yang lainnya mengenai tutorial blogging, silahkan tetap kunjungi blog Tutorial Umum.

2 Cara Termudah Mengganti Template Blog di Blogger

Blogger Tutorial Blog

Ivan Eka Add Comment

Ivan Eka

Template blog adalah hal yang paling penting dalam sebuah blog. Karena dengan template yang bagus, maka pengunjung akan sangat betah berada di dalam blog kita. Mengganti template blog adalah hal yang paling penting, apabila kita ingin membangun sebuah blog yang bagus di mata pengunjung. Untuk itulah pada tutorial kali ini, ane akan memberikan tutorial tentang 2 cara termudah mengganti template blog di blogger.

2 Cara Termudah Mengganti Template Blog di Blogger

Loh kok ada 2 cara gan? Bukannya ganti template itu cuma di upload aja?

Ya betul sekali, cara mengganti template memang ada hanya di upload, tapi sebetulnya ada cara lain yang lebih baik tanpa merusak tampilan tamplate blog tersebut. nah, bagi yang belum tau caranya, ikuti langkah-langkah dari ane berikut ini.

(Baca juga : 3 Tips Jitu Menentukan Template yang Cocok untuk Blog Kita)

Cara Mengganti Template Secara Otomatis (Upload)

Langkah pertama download dulu templatenya, disini ane pakai template Hijau Magazine, untuk template Hijau Magazine dan Tutor Magazine 3D, silahkan download di sini
Setelah mendownload Templatenya, kemudian extract filenya
Kemudian agan buka akun Blogger agan
Lalu pilih menu Tema, kemudian klik Backup / Pulihkan
Pilih Choose File, kemudian cari dan pilih file template yang sudah di extract tadi, kemudian pilih Upload
Template agan berhasil di ganti.

Cara Mengganti Template Secara Manual

Kalau sudah download templatenya, buka file templatenya dengan Notepad, Caranya klik kanan di file templatenya, pilih Open with, pilih Notepad
Pilih Ctrl + A pada keyboard kemudian copy semua script template yang ada di Notepad tadi
Setelah di copy, agan tinggal masuk ke akun Blogger agan
Pilih Tema, kemudian pilih Edit HTML, hapus semua script yang ada di dalamnya, Caranya pilih Ctrl + A pada keyboard, pilih Delete atau Back Space untuk menghapus
Kemudian masukan script template yang sudah di copy tadi
Setelah selesai pilih Simpan tema.

Untuk keuntungan dan kerugian dari 2 cara mengganti template di atas, silahkan baca di bawah ini.

Keuntungan dan Kerugian Mengganti Template Secara Otomatis (Upload)

Untuk keuntungan yang di dapat dari mengganti template secara otomatis atau di upload, adalah dari segi widget. Setelah agan mengganti template secara otomatis, widget lama dari blog agan tidak akan hilang, namun bersatu dengan widget template yang baru.

Untuk kerugian dari mengganti template secara otomatis ini adalah juga masih dari segi widget, yaitu widget agan akan bersatu, dan kemudian item-item yang lainnya juga akan masuk ke dalam widget, sehingga agan perlu melakukan perbaikan untuk beberapa widget di blog agan.

(Baca juga : Cara Menampilkan Menu Penghasilan di Dashboard Blogger)

Keuntungan dan Kerugian Mengganti Template Secara Manual

Untuk keuntungan yang di dapat dari mengganti template secara manual adalah tampilan templatenya masih asli dan widget yang ada juga masih asli bawaan dari template blog yang ada. Kemudian kecepatan dari template yang baru di ganti juga masih kecepatan asli dari template tersebut.

Untuk kerugian dari mengganti template secara manual ini adalah widget template agan akan hilang, kemudian agan harus mengulangi untuk memasang beberapa widget.

(Baca juga : Cara Memasang Script Redirect UC Browser ke Chrome Lebih Cepat)

Demikian tutorial dari saya mengenai 2 cara termudah mengganti template blog di blogger. Jika ada pertanyaan mengenai cara pemasangan template ini, silahkan agan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel tadi bermanfaat untuk agan. Untuk tutorial yang lainnya tentang blog, silahkan tetap kunjungi blog Tutorial Umum.

2 Cara Setting Robot.txt di Blogger & Mengatur Tag Tajuk Robot Khusus di Blogger

Blogger SEO Teknik SEO Tutorial Blog

Ivan Eka Add Comment

Ivan Eka

Mengatur robot.txt sangat di anjurkan karena ini adalah faktor yang paling penting apabila sobat ingin memudahkan blog sobat untuk di rayapi oleh mesin pencari. Dengan penerapan robot.txt ini blog sobat akan menjadi semakin SEO friendly. Untuk itu kali ini saya akan memberikan tutorial yaitu 2 cara setting robot.txt di blogger dan mengatur tag tajuk robot khusus di blogger.

(Baca juga : Teknik Cara Memasukan Attribute Alt di Gambar Agar Artikel Menjadi SEO)

Untuk cara setting robot.txt yang aman di blogger, ikuti langkah-langkah dari saya berikut ini.

2 Cara Setting Robot.txt di Blogger

1. Cara Setting Robot.txt Default di Blog

Sebetulnya settingan ini adalah settingan awal pada saat sobat membuat blog, tetapi jika sobat ingin menambahkannya juga tidak apa
Langkah pertama masuk ke akun Blogger sobat
Pilih menu Setelan, pilih Preferensi penelusuran
Di kolom Perayap dan pengindeksan ada robot.txt khusus, kemudian pilih Edit, pilih Ya
Kemudian masukan text robot.txt di bawah ini

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://www.URL-Blog-Sobat.com/sitemap.xml

Catatan :

User-agent: Mediapartners-Google : Digunakan untuk penanda bahwa blog menggunakan Google AdSense.
Disallow: : Yang tidak di perbolehkan.
User-agent: * : Semua robot mesin pencari.
Disallow: /search : Tidak mengijnkan URL setelah /search.
Allow: / : Yang di ijinkan untuk di rayapi. Tanda / adalah nama blog.
Sitemap: http://www.URL-Blog-Sobat.com/sitemap.xml : Sitemap/peta situs blog sobat, silahkan ganti URL nya dengan URL blog sobat.

Setelah selesai, pilih Simpan perubahan.

2. Membuat Pengaturan Robot.txt Sendiri / Custom Robot.txt

Jika sobat ingin mengatur robot.txt sendiri, sobat bisa memasukan robot.txt di bawah ini

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /p/about.html
Disallow: /p/contact.html
Allow: /
Sitemap: http://www.URL-Blog-Sobat.com/sitemap.xml

Pengaturan :

Disallow: /p/about.html, Disallow: /p/contact.html : Silahkan sobat ganti atau menambahkan halaman lain yang tidak ingin sobat tampilkan di perayapan google.

Setelah selesai mengatur, pilih Simpan perubahan.

Cara Mengatur Tag Tajuk Robot Khusus di Blogger

Langkah pertama masuk ke akun Blogger sobat
Pilih menu Setelan, pilih Preferensi penelusuran
Di kolom Perayap dan pengindeksan ada Tag tajuk robot khusus, pilih Ya
Setelah itu akan tampil pengaturannya, untuk pengaturannya ikuti saja gambar di bawah ini
Setelah selesai menggatur, pilih Simpan perubahan.

(Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense)

Demikian tutorial dari saya mengenai 2 cara setting robot.txt di blogger dan mengatur tag tajuk robot khusus di blogger. Jika ada pertanyaan mengenai pengaturan robot.txt dan tag tajuk robot diatas, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya mengenai tutorial blog, silahkan tetap kunjungi blog Tutorial Umum.

Source:http://www.bungfrangki.com/2015/04/setting-robotstxt-dan-tag-tajuk-robot-di-blogger.html

Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar

Blogger Widget Blogger

Ivan Eka Add Comment

Ivan Eka

Setelah sebelumnya saya membagikan artikel tentang cara membuat widget recent post multi color, dan widget artikel terbaru yang super ringan. Kali ini saya juga akan memberikan cara membuat widget yang sama, yaitu widget recent post dengan gambar, keterangan waktu dan komentar.

Bedanya dari widget recent post sebelumnya, widget ini terlihat simple tanpa warna, jadi sangat cocok bagi kalian yang tidak menginginkan warna yang rumit. Widget ini terbilang cukup ringan sehingga sobat tidak perlu takut untuk memasang widget recent post yang satu ini.

(Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger)

Di widget recent post ini juga sudah di sediakan beberapa fitur diantaranya pengaturan jumlah artikel yang akan di tampilkan, pengaturan tampilan waktu di buat artikel, dan tampilan jumlah komentar masuk pada artikel tersebut.

Nah, bagi sobat yang ingin tahu cara pemasangannya, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar

Langkah pertama masuk ke akun Blogger sobat
Pilih menu Tata Letak, pilih lokasi widget yang ingin di tampilkan, kemudian Tambahkan Gadget, pilih HTML/JavaScript
Masukan Judul widget, kemudian masuan kode di bawah ini tepat di kolom Konten

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=10;
var rcp_snippet_length=200;
var rcp_info='yes';
var rcp_comment='Komentar';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGKydU14GaozlzlKhyPk4haTbMzTJYKzQDDZZGHTs5YSrZLm9h0ADVb6-wXl3zmt6-nWyjJ3NXRVwAAMPTBj6cyywRbWQDcbbZLbVKBdlLZy6FqQvhyOlB-5p3ILbuZ4W31llvPVKfBYTB/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Pengaturan :

Silahkan ganti angka 10 dengan jumlah artikel yang ingin sobat tampilkan
Silahkan ganti angka 200 dengan jumlah karakter yang sobat ingin tampilkan
Silahkan ganti yes dengan no, jika sobat tidak ingin menampilkan keterangan waktu dan jumlah komentar
Silahkan ganti Komentar dengan kata yang sobat inginkan

Setelah selesai mengatur pilih Simpan
Jika berhasil maka widget recent post akan tampil seperti ini.

MENAMBAHKAN WIDGET RECENT POST SUPER MANTAB dengan thumbnail pada blogger

(Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog)

Demikian tutorial singkat dari saya mengenai cara membuat widget recent post dengan gambar, keterangan waktu dan komentar. Jika ada pertanyaan mengenai cara memasangnya, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya mengenai cara memasang widget blog, silahkan tetap kunjungi blog Tutorial Umum.

Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger

Blogger Blogging Widget

Ivan Eka Add Comment

Ivan Eka

Facebook adalah tempat yang paling ampuh untuk mempromosikan sebuah halaman blog ataupun situs web, dikarenakan jumlah pengguna facebook yang semakin banyak, sehingga memudahkan kita dalam proses promosi. Pada tutorial kali ini, saya akan memberikan tutorial tentang cara menambahkan simple fanpage facebook di widget blogger.

(Baca juga : Cara Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage)

Umumnya sebuah blog ataupun situs web pasti memiliki sebuah Facebook Fanpage, yang berguna agar para pengunjung dapat melihat aktifitas yang ada di Fanpage blog tersebut.

Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger

Fanpage facebook ini juga sangat berguna bagi kalian yang ingin mempromosikan blog kalian, sehingga memudahkan kalian mendapatkan trafik yang organik dari facebook.

Dengan mendapat 1 like facebook saja, sudah sangat membantu kita dalam mendapatkan trafik organik, karena orang yang sudah like fanpage kita pastinya akan mendapatkan pemberitahuan di akun facebook mereka.

Itulah kenapa kita harus menambahkan fanpage facebook kita di blog, ataupun website kita. Bagi kalian yang ingin mengetahui cara menambahkan facebook fanpage di blog, ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger)

Cara Menambahkan Simple Facebook Fanpage di Blogger

Login ke akun Facebook kalian.
Masuk ke halaman facebook (facebook fanpage) kalian, kemudian copy link URL halaman facebook kalian.
Buka website facebook for developers.
Setelah muncul Plugin Halaman, silahkan scroll ke bawah dan masukan link URL yang sudah di copy tadi di kolom URL Halaman Facebook.
Kemudian pilih pengaturan yang kalian inginkan.

Catatan :

Tab = Jika kalian ingin menampilkan semua aktifitas yang ada di facebook fanpage kalian, kalian bisa mengetikan “timeline”, jika tidak kalian bisa menghapus timeline dan mengosongkannya saja.
Lebar = Di gunakan untuk mengatur lebar tampilan facebook fanpage kalian blogger.
Tinggi = Di gunakan untuk mengatur tinggi tampilan facebook fanpage kalian di blogger.
Gunakan Judul yang Lebih Kecil = Jika kalian memilih ini, tampilan facebook fanpage kalian akan terlihat lebih simple dan tidak terlalu besar.
Sembunyikan Foto Sampul = Jika kalian memilih ini, tampilan facebook fanpage kalian akan terlihat tanpa foto sampul.
Sesuaikan dengan lebar wadah plugin = Jika kalian memilih ini, lebar dan tinggi facebook fanpage kalian akan di sesuaikan secara otomatis dengan ukuran sidebar ataupun widget blog kalian.
Tampilkan Wajah Teman = Jika kalian memilih ini, maka tampilan foto profil orang yang yang sudah menyukai facebook fanpage kalian akan muncul.

Setelah memilih pengaturan yang kalian inginkan, pilih Dapatkan Kode kemudian pilih Iframe dan copy kodenya.
Setelah meng-copy kode tadi, masuk ke akun Blogger kalian.
Pilih Tata letak, kemudian pilih lokasi widget yang kalian inginkan dan pilih Tambahkan Gadget, pilih HTML/Javascript.
Masukan kode yang sudah di copy tadi di kolom Konten, lalu pilih Simpan.
Setelah selesai, kalian bisa melihat facebook fanpage di blog kalian.

(Baca juga : Cara Membuat Widget Social Media Button Efek Berputar)

Demikian tutorial dari saya mengenai cara menambahkan simple facebook fanpage di blog, jika ada pertanyaan mengenai hal ini, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah melihat artikel saya ini, untuk tutorial yang lainnya dari saya, silahkan tetap kunjungi tutorialumum.com.