logo blog

Widget Recent Comments Blogger With Avatar

Widget Recent Comments Blogger With Avatar
Widget Recent Comments Blogger With Avatar

cara membuat widget recent comment dengan thumbnail

Tutorial Membuat recent comment widget blogger. Sebelumnya saya juga sudah pernah posting Artike tentang Widget Recent Comment. Tapi sebelumnya saya ngambil dari Comment Disqus. Bagi kalian yang ingin memasangnya bisa lihat di.. Cara Membuat Recent Comments Disqus

Untuk tutorial sekarang kita akan memasang widget recent comment dari comment blogger, nanti akan ditampilkan di sidebar blog kalian...

Widget Recent Comment Blogger ini dilengkapi dengan Gambar dari profil yang comment, Avatar / thumbnailnya... Demo Widget Recent Comment Blogger

Langsung saja ke tutorialnya, saya lagi males ngetik :v

Tutoeial Memasnag Widget Recent Comments Blogger With Avatar Di Blogger

  • Langkah awal kalian masuk ke blogger.com
  • setelah login masuk ke menu Template, Tataletak
  • Lalu tambahkan widget baru, cari HTML / JavaScript.
  • Kurang lebih seperti ini...

  • Widget Recent Comments Blogger With Avatar
  • Selanjutnya klik tanda plus, annti akan keluar pop up, lalau masukan script Widget Recent Comment Dibawah ini
  • 
    <script type="text/javascript">
      //<![CDATA[    
      // Recent Comments Settings    
      var numComments    = 8,    
          showAvatar     = true,    
          avatarSize     = 60,    
          roundAvatar    = true,    
          characters     = 30,    
          showMorelink   = true,    
          moreLinktext   = "More &#x2192;",    
          defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",    
          hideCredits    = true;
      //]]>
    </script>
    <script src='https://rawgit.com/mastamvan/backup/master/recent-comment.js' type='text/javascript'></script>
    <style type='text/css'>ul.mas_tamvan_recent_comment{display:inline-block;background:-moz-linear-gradient(-45deg,#183850 0,#183850 25%,#192C46 50%,#22254C 75%,#22254C 100%);background:-webkit-linear-gradient(-45deg,#183850 0,#183850 25%,#192C46 50%,#22254C 75%,#22254C 100%);width:100%;padding:12px 0 0;margin:0;position:relative;overflow:hidden;border-radius:5px}ul.mas_tamvan_recent_comment li a{text-decoration:none;color:#0AD5C1;padding:0 0 5px}ul.mas_tamvan_recent_comment li a.author{display:block}ul.mas_tamvan_recent_comment li{position:relative;clear:both;display:inline-block;padding:5px 10px 10px 10px;margin:0 10px 20px 0;font-size:13px;border-radius:10px;background-color:rgba(25,147,147,0.2);animation:show-chat-even 0.15s 1 ease-in;-moz-animation:show-chat-even 0.15s 1 ease-in;-webkit-animation:show-chat-even 0.15s 1 ease-in;float:left;margin-left:80px;color:#0EC879;border:0}ul.mas_tamvan_recent_comment li:after{position:absolute;top:15px;content:'';width:0;height:0;border-top:15px solid rgba(25,147,147,0.2);border-left:15px solid transparent;left:-15px}ul.mas_tamvan_recent_comment li .avatarImage{position:absolute;top:0;width:50px;height:50px;border-radius:50px;left:-70px;overflow:hidden}ul.mas_tamvan_recent_comment li .avatarImage img{width:100%;height:auto}</style>
    <script src="https://mastamvan.blogspot.com/feeds/comments/default?alt=json&amp;callback=mas_tamvan_recent_comment&amp;max-results=5" type="text/javascript"></script>
    

    Silahkan ganti Link dibawah ini dengan link blog kalian: https://mastamvan.blogspot.com

    Pengaturan pada Setelan Umpan Situs. Khusus Buat yang mengatur setelan Umpan Situsnya Ke Singkat...
    Masuk Ke Setelan, lainnya, Atur Bagian Izinkan Umpan Blog seperti pada gambar dibawah ini..

    Widget Recent Comments Blogger With Avatar
  • Save Widget dan Selesai


jangan lupa sobat blogger yang tamvan, mampir juga ke tutorial lainnya yang sudah saya posting :)



Cukup sekian dan terima kasih, semoga artikel tentnag Widget Recent Comments Blogger With Avatar terbaru Dan Terupdate

Apabila ada yang mau ditanyakan, silahkan bertanya di kolom komenter dan jangan lupa share + commentnya :)

Cara Membuat Syntax Highlighting Pembungkus Kode

Cara Membuat Syntax Highlighting Pembungkus Kode
Cara Membuat Syntax Highlighting Pembungkus Kode

Tutorial Cara Memasang Syntax Highlighting Untuk Pembungkus Kode di postingan

Membuat Syntax Highlighting atau Pembungkus Code with defer js. Kali ini mas tamvan akn berbagi lagi pembungkus kode di postingan blog yang bisa di sebut dengan Syntax Highlighting pre code. Bagi kalian yang ingin melihat - lihat tampilan dari Syntax Highlighting yang sebelumnya sudah di posting...



Nah pada tutorial kali ini kita akan membuat lagi syntax yang simple dilengkapi dengan style warna pada masing-masing code. Dan tentunya Syntax Highlighting ini sudah di defer yang akan menghindari blocking render js..

Okeh lah tanpa basa basi lagi, mari kita lanjut ke tutorial cara pemasnagannya pada blog...

Syntax Highlighting With Defering js

  • Silahkan login ke akun blogger kalian
  • Kalo sudah login masuk ke menu Template,Edit HTML
  • Selanjutnya cari kode </body>, setelah ketemu masukan script ini diatasnya
  • 
    <script>
    //<![CDATA[
    function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/syntaxmas.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    //]]>
    </script>
    </b:if>
    
  • Masih di Edit HTML, kalian cari lagi kode </head>
  • Setelah Ketemu, masukan css dibawah ini tepat di atasnya..
  • 
    <style type='text/css'>
    pre{position:relative}
    pre:before{-moz-user-select:none;font-size:15px;font-family:'Roboto,sans-serif';content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
    pre:after{-moz-user-select:none;display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
    pre[data-codetype="tamvanCSS"]:before,pre[data-codetype="tamvanHTML"]:before,pre[data-codetype="tamvanJS"]:before,pre[data-codetype="tamvanJQ"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
    i.klik-url,pre,code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
    .hljs{display:block;padding:0.5em;background:#333;color:white;max-height:350px;overflow:hidden;border-radius:5px}
    .hljs:hover{overflow:auto}
    .hljs-name,.hljs-strong{font-weight:bold}
    .hljs-code,.hljs-emphasis{font-style:italic}
    .hljs-tag{color:#62c8f3}
    .hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
    .hljs-string,.hljs-bullet{color:#a2fca2}
    .hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
    .hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
    .hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
    .hljs-comment,.hljs-deletion,.hljs-code{color:#888}
    .hljs-regexp,.hljs-link{color:#c6b4f0}
    .hljs-meta{color:#fc9b9b}
    .hljs-deletion{background-color:#fc9b9b;color:#333}
    .hljs-addition{background-color:#a2fca2;color:#333}
    .hljs a{color:inherit}
    .hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
    </style>
    
  • Sampai di sini pemasangan pada templatenya sudah selesai, kita tinggal menerapkannya pada postingan blog. Bagaimana cara memanggilnya?...
  • Masuk ke postingan yang ingin dipasang Syntax Highlighting, Lalu pilih tab HTML dan copy kode pembungkus dibawah ini sesuai kode yang ingin kalian tampilkan
  • 
    Kode Pembungkus HTML
    <pre data-codetype="tamvanHTML" title="HTML">
    <code>
    <!--Taro Kode Kalian Disini-->
    </code>
    </pre>
    
    Kode Pembungkus CSS <pre data-codetype="tamvanCSS" title="CSS"> <code> <!--Taro Kode Kalian Disini--> </code> </pre>
    Kode Pembungkus Javascript <pre data-codetype="tamvanJS" title="Javascript"> <code> <!--Taro Kode Kalian Disini--> </code> </pre>
    Kode Pembungkus jQuery <pre data-codetype="tamvanJQ" title="JQuery"> <code> <!--Taro Kode Kalian Disini--> </code> </pre>
  • Paste ke postingan.
Jika kalian ingin mempublikasikan HTML Javascript JQuery sebaiknya kode kalian diparse terlebih dahulu, agar scriptnya tampil...
Untuk memparsenya kalian bisa menggunakan tools ini ... Free Tools Untuk Parse Atau Konversi Html
Bagian ini ganti dengan kode kalian <!--Taro Kode Kalian Disini-->
  • Nah jika sudah, kalian tinggal save dan publikasikan..
  • Selesai...


Cukup sekian dan terima kasih, semoga artikel tentnag Cara Membuat Syntax Highlighting Pembungkus Kode ini bermanfaat..

Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar ya gan :)

Cara Membuat Tombol Share Dibawah Postingan Blog

Cara Membuat Tombol Share Dibawah Postingan Blog
Cara Membuat Tombol Share Dibawah Postingan Blog

tutorial cara pasang tombol share di bawah postingan blogspot

Cara Memasang Tombol Social Share Button di Blog. Kali ini blog mas tamvan akan share tutorial cara memasang tombol social share dan like button dilengkapi dengan counter.

Social share button ini saya ambil dari template evomagz dan kita akan pasang dibawah postingan blog. Fiturnya ada Google Plus Like, Facebook Like, Facebook Share, Twitter Share dan linkedin Share button. Tombol Social Share button ini kita akan pasang disetiap postingan blog.

Fungsinya dan manfaatnya apa tombol social share button ini? Fungsinya ya buat memudahkan agar ketika si pengunjung merasa artikel kalian bagus, bermanfaat / relevan dan ingin membagikannya ke social media maka dengan mudah tinggal pilih mau di share ke social media yang mana dan tinggal klik saja.

Nah bagi kalian yang ingin mencoba menerapkan widget social media share buton dibawah postingan blog ini, tinggal ikuti langkah demi langkah di blog mas tamvan ini :)

Dan jangan lupa mampir ke artikel lainnya yang sudah ada di blog ini :)



Kia lanjut ke tutorialnya...

membuat tombol share di setiap postingan


  • Jangan lupa login terlebih dahulu ke akun blogger kalian
  • Kalo sudah login, kalian pilih menu Template, Edit HTML
  • Selanjutnya Cari Kode <data:post.body/>
  • Biasanya kode tersebut ada banyak, tiap template beda-beda. Kalian pilih yang ke dua dan masukan script social share button dibawah ini tepat dibawah kode tadi
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Tombol share media sosial -->
    <div class='share-buttons-box'>
      <div class='share-buttons'>
        <div class='share gplus'>
          <div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
        <div class='share like'>
          <div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
        <div class='share fbshare'>
          <div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
        <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
        <div class='share linkedin'>
          <script src='//platform.linkedin.com/in.js' type='text/javascript'>
            lang: en_US
          </script>
          <script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>
        </div>
      </div>
    </div>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <div style='clear: both;'/>
    </b:if>
    
  • Lanjut... Sekarang kalian cari kode </head>
  • Kalo sudah ketemu, masukan css dibawah ini tepat diatasnya
  • 
    <style type='text/css'>
    /* share buttons */
    .share-buttons-box{height:67px;background:url(https://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;position:relative}
    .share-buttons{margin:0 0;height:67px;float:left}
    .share-buttons .share{float:left;margin-right:10px;display:inline-block}
    </style>
    
Kalo widget social share buttonya tidak tampil, silahkan taro html di bawah kode <data:post.body/> yang lainnya. Soalnya tiap template beda-beda.

Apabila masih tidak tampil, kalian bisa menggantinya dengan kode lain. Milasnya taro kode HTML social Share Buttonya di atas 'related-post atau di atas komentar.
  • nah kalo sudah, tinggal save dan selesai!!!

Cukup sekian dan terima kasih, semoga artikel tentang cara membuat tombol share button seperti facebook di bawah postingan blog ini bermanfaat...

Buat yang tidak mengerti dengan tutorial ini, silahkan bertanya di kolom komentar ya gan :) Insya allah dibantu sampe tampil :)

Double Click To Select All Text In Div

Double Click To Select All Text In Div
Double Click To Select All Text In Div

Double Click Tag Pre Dan blockquote Menjadi Selecr All Text

Cara Agar Tag div, pre code dan blockquote ketika di double click menjadi select all text. Tutorial kali ini kita akan menambahkan javascript yang berfungsi untuk menselect all text pada tag / div tertentu dengan double click.

Bagi kalian yang punya blog tutorial dan suka membagikan script ada baiknya pasang script double click to select all pada tag pembungkus script kalian, agar dengan mudah si pengunjung mencopy script yang kalian bagikan.

Tinggal double click maka secara otomatis semua text yang ada di tg tertentu langsung di block select all dan si pengunjung tinggal copy aja tanpa harus menxelect dari awal sampai akhir..

Untuk tutorial cara pemasangan script double click to select all text ini cukup mudah, kalian tinggal ikuti saja langkah demi langkah di blog mas tamvan ini :)

Double Click To Select All Text In Tag Div, Pre Code and Blockquote

  • Kalo sudah login, pilih menu Template, EDIT Html
  • Selanjutnya kalian cari kode </body>
  • Setelah ketemu, masukan script double click to select all text dibawah ini tepat diatas kode body tadi
  • 
    <script type='text/javascript'>
    //Double Click
    for (var pres = document.querySelectorAll("blockquote,pre"), i = 0; i < pres.length; i++) pres[i].addEventListener("dblclick", function() {
      var e = getSelection(),
        t = document.createRange();
      t.selectNodeContents(this), e.removeAllRanges(), e.addRange(t)
    }, !1);
    </script>
    
    Script di atas hanya akan berfungsi pada tag blockquote dan pre.
    Jika kalian ingin tag lain menjadi select all ketika di double click, silahkan tambahkan tag, id atau class dari pembungkusnya di sebelah pre. Jangan lupa pake tanda koma (,).
    Sehingga penampakannya menjadi seperti berikut.
    blockquote,pre,tag kalian
  • kalo sudah kalian tinggal save template
  • Selesai

Jangan lupa mampir ke tutorial lainnya ya gan :)



Cukup sekian dan terima kasih, semoga artikel tentang Cara agar semua text pada tag tertentu menjadi select all ketika di double click ini bermanfaat ya gan :)

jangan lupa komen apabila ada yang tidak dimengerti. Share jika bermanfaat :)

Membuat Widget Social Media Follower Counter

Membuat Widget Social Media Follower Counter
Membuat Widget Social Media Follower Counter

Cara Memasang Widget Social Media Follow Dan Like Counter

Tutorial Cara Membuat Widget Social Media Follower Counter Di Blogger. Pada Artikel Kali Ini Di Blog Mas Tamvan Akan Berbagi Tutorial Widget Blogger Memasang Social Media Counter Otomatis.

6 Social Media Counter. Facebook Like, Twitter Follow, Instagram Follow, Google Plus Follow, Youtube Subscribem, Pinterest Followers. Sebenarnya masih bisa ditambahkan social media lainnya tapi saya hanya engambil enam social media itu.

Social media Followers Button ini akan otomatis menampilkan Followers / Like Pada Widget Social Media kalian, kalian tinggal memasukan username dari social media kalian...

Untuk melihat tampilannya, kalian bisa buka link berikut ini. Demo Social Media Counter

Jangan lupa mampir ke artikel lainnya ya gan :)



Untuk tutorial cara pemasangan social media counternya, kalian bisa ikuti langkah demi langkah dibawah ini..

Widget Social Media Counter

  • Seperti biasa, kalian harus login terlebih dahulu ke blog kalian
  • Setelah login kalian masuk ke menu Tataletak, Tambahkan Widget, Cari HTML/Javascript, Tampilannya seperti berikut...

  • Membuat Widget Social Media Follower Counter
  • Buka HTML/Javascript Lalu Masukan Script dibawah ini kedalamnya.
  • 
    <style>
    #bungkus_social{color:white;background-color:#f9f9f9;margin:10px}#bungkus_social .item{padding:12px;font-size:11px;border-radius:5px;float:left;margin:0 10px 10px 0;background:grey;text-align:center;min-width:90px;min-height:130px;border-bottom:10px solid rgba(0,0,0,.15);text-transform:uppercase}#bungkus_social .item.facebook{background:#3a5795}#bungkus_social .item.instagram{background:#517fa4}#bungkus_social .item.google{background:#dd4b39}#bungkus_social .item.youtube{background:#b31217}#bungkus_social .item.pinterest{background:#cb2027}#bungkus_social .item.twitter{background:#00a5e5}#bungkus_social .item i{border-radius:100%;background:#2c1c1c1a;width:38%;margin:0 auto}#bungkus_social .item i,#bungkus_social .item .count{padding:10px;display:block;font-size:30px}#bungkus_social .item .count{font-weight:600}#total,#total_k{padding:10px;font-weight:bold;font-size:20px}#total:before,#total_k:before{content:'Total Fans:';font-weight:normal}#bungkus_social .item{color:#fff}@media screen and (max-width:265px){#bungkus_social .item{width:100%;padding:0}#bungkus_social .item i{background:transparent}}
    </style>
    <div id="bungkus_social">
        <a class="item twitter"><i class="fa fa-twitter"></i><span class="count"></span>Followers</a>
        <a class="item facebook"><i class="fa fa-facebook"></i><span class="count"></span>Likes</a>
        <a class="item instagram"><i class="fa fa-instagram"></i><span class="count"> </span>Followers</a>
        <a class="item google"><i class="fa fa-google-plus"></i><span class="count"></span>Followers</a>
        <a class="item youtube"><i class="fa fa-youtube"></i><span class="count"></span>Subscribers</a>
        <a class="item pinterest"><i class="fa fa-pinterest"></i><span class="count"></span>Followers</a>
    </div>
    <script type='text/javascript' src='https://rawgit.com/mastamvan/backup/master/social_counter.js'></script>
    <script>
        $('#bungkus_social').SocialCounter({
            //Get Usernames
            facebook_user: 'blogmastamvan',
            instagram_user: 'Teja7x',
            google_plus_id: '104992141840871245115',
            youtube_user: 'MrGaziyama',
            pinterest_user: 'tejasukmana99',
            twitter_user: 'Teja_7x',
            //Get Access Tokens,keys,client_ids
            instagram_token: '1466232857.b8ae3c3.de2526f6c4a04c329bcc4d3d91f5aea0',
            google_plus_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
            facebook_token: '1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
            youtube_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
        });
    </script>
    
    Kalian tinggal merubah username berikut dengan username social media kalian
    
            facebook_user: 'blogmastamvan',
            instagram_user: 'Teja7x',
            google_plus_id: '104992141840871245115',
            youtube_user: 'MrGaziyama',
            pinterest_user: 'tejasukmana99',
            twitter_user: 'Teja_7x',
    
  • nah kalo sudah d ganti tinggal save widget kalian dan lihat hasilnya
  • Selesai


Kalo ada masalah seperti iconnya tidak tampil atau counternya tidak ada, kalian bisa menambahkan script dibawah ini...
Mengatasi iconnya tidak tampil, kalian tambahkan script dibawah ini tepat diatas kode </head>

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

Kalo counternya yang tidak tampil kalian tambahkan script dibawah ini d atas kode </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  • Nah mungkin itu saja tentang cara memasang widget social media counter ini.

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Memasang Widget Social Media Auto Counter With API ini bermanfaat..

Jika ada yang mau ditanyakan, silahkan bertanya di kolom komentar. Jangan Lupa Share Dan follow fanspage blog mas tamvan ya :)