logo blog

Facebook Like Box Melayang Di Pojok Kanan Blog

Facebook Like Box Melayang Di Pojok Kanan Blog
Facebook Like Box Melayang Di Pojok Kanan Blog

Tutorial Membuat Widget Facebook Like Box Melayang Di Pojok Kanan Seperti Pada Blog Mas Tamvan

Cara Memasang Widget Like Box Facebook Simple dengan button close, Kali ini mas tamvan akan share widget like / follow fans page facebook muncul terus di pojok bawah kanan blogger..

Bagi kalian yang ingin mempermudah agar pengunjung blog kalian dapat memfollow fans page blog kalian, saya sarankan gunakan widget ini. Widget like fanspage ini simple dan tentunya akan terlihat terus ketika pengunjung tidak mengklos widgetnya..

Sebelumnya saya juga sudah pernah share beberapa widget social media follow counter, facebook like box popup responsive dll, bagi kalian yang ingin mencobanya bisa kunjungi artikel lewat link dibawah ini..



Nah untuk tutorial memasang widget facebook like box yang posisinya ada di pojok kanan bawah seperti yang digunakan blog mas tamvan, kalian bisa ikuti tutorial singkat dibawah ini..

  • Langkah pertama login terlebih dahulu ke blog kalian
  • Setelah login, masuk ke menu Template, Edit HTML
  • Setelah masuk ke edit html, kalian cari kode </head>
  • Kalo sudah ketemu, masukan CSS dibawah ini tepat diatasnya
  • 
    <style type="text/css">
    #fbLikeBox{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:0;float:left;height:auto;margin-bottom:0;margin-right:5px;position:fixed;right:0;width:auto;z-index:10}
    .fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size:11px}
    .slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important}
    @keyframes slideUpfbLikeBox{0%{transform:translateY(100%)}50%{transform:translateY(-8%)}65%{transform:translateY(4%)}80%{transform:translateY(-4%)}95%{transform:translateY(2%)}100%{transform:translateY(0%)}}
    @-webkit-keyframes slideUpfbLikeBox{0%{-webkit-transform:translateY(100%)}50%{-webkit-transform:translateY(-8%)}65%{-webkit-transform:translateY(4%)}80%{-webkit-transform:translateY(-4%)}95%{-webkit-transform:translateY(2%)}100%{-webkit-transform:translateY(0%)}}
    </style>
    
  • Selanjutnya, kalian cari kode </body>
  • Kalo sudah ketemu, masukan widget like box facebook dibawah ini tepat diatasnya
  • 
    <div class='slideUpfbLikeBox' id='fbLikeBox'>
        <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times' /></a>
        <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/blogmastamvan' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogmastamvan&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
    </span></div>
    </div>
    <script type='text/javascript'>
    function show(target) {
        document.getElementById(target).style.display = &#39;block&#39;;
    }
    
    function hide(target) {
        document.getElementById(target).style.display = &#39;none&#39;;
    }
    </script>
    
    Kalian ganti username ini blogmastamvan dengan username Fans Page Facebook kalian..

    Kalo Icon Klosnya ga tampil, silahkan pasang font awesome di template blog kalian
  • Kalo sudah, tinggal save template


Cukup sekian dan terima kasih, semoga artikel tentang Cara memasang widget facebook like box di pojok kanan bawah ini bermanfaat :)

Mengatasi Post Snippet Blog Menghilang

Mengatasi Post Snippet Blog Menghilang
Mengatasi Post Snippet Blog Menghilang

Tutorial Menampilkan kembali post snippet blogger yang menghilang

Memunculkan kembali snippet blogger yang menghilang pada template blog, Bagi kalian yang menggunakan template evo magz, Kompi Males, atau yang blognya menggunakan readmore tanpa javascript tapi menggunakan tag pemanggil snippet.

Mungkin sekarang tampilannya tidak ada / menghilang, entah kenapa mungkin blogger sedang maintenance / apa lah :3

Deskripsi / Snippet Blog Menghilang Nah untuk mengatasi ini cukup mudah, kalian tinggal ikuti tutor singkat dibawah ini...

  • Login ke akun blogger kalian
  • Pilih menu Template, Edit HTML
  • Untuk Template evo magz. cari kode
  • 
    <data:post.snippet/>
    
    Untuk template evo, kalo kode ini ada banyak <data:post.snippet/>
    Silahkan dicoba satu-satu, cari yang cocok / sesuai.
    Kira-Kira kode snipetnya seperti pad gambar dibawah ini
  • Mengatasi Snippet Blogger Menghilang Pada Template evo magz atau Kompi Males
    Kalian rubah menjadi seperti gambar dibawah ini
    Mengatasi Snippet Blogger Menghilang Pada Template evo magz atau Kompi Males
  • Untuk Template Kompi Males Cari Kode
  • 
    <div class='post-snippet' expr:data-snippet='data:post.snippet'/>
    
  • Untuk Template Brosense Cari Kode seperti dibawah ini
  • 
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.snippet/> 
    </div> 
    
  • Rubah kode ini <data:post.snippet/> dengan kode dibawah
  • Lalu Rubah dengan kode dibawah ini
  • 
    <div class='post-snippet' itemprop='description'>
    <data:post.body/>
    </div>
    <script>
    //<![CDATA[
    //Snippet
    $('.post-snippet').each(function(){var txt=$(this).text().substr(0,100);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
    //]]>
    </script>
    
  • Save Template n Selesai


  • Kalo tutorial di atas masih ga bisa, agan coba pake tutorial dibawah ini
  • Cari kode </head> Lalu masukan script dibawah ini tepat diatasnya
  • 
    <script type='text/javascript'>
    var sumarry_mode = &quot;float&quot; ;
    summary_x = 150;
    summary_y = 150;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(e,n){if(-1!=e.indexOf("<")){for(var t=e.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));e=t.join("")}for(n=n<e.length-1?n:e.length-2;" "!=e.charAt(n-1)&&-1!=e.indexOf(" ",n);)n++;return e=e.substring(0,n-1),e+" [...]"}function datasnipet(e){var n=document.getElementById(e),t="",i=n.getElementsByTagName("img"),m=summary_x;i.length>=1&&(m=summary_y);var r=t+"<div>"+removeHtmlTag(n.innerHTML,m)+"</div>";n.innerHTML=r}
    //]]>
    </script>
    
  • Kalo sudah ketemu, ganti dengan kode dibawah ini
  • 
    <div class='post-snippet'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>datasnipet(&quot;summary<data:post.id/>&quot;);</script>
    </div>
    

  • Apabila ada yang mau ditanyakan, silahkan bertanya di kolom komentar :)

Buat kalian yang tampilannya tetep ga bisa, nih coba pake tutorial ini, pasang readmore baru dengan menggunakan javascript... Cara Memasang Readmore Otomatis Do Blog




Cukup sekian dan terima kasih, semoga artike tentang Mengatasi Snippet Menghilang pada template evo magz atau Kompi Males ini bermanfaat ya gan :)

Full Screen PopUp Video Youtube Responsive

Full Screen PopUp Video Youtube Responsive
Full Screen PopUp Video Youtube Responsive

Tutorial Membuat PopUp Video Youtube Responsive FullScreen Dengan Jquery

Cara Membuat Tombol Button Pop Up Video Youtube Responsive, kali ini di blog mas tamvan akan share lagi tutorial agar video youtube yang dipasang pada blog menjadi responsive. Sebelumnya saya juga sudah share tutorial yang sama, tapi pada tutorial sebelumnya video yang dipasang pada blog tidak full screen...

Bagi kalian yang ingin melihat tutorial cara membuat video menjadi responsive di tutorial yang sebelumnya, bisa baca di post berikut ini..



Nah bagi kalian yang ingin melihat tampilan dari FullScreen Video Youtube Responsive ini, bisa liat di link berikut ini..Demo Embed Video Responsive

Dalam tutorial ini kalian bisa memasukan video youtube ke blogger dengan mudah..
Bisa langsung copy linknya dari browser seperti https://www.youtube.com/watch?v=JoJbQHCvyw0
Bisa juga memasukan video dengan url dingkat, seperti https://youtu.be/JoJbQHCvyw0
Atau yang lebih singkat lagi, kalian cukup memasukan idnya saja ke script pemanggil video youtubenya, seperti JoJbQHCvyw0

Untuk tutorialnya, bisa simak di bawah ini..

Tutorial Membuat Tombol Button Video Youtube Full Screen Responsive


  • Login dulu ke akun blogger kalian
  • Setelah login, masuk ke menu Template, Edit HTML
  • Setelah masuk ke Edit HTML, kalian cari kode </body>
  • Kalo sudah ketemu, masukan script video responsive ini di atasnya
  • 
    <script>
    $(document).ready(function() {
    $(&quot;.play-1, .play-2&quot;).ytResponsive();
    });
    </script>
    <script src='https://rawgit.com/mastamvan/backup/master/ytResponsive.js' type='text/javascript'/>
    
    Secript di atas memerlukan kode jquery, bagi kalian yang ditemplatenya belum ada kode jquery, silahkan masukan script dibawah ini tepat di atas kode </head> agar popupnya bekerja..
    
    <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    
  • Masih di edit html, sekarang kalian cari kode </head>
  • Kalo sudah ketemu, masukan css ini diatasnya
  • 
    <style type="text/css">
    .ytResponsive{z-index:9999;top:0;border:5px solid white;box-sizing:border-box;border-radius:2px}
    .ytResponsive-iframe{display:block;height:100%;width:100%;border:0}
    .ytResponsive-overlay{z-index:9998;background:#000;opacity:0.8}
    .ytResponsive-close{position:absolute;top:0;right:0;border:0;cursor:pointer;background:white;font-weight:bold;padding:7px 8px}
    .ytResponsive-close.warp::before,.ytResponsive-close.warp::after{border-radius:120% 0}
    .ytResponsive-close.thick::before,.ytResponsive-close.thick::after{height:3px;margin-top:-2px}
    .ytResponsive-close:before,.ytResponsive-close:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#000}
    .ytResponsive-close:before{-webkit-transform:rotate(47deg);-moz-transform:rotate(47deg);-ms-transform:rotate(47deg);-o-transform:rotate(47deg);transform:rotate(47deg)}
    .ytResponsive-close:after{-webkit-transform:rotate(-43deg);-moz-transform:rotate(-43deg);-ms-transform:rotate(-43deg);-o-transform:rotate(-35deg);transform:rotate(-43deg)}
    a.playvid,button.playvid{padding:7px 8px;background:red;color:white!important;text-decoration:none;font-size:16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);text-transform:uppercase;margin:2%;border-radius:3px;font-family:'Open Sans',sans-serif}
    button.playvid{cursor:pointer;border:none}
    </style>
    
  • Sampai di sini, pemasangannya sudah selesai. Sekarang tinggal bagaimana cara penerapannya ke postingan blog.
  • Save dulu templatenya
  • Sekarang menuju ke postingan baru, masuk ke mode HTML jangan COMPOSE
  • Membuat Video Youtube Menjadi Responsive Full Screen
  • Selanjutnya kalian copy kode dibawah ini
  • Pilih salah satu kode pemanggil video youtube yang kalian suka / yang menurut kalian paling mudah.
  • Kalian cukup mengganti url https://youtu.be/JoJbQHCvyw0 dengan url video youtube kalian
  • 
    <a class="playvid play-1" href="https://youtu.be/JoJbQHCvyw0">Play my video</a>
    Atau
    <a class="playvid play-2" href="https://youtu.be/JoJbQHCvyw0">Play my video</a>
    
  • Atau kalian bisa menggunakan kode di bawah ini
  • Agan Cukum mengganti id video youtube JoJbQHCvyw0
  • 
    <button class="playvid play-3">Play my video</button>
    <script>
    $(document).ready(function() {
    $(".play-3").ytResponsive({ vid: "JoJbQHCvyw0", ratio: 4/3 });
    });
    </script>
    
    Atau
    
    <button class="playvid play-4">Play my video</button>
    <script>
    $(document).ready(function() {
    $(".play-4").ytResponsive({ minPaddingY: 200, minPaddingX: 200, vid: "JoJbQHCvyw0", ratio: 21/9 });
    });
    </script>
    
  • Nah kalo sudah, kalian tinggal save / lihat pertinjauan dulu

Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Button Video Youtube Full Screen Responsive ini bermanfaat.
Kalo ada yang mau ditanyakan / tidak mengerti, silahkan bertanya di kolom komentar :)

Membuat Halaman Link Partner Seperti Blog Mas Tamvan

Membuat Halaman Link Partner Seperti Blog Mas Tamvan
Membuat Halaman Link Partner Seperti Blog Mas Tamvan

Tutorial Membuat Widget Atau Halaman Link Partner Blogger Seperti Pada Link Partner Mas Tamvan

Cara Membuat halaman link partner blog seperti yang digunakan mas tamvan, kali ini saya akan berbagi tampilan widget / halaman untuk membuat tampilan link parnter, blog teman menjadi lebih bagus.

Tampilan link partner ini udah Responsive, mobile Friendly dan juga sedikit tambahan Animasi ketika kursor (Pointer) menyentuh bagian kotak partner dan ketika pertama kali di load kolom partner akan tampil secara perlahan...

Untuk melihat demonya silahkan kunjungi link partner blog mas tamvan + sekalian join juga :)

Dan jangan lupa mampir ke tutorial lainnya yang sudah mas tamvan share ya :)



Nah sekarang kita lanjut ke tutorial memasang widget link parnter seperti blog mas tamvan di halaman statistik / page

  • Silahkan copy script link partner dibawah ini...


<!--CSS LINK PARTNER MAS TAMVAN-->
<style type="text/css">@import url("https://fonts.googleapis.com/css?family=Roboto");#link-partner{font-family:'Roboto',sans-serif!important;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on;color:#686868;font-size:15px;line-height:1.4;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;min-height:100%}#link-partner *,#link-partner *:before,#link-partner *:after{box-sizing:inherit}#link-partner .link-partner-blogger{font-family:'Roboto',sans-serif!important;padding:16px 0;margin:0;list-style:none;position:relative}@media (max-width:767px){#link-partner .link-partner-blogger{padding:32px 0}}#link-partner .link-partner-blogger:before{content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:8px;height:8px;border-radius:50%}#link-partner .link-partner-blogger:after{content:'';position:absolute;top:0;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:2px}#link-partner .link-partner-blogger .box-partner{position:relative;padding:32px 0;z-index:2;visibility:hidden}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner{font-family:'Roboto',sans-serif!important;text-align:center;background:#fff;border-radius:3px;padding:16px;border:2px solid #0177FA}#link-partner .link-partner-blogger .box-partner:first-child{margin-top:16px}#link-partner .link-partner-blogger .box-partner + *{margin-top:32px}}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner{font-family:'Roboto',sans-serif!important;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#link-partner .link-partner-blogger .box-partner:before{opacity:0!importantant}}#link-partner .link-partner-blogger .box-partner:hover #link-partner .link-partner-blogger .box-partner .mas-tamvan:before{background:#0177FA}#link-partner .link-partner-blogger .box-partner:last-child:after{content:'';position:absolute;bottom:-16px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:8px;height:8px;border-radius:50%;visibility:visible}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner:last-child:after{bottom:-40px}}#link-partner .link-partner-blogger .box-partner a{color:#686868;text-decoration:none}#link-partner .link-partner-blogger .box-partner .mas-tamvan{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0177FA;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;position:relative;z-index:1}#link-partner .link-partner-blogger .box-partner .mas-tamvan:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:50%;-webkit-transition:background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);transition:background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);z-index:1}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .mas-tamvan:after{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:32px;height:2px;background:rgba(1,119,250,0.25);z-index:-1}}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner .mas-tamvan{position:absolute;top:0;left: 50% !important;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}}#link-partner .link-partner-blogger .box-partner .title-partner{margin:0}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .title-partner{margin:0 32px 0 0;text-align:right;width:400px}}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .deskripsi-partner{color:#a8a8a8;margin:0 0 0 32px;width:400px}}#link-partner .link-partner-blogger .box-partner:hover .mas-tamvan:before{-webkit-animation:pulse 1.5s infinite;box-shadow:0 0 0 0 rgba(90,153,212,0.5)}@-webkit-keyframes pulse{0%{-moz-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9)}70%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}100%{-moz-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9);box-shadow:0 0 0 0 rgba(90,153,212,0)}}</style>

<!--HTML LINK PARTNER MAS TAMVAN-->
<div id='link-partner'>
  <ul class="link-partner-blogger">
    <li class="box-partner">
      <h3 class="title-partner" ><a id='linkBlog' title='Blog Mas Tamvan' href="https://mastamvan.blogspot.com">Blog Mas dsTamvan</a></h3>
      <div class="mas-tamvan"></div>
      <div class="deskripsi-partner">Kumpulan Tutorial Singkat Tentang Blogger, Tools Online Dan Tips Trik Lainnya</div>
    </li>
    <li class="box-partner">
      <h3 class="title-partner"><a id='linkblog' title='Blog Mas Tamvan' href="Masukan Link Partner Disini">Title Partner</a></h3>
      <div class="mas-tamvan"></div>
      <div class="deskripsi-partner">Deskripsi Blog Partner</div>
    </li>
  </ul>
  </div>

  <!--JS LINK PARTNER MAS TAMVAN-->
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js",document.body.appendChild(d)}function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://rawgit.com/mastamvan/backup/master/link-partner.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload,window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;
//]]>
</script>

Ganti Kode Ini Contoh Dengan Data
Masukan Link Partner Disini https://mastamvan.blogspot.com
Title Partner Blog Mas Tamvan
Deskripsi Blog Partner Berbagi Tutorial Blogger

Jika kalian ingin menambahkan blog partner baru, silahkan tambahkan kode dibawah ini tepat di atas </ul>

    <li class="box-partner">
      <h3 class="title-partner"><a id='linkblog' title='Blog Mas Tamvan' href="Masukan Link Partner Disini">Title Partner</a></h3>
      <div class="mas-tamvan"></div>
      <div class="deskripsi-partner">Deskripsi Blog Partner</div>
    </li>


Untuk tutorial pemasangannya cukup mudah...
  • Kalian tinggal masuk ke menu laman / halaman statistik

  • Membuat Halaman Link Partner Seperti Blog Mas Tamvan
  • Silahkan beri judul terlebih dahulu, agar urlnya sesuai dengan judul laman
  • Setelah diberi judul, kalian paste kode diatas tadi ke postingan. Tapi harus di mode HTML, jangan compose.. lihat gambar

  • Membuat Halaman Link Partner Seperti Blog Mas Tamvan
  • Selanjutnya silahkan, tinggal tambahkan list link partner blog kalian di script itu
  • Kalo sudah, tinggal save dan lihat hasilnya


Cukup sekian dan terima kasih, semoga artikel tentang Cara membuat halaman link partner seperti yang digunakan oleh blog mas tamvan ini bermanfaat ya gan :)