Mengatasi IDM yang error
Jangan buru-buru di install ulang bro,klo kena fake serial number.
Yakin sudah di update kan? udah pake yang terbaru kan? sudah di
installkan? Hehehehe sori klo banyak nanya. Berikut cara mengatasinya :
1. Buka di C:\WINDOWS\system32\drivers\etc— disitu ada file host. Silahkan klik kanan dan open with notepad
2. Setelah terbuka silahkan tambahkan ini dibawah kata-kata 127.0.0.1 local host:
127.0.0.1 tonec.com
127.0.0.1 www.tonec.com
127.0.0.1 registeridm.com
127.0.0.1 www.registeridm.com
127.0.0.1 secure.registeridm.com
127.0.0.1 secure.internetdownloadmanager.com
127.0.0.1 mirror.internetdownloadmanager.com
127.0.0.1 mirror2.internetdownloadmanager.com
127.0.0.1 www.internetdownloadmanager.com
3. Klo sudah jangan lupa di save, setelah itu klik kanan lagi file host
tersebut pilih properties, kemudian centang tanda read only.
klo dah ntu dah beres, silahkan buka lagi IDM-nya, bisa lewat start menu-internet download manager.
4. Eiittsss masih muncul rupanya!!! Tenang bro isi aja datanya
selengkap-lengkapnya (kalo mau sembarang juga boleh kok yang penting
serial numbernya dolo). Untuk serial number bisa isi dengan ini (pilih
salah satu):
3J5U-8U66N-D0B9M-54SLM
EC0Q6-QN7UH-5S3JB-YZMEK
GZLJY-X50S3-0S20D-NFRF9
5. Dia akan ilang sendiri, dan???? Yaa udah ntu IDM “bajakan” ter-update siap untuk digunakan kembali. Hehehehehe... :-D
Source: tukalambai
Informasi Internet, Kiat Sehat, Hobby, Tips & Trik
Monday, April 27, 2015
Cara membuat Halaman Navigasi Bernomor Untuk Blogger
Kemampuan untuk 'nomor pd halaman buku' Blogger blog telah menjadi fitur lama yang diminta.
Pagination memungkinkan kita untuk halaman blog jumlah seperti yang
buku, menawarkan pembaca kemampuan untuk menavigasi lebih dalam arsip
dengan mudah bila dibandingkan dengan 'baru' dan 'tua' posting link.
Setelah banyak usaha yang gagal, saya hampir siap untuk mengakui
kekalahan dengan fungsi ini sampai saya menemukan script ini sangat baik
oleh Mohamed Blogger Accessories.
Script ini menggantikan pager blog default (link ke yang lebih baru,
lebih tua dan halaman rumah) dengan bernomor navigasi halaman.
Selanjutnya, ia menawarkan kemampuan untuk menyesuaikan jumlah link
halaman dan jumlah posting yang ditampilkan di setiap halaman.
Blogger pagination naskah Mohamed dapat diinstal dengan menggunakan dua metode yang berbeda:
Berikut adalah cara instalasi selesai akan muncul di blog Anda:
Setelah diinstal, ini "nomor halaman" akan muncul di rumah Anda, arsip dan label halaman, yang memungkinkan pembaca untuk dengan mudah mengakses halaman dalam arsip Anda. Namun, nomor halaman tidak akan muncul di halaman posting individu. Saya telah melihat banyak blog yang menggunakan pagination seperti ini, dan di antara mereka tidak ditampilkan link ini halaman bawah setiap posting.
Untuk mempelajari lebih lanjut tentang menggunakan script pagination nomor untuk Blogger, mampir ke Blogger Aksesoris untuk membaca tutorial yang berguna Mohamed telah diposting.
Jika Anda lebih memilih untuk menggunakan versi yang sedikit berbeda ini bukan, di sini adalah apa yang harus Anda lakukan.
Setelah Anda telah menambahkan kode ini, mencoba untuk melihat template Anda untuk memastikan tidak ada kesalahan kode. Anda tidak akan dapat melihat script beraksi pada preview, tapi langkah ini memastikan tidak ada efek samping untuk tata letak Anda.
Dalam kode di atas, Anda akan melihat bahwa saya telah menyoroti tiga bagian kode merah tebal. Anda mungkin perlu untuk menyesuaikan bagian ini agar lebih sesuai dengan preferensi Anda:
Pada baris 5, Anda mungkin perlu mengubah ".com" untuk mencerminkan perpanjangan domain Anda jika Anda menggunakan domain kustom.
Instalasi default ini harus bekerja dengan baik bagi siapa saja host di Blog * Spot atau domain dot.com, tetapi Anda akan perlu untuk mengubah bagian ini jika domain kustom Anda berakhir di .co.uk atau .info misalnya.
Dalam garis 19 dan 20, Anda dapat mengubah nilai-nilai ini untuk mengubah berapa banyak posting yang ditampilkan pada setiap halaman, dan berapa banyak link akan terlihat pada waktu yang sama.
The
Setelah Anda telah menambahkan kode JavaScript ini dan membuat perubahan nescessary untuk kebutuhan Anda, simpan template Anda dan membuka blog Anda di browser Anda. Sekarang Anda akan melihat link pagination muncul di bawah bagian tulisan utama Anda, dan juga pada Label dan Arsip halaman. Source: bloggerbuster.com
Blogger pagination naskah Mohamed dapat diinstal dengan menggunakan dua metode yang berbeda:
- Menyesuaikan kode template
- Menambahkan sebagai widget HTML / JavaScript (gadget) di bawah bagian tulisan utama
Berikut adalah cara instalasi selesai akan muncul di blog Anda:
Setelah diinstal, ini "nomor halaman" akan muncul di rumah Anda, arsip dan label halaman, yang memungkinkan pembaca untuk dengan mudah mengakses halaman dalam arsip Anda. Namun, nomor halaman tidak akan muncul di halaman posting individu. Saya telah melihat banyak blog yang menggunakan pagination seperti ini, dan di antara mereka tidak ditampilkan link ini halaman bawah setiap posting.
Untuk mempelajari lebih lanjut tentang menggunakan script pagination nomor untuk Blogger, mampir ke Blogger Aksesoris untuk membaca tutorial yang berguna Mohamed telah diposting.
Versi saya Sedikit Modifikasi
Seperti Anda mungkin telah menyadari, saya menggunakan versi modifikasi dari script ini di sini di Blogger Buster. Ketika menyesuaikan gaya versi asli Mohamed, saya melihat beberapa elemen yang saya suka untuk mengubah preferensi saya sendiri, dan juga memodifikasi CSS untuk bagaimana link nomor ditampilkan.Jika Anda lebih memilih untuk menggunakan versi yang sedikit berbeda ini bukan, di sini adalah apa yang harus Anda lakukan.
Tambahkan kode CSS untuk bagian gaya Anda
Pertama, salin semua kode di bawah ini dan paste tepat sebelum menutup</b:skin> tag pada template Anda: Ini harus mengubah warna teks dan link di pagination untuk mencocokkan gaya yang sudah ada dalam template blog Anda. Jadi jika teks default adalah putih dengan latar belakang gelap, "Pages (#)" dari script akan muncul dengan cara yang sama. Warna untuk latar belakang dan melayang-layang efek dari nomor dapat diubah sesuai dengan preferensi Anda dengan mengedit nilai hex untuk mencocokkan gaya template Anda sendiri.
.showpageArea a { text-decoration: underline; } .showpageNum a { text-decoration: none; border: 1px # ccc padat; margin: 0 3px; padding: 3px; } .showpageNum a: hover { border: 1px # ccc padat; background-color: # ccc; } .showpagePoint { color: # 333; text-decoration: none; border: 1px # ccc padat; background: # ccc; margin: 0 3px; padding: 3px; } .showpageOf { text-decoration: none; padding: 3px; margin: 0 3px 0 0; } .showpage a { text-decoration: none; border: 1px # ccc padat; padding: 3px; } .showpage a: hover { text-decoration: none; } .showpageNum a: link, .showpage a: link { text-decoration: none; color: # 333; }
Tambahkan kode JavaScript di bawah posting Anda
Bagian kedua dari instalasi adalah dengan menambahkan kode JavaScript di bawah posting Anda yang akan mencari dan mengganti "Lebih Baru Posting Lama /" link yang ada. Untuk menambahkan script ini, pergi ke Layout> Edit HTML di dashboard Blogger Anda, dan jangan centang kotak "expand widget template" (itu jauh lebih mudah untuk menambahkan kode sementara widget dikontrak). Kemudian menemukan bagian kode (atau serupa) dalam template Anda:
<b:section
class='main' id='main' showaddelement='yes'> <b:widget id='Blog1'
locked='false' title='Blog Posts' type='Blog'/> </b:section>
Segera setelah penutupan </b:section> tag, tambahkan bagian kode berikut:
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==". com/ ";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ?
thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length)
: "";
thisLable =
thisLable.indexOf("?")!=-1 ?
thisLable.substr(0,thisLable.indexOf("?")) :
thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 5 ;
var displayPageNum = 5 ;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span
class="showpageNum"><a
href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] =
'/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] =
'/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span
class="showpage"><a
href="/">'+ upPageWord
+'</a></span>';
}
}else{
upPageHtml = '<span
class="showpage"><a
href="'+htmlMap[p]+'">'+
upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span
class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span
class="showpageNum"><a
href="/">1</a></span>';
}
}else{
html += '<span
class="showpageNum"><a
href="'+htmlMap[p]+'">'+
(p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span
class="showpage"> <a
href="'+htmlMap[p]+'">'+
downPageWord
+'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div
class="showpageArea"><span
style="COLOR: #000;"
class="showpageOf"> Pages
('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script
src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999";
type="text/javascript"></script>
Setelah Anda telah menambahkan kode ini, mencoba untuk melihat template Anda untuk memastikan tidak ada kesalahan kode. Anda tidak akan dapat melihat script beraksi pada preview, tapi langkah ini memastikan tidak ada efek samping untuk tata letak Anda.
Dalam kode di atas, Anda akan melihat bahwa saya telah menyoroti tiga bagian kode merah tebal. Anda mungkin perlu untuk menyesuaikan bagian ini agar lebih sesuai dengan preferensi Anda:
Pada baris 5, Anda mungkin perlu mengubah ".com" untuk mencerminkan perpanjangan domain Anda jika Anda menggunakan domain kustom.
var isFirstPage = thisUrl.substring (thisUrl.length-5, thisUrl.length) == & quot ;. com / & quot ;;
Instalasi default ini harus bekerja dengan baik bagi siapa saja host di Blog * Spot atau domain dot.com, tetapi Anda akan perlu untuk mengubah bagian ini jika domain kustom Anda berakhir di .co.uk atau .info misalnya.
Dalam garis 19 dan 20, Anda dapat mengubah nilai-nilai ini untuk mengubah berapa banyak posting yang ditampilkan pada setiap halaman, dan berapa banyak link akan terlihat pada waktu yang sama.
The
var pageCount = 5; bagian defiines jumlah posting yang ditampilkan pada setiap halaman, sementara var displayPageNum = 5; mendefinisikan jumlah link yang ditampilkan (misalnya: 1 - 2 - 3 - 4 - 5) di bawah bagian posting. Setelah Anda telah menambahkan kode JavaScript ini dan membuat perubahan nescessary untuk kebutuhan Anda, simpan template Anda dan membuka blog Anda di browser Anda. Sekarang Anda akan melihat link pagination muncul di bawah bagian tulisan utama Anda, dan juga pada Label dan Arsip halaman. Source: bloggerbuster.com
Friday, April 24, 2015
Cara Pasang Emoticon Kaskus Terlengkap Pada Komentar Blog
Baca juga artikel :
Cara Membuat Emoticon Facebook Keren di Blog
Cara Pasang Emoticon Kaskus Pada Komentar Blog :
-mungkin tutorial kali ini lebih sulit dari tutorial blogger lainnnya, jadi sebelum mengedit jangan lupa untuk memback-up template anda terlebih dahulu, butuh konsentrasi dan teliti-
1. Buka Blogger
2. Klik Template -> Back-up Template -> lalu klik Edit HTML
3. Cari kode <p><data:blogCommentMessage/></p> biasanya ada 4 hasil pencarian , rubah hasil ke-2 dan ke-4 dengan menambahkan kode yang diberi warna biru seperti dibawah ini (penempatan harus sama) ketika merubah pada hasil pencarian ke-2 dan ke-4 :
<div id='emoticon-kaskus'>4. *Catatan : Ingat sob! hanya yang ke-2 dan ke-4 dari hasil pencarian kode <p><data:blogCommentMessage/></p> yang harus sobat rubah seperti kode di atas !
<iframe src='https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/tabel-kaskus.html' style='width:98%;height:225px;' scrolling='no' border='0'></iframe>
<p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-co
mment-from-post' frameborder='0' height='410' id='comment-editor' name='co
mment-editor' src='' width='100%'/>
</div>
5. Jika sudah, Cari Kode :
document.getElementById(domId).insertBefore(replybox, null);6. Ganti dengan Kode dibawah ini :
document.getElementById(domId).insertBefore(document.getElementById('emoticon-kaskus'), null);7. Yang terkahir , Simpan kode di bawah ini tepat sebelum kode </body> :
<script src='https://googledrive.com/host/0B7H_GQEvKCj1bjRueExyQ2ZTZXM/kaskus_emoticon.js' type='text/javascript'></script>8. Simpan Template dan semoga berhasil :)
Suka artikel ini ?
Pengaturan Tag Tajuk Robot Khusus Blogger
Pengembang bogger terus bekerja keras untuk meningkatkan fitur dan
kegunaan dalam antar muka baru blogger. Mereka menambahkan banyak fitur
baru agar lebih SEO friendly. Salah satu fitur baru yang diperkenalkan
oleh pengembang blogger adalah Custom Robots Header Tags atau sama
dengan Tag Tajuk Robot Khusus. Ini benar-benar alat yang berguna yang
membantu kita untuk memilih bagian mana dari blog kita harus diindeks
dan yang harus dilindungi dari pengindeksan dalam hasil pencarian. Alat
ini memiliki peran besar dalam blog untuk search engine optimization.
Menggunakannya dengan benar dapat meningkatkan peringkat blog kita yang
membantu kita untuk mendapatkan lebih banyak pengunjung dari mesin
pencari.
Dalam posting ini saya akan mereferensi Anda bagaimana untuk mengatur tag tajuk robot khusus di blogger. Mari kita lihat bagaiaman melakukannya.
Posting terkait: Solusi mengirim sitemap blogger agar terindeks semua
Kedua. Klik link edit di bagian Tag Tajuk Robot Khusus.
Ketiga. Setelah Anda klik link Edit Anda akan melihat banyak pilihan. Cukup centang pada pilihan seperti yang ditunjukkan pada gambar di bawah. Klik gambar untuk memperjelas review.
Terakhir. Setelah selesai mencentang, sekarang klik tombol " Simpan perubahan ".
Anda telah selesai membaca tentang cara menggunakan pengaturan tag tajuk robot khusus pada menu preferensi penelusuran di blogger. Saya telah mengulas dan menjelaskan tutorial ini, tetapi jika Anda masih memiliki kebingungan maka jangan ragu untuk bertanya kepada saya. Terima kasih!
Dalam posting ini saya akan mereferensi Anda bagaimana untuk mengatur tag tajuk robot khusus di blogger. Mari kita lihat bagaiaman melakukannya.
Posting terkait: Solusi mengirim sitemap blogger agar terindeks semua
Pengaturan Tag Tajuk Robot Khusus
Pertama. Mengaktifkan opsi ini dari pengaturan blogger blog Anda dan kemudian arahkan ke pengaturan > Preferensi Penelusuran.Kedua. Klik link edit di bagian Tag Tajuk Robot Khusus.
Ketiga. Setelah Anda klik link Edit Anda akan melihat banyak pilihan. Cukup centang pada pilihan seperti yang ditunjukkan pada gambar di bawah. Klik gambar untuk memperjelas review.
Terakhir. Setelah selesai mencentang, sekarang klik tombol " Simpan perubahan ".
Anda telah selesai membaca tentang cara menggunakan pengaturan tag tajuk robot khusus pada menu preferensi penelusuran di blogger. Saya telah mengulas dan menjelaskan tutorial ini, tetapi jika Anda masih memiliki kebingungan maka jangan ragu untuk bertanya kepada saya. Terima kasih!
Source: alvahezar
Cara Membuat Kotak Script Sudut Border Melengkung di Posting Blog
Berikut ini adalah beberapa versi kotak script yang sudut bordernya
dibuat melengkung, sangat bagus di gunakan pada postingan yang
menandakan kode HTML, CSS, JavaScript biar tampilan posting terlihat
dinamis.
Box code versi ini cara penerapan tidak ada beda dengan versi kotak script biasa hanya saja ada penambahan kode CSS.
CHECK THIS OUT...
Border Solid Tampil Kiri
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px
solid #2288dd; border-radius: 10px; padding: 10px; t-align:
left;">Letakkan Script disini……</div>
Border Solid
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px; background-color: #f3f3f3; border-radius:
10px; border: 4px solid #999; padding: 10px; t-align: left;">Letakkan
Script disini…… </div>
Border Dashed
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px; background-color: #ffe599; border-radius:
10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Letakkan
Script disini……</div>
Border Double
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px; background-color: #6fa8dc; border-radius:
10px; border: 4px double #fff; padding: 10px; t-align:
left;">Letakkan Script disini……</div>
Border Outset
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px; background-color: #a2c4c9; border-radius:
10px; border: 4px outset #fff; padding: 10px; t-align:
left;">Letakkan Script disini……</div>
Dengan cara :
- Copy script box code dari beberapa jenis tampilan di atas
- Paste pada Menu Tab HTML Artikel Entri
Kreasi dengan beberapah bagian di bawah ini :
- Mengganti ukuran sudut lengkungan : border-radius: 10px ada 3 ganti semua
- Mengganti warna background : background-color: #codewarna
- Merubah ketebalan border / garis tepi kolom : border: 4px
Baca Artikel tentang optimasi halaman posting pada RELATED POST di bawah posting ini.
Read more: http://contekanbagus.blogspot.com/2014/02/cara-membuat-kotak-script-sudut-border.html#ixzz3YIWKOzRd
Dilarang copy paste Artikel tanpa menambahkan sumber link - DMCA Protected
Saturday, January 31, 2015
Cara Pasang Related Post + Thumbnail Versi 2
etelah sebelumnya saya memberikan tutorial mengenai cara membuat related post
untuk menampilkan list judul postingan yang berhubungan dengan
postingan utama, kali ini saya akan berikan satu lagi tutorial membuat
related post tai kali ini dengan menyertakan thumbnail. Related post
atau artikel terkait dapat memudahkan pembaca untuk mencari topik yang
berkaitan. Untuk mengetahui lebih banyak tentang related post baca disini. Nah kali ini saya ingin membahas cara membuat related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya. Agar lebih jelas perhatikan gambar dibawah ini.
Menarik bukan?
Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail.
Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah
berikut:
- Yang pasti anda mesti Login ke Blogger dulu
- Buka menu Design -> Edit HTML
- Beri centang pada "Expand Widgets Templates"
- Letakkan kode berikut diatas </head>
<!--Related Posts with thumbnails Start--><!-- remove --><b:if cond='data:blog.pageType == "item"'><style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:black;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmf6yLBmE9jEyW90GzuRocHCmdN8I45UFmCqK0fWpHWoeIPU1BngGxCiRtXsKFcmVDmHLKNEdjBbGopmfla6GzoH9WHTVwRjIRu2_fdDgZUaHrvJn2Q5TGjn0ZFXGmnXvcyYL-E8l-K4gf/";var maxresults=5;var splittercolor="#cccccc";var relatedpoststitle="You might also like:";</script><script src='https://sites.google.com/site/bangkolis/javascript/maskolis.js' type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails End--> - Lalu cari <p class='post-footer-line post-footer-line-1'/>
- Kalau tidak ketemu coba cari post-footer-line
- Letakkan kode berikut dibawahnya.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End--> - Terakhir Save template anda.
- var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/ AAAAAAAADaY/gk-KFA5_m7w/noimage.png" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.
- var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.
- var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.
- var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.
- Buka situs http://www.linkwithin.com
- Isi data-data yang diperlukan pada form yang telah disediakan
Email: alamat email anda
Beri centang pada kotak kecil jika anda menggunakan background template yang gelap
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan
- Klik Get Widget
- Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai
Source: maskolis.com
Cara Membuat Related Post dengan Gambar

POSTING tentang cara membuat related post dengan foto atau gambar thumbnail (Related Posts with Thumbnail Image) ini dibuat terkait pertanyaan dan permintaan seorang pengguna template New Johny Wuss. Ia ingin menggunakan posting terkait yang menampilkan foto dan judul.
CB menggunakan kode related post dengan gambar yang di-share oleh Help Blogger dengan sedikit modifikasi dan "membersihkannya" dari kemungkinan ada injeksi link.
Demonya bisa dilihat di blog Cibi Magz. Lihat bagian Related Posts di bawah postingan.
Pengguna New Johny Wuss lainnya boleh mempraktekan ini. Caranya, sebelumnya HAPUS dulu SEMU kode di template yang bertuliskan "related post, lalu lakukan dua langkah mudah berikut ini
Cara Membuat Related Post dengan Gambar di Blogspot
1. Copy + Paste kode di bawah ini DI ATAS kode </head>
<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->
Catatan: kode berwarna biru adalah ukuran gambar/foto yang akan ditampilkan, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.
2. Copy + Paste kode di bawah ini DI ATAS kode <div class='post-footer'> (di template New Johny Wuss ada dua kode begini, pilih kode YANG KEDUA):
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'></b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'></b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Catatan: kode berwarna biru adalah jumlah related post, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.
Jangan lupa SAVE Template! Good Luck and Happy Blogging!
Source: contohblognih.blogspot.com
Membuat Tampilan Gambar Slide di Blogspot
Tips cara
membuat album foto pada blogspot ini sebenarnya sudah pernah saya
berikan beberapa waktu yang lalu. Hanya saja posting yang pertama
tersebut membahas bagaimana cara membuat slideshow album foto pada
blogspot dengan memanfaatkan situs gallery foto yaitu www.slide.com.
Untuk mengetahui trik pembuatan album foto di blog tersebut, pembaca
boleh membukanya kembali disini. Blogspot sebenarnya menyediakan gadget yang berfungsi untuk membuat slide album foto pada blog kita. Namun, menurut saya gadget ini lebih sederhana jika dibandingkan dengan slideshow yang kita buat dari www.slide.com, sebab tampilan slide foto yang kita dapatkan dari situs www.slide.com tersebut bisa kita customize
sesuai kehendak kita mulai dari tipe slide, ukuran, animasi, dan
lain-lain. Meskipun demikian, tidak ada salahnya jika kita mencoba gadget
slide album foto blogspot ini, sebab kesederhanaan biasanya
indentik dengan kemudahan dalam pengaplikasiannya. Berikut
langkah-langkah menambah album foto pada blogger:
Berikut Langkah-langkahnya :
- Login pada akun Blogspot Anda
- Klik link menu Tata Letak pada halaman dasbor. Pastikan Anda berada pada sub tab menu Elemen Halaman
- Klik link Tambah Gadget pada bagian dimana pembaca ingin memasang slide album foto tersebut
- Akan muncul window Tambahkan Gadget yang berisi daftar gadget yang bisa kita tambah. Silahkan cari dan pilih gadget Tampilan Slide
- Berikut pengaturannya:
Judul :
Isi dengan nama slide foto Anda.
Sumber :
- Album Web Picasa. Album ini merupakan album gambar yang telah Anda masukkan pada pada blogspot pembaca misalnya ketika menulis posting. Silahkan klik http://picasaweb.google.com untuk melihat album Anda.
- Flickr. Flickr merupakan situs yang menyediakan tempat menyimpan foto dan video. Untuk mendapatkan layanan ini, silahkan daftar atau login menggunakan Yahoo ID Anda di www.flickr.com.
- Photobucket. Ini hampir sama dengan flickr dimana kita bisa menyimpan foto dan video secara online pada situs tersebut. Untuk mendapatkan layanan ini silahkan register di www.photobucket.com
- Lainnya. Sumber selain yang 3 diatas.
Memilih apakah berdasarkan kata kunci atau berdasarkan album
Buka link di jendela baru:
Centang jika ingin foto dibuka pada jendela baru ketika diklik - Sebagai contoh kita menambah slide foto menggunakan Album Web Picasa
Judul: beri judul slide album
Sumber : pilih "Album Web Picasa".
Pilihan : pilih "Album"
Nama Pengguna : masukkan ID akun Google pembaca. Misalkan akun Google pembaca adalah kampanye@gmail.com, maka isikan "kampanye"
Album : pilih album yang terdapat pada Album Web Picasa Anda. Perlu diperhatikan bahwa album yang muncul pada list tersebut adalah album yang diperuntukkan untuk "Public". Untuk melakukan pengaturan tersebut, silahkan masuk terlebih dahulu pada http://picasaweb. google.com (masuk menggunakan akun Google Anda). Klik tab "My Photos", setelah itu klik album yang ingin Anda atur parameternya.
Klik menu "Edit" kemudian pilih sub menu "Album Properties" sehingga akan muncul jendela "Edit album information".
Lihat dibagian paling bawah, akan ada pilihan "Visibility for this album". Silahkan pilih "Public". Kemudian klik tombol Save changes
- Pratinjau album akan terlihat pada jendela tambah gadget tersebut.

- Klik tombol SIMPAN
Demikian
tadi penjelasan singkat untuk membuat tampilan gambar slide dengan
memanfaatkan sadget blogspot. selamat mencoba dan semoga bermanfaat.
Source: maskolis.com
Menjadi TOP 10 di Google dengan Keyword Super “google plus”
Banyak tehnik SEO (baik black hat SEO maupun white hat SEO) yang
digunakan oleh para pakar SEO terkenal dan handal. Namun semua itu
memerlukan biaya yang tidak banyak, ditambah lagi tehnik optimasinya
yang rumit dan malah bisa menjadikan website kena pinalti google
(terlempar dari mesin pencari google).
Berbeda dengan itu semua, saya mencoba tehnik yang sangat bertolak belakang dengan para pakar SEO yaitu tehnik google plus yang santai. Banyak yang masih belum percaya bahwa efek google plus itu sungguh luar biasa.
Coba perhatikan hasil SS saya di ats mengenai hasil penelusuran saya mengenai keyword “google plus”. Saya sempat heran melihat hasil tersebut yang bisa dibilang sangat mengejutkan. Dengan keyword yang bisa dibilang keyword besar blog saya masuk page one google.co.id
Terlepas dari benar atau tidaknya itu hasil penelusuran saya dengan software tadi, saya coba pakai web browser saya dengan mode penyamaran dan hasilnya sama. Sungguh mengejutkan sekali!
Nah, dari sini saya akan mencoba memberitahukan kepada semuanya apa sih yang sudah saya lakukan terhadap blog saya itu?
1. KOD (Keyword on Domain)
Keyword yang menempel pada domain/ subdomain. Pada kasus ini KOD saya yaitu “jasa” dan “gplus” yang membentuk blog bernama jasagplus.blogspot.com
2. KOT (Keyword on Title Blog)
Jelas ini juga mungkin menjadi faktor utama mengapa blog saya bisa pejwan. Jangan lupa imbangi ini dengan memasukkan keyword yang anda bidik ke deskripsi blog.
3. Vote Plus One Google Plus
Tehnik yang saya pakai dalam vote plus one memang agak berbeda dengan optimasi di jasa-jasa optimasi google plus lain. Karena saya mengkombinasikan antara vote yang menghasilkan backlink dofollow dan vote yang menghasilkan backlink nofollow.
4. Kontes Review Kecil
Kemungkinan ke-4 yaitu karena saya sempat membuat kontes review kecil-kecilan. Banyak orang yang mengatakan kontes SEO bisa berakibat fatal, namun sepertinya jika backlink yang didapat itu masih wajar dan berkualitas (ditunjang dari laman dan isi blog pemberi backlink) itu bukan menjadi masalah, justru menurut saya sangat bagus. Jadi kalau mau membuat kontes lebih baik kontes review dari pada kontes SEO.
Nah, itu semua yang saya lakukan di blog saya. Jangan komen “ah masa.. yang bener Cuma itu?” :3 Karena memang hanya itu yang saya lakukan.
Mungkin yang terpenting itu optimasinya stabil dan rata bukan seperti orang naik gunung yang tiba-tiba menanjak kemudian anjlok.
Oh ya, saya tambahin yang secara pengamatan saya itu bagus yaitu ketika semakin banyak orang masuk ke blog kita dengan keyword tertentu, maka secara otomatis blog kita perlahan akan naik peringkat.
Kita bisa mengakali hal ini dengan setiap hari kita online (tiap konek modem kan rata-rata IP kita berganti) dengan mengetikkan keyword yang kita incar dan klik blog kita (kemudian biarkan terbuka layaknya orang sedang membaca). Ingat! IP harus bervariasi.
Mungkin hanya itu yang bisa saya bagikan, kalau berkenan sih jangan lupa promosiin jasa optimasi google plus saya ya :D
Source: destato.blogspot.com
Berbeda dengan itu semua, saya mencoba tehnik yang sangat bertolak belakang dengan para pakar SEO yaitu tehnik google plus yang santai. Banyak yang masih belum percaya bahwa efek google plus itu sungguh luar biasa.
.png)
Coba perhatikan hasil SS saya di ats mengenai hasil penelusuran saya mengenai keyword “google plus”. Saya sempat heran melihat hasil tersebut yang bisa dibilang sangat mengejutkan. Dengan keyword yang bisa dibilang keyword besar blog saya masuk page one google.co.id
Terlepas dari benar atau tidaknya itu hasil penelusuran saya dengan software tadi, saya coba pakai web browser saya dengan mode penyamaran dan hasilnya sama. Sungguh mengejutkan sekali!
Nah, dari sini saya akan mencoba memberitahukan kepada semuanya apa sih yang sudah saya lakukan terhadap blog saya itu?
1. KOD (Keyword on Domain)
Keyword yang menempel pada domain/ subdomain. Pada kasus ini KOD saya yaitu “jasa” dan “gplus” yang membentuk blog bernama jasagplus.blogspot.com
2. KOT (Keyword on Title Blog)
Jelas ini juga mungkin menjadi faktor utama mengapa blog saya bisa pejwan. Jangan lupa imbangi ini dengan memasukkan keyword yang anda bidik ke deskripsi blog.
3. Vote Plus One Google Plus
Tehnik yang saya pakai dalam vote plus one memang agak berbeda dengan optimasi di jasa-jasa optimasi google plus lain. Karena saya mengkombinasikan antara vote yang menghasilkan backlink dofollow dan vote yang menghasilkan backlink nofollow.
4. Kontes Review Kecil
Kemungkinan ke-4 yaitu karena saya sempat membuat kontes review kecil-kecilan. Banyak orang yang mengatakan kontes SEO bisa berakibat fatal, namun sepertinya jika backlink yang didapat itu masih wajar dan berkualitas (ditunjang dari laman dan isi blog pemberi backlink) itu bukan menjadi masalah, justru menurut saya sangat bagus. Jadi kalau mau membuat kontes lebih baik kontes review dari pada kontes SEO.
Nah, itu semua yang saya lakukan di blog saya. Jangan komen “ah masa.. yang bener Cuma itu?” :3 Karena memang hanya itu yang saya lakukan.
Mungkin yang terpenting itu optimasinya stabil dan rata bukan seperti orang naik gunung yang tiba-tiba menanjak kemudian anjlok.
Oh ya, saya tambahin yang secara pengamatan saya itu bagus yaitu ketika semakin banyak orang masuk ke blog kita dengan keyword tertentu, maka secara otomatis blog kita perlahan akan naik peringkat.
Kita bisa mengakali hal ini dengan setiap hari kita online (tiap konek modem kan rata-rata IP kita berganti) dengan mengetikkan keyword yang kita incar dan klik blog kita (kemudian biarkan terbuka layaknya orang sedang membaca). Ingat! IP harus bervariasi.
Mungkin hanya itu yang bisa saya bagikan, kalau berkenan sih jangan lupa promosiin jasa optimasi google plus saya ya :D
Source: destato.blogspot.com
Cara Membuat Widget +1 Google Plus Melayang pada Blog
Sebenarnya membuatnya cukup simpel, kita bisa menggunakan script message box seperti pada Like Box Facebook dan mengganti script like box facebook dengan script rekomendasi / vote plus one +1.
Jika masih belum paham, akan saya jelaskan caranya beserta tutorialnya. Berikut tutorial Cara Membuat Widget +1 Google Plus Melayang pada Blog :
- Seperti biasa, kalian harus masuk terlebih dahulu ke akun blogger kalian
- Buka tab tataletak > Tambah gadget
- Pilih HTML/JavaScript
- Kemudian kalian bisa memasukkan kode script di bawah ini:
<style type="text/css" scoped>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:blue;
border:2px solid blue;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"200px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<div style="text-align: center;">
<p style=" margin:10px; font-size:15px; color:#000; font-weight:bold;">Bantu saya vote +1 pada tombol google plus di bawah!!</p>
<div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1w0lp2F7PLaNpgcIT8lamJx2_Ey8b9JF8PHV-jWaE0dFU7Yyb5WoIx4dSSxhdZi4-Ii7AxiOFaKsynHHvAdla-kT07n9KSL0knMsd5gwnm0YjplrF55Xa2bn1xaSNKc7OgJWJAaZIRrpz/s300/Widget+Melayang+Google+Plus.png)no-repeat top left; width:283px; height:125px; padding-top:27px; text-align:left; padding-left:60px; margin-top:20px'>
<div class='g-plusone' data-annotation='inline' data-width='300'></div>
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<!-- HTML End -->
</div>
<small><div style=”font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;”><a href="http://destato.blogspot.com/2014/03/cara-membuat-widget-google-plus.html" target="_blank" title=”widget follow us”>+ Get Widget </a></div></small><a class='close' href='#'>×</a></div>
- Kemudian save. Selamat! Widget +1 Google Plus Melayang pada Blog kalian sudah jadi!
Keterangan :
Warna biru : Bisa kalian ganti sesuai kata-kata anda sendiri
Warna merah : Link dari gambar background
Warna hijau : Pengaturan letak tombol google plus
Begitulah tutorial singkat mengenai Cara Membuat Widget +1 Google Plus Melayang pada Blog. Jangan lupa kasih vote +1 juga ya.
Begitulah tutorial singkat mengenai Cara Membuat Widget +1 Google Plus Melayang pada Blog. Jangan lupa kasih vote +1 juga ya.
Source: destato.blogspot.com
Menyetel ulang Firefox - Cara paling mudah untuk memperbaiki hampir semua masalah
Cara paling mudah untuk memperbaiki hampir semua masalah
(Dialihkan dari Reset Firefox – easily fix most problems)
Jika Anda memiliki masalah pada Firefox, menyetel ulang
Firefox bisa menjadi solusinya. Fitur setel ulang memperbaiki banyak
masalah dengan mengembalikan Firefox ke kondisi baru diinstal sembari
menyimpan informasi penting Anda seperti markah dan tab yang terbuka. Selengkapnya Klik di siniMembuat Tab View Dengan Onclick Event

Akhirnya
ketemu tutorial yang lumayan menarik, saya akan mengembangkan tutorial
yang satu ini, sekalian berbagi tutorial untuk sahabat Blogger semua. Dengan onclick event maka kita membuat perintah yang lebih sederhana daripada kita membuat perintahnya dengan javascript.
Bagaimana tertarik untuk mencobanya?Kodenya cukup sederhana seperti di bawah ini :
Kode HTML
<div id="Button1" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';">Button 1</div>
<div id="Button2" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';">Button 2</div>
<div id="Button3" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';">Button 3</div>
<div id="Content1">
<p>
Enter some content here.
</p>
</div>
<div id="Content2">
<p>
Enter some content here.
</p>
</div>
<div id="Content3">
<p>
Enter some content here.
</p>
</div>
Perhatikan pada Button1, di situ kita tampilkan Content1 (display='block') dengan menyembunyikanContent2 dan Content3 (display='none'). Untuk Button2 kita menampilkan Content2 dengan menyembunyikan Content1 dan Content3. Begitu pun dengan Button3 kita menampilkan Content3 dengan menyembunyikan Content1 dan Content2.
Cukup sederhana bukan? Saya yakin Anda yang baru mempelajari kode-kode HTML juga akan lebih mudah untuk memahaminya.
Dan untuk mendapatkan tampilan seperti pada animasi gif di atas, silahkan gunakan kode CSS di bawah ini. Anda bisa memodifnya sesuai dengan selera Anda.
Kode CSS
#Button1,#Button2{margin-top:-30px;padding:0;text-align:center;float:left;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
#Button2{margin-left:34%}
#Button3{margin-top:-30px;margin-right:-2px;padding:0;text-align:center;float:right;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
#Content1{display:block;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
#Content2,#Content3{display:none;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
#Content1 p,#Content2 p,#Content3 p{margin:10px}
Tab view ini bisa disimpan di postingan atau digunakan di sidebar dan tab view ini sudah responsive.
Source: destato.blogspot.com
Subscribe to:
Posts (Atom)










