Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts

May 25, 2017

Cara Membuat Widget Stats Untuk Blog


Cara Membuat Widget Stats Untuk Blog | Di kesempatan kali ini saya akan membagikan tutorial Cara Membuat Widget Stats Untuk Blog. Widget ini biasanya di pasang untuk melihat berapa jumlah pengunjung suatu blog.
Oke sobat bisa langsung menyimak tutorial berikut

Berikut Langkah - Langkahnya :


1, Pertama, sobat harus masuk ke Dashboard Blogger → Tata Letak.


2. Kedua, sobat harus menambahkan gadget (Tambahkan Gadget). Setelah itu sobat akan di suguhi tampilan pop up. Scroll ke bawah sampai menemukan Statistik Blog.


3. Ketiga, sobat bisa ganti judul Stats-nya, sobat bisa menentukan Jangka Waktu, dan juga bisa menentukan gaya stats-nya.


4.  Kemudian utuk menyimpannya tekan tombol Simpan/Save.


5. Setelah itu akan muncul widget yang telah di buat.
6. Untuk menyimpan hasil stelan. Sobat harus menekan tombol Simpan Setelan.



Demikian Cara Membuat Widget Stats Untuk Blog. Semoga Bermaafaat.
Good Luck ☺
Read more

May 19, 2017

Cara Mengganti Title Mod Komentar Disqus


Hai sobat, di sini saya akan membagikan tutorial Cara Mengganti Title Mod Komentar Disqus .
Di blog ini saya menggunakan Disqus sebagai komentarnya. Jika kita menggunakan disqus maka title bawaannya " Mod ". Untuk mengubahnya sobat bisa menyimak tutorial ini.

Berikut Langkah - Langkahnya :


Disqus sudah di pasang di blog
1. Sebelumya login terlebih dahulu di disqus.
2. Lalu buka link ini https://disqus.com/home/
3. Lalu akan muncul tampilan berikut :


4. Lalu sobat akan di suguhi tampilan Start.


5. Kemudian sobat langsung masuk ke Tab Settings → Community → Moderator Badge Text. Dan isi kotak tersebut sesuai selera sobat. Misal : Author, Modder, Penulis, dll.


6. Untuk menyimpannya sobat perlu scroll kebawah sampai menemukan tombol Save.


7. Setelah itu sobat bisa mengeceknya di masing - masing post sobat di bagian komentar.

Demikian tentang tutorial Cara Mengganti Title Mod Komentar Disqus. Sekian dan terimakasih.
Semoga Bermaanfaat
Read more

March 16, 2017

Cara Atasi Disqus Hilang Setelah di Pasang di Blog

Selamat Pagi , Allhamdulillah saya bisa posting tutorial lagi di blog tercinta saya cinta ini wkwk...
Kali ini saya akan bagikan tutorial " Cara Atasi Disqus Hilang Setelah di Pasang di Blog ".
Waktu itu saya memakai komentar dengan disqus. setelah saya pasang disqus di blog seleng beberapa hari tiba - tiba disqusnya hilang.
Dengan bantuan Internet dan doa :v , saya bisa mengembalikan disqus saya kembali

Berikut Langkah - Langkahnya :
 Disqus Sudah pernah dipasang di Bog
1. Sebelumya login terlebih dahulu di disqus.
2. Lalu buka link ini https://disqus.com/home/
3. Lalu akan muncul tampilan berikut :
  
4. Lalu masuk ke tab Community → Import → Pilih jenis blog anda, Contoh: Blogger → Import Comments from Blogger.

5. Lalu akan muncul tampilan " Permintaan Izin " pilih Ya untuk Ok.

6. Lalu pilih blog anda.


Sekian Dan Terimakasih telah berkunjung di blog Kami.
Selamat Bereksperimen

Read more

March 13, 2017

Cara Membuat Widget Recent Comment dari Disqus

Disqus adalah Sebuah platfrom sistem komentar paling terpopuler saat ini. Disqus juga menampilkan fitur - fitur yang elegan untuk penggunanya, dan juga dapat menarik pengguna agar dapat memakai dirinya.
Masih banyak lagi keunggulan Disqus.Namun disini admin akan membagikan tutorial " Cara Mambuat Widget Recent Comment dari Disqus ".

Fungsinya untuk memperlihatkan komentar terbaru dari admin atupun pengunjung yeng telah berkomentar di blog tersebut. Berikut langkah - langkahnya :

1. Pastikan blog anda sudah terdaftar di disqus dan sudah terpsang komentar disqus.
2. Login ke Blogger → Tata Letak → Tambahkan Gagdet baru HTML/Javascript. Copykan kode di bawah ini :
 <style scoped="scoped" type="text/css">
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
</style>
<div id="RecentComments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://thobib-lab.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div> 

3. Lalu Save.

4. Sebelum Save ganti url " https://thobib-lab.disqus.com....... " dengan Id disqus sobat. jika belum mengethaui id disqus sobat silahkan masuk ke link " Cara Melihat Id Disqus ".

Jika masih belum bisa berkomentar dikolom komentar atau Hubungi admin
 
Sekian dan Terimakasiih
Selamat Bereksperimen.
Read more

March 12, 2017

Cara Melihat ID Disqus

 
Gambar : disqus.com

Hai sobat Thobib Lab, Pasti kalian tidak asing lagi dengan Disqus. nggomong ngomong, Kemarin ada orang  yang tanya "Cara Mengetahui Id Disqus". baik langsung saja admin akan bagikan tutorial " Cara Mengetahui Id Disqus"

Berikut Langkah - Langkahnya : →

1. Sebelumya login terlebih dahulu di disqus.
2. Lalu buka link ini https://disqus.com/home/
3. Lalu akan muncul tampilan berikut :

4.  Kemudian buka tab Setting → General → Shortname.

Jika masih belum bisa berkomentar dikolom komentar


Sekian dan Terimakasih
Semoga Bermanfaat
 

Read more

March 02, 2017

Membuat Sitemap Blog Responsif

Sitemap adalah daftar isi blog.

Berikut Langkah - langkahnya :
1. Pertama, Silahkan buat Laman baru.
2. Pilih ke mode HTML, masukkan script berikut :
 
 <div class='jontor'>
  <script src="https://rawgit.com/mastamvan/backup/master/sitemap.js"></script>
  <script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=mas_tamvan_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .mas_tamvan_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor 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;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol 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);}
.jontor 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;}
.mas_tamvan_Postname li:nth-of-type(odd){background:#f1f3f3;}
.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> 

3. Jangan lupa beri judul, lalu Publish.
4. Untuk melihat tekan Lihat atau View.


Sekian dan Terimakasih
Semoga Menambah Wawasan Anda
Read more

Cara Buat Kotak Iklan 125x125 di Sidebar


Halo sobat thobib lab,sudah beberapa admin ngak post di blog ini.kali ini admin akan bagikan "Tutorial Membuat Kotak Iklan ukuran 125 x 125 di Sidebar". Sebelumnya saya juga menggunkan tutorial ini di blog saya sendiri.

Sebenarnya ide ini sudah di pakai oleh arlina design, karena saya tertarik saya akan share lagi.

Berikut langkah - langkahnya :
1. Masuk ke Tema.

2. Edit html, letakkan kode berikut di atas ]]></b:skin>
/* CSS Ad Slot Wrapper */
.kotak_iklan {margin:auto;transition:all 1s ease-out;}
.kotak_iklan .sidebar .widget-content,.kotak_iklan .sidebar-two .widget-content{padding:0;border:0;}
.kotak_iklan .sidebar .widget {margin-bottom:0;padding:0;
.kotak_iklan img{background:#fff;text-align:center;margin:5px 2.5px;padding:2.5px;border:1px solid #ddd!important;transition:all .6s ease-out}
.kotak_iklan  img:hover {background:#fff;border-color:#bbb!important;}
.kotak_iklan2 {text-align:center;margin:0 auto;transition:all 1s ease-out;}
.kotak_iklan2 .sidebar .widget-content,.kotak_iklan2 .sidebar-two .widget-content{padding:0;background:#f2f6f7;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border:0;}
.kotak_iklan2 .sidebar .widget,.kotak_iklan2 .sidebar-two .widget {margin-bottom:0;padding:0;}
.kotak_iklan2  img {text-align:center;transition:all 1s ease-out;}
.kotak_iklan2  img:hover {transition:all .5s ease-out;}
.kotak_iklan3 {position:relative;margin:0 auto;}
3. Lalu save, masuk ke Tata Letak → Tambahkan Gadget dengan html berikut:
 <div class="kotak_iklan">
<a href="#" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a>
</div> 
Sekian dan Terimakasih
Selamat Bereksperimen
Read more