logo blog

Tool Text Long Shadow Generator CSS

Tool Text Long Shadow Generator CSS
Tool Text Long Shadow Generator CSS

Text Long Shadow Generator

Cara Membuat Css Long Shadow Dengan Tool Online Text Shadow Generator.. Halo sobat kali ini blog mas tamvan akan berbagi sebuah tool untuk membuat long shadow dan mendapatkan cssnya tanpa sudah payah..

Tool Text Long Shadow ini sangat cocok buat kalian yang ingin membuat text dengan effect shadow yang panjang dengan css...

Langsung saja buat kalian yang ingin mencobanya bisa langsung klik link dibawah ini..

Open Tool Long Shadow Generator


Untuk penggunaanya cukup mudah, kalian tinggal memilih warna dan seberapa panjang shadow yang ingin ditampikan.

Terus kalo udah selseai tinggal copy css yang ada di kotak bawah, dan nanti tinggal gabungkan dengan css text yang ingin di kasih long shadownya..

nah semoga artikel tentang Cara membuat Text Long Shadow Dengan Tools Ini bermanfaat, jangan lupa share dan followw fanspagenya :)



Cukup sekian dan terima kasih, semoga bermanfaat.

Semua Link Di Bagian Tertentu Menjadi Open New Tab

Semua Link Di Bagian Tertentu Menjadi Open New Tab
Semua Link Open New Tab

Semua Link Terbuka Di Halaman Baru Ketika Di Klik

Cara Agar Semua Link Terbuka Di Tab Baru Secara Otomatis Pada Bagian Tertentu Saja.. Halo sobat bloger yang tamvan, kali ini saya akan berbagi script untuk membuat semua link menjadi open new tab secara otomatis di bagian tertentu..

Bagi kalian yang tidak ingin ribet menambahkan atribut target='_blank' pada setiap link di bagian tertentu agar menjadi open new tab / terbuka di halaman baru, maka kalian coba tutorial kali ini agar link di bagian tertentu menjadi open new tab..

Sebelumnya saya juga seudah posting artikel yang sama yaitu membuat semua link menjadi open new tab..

Tapi script yang sebelumnya saya membuat agar semua link yang ada di blog sobat menjadi open new tab. Bagi kalian yang ingin mencoba artikel yang sebelumnya, silahkan kunjungi artikel berikut ini...
Membuat Semua Link Di Blog Otomatis Open New tab Ketika Di Klik

Nah pada tutorial yang ini saya hanya membuat semua link di bagian tertentu menjadi open new tab...

Semua Link Otomatis Open New Tab Di Bagian Tertentu Ketika Di Klik


  • Seperti Biasa, kalian harus sudah login dulu ke akun blogger.com
  • Kalo sudah login masuke ke bagian Template, Edit HTML Terus Kalian Cari Kode </head>
  • Kalo sudah ketemu, masukan script berikut di atasnya
  • 
    <script type='text/javascript'>
    //<![CDATA[
    $('.post-body a').attr('target','_blank');
    //]]>
    </script>
    
    Silahkan kalian rubah kode ini .post-body dengan id / class dari pembungkus link-link kalian..
    Kalian bisa rubah kode tadi misalnya menjadi #nav, .sidebar atau yg lainnya.. sesuaikan sendiri saja..

    Kalo tidak di rubah, kode di atas hanya akan menambahkan target='_blank' Pada Link Secara Otomatis di bagian artikel saja..
  • Kalo sudah di sesuaikan, tinggal save aja template kalian :)

Mungkin cukup sampai di sini aja artikel tentang Cara Otomatos Menambahkan atribut target='_blank' pada setiap link <a > di bagian tertentu pada blog ini, semoga bermanfaat..

Kalau ada yang mau ditanyakan silahkan bertanya di kolom komentar ya :)

Disable CTRL + U Dan Klik Kanan Menjadi Auto Redirect

Disable CTRL + U Dan Klik Kanan Menjadi Auto Redirect
disable-ctrl-u-klik-kanan-redirect

Script Disable Klik Kanan Dan Disable CTRL + U

Script Anti Copas, Mengalihkan Klik Kanan, dan Disable Ctrl+U Dengan Auto Redirect Pada Blog.. Tutorial kali ini saya akan memaberikan tutorial cara mendisable klik kanan dan ctrl U dengan auto redirect ke blog kita..

Script anti copas ini sangat simple tapi manfaatnya cukup lumayan, pada script yang saya share berikut ini kita akan menggunakan dua script yang berbeda..

Kalian bisa memilih script mana yang ingin di pasang ke dalam blog kalian, ntah itu disable klik kanan langsung redirect atau disable ctrl + u langsung redirect ke link yang kita tuju..

Bisa juga kalian menggunakan kedua script tersebut untuk mengatai anti copas dari klik kanan dan ctrl plus U

Nah langsung saja kita menuju ke tutorial pemasnagan scriptnya..

Cara Agar Blog Tidak Bisa Di CTRL + U Dan Klik Kanan


  • Langkah pertama, login dulu ke akun blogger.com
  • Setelah login, masuke bagian Template, Edit HTML Selanjutnya Cari Kode </body>
  • Setelah ketemu, masukan script berikut ini di atasnya
  • Silahkan kalian pilih, masu semua script atau satu saja yang mau di pakainya..
  • Script Disable Ctrl + U Dan Klik Kanan
  • 
    <script type='text/javascript'>
    //<![CDATA[
    //Script Redirect CTRL + U
    //https://mastamvan.blogspot.com/ ganti dengan url blog kalian
    function redirectCU(e) {
      if (e.ctrlKey && e.which == 85) {
        window.location.replace("https://mastamvan.blogspot.com/");
        return false;
      }
    }
    document.onkeydown = redirectCU;
    
    //Script Redirect Klik Kanan
    function redirectKK(e) {
      if (e.which == 3) {
        window.location.replace("https://mastamvan.blogspot.com/");
        return false;
      }
    }
    document.oncontextmenu = redirectKK;
    //]]>
    </script>
    
    Script di atas berfungsi untuk mengalihkan Klik Kanan Dan Ctrl + U Menjadi Auto Redirect Ke url yang sudah di tentukan..
    Silahkan kalian ganti URL https://mastamvan.blogspot.com/
  • Kalo sudah, tinggal save dan lihat hasilnya.. :)


Nah Jika kalian ingin memilih salah satu fungsi dari script di atas, tinggal gunakan cara dibawah ini untuk menentukan script mana yang ingin di pasang pada blog kalian

  • Script Hanya untuk disable CTRL + U
  • 
    <script type='text/javascript'>
    //<![CDATA[
    //Script Redirect CTRL + U
    //https://mastamvan.blogspot.com/ ganti dengan url blog kalian
    function redirectCU(e) {
      if (e.ctrlKey && e.which == 85) {
        window.location.replace("https://mastamvan.blogspot.com/");
        return false;
      }
    }
    document.onkeydown = redirectCU;
    //]]>
    </script>
    

  • Script Hanya Untuk Disable Klik Kanan
  • 
    <script type='text/javascript'>
    //<![CDATA[
    //Script Redirect Klik Kanan
    //https://mastamvan.blogspot.com/ ganti dengan url blog kalian
    function redirectKK(e) {
      if (e.which == 3) {
        window.location.replace("https://mastamvan.blogspot.com/");
        return false;
      }
    }
    document.oncontextmenu = redirectKK;
    //]]>
    </script>
    


Nah itu lah script agar blog kita tidak bisa di ctrl + u dan klik kanan, ketika ada orang yang mengunakan kombinasi keyboar tersebut / mouse, maka secara otomatis akan redirect ke halaman yang sudah ditentukan..

Cukup sekian dan terima kasih, semoga artikel tentang Cara agar blog kita tidak bisa di copas, copy paste dengan memasang auto rediretc ketika blog kita di klik kanan atau di ctrl + u ini bermanfaat ya :)
sumber : http://zhinto.blogspot.co.id/2013/04/redirect-ctrlu-dan-klik-kanan.html

Cara Memasang Tooltip Otomatis di Setiap Link Blog

Cara Memasang Tooltip Otomatis di Setiap Link Blog
Responsive Tooltip jQuery

jQuery Tooltip Responsive setiap link dan image

Tutorial Cara Memasang Tooltip Otomatis Di Setiap Tag Link <a>, tag gambar <img> dan <p>. Nah Dengan script jQuery ini kita akan merubah tampilan tooltip title pada sebuah image dan link di blog kita menjadi responsive dan lebih jelas...

Script jQuery Tooltip ini akan bekerja jika dalam tag gambar dan link blog kalian terdapat title tag, jadi kalo link blog kalian tidak di sertai dengan title maka tooltipnya tidak akan tampil...

Jika kalian belum tau cara memberi tag titel pada setiap link, bisa ikuti tutorial pada post berikut ini....

Trik SEO | Cara Menambahkan Title Tag di Setiap Link Url Pada Blog

Bekitu juga dengan tag image { <img> } jika pada tag image tidak di beri title tag maka tooltipnya tidak akan tampill... untuk mengatasinya kalian bisa menambahkan title tag dan alt tag secara menual ke postingan kalian...

Apabila kalian ingin memasang title tag dan alt tag pada setiap gambar di postingan blog secara otomatis, bisa gunakan cara alternatif berikut ini....

Trik SEO | Cara otomatis menambahkan atribut alt tag dan title tag di setiap image / gambar pada blog

Nah jika semua itu sudah terpenuhi, pada setiap link dan gambar blog sudah terdapat atribut title tag, maka sekarang kita bisa melanjutkan ke tutorial cara merubah tampilan tooltip default blogger dengan tampilan yang menarik dan tentunya responsive..

Responsive Tooltip Otomatis pada link image dan gambar di blogger.


  • Login terlebih dahulu ke akun blogger.com
  • Setelah login kalian masuk ke Menu Template, Edit HTML, Lalu cari kode </head>
  • Setelah Ketemu, Masukan CSS Dibawah Ini Tepat Di Atasnya
  • 
    <style type='text/css'>
    /*Simple Tooltip Responsive*/
    #tooltip{text-align:center;color:#fff;background:#111;position:absolute;z-index:100;padding:15px;border-radius:3px}
    #tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #111;content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px}
    #tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #111;top:-20px;bottom:auto}
    #tooltip.left:after{left:10px;margin:0}
    #tooltip.right:after{right:10px;left:auto;margin:0}
    </style>
    
  • Langkah selanjutnya, kalian cari kode </body>
  • Kalo sudah ketemu, masukan script dibawah ini tepat di atasnya
  • 
    <script type='text/javascript'>
    //<![CDATA[
    // Tooltip Ini Akan Bekerja Pada Tag Sebagai Berikut
        $("a").addClass("tooltip");
        $("img").addClass("tooltip");
        $("p").addClass("tooltip");
    
    // Responsive Tooltip Minify JS
    $(function(){var targets=$("[class~=tooltip]"),target=false,tooltip=false,title=false;targets.bind("mouseenter",function(){target=$(this);tip=target.attr("title");tooltip=$('<div id="tooltip"></div>');if(!tip||tip==""){return false}target.removeAttr("title");tooltip.css("opacity",0).html(tip).appendTo("body");var init_tooltip=function(){if($(window).width()<tooltip.outerWidth()*1.5){tooltip.css("max-width",$(window).width()/2)}else{tooltip.css("max-width",340)}var pos_left=target.offset().left+(target.outerWidth()/2)-(tooltip.outerWidth()/2),pos_top=target.offset().top-tooltip.outerHeight()-20;if(pos_left<0){pos_left=target.offset().left+target.outerWidth()/2-20;tooltip.addClass("left")}else{tooltip.removeClass("left")}if(pos_left+tooltip.outerWidth()>$(window).width()){pos_left=target.offset().left-tooltip.outerWidth()+target.outerWidth()/2+20;tooltip.addClass("right")}else{tooltip.removeClass("right")}if(pos_top<0){var pos_top=target.offset().top+target.outerHeight();tooltip.addClass("top")}else{tooltip.removeClass("top")}tooltip.css({left:pos_left,top:pos_top}).animate({top:"+=10",opacity:1},50)};init_tooltip();$(window).resize(init_tooltip);var remove_tooltip=function(){tooltip.animate({top:"-=10",opacity:0},50,function(){$(this).remove()});target.attr("title",tip)};target.bind("mouseleave",remove_tooltip);tooltip.bind("click",remove_tooltip)})});
    //]]>
    </script>
    
  • Kalo sudah di Pasang, tinggal save template dan lihat hasilnya :)
Jika Tooltipnya tidak tampil silahkan pasang kode dibawah ini tepat di atas </head>

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
  • Setelah Semuanya terpasang dan lancar tanpa masalah, saatnya saya bilang #shodaqollohul'adhim

Cukupsekian dan terima kasih, semoga artikel tentang Tutorial Cara Memasang Tooltip Responsive pada Blogger dengan jQuery ini bermanfaat bagi kita semua :)
http://blog.kangrian.com/2014/06/Responsive-Tooltip-di-Blog-Dengan-jQuery.html

Tutorial Cara Edit Menu Navigation Bar Di Blogger

Tutorial Cara Edit Menu Navigation Bar Di Blogger
Edit Menu Navigation Bar

Bagaimana Cara Mengatur Menu Br Di Blogger?

Langkah-Langkah Menambahkan Link dan Mengganti Judul Di Menu Navigation Bar Blogger. Pada kesempatan kali ini blog mas tamvan akan berbagi tips dan trik mengatur menu bar pada blogger..

Sering banyak yang suka bertanya bagaimana cara menambahkan link artikel / link label ke dalam menu bar dengan judul yang sesuai dan bagaimana agar satu link dapat menampilkan banyak artikel di dalamnya....

Nah pada kesempatan kali ini, karena saya nganggur bingung mau ngapain lebih baik d coba aja berikan tutorial tentang cara pengaturan pada menu navigation bar ini, semoga saja dapat membantu..

Okeh tanpa banyak cingcong lagi mari kita bahas satu-satu, tahapan-tahapan mengatur menu barnya...

Sebagai contoh, saya ingin menambahkan link dan ingin mengganti judul di menu bar berikut ini..

Cara Edit Menu Navigation Bar, Memasukan Link dan Mengganti Nama Menu


Contoh Tampilan Menu Yang Ingin Di Edit
edit menu bar
Contoh Kode HTML Menu Yang Ingin Di Edit

<nav class='contoh'>
 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="#">Tutorial</a></li>
  <li><a href="Url Kalian">Widget</a></li>
  <li><a href="https://contohlink.com">Template</a></li>
  <li><a href="https://mastamvan.blogspot.com/search/label/Tips Dan Trik">Tips & Trik</a></li>
</ul> 
</nav>

Tulisan yang saya beri warna merah adalah bagian untuk memasukan link tujuan kalian...
Bisa link apa aja, link post, label, sosial media dll..

Tulisan yang saya beri warna kuning itu untuk judul dari link tersebut / judul di menu barnya..
Bisa kalian rubah sesuka hati..

Jadi Kesimpulannya..
Dalam kode pembungkus ini href=''
Harus di isi dengan URL kalian

dan dalam kode pembungkus ini <a href="/">Tutorial</a> biasanya beda-beda dalam penulisan, ada juga yang seperti ini <a href="/"><span>Tutorial</span></a>
Kode itu berarti kalian bisa merubahnya dengan tulisan yang kalian mau..


Nah kalo kalian sudah mengerti, sekarang kita lanjut ke tahapan mengganti / menambah link pada menu navigation..

Jika belum mengerti tanyakan saja di kolom komentar...!!!

  • Silahkan login terlebih dahulu ke blogger.com
  • Setelah login kita mulai mencari salah satu nama dari menu navigation tadi yang kita ingin edit namanya / menambahkan link ke dalamnya...
  • Contoh saya ingin mengedit menu pada bagian Tutorial
  • Di Kotak edit html kalian cari nama menu yang ingin d edit, agar cepat dalam pencariannya gunakan CTRL + F
  • Sebelum menekan CTRL + F kalian harus klik dulu bagian kotak edit htmlnya { di kumpulan kodenya }
  • Contoh penulisan agar cepat / langsung ke tujuan karena kita sudah tau struktur dari kode htmlnya, silahkan kalian langsung cari seperti berikut >Tutorial
  • Kalo sesuai, nanti akan langsung menuju ke tag html menu navigationnya..
  • Tampilannya seperti berikut...
  • 
      <li><a href="#">Tutorial</a></li>
    
  • Kalo sudah ketemu kalian tinggal edit saja menunya, kalo ingin mengganti link. tag dalam href='#' tanda pagar {#} ganti dengan link tujuan kalian..
  • Nah sampai di sini apakah sudah mengerti?
  • Kalo belum, silahkan bertanya di kolom komentar saja ya :3 nanti saya tambahkan ke dalam artikel ini

Jika kalian ingin menambahkan satu link dan isinya lebih dari satu artikel terkait, kalian harus mengelompokan terlebih dahulu artikel - artikelnya menjadi satu label..

Setelah di gabungkan, kalian copy linknya dan masukan ke dalam menu navigation bar..

Okeh, cukup sampai di sini artikel yang mungkin kalian juga tidak akan paham, karena kata-katanya yang sulit untuk di pahami, dan susunan tutorial yang ngawur :V

Saya akhiri artikel tentang Tutorial Cara Edit Menu Navigation Bar Di Blogger ini dengan #bersambung :V

Karena mungkin akan ada tambahan pada tutorial ini yang belum saya pikirkan :V

Membuat Button CSS Keyboard Shortcut Di Blogger

Membuat Button CSS Keyboard Shortcut Di Blogger
CSS Keyboard Shortcut

Button CSS Keyboard Shortcut

Cara Memasang Button Keyboard Shortcut Di Postingan Blogger Dengan Css, Apa kabar sobat blogger tamvan, kali ini saya akan membagikan tutorial cara memasang kotak pilihan untuk shortcut keyboard di blogger...

Keyboard Shortcut fungsinya untuk membedakan mana tulisan dan mana perintah pada sebuah blog tutorial, dengan menggunakan tombol ini mungkin pengunjung akan mudah memahami istilah dari tulisan yang kalian maksud..

Untuk memasang Keyboard Shortcut ini sangat mudah, kita hanya menggunakan css saja, nah untuk tutorialnya mari kita langsung saja menuju tips n triknya...

Cara Membuat Tombol Keyboard Shortcut Di Blogger Dengan Css


  • Pertama agan login dulu ke blogger.com
  • Setelah login kalian masuk ke Template, Edit HTML
  • Lalu cari kode </head> Gunakan Kombinasi Keyboard Ctrl + f Untuk Mempercepat Pencharian
  • Setelah ketemu, kalian copy kode dibawah ini terus masukan di atas kode tadi
  • 
    <style type='text/css'>
    /*keyboard shortcut*/
    kbd{position:relative;border:1px solid gray;font-size:1.2em;box-shadow:1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:2px 3px;padding:1px 5px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    kbd:active{border:2px solid gray;font-size:1.2em;box-shadow:2px 0 2px 0 #eee,0 3px 0 3px #ccc,0 3px 0 4px #444;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:3px 4px;padding:2px 6px;transform:translateY(4px)}
    </style>
    
  • Setelah di pasang, Save Template n selesai
  • Sekarang kita tinggal menampilkan kode tersebut di postingan blogger
  • Silahkan bikin postingan baru yang ingin di pasang Tombol Keyboard Shortcut
  • Kalo sudah pilih bagian edit HTML, jangan compose nanti htmlnya g bakalan bekerja!! Tampilannya seperti berikut...

  • Kalo sudah kalian masukan kode dibawah ini ke dalamnya..!!
  • 
    <kbd>Ctrl</kbd> + <kbd>F</kbd>
    
    Silahkan rubah tulisan CTRL dan F Dengan tulisan yang kalian masu
    Contoh Penulisan Sebagai Berikut
    
    Gunakan Kombinasi Keyboard <kbd>Ctrl</kbd> + <kbd>f</kbd> Untuk Mempercepat Pencharian
    
  • Nah kalo sudah, kalian tinggal publikasikan dan selesai... :)
  • Done n Terima Kasih Sobat

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Membuat Button CSS Keyboard Shortcut Di Blogger ini bermanfaat bagi semuanya :)

Jangan lupa tinggalkan jejak kalian di kolom komentar ya :)

Membuat Gambar Berputar Dengan CSS Transform

Membuat Gambar Berputar Dengan CSS Transform

Css Hover Transform Rotate Image

Css Trick Hover Image Dengan Animasi Berputar Ketika Di Sentuh Cursor.. Cara Membuat Gambar Berputar Ketika Di Sentuh Cursor Dengan CSS transform: rotate...

Karena bingung mau posting apa, udah 5 hari ga buat postingan, maka saya iseng2 buat tutorial css animation pada image dengan efect hover pada gambar..

Nah langsung saja kita ke tutorialnya....
  • Seperti biasa, login terlebih dahulu ke blogger.com
  • Cari Kode </head>
  • Setelah itu masukan css dibawah ini tepat di atasnya..
  • 
    <style type='text/css'>
    body img{
      -webkit-transition: -webkit-transform 1.1s ease-in-out;
      transition: transform 1.1s ease-in-out;
    }
    body img:hover{
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    </style>
    
Kalian bisa membuat efect rotate seperti pada link text, gambar, div dan yang lainnya.. dengan cara mengganti kode ini body img
Kode di ata berfungsi untuk membuat efect hover pada semua image yang ada pada body, seperti image di postingan, popular post dll

Contoh tampilan dari kode di atas sebagai berikut..
Animation Pada Image
Membuat Gambar Berputar Dengan CSS Transform

Animation Pada text / link


Mungkin itu saja dari postingan yang tidak bermanfaat tentang Css Trick : Cara Membuat Gambar Berputar Dengan CSS Transform Rotateini..

Semoga nanti saya dapat membuat postingan yang lebih bermanfaat lagi buat kalian :V :V

jQuery Popup iFrame Video Responsive

jQuery Popup iFrame Video Responsive
jQuery Popup iFrame Video Responsive

Minimal Responsive iFrame Video Youtube Popup Plugin For jQuery - WMBox

Cara Agar Iframe Embed Video Seperti Youtube Responsive.. Pada Tutorial Blogger Kali Ini Saya Admin Blog Mas Tamvan Akan Berbagi Tutorial Membuat Pop Up Embed Video Youtube Responsive Di Blog..

Buat kalian yang suka share embed iframe video youtube di blog, sebaiknya pasang video tersebut menjadi responsive, mobile friendly agar pengunjung dari hp (mobile) dapat melihat video denan sempurna tanpa terpotong...

Sebelumnya saya juga sudah pernah pasang tutorial membuat agar di blogger video responsive, tentunya dengan cara yang berbeda...

Buat kalian yang ingin melihat cara agar iframe di blog responsive, silahkan kunjungi artikel berikut ini...



Demo Tampilan Pop Up Video Responsive

Go To Demo


Sekarang kita lanjut ke tutorial cara pemasangan Popup Iframe Video Responsive dengan jQuery..

jQuery Popup On Button iFrame Video Responsive


  • Login Ke blogger.com
  • Terus Pilih Tab Template, Edit HTML Cari Kode </head>
  • Kalo sudah ketemu, masukan css dibawah ini tepat di atasnya
  • 
    <style type='text/css'>
    /*Pop Up Responsive*/
    .container{margin:100px auto}
    .btnnya{background-color:#039be5;border:0;border-radius:2px;box-shadow:none;color:white!important;;cursor:pointer;display:inline-block;font:500 14px/20px Roboto,sans-serif;margin:0;min-width:36px;outline:0;overflow:hidden;padding:8px;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;transition:background-color .2s,box-shadow .2s;vertical-align:middle;white-space:nowrap;padding:7px 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
    .btnnya.yt{background-color:red}
    .wmBox_overlay{position:fixed;width:100%;height:100%;display:none;top:0;left:0;background:rgba(0,0,0,0.5);z-index:999}
    .wmBox_centerWrap{display:table;position:absolute;width:100%;height:100%}
    .wmBox_centerer{display:table-cell;vertical-align:middle}
    .wmBox_centerer iframe{width:95%;display:table;margin:0 auto;position:relative}
    .wmBox_contentWrap{width:50%;margin:0 auto;position:relative}
    .wmBox_scaleWrap{position:relative;height:0;padding-top:20px;padding-bottom:56.25%;width:100%}
    .wmBox_centerer iframe{position:absolute;top:0;border:0;outline:0;box-shadow:0 0 10px rgba(0,0,0,0.5);left:0;width:100%;height:100%;padding:12px;background:black;border-radius:12px}
    .wmBox_closeBtn{z-index:2;position:relative;margin-top:-40px}
    .wmBox_closeBtn p{line-height:0;margin:0;padding:0.5em 0 0.75em;color:#FFF;background:#000;width:1.3em;font-size:25px;border-radius:100%;text-align:center;font-family:Verdana,serif;position:relative;bottom:-0.5em;right:-1.5em;cursor:pointer;float:right;box-shadow:0 0 10px rgba(0,0,0,0.5);transition:color 0.2s ease-out,background 0.2s ease-out}
    .wmBox_closeBtn p:hover{background:#FFF;color:#000}
    </style>
    
  • Langkah berikutnya, cari kode </body>, setelah ketemu, masukan kode dibawah ini tepat diatasnya...
  • 
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){$.wmBox()}),function(o){o.wmBox=function(){o("body").prepend('<div class="wmBox_overlay"><div class="wmBox_centerWrap"><div class="wmBox_centerer">')},o("[data-popup]").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeIn(750);var a=o(this).attr("data-popup");o(".wmBox_overlay .wmBox_centerer").html('<div class="wmBox_contentWrap"><div class="wmBox_scaleWrap"><div class="wmBox_closeBtn"><p>x</p></div><iframe src="'+a+'">'),o(".wmBox_overlay iframe").click(function(o){o.stopPropagation()}),o(".wmBox_overlay").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeOut(750)})})}(jQuery);
    //]]>
    </script>
    
  • Langkah pemasangan scriptnya suah selesai, tinggal save...
  • Sekarang tinggal memasukan pop up videonya ke postingan..
  • Silahkan bikin postingan baru terus masuk ke mode HTML jangan Compose, lihat gambar

  • jQuery Popup iFrame Video Responsive
  • Sekarang kalian copy kode di bawah ini lalu masukan ke postingan mode HTMLnya
  • 
      <div class="container">
        <a class="wmBox btnnya yt" href="#" data-popup="https://www.youtube.com/embed/nij9XzAOwyk?rel=0&amp;controls=0&amp;showinfo=0">Youtube Video</a>
      </div>
    
    Silahkan ganti url ini https://www.youtube.com/embed/nij9XzAOwyk dengan url embed iframe video kalian...
  • Nah kalo sudah, tinggal save postingannya dan lihat hasilnya..
  • Done N Selesai.

Cukup sekian dan terima kasih, sudah membaca artikel tentang Tutorial Cara Membuat Pop Up Video Youtube Responsive ini bermanfaat..

Jika ada yang mau ditanyakan, seperti button pop upnya tidak bekerja / tampil... silahkan bertanya di kolom komentar..

Kumpulan Tag Kondisional Blogger Beserta Fungsinya

Kumpulan Tag Kondisional Blogger Beserta Fungsinya
Kumpulan Tag Kondisional Blogger Beserta Fungsinya

Cara Menampilkan Widget Di Halaman Tertentu Dengan Tag Kondisional

Conditional Tags Untuk Menampilkan Widget Di Halaman Tertentu, Tutorial Cara Menampilkan Sebuah Widget Hanya Di Halaman Tertentu, seperti hanya di postingan, homepage, statistik, archive, mobile....

Bagi kalian yang ingin agar sebuah widget atau css, javascript hanya tampil di halaman yang kita inginkan, maka gunakan lah tag kondisional (Conditional Tags)..

Tag kondisional ini bisa juga untuk mempercepat loading blog dengan cara menyembunyikan widget / css yang tidak di butuhkan dalam sebuah halaman, seperti homepage blog, postingan, halaman archive...

Mungkin sebelumnya kalian suka menggabungkan semua css / javascript menjadi satu bagian, hal tersebut bisa membuat loading blog menjadi berat. Mungkin karena banyak script yang tidak di pakai terbaca oleh browser..

Walaupun tidak banyak mengurangi beban blog tapi setidaknya dengan cara ini struktur blog menjadi lebih rapih...

nah sekarang mari kita lanjut saja ke cara penggunaan tag kondisional pada blogger..

Cara Menampilkan widget hanya di halaman tertentu dengan tag kondisional


Berikut ini adalah kumpulan tag kondisional Blogger yang sudah saya ambil dari beberapa template blog yang sudah saya coba buka...

  • Tag Kondisional Untuk Menampilkan Widget Hanya Di Halaman Homepage (Halaman Depan)
  • 
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Di Semua Halaman Kecuali Homepage (Halaman Depan)
  • 
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Hanya Di Halaman Postingan Blog
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Di Semua Halaman Kecuali Halaman Postingan Blog
  • 
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if> 
    
  • Tag Kondisional Untuk Menampilkan Widget Hanya Di Postingan Tertentu
  • 
    <b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menyembunyikan Widget Di Postingan Tertentu
  • 
    <b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
    alamat-postingan Isi Dengan Url Postingan kalian... contoh
    
    <b:if cond='data:blog.pageType != &quot;https://mastamvan.blogspot.com/2016/08/kumpulan-tag-kondisional-blogger.html&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Hanya Di Halaman Statistik / laman
  • 
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Di Semua Halaman Kecuali Halaman Statistik / laman
  • 
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Hanya Di Halaman Archive
  • 
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Di Semua Halaman Kecuali halaman Archive
  • 
    <b:if cond='data:blog.pageType != &quot;archive&quot;'>
    Masukan Widget, Css, Javascript Disini
    </b:if>
    
  • Tag Kondisional Untuk Menampilkan Widget Hanya Di Perangkan Mobile (HP)
  • 
    <b:if cond='data:blog.isMobile'>
    Masukan Widget, Css, Javascript Disini Untuk Perangkat Mobile (HP)
    </b:if>
    
  • Tag Kondisional Untuk Menyembunyikan Widget Di Perangkan Mobile (HP)
  • 
    <b:if cond="!data:blog.isMobile">
    Masukan Widget, Css, Javascript Disini yang Tidak Ingin Tampil Di Perangkat Mobile (HP)
    </b:if>
    
  • Tag Kondisional Untuk Menyembunyikan Widget hanya Pada Label (Url Search Label)
  • 
    <b:if cond='data:blog.searchLabel'>
    Masukan Widget, Css, Javascript Disini Untuk Bagian Search label
    </b:if>
    

Kalian juga bisa menggabungkan Tag Kondisional agar tampil di beberapa widget, seperti hanya tampil di homepage dan di postingan, atau hanya tampil di postingan dan halaman statistik dll...

Itu lah Conditional Tags yang sudah saya rangkum dari beberapa blog dan template, semoga artikel tentnag Cara Menyembunyikan / menampilkan widget hanya di halaman tertentu menggunakan Conditional Tags ini bermanfaat ya :)

Apabila ada yang tidak di mengerti dalam pemasangan tag kondisional di blognya, silahkan bertanya di kolom komentar ya :)

Cara Memberi Link Di Judul Post Pada Breadcrumb

Cara Memberi Link Di Judul Post Pada Breadcrumb
Cara Memberi Link Di Judul Post Pada Breadcrumb

Bagaimana cara agar judul post di breadcrumb bisa di klik

Tutorial Cara Memberi Link Pada Judul Artikel Di Breadcrumb. Kali ini saya akan memberikan tutorial cara memasang link di judul artikel pada breadcrumb...

Bagi kalian yang ingin agar judul artikel di breadcrumb bisa di klik dengan memasang link terkait di judulnya, kalian bisa mengikuti tutorial kali ini...

Mungkin sebelumnya di beberapa breadcrumb tidak di pasang link pada judul artikelnya, tapi sekarang kita akan memasukan link ke dalamnya...

Okeh tanpa basa basi lagi mari kita langsung simak tutorial singkat di blogger mas tamvan ini :v :v

Cara Memasang Breadcrumb Yang Seo Friendly


  • Seperti biasa, kalian harus login terlebih dahulu ke blogger.com
  • Setelah login kalian pilih menu Template, Edit HTML, Terus Cari Kode Berikut <b:includable id='breadcrumb' var='posts'>
  • Setelah ketemu scroll ke bawah / lihat bagian bawah ada tag, kode seperti berikut <data:post.title/>
  • Kalo sudah ketemu, silahkan ganti kode tersebut dengan kode berikut ini..
  • 
    <a expr:href='data:blog.url' expr:title='data:blog.pageName' target='_blank'><data:post.title/></a>
    
  • kalo sudah tinggal save dan lihat hasilnya..
  • Semoga bermanfaat

Cukup sekian dan terima kasih, sudah membaca artikel tentnag Tutorial Cara Menambahkan Link Di Judul Post Pada Breadcrumb Blog ini bermanfaat ya:)

Jika anda merasa bingung dengan artikel ini, silahkan bertanya di kolom komentar...

Cara Otomatis Menambahkan Artikel Terkait Di Tengah Postingan

Cara Otomatis Menambahkan Artikel Terkait Di Tengah Postingan
Cara Otomatis Menambahkan Artikel Terkait Di Tengah Postingan

Cara Memasang Artikel Terkait di Tengah Posting Secara Otomatis

Tutorial Cara Menambahkan Artikel Terkait Berdasarkan Label Di Tengah Postingan Blog, pada tutorial kali ini saya akan memberikan trik agar artikel / postingan blog terdapat Artikel terkait berdasarkan label di semua postingannya secara otomatis...

Sebelumnya artikel ini terinspirasi dari grup blogger yang menanyakan bagaimana cara membuat kotak artikel terkait di tengah postingan blog, seperti pada website jalan tikus.

Saya coba ubek-ubek, setelah sekian menit akhirnya saya menemukan cara alternatif agar artikel terkait ini bisa berada di tengah postingan blog..
Kalian bisa liat tampilan demonya di blog berikut ini Demo Tampilannya

Langsung saja ke tutorial cara pemasangan artikel terkait berdasarkan label di tengah postingan blognya gan...

Ada tida tutorial untuk menampilkan artikel terkait atau kotak baca juga / kotak artikel pilihan, silahkan pilih sesuai dengan keinginan kalian..
Pilih Tutorial Untuk Memasang Artikel Terkait Di Dalam postingan
  1. Cara Otomatis, Cukup Satu kali pasang tampil di semua postingan
  2. Tidak di semua artikel tapi otomaits menambahkan artikel terkait
  3. Semuanya manual #RECOMMENDED

Tutorial Memasang Kotak Artikel Terkait Di Tengah Postingan Blog


  • Seperti biasa, login dulu ke blogger.com
  • Pilih Tab Template, Edit HTMLTerus Kalian Cari Kode </head>
  • kalo sudah ketemu, masukan kode berikut di atasnya...
  • 
    <style type="text/css">
    /*Artikel Terkait Tengah Postingan*/
    .bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
    .bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
    .bacajuga ul{padding:11px 41px 0;list-style:none}
    .bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
    .bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
    </style>
    <script type="text/javascript">  
    //<![CDATA[  
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 4=g f();2 9=0;2 6=g f();d z(m){c(2 i=0;i<m.u.5.3;i++){2 5=m.u.5[i];4[9]=5.v.$t;c(2 k=0;k<5.h.3;k++){b(5.h[k].A==\'y\'){6[9]=5.h[k].x;9++;C}}}}d B(){2 7=g f(0);2 8=g f(0);c(2 i=0;i<6.3;i++){b(!q(7,6[i])){7.3+=1;7[7.3-1]=6[i];8.3+=1;8[8.3-1]=4[i]}}4=8;6=7}d q(a,e){c(2 j=0;j<a.3;j++)b(a[j]==e)p M;p L}d D(){2 r=s.K((4.3-1)*s.I());2 i=0;n.l(\'<o>\');E(i<4.3&&i<F){n.l(\'<w><a x="\'+6[r]+\'" J ="G" v="\'+4[r]+\'">\'+4[r]+\'</a></w>\');b(r<4.3-1){r++}H{r=0}i++}n.l(\'</o>\')}',49,49,'||var|length|relatedTitles|entry|relatedUrls|tmp|tmp2|relatedTitlesNum||if|for|function||Array|new|link||||write|json|document|ul|return|contains||Math||feed|title|li|href|alternate|related_results_labels|rel|removeRelatedDuplicates|break|printRelatedLabels|while|20|_blank|else|random|target|floor|false|true'.split('|'),0,{}))
    //]]>  
    </script>
    
  • Nah sekarang tinggal pasang kode html untuk menampilkan artikel terkaitnya
  • Cari kode <data:post.body/> Ada lebih dari 1 kode itu, coba kalian ganti kodenya yang ke 2 dengan kode berikut..
  • 
    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='bacajuga'>  
    <b:if cond='data:post.labels'>  
    <b:loop values='data:post.labels' var='label'>  
    <b:if cond='data:blog.pageType == "item"'>  
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
    </b:if>  
    </b:loop>  
    </b:if>  
    <b:if cond='data:blog.pageType == "item"'>  
    <h4>Baca Juga</h4>  
    <script type="text/javascript">  
    removeRelatedDuplicates();  
    printRelatedLabels();  
    </script>  
    </b:if>  
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
    
    Silahkan sesuaikan nilai berikut max-results=5 dengan jumblah artikel yang ingin di tampilkan..
  • Kalo tidak tampil coba cari lagi kode ini <data:post.body/>
  • Kira Kira Tampilannya seperti ini, cari aja kode yang hampir mirip
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    </b:if>
    
  • Kalian Rubah Jadi Seperti Ini
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='bacajuga'>  
    <b:if cond='data:post.labels'>  
    <b:loop values='data:post.labels' var='label'>  
    <b:if cond='data:blog.pageType == "item"'>  
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
    </b:if>  
    </b:loop>  
    </b:if>  
    <b:if cond='data:blog.pageType == "item"'>  
    <h4>Baca Juga</h4>  
    <script type="text/javascript">  
    removeRelatedDuplicates();  
    printRelatedLabels();  
    </script>  
    </b:if>  
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
    </b:if>
    
  • Kalo sudah ketemu, tinggal save dan lihat hasilnya...


Sekarang bagi kalian yang ingin memasang Artikel Terkait Berdasarkan Label Di Postingan Blog, tapi ingin menentukan letaknya sendiri entah itu di awal postingan, di tengah postingan atau di akhir postingan.

Gunakan tutorial berikut ini untuk memasangnya, tapi kalian harus manual memasaukan script dan mengisi label apa yang mau di masukan ke artikel agan...

langsung saja kita mula ke tutorialnya..

Cara Manual Memasukan Artikel Terkait Ke Postingan Blog


#Cara manual tapi otomatis menampilkan artikel dalam kotak baca juga.

  • Sama Seperti Di Atas, Masuk ke Template, Edit HTMLTerus Kalian Cari Kode </head>
  • Setelah Ketemu, Masukan Kode Berikut Di Atasnya
  • 
    <style type="text/css">
    /*Artikel Terkait*/
    .bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
    .bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
    .bacajuga ul{padding:11px 41px 0;list-style:none}
    .bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
    .bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function bacajuga(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="'"+e.feed.entry[t].link[r].href+"'",l=e.feed.entry[t].title.$t,a="<li><a href="+n+'" title="'+l+'" target="_blank">'+l+"</a> </li>";document.write(a)}document.write("</ul>")}
    //]]>
    </script>
    
  • Pemasangan scriptnya sudah selesai, sekarang kita tinggal memasang scrip di setiap postingan yang ingin di psang artikel terkait berdaasrkan labelnya..
  • Silahkan masuk ke postingan yang ingin di pasang, terus pilih tab HTML, jangan console
  • Kalo sudah masuk ke tab html di postingan, kalian copy kode berikut ke dalamnya, silahkan sesuaikan letaknya mau di letakan setelah kalimat / gambar apa..
  • 
    <div class='bacajuga'> 
    <h4>Baca Juga</h4>
    <script src="/feeds/posts/summary/-/Tutorial?max-results=5&alt=json-in-script&callback=bacajuga"></script>
    </div>
    
    Silahkan ganti kata ini Tutorial Dengan Label Yang Ingin di tampilkan
    Dan Sesuaikan juga angka iniresults=5 dengan artikel yang ingin di tampilkan...
  • kalo sudah, tinggal di publikasikan n selesai deh :v
  • Done n selesai


#Cara manual memasukan artikel kedalam kotak baca juga dan menempatkannya sesuka hati..


  • Langkah pertama kita memasang CSS terlebih dahulu
  • Masukan script dibawah ini tepat di atas kode </head>
  • 
    <style type="text/css">
    /*Artikel Terkait*/
    .bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
    .bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
    .bacajuga ul{padding:11px 41px 0;list-style:none}
    .bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
    .bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
    </style>
    
  • Terus save template
  • Nah sekarang kita tinggal memasukan kode untuk menampilkan post di postingan dalam kotak baca juga secara manual.
  • Masuk ke postingan yang ingin d beri kotak baca juga / artikel pilihan, masuk ke tab mode HTML, Jangan COMPOSE. Setelah itu copy kode dibawah ini dan masukan kedalamnya
  • 
    <div class="bacajuga">
      <h4>Baca Juga</h4>
      <ul>
        <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
        <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
        <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
        <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
        <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
      </ul>
    </div>
    
    Silahkan ganti tanda # [Tanda Pagar] dengan link tujuan kalian.
    Masukan HTML di atas di tempat yang kalian iginkan, ntah itu di awal d tengah / d akhir artikel..

kalo sudah tinggal lanjutkan menulis artikel / publikasikan post kalian.

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Menambahkan artikel terkait di tengah postingan Blog

Membuat Menu Bar Drop Down Responsive

Membuat Menu Bar Drop Down Responsive
Membuat Menu Bar Drop Down Responsive

Tutorial Cara Memasang Menu Navigation Bar Deopdown Responsive Di Blog

Memasang Menu bar Responsive Di Blog, Tutorial kali ini kita akan membuat menu navigation bar drop down responsive pada blogger..

Sebelumnya saya juga sudah pernah posting tentang menu bar, kalian bisa memilih pada artikel berikut ini, barang kalia ada yang menarik..



nah sekarang mari kita lanjut ke tutorial cara pemasangan menu navigation bar drop down yang responsive di blog..

Tutorial Membuat Menu Bar Drop Down Responsive


  • Login ke blogger.com
  • Pilih menu Template, Edit HTML, Cari Kode </head>
  • Setelah ketemu, masukan css berikut di atasnya...
  • 
    <style type="text/css">
    .slide-menu{display:none;background:#3a89b9;padding:0 15px;height:60px;line-height:60px;color:#fff!important}
    .slide-menu:hover{background:#3a89b9}
    #nav{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.2px;background:#272b35;height:60px;line-height:60px;margin:0 auto;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial}
    #nav2{max-width:1060px;margin:0 auto;background:#4399cd;height:60px;line-height:60px}
    .vienna-menulite{background:#4399cd;list-style:none;margin:0;float:left}
    .vienna-menulite:before,.vienna-menulite:after{content:" ";display:table}
    .vienna-menulite:after{clear:both}
    .vienna-menulite a{display:block;padding:0 15px}
    .vienna-menulite li{position:relative;margin:0}
    .vienna-menulite > li{float:left}
    .vienna-menulite > li > a{display:block;height:60px;line-height:60px;color:#fff}
    .vienna-menulite > li > a.active{background:#4fa8dc;padding:0 20px}
    .vienna-menulite > li:hover > a,.vienna-menulite > li:hover > a.active{background:#4fa8dc;color:#fff}
    .vienna-menulite > li > a.active i{transform:scale(1.0);backface-visibility:hidden;vertical-align:middle}
    .vienna-menulite > li > a.active i:hover{transform:scale(0.95)}
    .vienna-menulite ul{list-style:none;margin:0;min-width:10em}
    .vienna-menulite li ul{background:#fafafa;display:block;position:absolute;left:0;top:80%;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
    .vienna-menulite li li ul{left:110%;top:0}
    .vienna-menulite li ul li{position:relative;margin:0}
    .vienna-menulite > li.hover > ul{visibility:visible;opacity:1;top:100%}
    .vienna-menulite li li.hover ul{visibility:visible;opacity:1;left:100%}
    .vienna-menulite li li a{display:block;color:#666;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;text-transform:none;transition:all .3s;}
    .vienna-menulite li li a:hover{background:#4399cd;color:#fff}
    .vienna-menulite li li li a{z-index:20}
    .vienna-menulite li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;transition:all .3s}
    .vienna-menulite li:hover .parent:after{content:"\f106";color:#fff}
    .vienna-menulite li:hover ul li .parent:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#4399cd;float:right;transition:all .3s}
    .vienna-menulite li ul li .parent:hover:after{content:"\f105";color:#fff}
    #search-form{float:right;margin:0 10px;width:230px}
    @media only screen and (max-width:768px){.vieleftcredit,#vierightcredit{float:none;text-align:center;margin:10px auto}.vitop-wrapper{margin:0;padding:0}.top-menulite{display:block;width:100%;padding:0 10px}.top-menulite ul{text-align:center}.top-menulite ul{display:none;height:auto}.top-menulite a#pull{color:#eee;display:inline-block;font-size:12px;padding:10px 3%;position:relative;text-align:right;width:100%;font-weight:700}.top-menulite a#pull:after{content:'\f0c9';font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;display:inline-block;position:absolute;left:20px;top:0;line-height:30px}.top-menulite li{display:block;width:100%;text-align:left;border-right:none}.top-menulite li a{padding:15px 20px;display:block}.top-menulite li a:hover,nav a:active{color:#fff}.top-menulite ul li a:hover{background:#4399cd;color:#fff}.top-menulite ul li:first-child a{margin-left:0}.nav{float:none;width:100%;max-width:100%}.active{display:block}.vienna-menulite > li > a.active{border-top:4px solid #3a89b9;border-left:0;padding:0 15px}.nav li ul:before,.top-menulite li.doremifa{display:none}.nav > li{float:none;overflow:hidden;background:#4399cd;z-index:99}.nav ul{display:block;width:100%;float:none}.vienna-menulite li ul{background:#f6f6f6;box-shadow:none}.vienna-menulite li ul li a{background:#fafafa;color:#444}.vienna-menulite li li a:hover{background:#4399cd}.nav > li.hover > ul,.nav li li.hover ul{position:static}.vienna-menulite li .parent:after,.vienna-menulite li ul li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#fff}.vienna-menulite li:active .parent:after,.vienna-menulite li ul li:active .parent:after{color:#fff}}
    @media only screen and (min-width:640px){#menu{display:block}}
    </style>
    
  • Setelah memasang css, sekarang kita tinggal memasang javascriptnya, silahan cari kode </body>
  • Kalo sudah ketemu, kalian masukan javascript berikut di atsnya..
  • 
    <script type="text/javascript">
      //<![CDATA[
      // Main Menu
      var ww = document.body.clientWidth;
      $(document).ready(function() {
        $(".nav li a").each(function() {
          if ($(this).next().length > 0) {
            $(this).addClass("parent")
          }
        });
        $(".slide-menu").click(function(e) {
          e.preventDefault();
          $(this).toggleClass("active");
          $(".nav").toggle()
        });
        adjustMenu()
      });
      $(window).bind("resize orientationchange", function() {
        ww = document.body.clientWidth;
        adjustMenu()
      });
      var adjustMenu = function() {
        if (ww < 768) {
          $(".slide-menu").css("display", "inline-block");
          if (!$(".slide-menu").hasClass("active")) {
            $(".nav").hide()
          } else {
            $(".nav").show()
          }
          $(".nav li").unbind("mouseenter mouseleave");
          $(".nav li a.parent").unbind("click").bind("click", function(e) {
            e.preventDefault();
            $(this).parent("li").toggleClass("hover")
          })
        } else if (ww >= 768) {
          $(".slide-menu").css("display", "none");
          $(".nav").show();
          $(".nav li").removeClass("hover");
          $(".nav li a").unbind("click");
          $(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave", function() {
            $(this).toggleClass("hover")
          })
        }
      }
      //]]>
    </script>
    
  • Langkah terakhir, tinggal memasang HTMLnya, silahkan taro kode ini di tempat yang kalian inginkan..
  • Misal kita pasang di bawah kode <body> atau di bawah </header>
  • 
      <nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
      <div id='nav2'>
        <a class='slide-menu' href='#'><i class='fa fa-list'></i> Menu</a>
        <ul class='nav vienna-menulite'>
          <li><a class='active' href='/'><span itemprop='name'><i class='fa fa-th-list fa-lg'></i></span></a></li>
          <li><a href='X URL X' itemprop='url'><span itemprop='name'>Programing</span></a>
            <ul>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>DATA BIS</span></a>
                <ul>
                  <li><a href='X URL X' itemprop='url'><span itemprop='name'>KUAT</span></a></li>
                  <li><a href='X URL X' itemprop='url'><span itemprop='name'>OREO</span></a></li>
                </ul>
              </li>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>C++</span></a></li>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>HTML</span></a></li>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>JAVA</span></a>
                <ul>
                  <li><a href='X URL X' itemprop='url'><span itemprop='name'>ECLIPSE</span></a></li>
                  <li><a href='X URL X' itemprop='url'><span itemprop='name'>CMD</span></a></li>
                </ul>
              </li>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>DELPI</span></a></li>
            </ul>
          </li>
          <li><a href='X URL X' itemprop='url'><span itemprop='name'>Tech News</span></a></li>
          <li><a href='X URL X' itemprop='url'><span itemprop='name'>Smartphone</span></a>
            <ul>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>ANDROID</span></a></li>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>IOS</span></a></li>
              <li><a href='X URL X' itemprop='url'><span itemprop='name'>DLL</span></a></li>
            </ul>
          </li>
          <li><a href='X URL X' itemprop='url'><span itemprop='name'>Software</span></a></li>
          <li><a href='X URL X' itemprop='url'><span itemprop='name'>Game</span></a></li>
          <li><a href='X URL X' itemprop='url'><span itemprop='name'>tips  dan trik</span></a></li>
          <li class=""><a class="parent" href="X URL X" itemprop="url"><span itemprop="name">EDITING</span></a>
            <ul>
              <li class=""><a href="X URL X" itemprop="url"><span itemprop="name">GANTI</span></a></li>
              <li class=""><a href="X URL X" itemprop="url"><span itemprop="name">GANTI</span></a></li>
              <li class=""><a href="X URL X" itemprop="url"><span itemprop="name">GANTI</span></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    
    Silahkan ganti X URL X dengan link yang kalian mau..
    Kalo Menu Drop Downnya tidak tampil, silahkan masukan kode dibawah ini tepat di atas kode </head>
    
    <script type='text/javascript'>
           //<![CDATA[
           if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
           //]]>
           </script>
    
  • Ok, kalo sudah yankin naronya di mana dan pas, tinggal save template...
  • Dan Selesai

Cukup sekian dan terima kasih, semoga artikel tentnag Cara membuat menu navigation bar drop down responsive di blog ini bermanfaat..

Apabil ada penjelasan yang kurang jelas seperti pemasnagan tag html silahkan bertanya di kolom komentar..

Membuat Widget Multi Tab Pure Css Di Sidebar Blog

Membuat Widget Multi Tab Pure Css Di Sidebar Blog
Membuat Widget Multi Tab Pure Css Di Sidebar Blog

Cara Membuat Widget Multi Tab Pure Css Di Sidebar Blogger

Tutorial Cara Memasang Widget Multi Tab Di Sidebar Blogger Tanpa Javascript Kali ini saya akan berbagi tutorial untuk memasang sebuah widget baru yang di sebut dengan multi tab widget sidebar...

Sebelumnya saya juga sudah pernah posting widget multi tab sidebar, tapi pada postingan sebelumnya kita menggunakkan javascript untuk menampilkan dan menyembunyikan widget yang lainnya...

Bagi kalian yang ingin mencoba memasang yang menggunakan javascript, silahkan mampir ke tutorial berikut ini... Cara Memasang Widget Multi Tab Di Sidebar Blogger

Nah pada tutorial kali ini kita hanya menggunakan css untuk memilih widget mana yang akan ditampikan...

langsung saja ke tutorial cara memasang widget baru di sidebar dengan multi tab...

Membuat Widget Multi Tab Pure Css Di Sidebar Blog


  • Tentunya kalian harus sudah login ke blogger.com
  • kalo sudah login, masuk ke Template, Edit HTML
  • , Cari Kode </head>
  • Kalo sudah ketemu, masukan css dibawah ini tepat di atasnya....
  • 
    <style type='text/css'>
    .container{width:100%;margin:0 auto}
    .tabs input[type="radio"]{display:none}
    .tabs nav{width:100%;display:table}
    .tabs label{display:table-cell;width:20%;line-height:3;text-align:center;border:1px solid black;text-transform:uppercase}
    .tabs label:hover{background-color:#ff6666;color:white}
    .tabs input[type="radio"]{display:none}
    .tabs nav{background-color:grey}
    .tabs label{width:34%;line-height:2}
    .tabs{position:relative;height:auto;padding:0 3px 24px}
    .tabs input[type="radio"]{display:none}
    .tabs nav{width:100%;display:table}
    .tabs label{background-color:gainsboro;border:1px solid black;cursor:pointer;display:table-cell;line-height:3;text-align:center;text-transform:uppercase}
    .tabs label:hover{background-color:#ff6666;color:white}
    .tabs article{border:1px solid black;left:0;padding:.5em;position:absolute;top:0;transform:scale(0);overflow:hidden}
    #tab_1:checked ~ nav [for='tab_1'],#tab_2:checked ~ nav [for='tab_2'],#tab_3:checked ~ nav [for='tab_3']{background-color:#ff6666;color:white}
    #tab_1:checked ~ nav [for='tab_1']:after,#tab_2:checked ~ nav [for='tab_2']:after,#tab_3:checked ~ nav [for='tab_3']:after{content:"";border-right:9px solid transparent;border-top:13px solid #f66;bottom:-42px;height:0;left:-28px;position:relative;width:0}
    #tab_1:checked ~ .tab_content_1,#tab_2:checked ~ .tab_content_2,#tab_3:checked ~ .tab_content_3{display:block;left:0;position:relative;top:1em;transform:scale(1);transition:transform 0.2s ease-out}
    </style>
    
  • Nah Kalo Sudah Di Pasang kita tinggal memasang HTMLnya untuk menampilkan widget multi tab di seidebarnya...
  • Silahkan kalian cari kode seperti berikut ini... <div id='sidebar-wrapper'> Atau <aside id='sidebar-wrapper'>
    Kalo tidak ada, silahkan sesuaikan dengan widget sidebar kalian, setiap template bisa beda2
  • Kalo sudah Ketemu, Kalian tinggal memasukan HTML berikut dibawahnya
  • 
    <div class='container'>
      <div class='tabs col-xs-12 col-md-6'>
        <input checked='' id='tab_1' name='tab' type='radio'/>
        <input id='tab_2' name='tab' type='radio'/>
        <input id='tab_3' name='tab' type='radio'/>
        <nav>
          <label for='tab_1'>Popular</label>
          <label for='tab_2'>Terbaru</label>
          <label for='tab_3'>Komentar</label>
        </nav>
    <article class='tab_content_1'>
    <b:section class='sidebar' id='sidebartab1' preferred='yes'/>
    </article>
    <article class='tab_content_2'>
    <b:section class='sidebar' id='sidebartab2' preferred='yes'/>
    </article>
    <article class='tab_content_3'>
    <b:section class='sidebar' id='sidebartab3' preferred='yes'/>
    </article>
    </div>
    </div>
    
    Silahkan sesuaikan Tulisan Popular, Terbaru, Komentar Dengan Nama Widget Kalian
  • Kalo sudah, tinggal di save Dan Tinggal isi widget tadi dengan widget kalian di Tataletak..

Okeh, cukup sampai di sini tutorial tentang Cara Memasang Multi Tab Bidget Di Sidebar Pure CSS No Javascript ini bermanfaat ya :)

Apabila ada penjelasan yang kurang paham, silahkan bertanya di kolom Komentar ya :)

4 Widget Popular Post Keren Berwarna Di Blogger

4 Widget Popular Post Keren Berwarna Di Blogger
Membuat Widget Popular Posts Keren di Blog

Membuat Widget Popular Post Keren Di Blogger Dengan 4 Style Warna Warni Simple

Cara Merubah Tampilan Widget Popular Post Lebih Keren Dan Berwarna Dengan 4 Pilihan Style css. Kali ini saya akan berbagi tutorial yang simple untuk membuat tampilan widget popular post di blog menjadi berwarna warni...

Widget popular post ini di lngkapi dengan image / gambar yang membuat tampilannya lebih elegan, menarik mungkin bisa di sebut flat ui...

Sebelumnya saya juga sudah pernah share artikel tentang widget popular post dengan 5 style dan tampilan posisi image yang berbeda2.. bagi kalian yang ingin melihatnya, silahkan liat di artikel berikut ini...
New Best 5 Style Widget Popular Post Blogger

Untuk tutorial cara pembuatan widget popular post ini, bisa ikuti langkah-langkah berikut ini..

widget popular post keren warna warni with thumbnails


  • Login ke blogger.com
  • Lanjutkan ke bagian Template, Edit HTML, Terus kalian cari kode </head>
  • Setelah ketemu, kalian pilih css mana yang mau di pakai untuk membuat tampilan popular post kalian lebih keren...
  • Terus kalo udah, tinggal di copy dan masukan css dibawah ini tepat di atas kode </head>
  • Demo Widget popular Post 1
  • 
    <style type='text/css'>
    /* Widget popular Post1 */
    .popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
    .popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
    .popular-posts ul li:nth-child(1){background-color:#f44336;}
    .popular-posts ul li:nth-child(2){background-color:#e91e63;}
    .popular-posts ul li:nth-child(3){background-color:#9c27b0;}
    .popular-posts ul li:nth-child(4){background-color:#673ab7;}
    .popular-posts ul li:nth-child(5){background-color:#3f51b5;}
    .popular-posts ul li:nth-child(6){background-color:#2196f3;}
    .popular-posts ul li:nth-child(7){background-color:#03a9f4;}
    .popular-posts ul li:nth-child(8){background-color:#00bcd4;}
    .popular-posts ul li:nth-child(9){background-color:#009688;}
    .popular-posts ul li:nth-child(10){background-color:#4caf50;}
    .popular-posts ul li:hover{background-color:#757575;}
    .popular-posts ul li a{color:#FFF;text-decoration:none;}
    .popular-posts ul li a:hover{color:#EEE;}
    .popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
    </style>
    
  • Demo Widget popular Post 2
  • 
    <style type='text/css'>
    /*Popular Post 2*/
    .popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
    .popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
    .popular-posts ul li:nth-child(1){background-color:#00bcd4;}
    .popular-posts ul li:nth-child(2){background-color:#009688;}
    .popular-posts ul li:nth-child(3){background-color:#4caf50;}
    .popular-posts ul li:nth-child(4){background-color:#8bc34a;}
    .popular-posts ul li:nth-child(5){background-color:#cddc39;}
    .popular-posts ul li:nth-child(6){background-color:#ffeb3b;}
    .popular-posts ul li:nth-child(7){background-color:#ffc107;}
    .popular-posts ul li:nth-child(8){background-color:#ff9800;}
    .popular-posts ul li:nth-child(9){background-color:#ff5722;}
    .popular-posts ul li:nth-child(10){background-color:#795548;}
    .popular-posts ul li:hover{background-color:#757575;}
    .popular-posts ul li a{color:#FFF;text-decoration:none;}
    .popular-posts ul li a:hover{color:#EEE;}
    .popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
    </style>
    
  • Demo Widget popular Post 3
  • 
    <style type='text/css'>
    /*Popular Post 3*/
    .popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
    .popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #e0e0e0;position:relative;}
    .popular-posts ul li:hover{background-color:#EEE;}
    .popular-posts ul li a{color:#424242;text-decoration:none;}
    .popular-posts ul li a:hover{color:#212121;}
    .popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
    </style>
    
  • Demo Widget popular Post 4
  • 
    <style type='text/css'>
    /*Popular Post 4*/
    .popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
    .popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#212121;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #333;position:relative;}
    .popular-posts ul li:hover{background-color:#262626;}
    .popular-posts ul li a{color:#FFF;text-decoration:none;}
    .popular-posts ul li a:hover{color:#EEE;}
    .popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
    </style>
    


Nah kalo sudah di pilih dan di save, kalian tinggal atur tampilan popular postnya di bafian tataletak..

Silahkan sesuaikan seperti gambar berikut ini...
4 Widget Popular Post Keren Berwarna Di Blogger


Nah kalo sudah save dan lihat hasilnya...

Cukup sekian dan terima kasih, semoga artikel tentang cara membuat widget popular post keden di blog dengan warna ini bermanfaat ya :)

Mengatasi Favicon Blog Tidak Muncul Di Perangkat Mobile

Mengatasi Favicon Blog Tidak Muncul Di Perangkat Mobile
Mengatasi Favicon Blog Tidak Muncul Di Perangkat Mobile

Cara Mengatasi Favicon Blog yang Tidak Muncul

Tutorial Cara mengatasi Favicon Blog yang Tidak Muncul Di Web Browser. Kali ini saya akan memberikan solusi untuk kalian yang mengalami Favicon blognya tidak muncul / tampil ketika di buka di web browser hp, device mobile..

Ketika saya coba membuka blog saya di mobile, hndphone. favicon blog saya ko tidak tampil, padahal sudah di upload gambarnya...? Lalu saya coba utak atik dan akhirnya menemukan solusi utuk mengatasi favicon yang tidak tampil ini..

Biasanya kode untuk menampilkan favicon di blog seperti berikut ini...

<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

Nah kadang kadang kode itu tidak bisa terbaca oleh perangkat mobile, mugkin karena urlnya beubah jadi namadomain.com?m=1

Untuk mengatasinya, kita akan memasang kode khusus untuk menampilkan faviconnya di perangkat mobile...

... Kalian tinggal tambahkan kode berikut di atas <head>, agar nanti bisa tampil di perangkat mobile...

<b:if cond='data:blog.isMobile'>
<link href='https://mastamvan.blogspot.co.id/favicon.ico' rel='icon' type='image/x-icon'/>
</b:if>

Agan tinggal ganti url ini https://mastamvan.blogspot.co.id dengan url blog kalian

kalo sudah, tinggal save template dan selesai. sekarang faviconnya suah tampil di hp...

Cukup sekian dan terima kasih, semoga artikel tentnag Tutorial Cara Mengatasi Favicon Blog Yang Tidak Mau Muncul Di Perangkat Mobile ini bermanfaat ya :)

Membuat Video Responsive Dengan jQuery Based iFrame

Membuat Video Responsive Dengan jQuery Based iFrame
Membuat Video Responsive Dengan jQuery Based iFrame

Tutorial Cara Membuat Video Iframe Youtube Responsive Dengan Jquery

Cara Mudah Membuat Video Youtube / Iframe Di Blog Menjadi Responsive, mobile friendly Dengan jquery based Iframe. Pada tutorial kali ini kita akan menjadikan iframe di blog responsive menggunakan Minimalist jQuery Based Responsive iFrame Solution - Responsinatr

Buat kalian yang suka share video di blog, menggunakan iframe dari youtube, openload, Vimeo atau sebagainya. Bisa mencoba Jquery ini agar tampilannya responsive, suport untuk layar yang beragam seperti pc, tablet, hp

Bagi kalian yang ingin melihat tamvilan iframe yang responsive, bisa kunjungi blog demo berikut ini..

Demo Embed Video Responsive With jQuery Based iFrame

Sebelumnya saya juga sudah share artikel tentang cara membuat video youtube menjadi responsive di blog, tapi postingan yang sebelumnya saya menggunakan css @media query untuk membuat videonya jadi responsive..

Bagi yang ingin mencoba tutoorial ini, silahkan kunjungi artikel berikut ini.... Cara Mudah Membuat Video Di Blog Responsive

Sekarang mari kita lanjut ke tutorialnya....

Minimalist jQuery Based Responsive iFrame Solution - Responsinatr


  • Login ke blogger.com
  • Pilih menu Template, Edit HTML, Cari Kode </head>
  • kalo udah ketemu, masukan kode berikut di atasnya
  • 
    <script src="https://rawgit.com/mastamvan/backup/master/jQuery-video-responsive.js"></script>
     <script>$(function(){$('#container').responsinatr();})</script>
    
  • Kalo sudah, tinggal save template
  • Tinggal cara pemasangannya di postingan blog
  • Sebenarnya sama aja seperti biasa, tapi barang kali ada yang berbeda, silahkan ikuti cara berikut ini..
  • Di postingan masuk ke tab HTML, jangan compose biar iframenya bekerja
  • Terus masukan kode di bawah ini kedalamnya
  • Copy Url Iframe Video Dari Youtube Terus masukan ke html berikut ini
  • 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/L7r2BSRYIWY" frameborder="0" allowfullscreen></iframe>
    
  • Iframe Responsive untuk video dari vimeo
  • 
    <iframe src="https://player.vimeo.com/video/1084537" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    
  • nah kalo yang ini untuk Google Map agar responsive
  • 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d65331019.7272909!2d78.18333713431109!3d-1.9579296735123177!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2c4c07d7496404b7%3A0xe37b4de71badf485!2sIndonesia!5e0!3m2!1sid!2s!4v1470311192144" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    

Silahkan ganti urlnya dengan embed video kalian...
jika jquerynya tidak bekerja, silahkan masukan kode berikut ini di atas </head>

<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
       </script>


Tinggal publikasikan dan selesai...
Cukup sekian dan terima kasih, semoga artikel tentang Tutorial cara membuat video youtube responsive di blog dengan jquery based iframe ini bermanfaat...

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