Laborblog

Category: Blog

  • Membuat Gambar Supaya Selalu Mengikuti Kursor

    www.laborblog.my.id - Bisa gambar atau photo Sobat, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik berikut ini

    Ilustrasi
    Trik gimana cara membuat gambar selalu berada di pojok (bisa atas, bawah, kiri, kanan) meskipun “scroll bar” ditarik kemana-mana. “Scroll bar” itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan.


    Bisa gambar atau photo Sobat, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik berikut ini:
    1. Login ke blogger trus klik Layout Edit HTML
    2. Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya.

    #trik_pojok { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

    3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text “left” diganti dengan “right”. Begitu juga tulisan “bottom”, jika pingin di posisi atas bisa diganti dengan “top”.
    4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>

    <div id=”trik_pojok”>
    <a href=”https://www.laborblog.my.id”>
    <img src=”https://iili.io/7OtYoF.gif”; border=”0″ />
    </a>
    </div>

    Keterangan: “https://www.laborblog.my.id” adalah link. ganti dengan link Sobat. “https://iili.io/7OtYoF.gif” adalah lokasi gambar Sobat. ganti dengan lokasi gambar Sobat.


    5. Jika Sobat pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
    6. Simpan hasil kerja Sobat dan lihat hasilnya.

  • Cara Membuat Tombol Auto Hide Menampilkan Text dan Gambar

    www.laborblog.my.id - Sepertinya sobat sudah pada kenal yang namanya form button ya, kali ini membuat link form button untuk menyembunyikan dan menampilkan sebuah teks atau image(gambar), atau dengan istilah spoiler.

    Contoh
    Sepertinya sobat sudah pada kenal yang namanya form button ya, kali ini membuat link form button untuk menyembunyikan dan menampilkan sebuah teks atau image(gambar), atau dengan istilah spoiler.
    Contohnya seperti di bawah ini:
    Judul Spoiler:
    Letakkan teks atau kode script (gambar atau video), link di sini.
    Caranya, sobat tinggal masukkan kode dibawah ini dalam postingan.


    Kode :

    <div style=”margin: 5px 20px 20px;”>

    <div class=”smallfont” style=”margin-bottom: 2px;”>

    Judul Spoiler :

    <input value=”Buka” style=”margin: 0px; padding: 0px; width: 55px; font-size: 12px;” onclick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”; this.innerText = ”; this.value = ‘Tutup‘; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Buka‘; }” type=”button”>

    </div>

    <div class=”alt2″ style=”border: 1px inset ; margin: 0px; padding: 6px;”>

    <div style=”display: none;”>
    Letakkan teks atau kode script (gambar atau video), link di sini</div>
    </div>
    </div>

    Kode yang berwarna merah adalah dimana obyek akan ditampilkan atau disembunyikan,bisa sobat ganti berupa teks saja,sebuah gambar maupun video kesukaan dan kode script/HTML. dan juga bisa diganti sesuai kemauan sobat.
    Untuk memasukkan Kode HTML/Script harus di parse terlebih dahulu. pilih HTML dalam buat postingan.
    Kalau saya selalu menggunakannya dalam setiap postingan tentang Tutorial Blog Untuk Memasukan Kode Script & HTML. Selain itu bagi saya, postingan blog terlihat elegan, simple & keren. yah seperti saya lh. hehehe…[AbdulHamidInfo]

  • Menghilangkan Tulisan Newer Post/Posting Baru di Blogspot

    www.laborblog.my.id - Menyambung postingan sebelumnya tentang Cara Menghilangkan Tulisan Home/Beranda Blogspot. untuk posting kali ini saya akan membahas tentang cara Menghilangkan Tulisan Newer Post/Posting Baru Blogspot.

    Ilustrasi
    Menyambung postingan sebelumnya tentang Cara Menghilangkan Tulisan Home/Beranda Blogspot. untuk posting kali ini saya akan membahas tentang cara Menghilangkan Tulisan Newer Post/Posting Baru Blogspot.
    Ikuti langkah-langkah di bawah ini:
    1. Seperti biasa Log In dulu ke akun blog.
    2. Pilih Rancangan lalu pilih Edit HTML.
    3. Jangan lupa download template lengkap terlebih dahulu untuk berjaga-jaga bila terjadi kesalahan pada saat pengeditan.
    4. Centang Expand Template Widget.
    5. Carilah kode di bawah ini. untuk memudahkan pencarian tekan Ctrl+F


    <data:newerPageTitle/>
    6. Setelah ketemu tinggal di delete aja sampai habis. Lalu Simpan Template.
    7. Lihatlah Hasilnya. taraaaaammm jadi deh.
    Sekian postingan kali ini tentang cara Menghilangkan Tulisan Newer Post/Posting Baru Blogspot.

  • Menghilangkan Tulisan Beranda/Home Blogspot

    www.laborblog.my.id - Terkadang bagi sebagian Sobat ada yang menghapus tulisan Beranda/Home pada blog, karena beranggapan bahwa tulisan tersebut agak sedikit menggangu penampilan blog.

    Ilustrasi
    Terkadang bagi sebagian Sobat ada yang menghapus tulisan Beranda/Home pada blog, karena beranggapan bahwa tulisan tersebut agak sedikit menggangu penampilan blog.. Buat Sobat yang ingin mengetahui caranya cukup mudah kok.
    Silahkan ikuti petunjuk di bawah ini:
    1. Seperti biasa, Log In dulu ke akun blog.
    2. Pilih Rancangan lalu pilih Edit HTML.
    3. Jangan lupa download template lengkap dahulu, berjaga-jaga bila ada kesalahan.
    4. Centang Expand Template Widget.
    5. Carilah Kode di bawah ini:


    <data:homeMsg/>
    untuk memudahkan pencarian tekan Ctrl+F lalu masukkan kode di atas dan tekan ENTER.
    6. Setelah ketemu, hapus kodenya. lalu klik Simpan Template.
    Cukup mudahkan…

  • Cara Menghilangkan Footer di Blogger Baru

    www.laborblog.my.id - Apakah ada diantara blogger yang lebih suka blog tanpa footer?. Bagaimana cara menghilangkan footer yang sebenarnya merupakan bagian blog paling setia menjadi sosok pengikut di ujung terbawah halaman ini?

    Ilustrasi
    Apakah ada diantara blogger yang lebih suka blog tanpa footer?. Bagaimana cara menghilangkan footer yang sebenarnya merupakan bagian blog paling setia menjadi sosok pengikut di ujung terbawah halaman ini?
    Bagi yang menggunakan template blogger baru atau new blogger templates, dengan mudah dan cepat gan bisa melenyapkan footer hanya dalam satu kedipan mata. ikuti aja langkah-langkah sebagai berikut.
    1. Login ke Blogger.
    2. KLIK “Design/Rancangan”.
    3. KLIK “Edit HTML”.
    4. Setelah kode HTML template terlihat, cari kode ]]></b:skin>
    5. Tambahkan kode CSS berikut tepat di atas ]]></b:skin>
    .footer-outer{display:none;}
    6. Kemudian klik “SAVE Templates/Simpan Template”
    7. Setelah proses selesai, silahkan buka blog dan lihat hasilnya.

  • Cara Membuat Anti Copas Klik Kanan dan CTRL+U

    www.laborblog.my.id - Seorang blogger pasti akan sangat marah jika artikel yang dia tulis dengan susah payah akhirnya hanya dicopy paste oleh penulis lain, lebih baik jika copy paste tapi mencantumkan sumbernya.

    Ilustrasi
    Seorang blogger pasti akan sangat marah jika artikel yang dia tulis dengan susah payah akhirnya hanya dicopy paste oleh penulis lain, lebih baik jika copy paste tapi mencantumkan sumbernya.
    Hari ini kita akan mempelajari Cara Membuat Anti Copas Klik Kanan dan CTRL U, jika pada artikel Cara Otomatis Memasang Link Sumber Artikel di Blog/Web, mempelajari anti klik kanan menggunakan JavaScript, sekarang kita akan mencoba metode lain. Langsung saja ya.
    Copy script berikut pada tag body

    oncontextmenu=’return false;’ onkeydown=’return false;’ onmousedown=’return false;’ ondragstart=’return false’ onselectstart=’return false’ style=’-moz-user-select: none; cursor: default;’

    Dengan mengetikkan script seperti di atas, tidak akan ada yang bisa mengcopy paste teks tersebut, baik dengan klik kanan maupun CTRL+U.
    Sekarang kita akan mengedit dan memastikan bahwa ctrl + u Anda akan diarahkan ke halaman web lain.
    Ketikkan skrip berikut:

    <script type=’text/javascript’>
    //<![CDATA[
    shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:”keydown”,propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)”undefined”==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,”string”==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if(“INPUT”==e.tagName||”TEXTAREA”==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=”,”),190==code&&(e=”.”);var f=a.split(“+”),g=0,h={“`”:”~”,1:”!”,2:”@”,3:”#”,4:”$”,5:”%”,6:”^”,7:”&”,8:”*”,9:”(“,0:”)”,”-“:”_”,”=”:”+”,”;”:”:”,”‘”:’”‘,”,”:”<“,”.”:”>”,”/”:”?”,”\”:”|”},i={esc:27,escape:27,tab:9,space:32,”return”:13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,”break”:19,insert:45,home:36,”delete”:46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)”ctrl”==k||”control”==k?(g++,m=!0):”shift”==k?(g++,j=!0):”alt”==k?(g++,o=!0):”meta”==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent(“on”+c.type,e):d[“on”+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent(“on”+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c[“on”+a]=!1}}},shortcut.add(“Ctrl+U”,function(){top.location.href=”http://dumetschool.com”});
    //]]>
    </script>

    Klik dan tekan CTRL+U untuk lihat hasilnya.

  • Cara Membuat Tampilan Blog versi Web di Handphone

    www.laborblog.my.id - Ketika kita mengakses blog lewat handphone seringkali kita melihat tampilan blog yang tidak sesuai atau sama dengan tampilan blog yang kita akses lewat desktop/computer.

    Ilustrasi
    Ketika kita mengakses blog lewat handphone seringkali kita melihat tampilan blog yang tidak sesuai atau sama dengan tampilan blog yang kita akses lewat desktop/computer. Ini dikarenakan pengaturan blog akan secara otamatis tampil dengan versi mobile apabila kita akses lewat handphone.
    Bagaimana cara mengubah pengaturan tersebut, agar blog kita tampil dengan versi web apabila kita akses melalui handphone? Berikut langkah cara membuat tampilan blog versi web di handphone:
    1. Login akun blogger Anda.
    2. Pilih menu tab Template, kemudian klik icon setting.

    Ilustrasi
    3. Setelah Anda klik icon setting akan muncul gambar pengaturan template.
    4. Kemudian klik ‘Tidak’ jika ingin menampilan blog versi web di handphone.

    Ilustrasi
    NB: Klik ‘Ya’ untuk menampilkan blog versi mobile di handphone.
    5. Kemudian Simpan.

  • Cara Membuat Related Post di Blogspot

    www.laborblog.my.id - Sobat blogger mania yang saat ini masih berkutat dengan segala macam tampilan untuk mempercantik blog anda, tidak ada salahnya juga kan anda mencoba menyisipkan related post seperti gambar.

    Tangkapan Layar
    Sobat blogger mania yang saat ini masih berkutat dengan segala macam tampilan untuk mempercantik blog anda, tidak ada salahnya juga kan anda mencoba menyisipkan related post seperti gambar. dan aku rasa tampilannya oke banget dan terkesan inovatif banget kok sob, di samping pembuatannya juga relative sangat mudah banget.


    Oke langsung saja agar tidak bertele-tele, karena semakin bertele-tele juga jari-jari ini semakin susah untuk di gerakkan. hehe
    1. Silahkan masuk saja di blogger sobat => Template => Edit Html
    (untuk pemula seperti saya) mohon kalau takut ada apa-apa templatenya di backup terlebih dahulu itu jauh lebih baik
    2. Masukkan kode script ini pada template dimana tampilan related ini akan di tampilkan.
    Silahkan fahami struktur dari template sobat, karena aku memang tidak terbiasa memberikan tutorial dengan langkah pakem. karena apa? itu disebabkan antara template yang satu dengan yang lainnya mempunyai perbedaan struktur. sekali lagi kenali struktur blog sobat, kalau ada pertanyaan isi aja komentar biar aku bantu. Kalau tidak ada yang nanya berarti langkahku benar bukan? memberikan tutorial yang singkat dan padat he.e. pis broo)
    Tapi kalau menurut para ahli sih biasanya kode nya di taruh di atas kode <div class=’post-footer’> dan silahkan sobat find aja dengan tekan tombol ctrl+F.
    Oke silahkan copy kan kode script di bawah ini dan sisipkan pada baris di mana tampilan related post ini akan sobat tampilkan.



    <b:if cond=’data:blog.pageType == &quot;item&quot;’><style type=’text/css’>.related-post-title{font-size: 2em;padding: 0px 0px 15px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: none; line-height: 20px;} #related-posts a:hover { text-decoration: none; color: #06c; } #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; border-bottom: 1px solid #E2E2E2; clear: both; font-family: Helvetica; font-size: 12px; overflow: auto; border: 1px solid #CCC; margin: 5px 5px 8px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #B6B6B6;background:#FAFAFA;} .image_left{ float: left; margin: 0px 10px 10px 2px; border: 1px solid #fff; padding: 0px; width: 80px; height: 56px; box-shadow: 0px 0px 4px #777; } #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;}</style><script type=’text/javascript’>//<![CDATA[function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace(“/s72-c/”,”/s100/”);if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace(“/s72-c/”,”/s100/”);else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/)[1];else var a=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-B78dVD8f3agysV5ACSjg5AQt0jizNcJGQ9wgM4VTCOWeq5oT9CobpjTzeec9zNHMkHLGGB4DYZVY6aej6FIOYQW3gohomIixvO-y5FbsBViZxP1vIP_AxrNFn08GGN4x3xjaSx1Lmo/s250-Ic42/no-thumbnail.png”;relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if(“alternate”==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById(“related_here2″).innerHTML+=”<li><img class=’image_left’ src=””+relatedImage[t]+’”><a href=”‘+relatedUrls[t]+’”>’+relatedTitles[t]+”</a></li>”:document.getElementById(“related_here”).innerHTML+=”<li><img class=’image_left’ src=””+relatedImage[t]+’”><a href=”‘+relatedUrls[t]+’”>’+relatedTitles[t]+”</a></li>”,t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;//]]></script><div id=’related-posts’><h4 class=’related-post-title’>You may also like:</h4><div class=’related_all_ul’><ul id=’related_here’/><ul id=’related_here2’/><div style=”font-size: 7px;float: right; margin: 5px;”><a style=”font-size: 7px; text-decoration: none;” href=”http://goo.gl/URA0fN” rel=”nofollow”>get related posts widget</a></div></div><b:loop values=’data:post.labels’ var=’label’><b:if cond=’data:label.isLast != &quot;true&quot;’></b:if><script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;’ type=’text/javascript’/></b:loop><script type=’text/javascript’> var maxposts=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div><div style=’clear: both;’/></b:if>

    Oke kelar sudah tutorial bagaimana caranya membuat related post seperti pada gambar. Semoga membantu dan bermanfaat.

  • Cara Memasang Tab View Pada Postingan Blog

    www.laborblog.my.id - Tab View berfungsi sebagai pemisah kontent yang berbeda dalam satu post. Tab View biasanya digunakan pada blog download entah itu dengan niche Game, Software, Video atau Film.

    Ilustrasi
    Tab View berfungsi sebagai pemisah kontent yang berbeda dalam satu post. Tab View biasanya digunakan pada blog download entah itu dengan niche Game, Software, Video atau Film. Tab View berikut ini dibuat dari CSS, HTML, dan Jquery.


    Jika sudah jadi akan terlihat seperti gambar diatas. Jika Anda tertarik untuk menggunakannya pada blog atau web sobat, silahkan langsung ikuti tutorialnya.
    Cara Memasang Tab View Pada Postingan Blog
    1. Sebaiknya blog Anda telah terpasang jquery (versi apa pun boleh). Jika belum memasangnya, silahkan letakkan script Jquery berikut di atas kode </head>


    <script src=’//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>

    2. Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>


    .tabs{width:100%;display:inline-block}
    .tab-links:after{display:block;clear:both;content:”}
    .tab-links li{margin:0 5px;float:left;list-style:none}
    .tab-links a{padding:9px 15px;display:inline-block;border-radius:3px 3px 0 0;background:#7FB5DA;font-size:16px;font-weight:600;color:#4c4c4c;transition:all linear 0.15s}
    .tab-links a:hover{background:#a7cce5;text-decoration:none}
    li.active a,li.active a:hover{background:#fff;color:#4c4c4c}
    .tab-content{padding:15px;border-radius:3px;box-shadow:-1px 1px 1px rgba(0,0,0,0.15);background:#fff}
    .tab{display:none}
    .tab.active{display:block}

    3. Letakkan script berikut di atas kode </body>


    <script type=’text/javascript’>
    jQuery(document).ready(function() {
    jQuery(‘.tabs .tab-links a’).on(‘click’, function(e) {
    var currentAttrValue = jQuery(this).attr(‘href’);
    // Show/Hide Tabs
    jQuery(‘.tabs ‘ + currentAttrValue).siblings().slideUp(400);
    jQuery(‘.tabs ‘ + currentAttrValue).delay(400).slideDown(400);
    // Change/remove current tab to active
    jQuery(this).parent(‘li’).addClass(‘active’).siblings().removeClass(‘active’);
    e.preventDefault();
    });
    });
    </script>

    4. Jika sudah, silahkan klik save. klik untuk lihat hasilnya
    Sekarang blog Anda sudah memiliki tab view sendiri. Untuk memunculkan tab view pada postingan blog Anda silahkan ikuti tutorial pemasangannya pada postingan.
    Memunculkan Tab View Pada Postingan
    1. Siapkan artikel post yang akan dipasangi tab view lalu ubah post dari Compose ke HTML
    2. Letakkan kode Tab View berikut kedalam postingan tersebut.

    <div class=”tabs”>
    <ul class=”tab-links”>
    <li class=”active”><a href=”#tab1″>Tab #1</a></li>
    <li><a href=”#tab2″>Tab #2</a></li>
    <li><a href=”#tab3″>Tab #3</a></li>
    <li><a href=”#tab4″>Tab #4</a></li>
    </ul>
    <div class=”tab-content”>
    <div id=”tab1″ class=”tab active”>
    <p>Tab #1 Letakkan Judul Kontent disini !</p>
    <p>Isikan Kontent Anda disini !</p>
    </div>
    <div id=”tab2″ class=”tab”>
    <p>Tab #2 Letakkan Judul Kontent disini !</p>
    <p>Isikan Kontent Anda disini !</p>
    </div>
    <div id=”tab3″ class=”tab”>
    <p>Tab #3 Letakkan Judul Kontent disini !</p>
    <p>Isikan Kontent Anda disini !</p>
    </div>
    <div id=”tab4″ class=”tab”>
    <p>Tab #4 Letakkan Judul Kontent disini !</p>
    <p>Isikan Kontent Anda disini !</p></div>
    </div>

    Keterangan:
    Silahkan ganti tulisan Tab #1, Tab #2, Tab #3 dan Tab #4 dengan judul tab yang Anda inginkan.
    Ganti Isikan Kontent Anda disini ! dengan isi kontent, bisa profil, about, screenshot, dll.
    3. Silahkan edit isi kontent dari tab view tersebut lalu klik Publikasikan dan selesai.
    Sekian Artikel kali ini dengan judul Cara Memasang Tab View Pada Postingan Blog. Semoga dapat berguna bagi sobat blogger yang membutuhkannya.


    Jangan lupa untuk berkomentar sebelum memasang Tab View ini agar saya bisa terus update artikel diblog ini. Terima kasih banyak telah membaca artikel di labor blog.