Sudut Blogger: Tutorial

Tutorial

Tampilkan postingan dengan label Tutorial. 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 Memasang SSL HTTPS di Blogger Gratis

Blog Cdn Tutorial

Ivan Eka Add Comment

Ivan Eka

Pada tutorial kali ini saya akan membagikan cara memasang SSL HTTPS di Blogger Gratis. Kita tau SSL (Secure Socket Layer) adalah sebuah keamanan untuk melindungi sebuah situs dengan teknologi enkripsi yang cukup canggih. Pada saat kita menggunakan SSL atau HTTPS maka akan muncul tulisan Secure atau Aman dan akan ada icon Gembok atau Lock di sampingnya.

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

Sebelum saya memberikan caranya, sebaiknya kalian tau kekurangan dan kelebihan memasang SSL ini, karena bisa berdampak baik dan buruk bagi blog kalian. Berikut adalah kelebihan dan kekurangan menggunakan SSL.

Kelebihan dan kekurangan menggunakan SSL

Kelebihan menggunakan SSL

Menambah kepercayaan pengunjung pada situs web kita, bahwa website yang kita gunakan aman.
Mengamankan aktifitas untuk bertransaksi karena sistem enkripsi yang canggih.
Meningkatkan rangking SEO kalian.
Google menganjurkan kita menggunakan HTTPS.

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

Kekurangan menggunakan SSL

Harus redirect HTTPS terlebih dahulu.
Jika memasang HSTS, kemungkinan web tidak bisa diakses selain pakai HTTPS.
Apabila kalian tidak menggunakan HTTPS lagi, maka halaman kalian akan error.

Itu dia kelebihan dan kekurangan menggunakan SSL, sekarang tergantung kalian ingin mengunakan SSL ini atau tidak. Nah langsung saja, bagi yang ingin menggunakan SSL, silahkan ikuti langkah-langkah dari saya berikut ini.

Cara Memasang SSL HTTPS di Blogger Gratis

Karena Cloudflare adalah situs yang memberikan SSL secara gratis selamanya, silahkan kalian daftar dahulu di Cloudflare.

Cara Mendaftar Cloudflare

Silahkan kalian masuk terlebih dahulu ke situs Cloudflare.
Di halaman utama, klik Sign Up.
Lanjut ke halaman berikutnya, silahkan isi Email yang kalian miliki dan Password yang kalian inginkan. Kemudian beri tanda cek pada I agree to Cloudflare's terms and conditions and privacy policy. Setelah itu klik Create Account.
Sekarang silahkan kalian masukan domain situs atau blog kalian. Jangan gunakan http saat memasukan domain kalian.
Kemudian akan di lakukan proses scanning, setelah proses scanning di lakukan, silahkan klik Continue.
Lanjut ke step berikutnya klik lagi Continue.
Sekarang kalian di suruh memilih rencana pembayaran atau Cloudflare Plan, silahkan kalian pilih Free Website, kemudian kalian klik Continue.
Nah, kemudian kalian akan di suruh untuk mengganti Nameservers yang kalian gunakan di Tempat kalian membeli ataupun menggunakan domain, karena saya di sini menggunakan domain ccTLD dot TK, jadi saya harus mengganti Nameservers di freenom.

Catatan :

Current Nameservers adalah Nameservers awal kalian, jadi yang harus kalian lakukan adalah menggantinya dengan Nameservers baru yang ada di sampingnya, seperti ini. Jangan sampai kalian salah menempatkan Nameservers.
Jika ada tulisan Remove this nameserver, berarti kalian harus menghapus dan mengosongkan nameservers tersebut.
Ini adalah contoh pengaturan yang di berikan kepada saya. Jangan lupa save nameservers yang di berikan kepada kalian.

Setelah selesai mengaturnya, sekarang klik Continue.
Jika belum di konfirmasi, silahkan klik Recheck sampai tampilan menjadi hijau atau Active seperti ini.

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

Cara Setting SSL di Cloudflare

Setelah SSL aktif sekarang pilih menu Caching.
Di halaman Chacing, klik simbol segitiga terbalik di sebelah Purge Individual Files, kemudian pilih Purge Everything. Setelah muncul form konfirmasi, klik lagi Purge Everything.
Kemudian pilih menu Page Rules.
Di menu Page Rules, silahkan kalian klik Create Page Rule, masukan link blog kalian dengan menambahkan /*, kemudian klik + Add a Setting, kemudian pilih Always Use HTTPS, setelah selesai klik Save and Deploy.
Sekarang cek blog kalian, jika sudah berhasil, maka akan muncul https sebelum domain blog kalian.
Jika belum kemungkinan kalian harus menunggu sekitar 24 jam.

Kemudian apa yang harus dilakukan apabila https sudah aktif ?

Hal yang harus dilakukan setelah SSL/HTTPS aktif

Perbaiki widget yang di atur secara manual, karena biasanya menggunakan link http, kemudian ubah menjadi https.
Ubah semua link kalian yang menggunakan http menjadi https.
Pastikan kalian menggunakan template yang support HTTPS.
Submit ulang sitemap ke Google Webmaster tools.

(Baca juga : Cara Menambahkan Sitemap Ke Google Webmaster Tools)

Gan kok blognya gak pake HTTPS?

Alasan mengapa saya tidak menggunakan HTTPS adalah karena template saya yang tidak support, bukan pada saat menjalankan domain, tetapi hanya beberapa fungsi yang ada di template tidak bisa di gunakan. Jadi saya memutuskan untuk tidak menggunakan HTTPS/SSL. Jika masih belum percaya silahkan masuk ke blog saya yang bernama Game Terbaik Android, itu adalah blog saya yang support menggunakan HTTPS secara gratis.

Demikian tutorial dari saya mengenai cara memasang SSL/HTTPS di blogger gratis. Jika ada pertanyaan mengenai cara memasang dan mengatur SSL ini, silahkan kalian masukan di kolom komentar.

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

Cara Membuat Recent Post Berdasarkan Label Di Blogger

Tutorial Widget

Ivan Eka Add Comment

Ivan Eka

Setelah sebelumnya saya sudah membuat popular post berdasarkan label, pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat recent post berdasarkan label di blogger. Yang membedakan dari widget sebelumnya adalah antara widget popular atau populer yang hanya menampilkan artikel populer dan recent post atau artikel terbaru.

(Baca juga : Cara Membuat Widget Popular Post Berdasarkan Label di Blogger)

Ini memungkinkan visitor atau pengunjung blog untuk melihat serta memilih artikel dengan label atau kategori yang mereka sukai. Tidak hanya itu, script yang di pakai juga tidak terlalu banyak sehingga memudahkan kita mengatur widget recent post ini.

Masih sama seperti widget popular post per label, widget ini juga memiliki pengaturan yang memudahkan kita untuk menampilkan beberapa fitur yang ada di dalam widget ini. Untuk cara memasang widget recent post berdasarkan label di blogger, ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Recent Post Blogger Berdasarkan Label Seperti Evo Magz Template)

Cara Membuat Recent Post Berdasarkan Label Di Blogger

Langkah pertama masuk ke akun Blogger agan.
Pilih menu Tata Letak, kemudian pilih lokasi widget yang agan inginkan, klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.
Masukan Judul widgetnya, kemudian masukan kode di bawah ini tepat di kolom Konten.

<style type="text/css">
img.label_thumb{position:absolute;top:6px;left:0;float:left;height:50px;width:58px;}ul.label_with_thumbs{float:left;width:100%;margin: 0 0 0;padding:0;}ul.label_with_thumbs li{padding:6px 0px 6px 66px;position:relative;min-height:53px;margin:0 0 0 0;border-bottom:1px solid #eee;}ul.label_with_thumbs li:last-child{border-bottom:none !important;}.label_with_thumbs li{list-style:none;font-size:11px;color:#999;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}
</style>
<script type='text/javascript'>
var numposts = 6;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 0;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/LabelAgan?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Pengaturan Widget :

var numposts = 6; di gunakan untuk mengatur jumlah artikel yang akan di tampilkan, silahkan ganti dengan jumlah artikel yang agan ingin tampilkan.
var showpostthumbnails = true; di gunakan untuk mengaktifkan dan menonaktifkan gambar thumbails widget.
var displaymore = false; di gunakan untuk mengaktifkan dan menonaktifkan link readmore.
var showcommentnum = false; di gunakan untuk mengaktifkan dan menonaktifkan jumlah komentar pada artikel tersebut.
var showpostdate = false; di gunakan untuk mengaktifkan dan menonaktifkan waktu pembuatan artikel.
var numchars = 0; di gunakan untuk menampilkan jumlah karakter pada artikel.
true di gunakan untuk mengaktifkan fitur, false digunakan untuk menonaktifkan fitur yang ada.
Ganti LabelAgan dengan dengan label blog yang agan akan tambahkan.

Setelah selesai mengatur, silahkan klik Simpan.
Jika berhasil maka tampilan widget akan seperti ini.

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

Demikian tutorial dari saya mengenai cara membuat recent post berdasarkan label di blogger. Jika ada pertanyaan mengenai widget ini, atau mengenai cara pemasangannya di blogger, silahkan masukan ke dalam kolom komentar.

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

Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Blogging Tutorial Widget

Ivan Eka Add Comment

Ivan Eka

Sebelumnya saya telah membagikan artikel tentang cara membuat widget popular post dengan rating bintang, pada tutorial kali ini saya akan memberikan cara tentang membuat popular post juga, tetapi yang berbeda adalah widget popular post ini di sortir berdasarkan label atau biasa kita sebut sebagai kategori dari artikel. Jadi yang kita lihat adalah label yang sama dalam 1 widget.

(Baca juga : Cara Membuat Widget Popular Post Dengan Rating Bintang)

Lebih jelasnya widget popular post ini akan menampilkan artikel terpopuler dari label yang di pilih. Tidak hanya itu di bawah widget popular post per label ini juga di tambahkan link agar pengunjung bisa melihat semua artikel yang ada di label atau kategori tersebut.

Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Langsung saja untuk cara memasang widget popular post berdasarkan label di blogger, silahkan ikuti langkah-langkah dari saya berikut ini.

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

Cara Memasang Widget Popular Post Berdasarkan Label di Blogger

Cara Memasang Script di Tema Blog

Langkah pertama masuk ke akun Blogger agan.
Pilih menu Tema, klik Edit HTML.
Silahkan cari kode </style> atau ]]></b:skin>, kemudian masukan kode CSS di bawah ini tepat diatasnya.(Untuk mencari, silahkan tekan Ctrl + F pada keyboard)

img.label_thumb{float:left;margin-right:10px;height:60px;width:60px;}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
.tutorialumum1 .viewmore,.tutorialumum2 .viewmore{font-size: 11px;    border-radius: 13px;float: right;font-weight:400;    margin-top: -40px;}
.tutorialumum1 .viewmore a,.tutorialumum2 .viewmore a{    border-radius: 13px;display:flex;color:#1194f2;padding:1px 8px;font-weight:400;border:1px solid #1194f2;transition:none;}
.tutorialumum1 .viewmore a:hover,.tutorialumum2 .viewmore a:hover{background:#1194f2;color:#fff;border-color:transparent:    }
.tutorialumum1 .viewmore a:before,.tutorialumum2 .viewmore a:before{
    content: "\f067";
    font-family: FontAwesome;
    font-style: normal;
    margin-right: 5px;
    text-decoration: inherit;
    transition: all .3s;
}
.tutorialumum1 .viewmore a:hover:before,.tutorialumum2 .viewmore a:hover:before{
transform: rotate(360deg);
}

Setelah itu cari kode </head>, kemudian masukan kode di bawah ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD8cBDSmmM7pe07uZKksvR7_36ltjrdGZ32sdb-BNXPzNezeC-ZT5TfKGqjWLqlhBpuAixYyWkJjXDfBOZ97XCU1IxGGRas3Yk3gbG_C-7hhOmN_jFlmh67qeYd3C-7kJtX1awJThEVYJv/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Setelah selesai, klik Simpan tema untuk menyimpan.

Cara Memasang Script di Widget Blog

Silahkan pilih menu Tata letak, pilih lokasi penempatan widget yang agan inginkan, klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.
Masukan Judul widget, kemudian masukan script di bawah ini pada kolom Konten.

<script type='text/javascript'>
var numposts = 6;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 0;
</script>


<script type="text/javascript" src="/feeds/posts/default/-/LabelAgan?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>


<script src="http://www.tutorialumum.com/feeds/posts/summary/-/LabelAgan?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<div class="tutorialumum2"><span class="viewmore"><a href="http://www.tutorialumum.com/search/label/LabelAgan">Lihat lebih banyak</a></span></div>

Pengaturan Widget :

var numposts = 6; di gunakan untuk mengatur jumlah artikel yang akan di tampilkan, silahkan ganti dengan jumlah artikel yang agan ingin tampilkan.
var showpostthumbnails = true; di gunakan untuk mengaktifkan dan menonaktifkan gambar thumbails widget.
var displaymore = false; di gunakan untuk mengaktifkan dan menonaktifkan link readmore.
var showcommentnum = false; di gunakan untuk mengaktifkan dan menonaktifkan jumlah komentar pada artikel tersebut.
var showpostdate = false; di gunakan untuk mengaktifkan dan menonaktifkan waktu pembuatan artikel.
var numchars = 0; di gunakan untuk menampilkan jumlah karakter pada artikel.
true di gunakan untuk mengaktifkan fitur, false digunakan untuk menonaktifkan fitur yang ada.
Ganti http://www.tutorialumum.com dengan Link URL blog agan.
Ganti LabelAgan dengan dengan label blog yang agan akan tambahkan.

Setelah selesai mengatur fitur-fitur yang ada, klik Simpan.
Jika berhasil maka tampilannya akan seperti ini.

(Baca juga : Cara Membuat Widget Breaking News 2 Style di Blogger)

Demikian tutorial dari saya mengenai cara membuat widget popular post berdasarkan label di blogger. Jika ada pertanyaan mengenai cara memasang atau mengenai widget di atas, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk agan atau sista semua. Untuk widget blogger yang lainnya, silahkan tetap 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 Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Blogging Tutorial Widget

Ivan Eka Add Comment

Ivan Eka

Setelah sebelumnya saya membagikan tutorial cara membuat widget recent comments ringan di blog, pada artikel kali ini saya akan memberikan cara membuat widget komentar terbaru dengan judul postingan di blogger.

Baca juga: Cara Membuat Widget Komentar Terbaru Disqus di Blog

Di dalam widget komentar terbaru ini sudah ada judul postingannya, jadi akan terlihat artikel apa yang terakhir di komen oleh pengunjung blog. Untuk masalah kecepatan, widget ini tidak akan menggangu kecepatan blog, jadi kalian tidak perlu khawatir untuk memasang widget ini.

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Widget ini saya temukan di blog Kang Ghani yang sering membagikan berbagai tutorialnya. Bagi yang ingin tahu bagaimana cara memasangnya, ikuti langkah-langkah berikut ini.

Baca juga: Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger

Cara Memasang Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Langkah pertama masuk ke akun Blogger kalian.
Kemudian pilih menu Tata Letak, kemudian pilih lokasi widgetnya.
Pilih Tambahkan Gadget, kemudian pilih HTML/Javascript.
Masukan Judul widget, lalu masukan skrip di bawah ini.

<style type="text/css">
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 3px solid #1194f2;padding: 7px 0;}
</style>
<script type="text/javascript">
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(a);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> commented"),1==n_rc&&document.write(" on "+s),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<i>&#8220;"),document.write(d),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"&hellip;&#8221;</i></div>"),document.write("")}}}
</script><script src=http://www.tutorialumum.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>

Catatan :

Silahkan ganti http://www.tutorialumum.com dengan URL blog kalian.
a_rc = Di gunakan untuk mengatur jumlah komentar, ganti angka 5 dengan jumlah komentar yang ingin kalian tampilkan.
m_rc = Di gunakan untuk menampilkan tanggal komentar, gunakan true untuk menampilkan dan false untuk menyembunyikan.
n_rc = Di gunakan untuk menampilkan judul postingan, gunakan true untuk menampilkan dan false untuk menyembunyikan.
o_rc = Di gunakan untuk menentukan jumlah karakter komentar, silahkan ganti 100 dengan jumlah karakter yang kalian inginkan.
Cari kode warna #1194f2, silahkan ganti warnanya sesuai keinginan kalian.

Setelah selesai mengatur klik Simpan.

Baca juga: Cara Membuat Widget Komentar Terbaru dengan Avatar

Demikian tutorial dari saya mengenai cara membuat widget terbaru dengan judul postingan di blogger. Jika ada pertanyaan mengenai cara memasangnya atau yang lainnya, silahkan masukan di kolom komentar. Jangan lupa share artikel ini jika bermanfaat untuk kalian.

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

Cara Memunculkan Sub Menu di Menu Navigasi Blog

Blog Tips Blogging Tutorial Widget

Ivan Eka Add Comment

Ivan Eka

Menu dalam suatu blog adalah hal yang wajib di miliki dalam setiap blog, menu berguna untuk memudahkan para pengunjung blog atau suatu situs untuk melihat postingan ataupun artikel lainnnya di dalam blog tersebut. Pada tutorial kali ini saya akan memagikan tentang cara memunculkan submenu di menu navigasi blog.

(Baca juga : Cara Memasang Link Menu Navigasi di Blogger)

Biasanya menu terletak di bagian Header atau bagian atas halaman, ada juga menu di bagian Footer atau bagian bawah, dan juga bagian samping atau sidebar menu.

Semua menu tersebut dapat dibuat tergantung si pembuat blog atau situs web tersebut.

Cara Memunculkan Sub Menu di Menu Navigasi Blog

Ada lanjutan level dari menu tersebut, yaitu sub menu. Disini saya akan membahas tentang sub menu, karena masih banyak orang yang tidak mengerti tentang sub menu tersebut.

Lalu bagaimana cara menampilkan sub menu?

Bagi kalian yang belum mengetahui cara membuat sub menu atau menampilkan sub menu, ikuti langkah-langkah dari saya berikut ini.

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

Cara Membuat atau Memunculkan Sub Menu di Menu Navigasi Blog

Langkah pertama buka akun Blogger kalian.
Pilih menu Tema, kemudian pilih Edit HTML.
Cari nama menu yang ingin di tambahkan Sub Menu, sebagai contoh saya akan menambahkan sub menu di menu Programming. Tekan Ctrl + F pada keyboard untuk mencari nama submenu.
Setelah ketemu, masukan skrip kode di bawah ini sebelum skrip </li>.

<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>

Catatan : Ganti Sub Menu dengan nama Sub Menu yang kalian inginkan.

Contoh :

<li><a href='#'>Programming</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>
</li>

Setelah selesai, pilih Simpan tema.

(Baca juga : Cara Menambahkan Icon di Menu Navigasi Blog)

Demikian tutorial singkat dari saya mengenai cara memunculkan sub menu di menu navigasi blog. Jika ada pertanyaan mengenai hal ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog saya ini, untuk tutorial yang lainnya dari saya, tetaplah kunjungi tutorialumum.com.

Cara Mudah Menghapus Database di phpMyAdmin - Trik-Komtek

Database PHP Programming Tutorial

Ivan Eka Add Comment

Ivan Eka

Trik-Komtek - Kita tahu pentingnya sebuah database dalam sebuah program aplikasi yang kita buat. Namun jika terlalu banyak, kita akan kesulitan dalam memfilter database yang ada. Apalagi jika nama databasenya hampir mirip dengan database yang lain. Namun saat kita ingin menghapus database tersebut, kita kebingungan karena kita tidak menemukan cara untuk menghapus database tersebut. Untuk itu, pada tutorial kali ini saya akan memberikan tutorial tentang cara menghapus database di phpmyadmin.

(Baca juga : Cara Import Database MySql phpMyAdmin dengan Mudah)

Bagaimana cara menghapus database ?

Cara Mudah Menghapus Database di phpMyAdmin - Trik-Komtek

Sebetulnya sangatlah mudah bagi yang sudah sering memakai phpMyAdmin, tapi sangat sulit bagi yang tidak biasa atau baru memakai phpMyAdmin. Disinilah saya akan membahasnya dengan cara yang mudah. Selanjutnya ikuti langkah-langkah dari saya.

Cara Menghapus Database di phpMyAdmin

Pertama pastinya kalian harus membuka phpMyAdmin terlebih dahulu di browser. Setelah berada di tampilan awal phpMyAdmin, silahkan kalian pilih menu Databases.
Setelah masuk di menu databases, sekarang kalian tinggal pilih database yang akan dihapus dengan men-Check database yang ingin di hapus. Sebagai contoh disini saya akan menghapus database “tutorial_tmum_blog_keren” dan “tutorial_umum_blog_paling_keren”.
Setelah memilih database yang ingin dihapus, sekarang kalian pilih Drop.
Setelah muncul form Confirm, silahkan kalian pilih Ok.
Jika sukses, maka akan muncul tampilan seperti ini.

(Baca juga : Cara Mudah Export Database MySql dengan phpMyAdmin)

Mudahkan? Sebetulnya masih banyak cara lain yang bisa kalian lakukan, tapi saya hanya memberikan cara yang mudahnya saja. Sebetulnya di zaman sekarang ini semua serba dimudahkan, sekarang tinggal bagaimana kalian menyikapi pelajaran-pelajaran baru agar mempermudah pekerjaan kalian sendiri.

Segitu dulu tutorial dari saya, untuk tutorial saya yang lain tetap tetaplah kunjungi blog saya yang dibilang masih sederhana ini di https://trik-komtek.blogspot.com/. Terimakasih telah berkunjung dan belajar bersama saya.

Bila ada kritik dan saran jangan lupa tinggalkan komentar komentar kalian di kolom komentar, karena kritik dan saran dari kalian adalah masukan yang sangat berarti bagi saya.

Cara Mudah Export Database MySql dengan phpMyAdmin - Trik-Komtek

Database Tutorial Tutorial Database MySQL

Ivan Eka Add Comment

Ivan Eka

Trik-Komtek - Selamat datang di Sudut Blogger, blog yang membahas tetang tutorial software yang ada di komputer. Pada kesempatan saya akan membahas tentang Cara Mudah Export Database MySql dengan phpMyAdmin. Semoga artikel ini mudah di fahami dan bermanfaat bagi penulis dan pembaca.

(Baca juga : Cara Import Database MySql phpMyAdmin dengan Mudah)

Dalam membuat file database, kita juga dituntut untuk bisa membackup file yang ada. Inilah gunanya Export pada phpMyAdmin, yaitu untuk membackup data yang ada di dalam database.

Namun, bagaimana jika kita tidak bisa atau tidak mengerti cara mengexport database yang ada di phpMyAdmin?

Tenang saja, Tutorial Umum siap membantu anda. Jadi tidak usah malu untuk belajar, karena orang pintar tidak bisa dibilang pintar jika dia belum pernah bodoh.

Baiklah langsung saja untuk cara export database mysql dengan phpmyadmin, ikuti langkah-langkah dari saya berikut ini.

Cara Mudah Export Database MySql dengan phpMyAdmin - Trik-Komtek

(Baca juga : Cara Mudah Install XAMPP 1.7.3 di Komputer)

Cara Export Database MySql dengan phpMyAdmin

Langkah pertama buka phpMyAdmin, ditampilan awal phpMyAdmin, pilihlah database yang akan anda Export.
Ketika sudah muncul tampilan databasenya, langsung saja pilih menu Export.
Ketika berada di halaman Export, jika anda ingin mengekspor database secara cepat anda bisa memilih pilihan Quick – display only the minimal options. Tetapi jika anda ingin mengekspor dengan pengaturan tertentu, anda bisa memilih Custom – display all possible options.
Sebagai contoh saya ingin mengekspor database secara cepat, jadi saya memilih pilihan Quick – display only the minimal options. Untuk form Export templates, anda bisa mengabaikannya. Setelah anda memilih salah satu pilihan di Export method, anda juga bisa memilih pilihan format database yang akan anda export. Setelah itu anda bisa langsung pilih Go.
Setelah anda klik Go, maka database akan terdownload secara otomatis. Tapi tenang saja download ini tidak memakan Quota anda, karena ini adalah software offline. Kemudian file database bisa langsung di ambil di folder download.

(Baca juga : 5 Cara Mudah Menghapus Database di phpMyAdmin)

Itulah Cara Mudah Export Database MySql dengan phpMyAdmin dari saya, semoga bermanfaat. Dan jangan lupa lihat lagi Tutorial yang lain di Sudut Blogger.

Jangan lupa untuk memberi masukan di kolom Komentar kepada saya, karena Kritik dan Saran dari kalian, begitu berarti bagi saya. Share Artikel ini agar Tutorial ini bermanfaat bagi semua orang.