Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts
Textual description of firstImageUrl

Responsive Share Button Blogspot SEO Friendly

responsive share button

Membuat share widget blog bertujuan untuk meningkatkan SEO blog serta jumlah kunjungan blogspot. Dengan adanya gadget sharing button diharapkan dapat menarik pengunjung baru melihat artikel yang dibagikan sebelumnya. Jika anda ingin menambah widget responsive share button blogspot yang seo friendly saya ada tipsnya. Namun sebelum saya berikan trik cara membuatnya, penting untuk saya ulas tentang desain responsive agar dapat dibuka di semua gadget.

Design responsive adalah teknik penggunaan css @media-query untuk memisah antara tampilan blog dibuka melalui smartphone, tablet, ipad, dan juga dekstop. Jadi widget share button blogspot ini lebih SEO Friendly daripada widget terkait biasa atau belum responsive. Untuk lebih jelasnya tentang design responsive, lihat artikel tentang design responsive serta SEO didalamnya.


Kembali ke topik kali ini tentang membuat responsive share button blogspot yang SEO Friendly. Saat pertama saya mulai merombak blog setelah sekian lama saya tinggalkan, saya kesulitan mencari artikel terbaru tentang widget share button ini. Setelah mencari dan melakukan percobaan, saya menemukan beberapa permasalahan. Kode yang dipasang tidak sesuai harapan seperti widget tidak tampil, kode usang, dan lain-lain. Belum lagi menghadapi rencana Google+ akan segera ditutup tentu hal yang berkaitan dengan situs tersebut mulai dinonaktifkan. Pemberitahuan mengenai counter atau jumlah share tidak ditampilkan lagi.


Mengenai widget responsive share button blogspot seo friendly saya memilih membuatnya dengan lebih simpel dan sudah banyak beredar dan dipakai blog-blog ternama. Lihatlah screenshoot di bawah untuk hasil dari widget ini! Bagaimana? Anda suka? mari langsung saja ke cara membuatnya. Cobalah di blog anda dan anda akan merasakan perbedaan setelah menggunakan widget ini.
CSS
/* Tombol Share */
.share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase;
font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}
#share-container {margin: 20px auto;overflow: hidden;}
#share {margin:0 0 8px;padding:0;overflow:hidden}
#share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;
text-align: center;text-transform: uppercase;}
#share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff;
transition: opacity 0.15s linear;float: left;text-align: center;}
#share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}
.label-line {text-align: center;margin-bottom: 6px;position:relative;}
.label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;
top: 50%;left: 0;margin-top: -2px;}
HTML
<div id='share-container'>
<div class='label-line'>
<p class='share-judule'>Bagikan Artikel ini</p>
</div>
<div id='share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a>
<a data-action='share/whatsapp/share' style='background:#43d854' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a>
</div>
</div>
Font Awesome
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
responsive share widget blogspot

1. Pada keadaan Edit Template, pasang CSS di atas ]]></b:skin>

2. Cari <data:post.body/> jangan salah karena terdapat 2 hingga 3 kode ini!

3. Letakkan kode HTML tepat pada kode di bawah artikel atau cari kode <data:post.body/> Kode yang berisi "tag item" atau postingan.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>Taruh HTML di Sini</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


4. Jika di blog anda belum ada kode font awesome, letakkan kode Font Awesome di atas </head>

5. Setelah menerapkan 3 langkah mudah tersebut, simpan perubahan template anda! dan lihat pada halaman artikel.

Referensi
Setelah anda menambahkan atau melakukan perubahan tersebut, kode akan tampil seperti screenshoot dibawah. Atau untuk design yang lain anda bisa kunjungi artikel dengan alamat berikut. https://penaindigo.com/cara-memasang-tombol-share-keren-di-blogspot/

Kode di atas sangat seo friendly, karena widget share button berkaitan dengan penggunaan link external atau link mengarah keluar dan penambahan rel='nofollow' tepat sekali. Apa itu rel nofollow? Anda bisa melihat ulasan tentang penggunaan rel tag blogspot tersebut! Akhir kata happy blogging!
Textual description of firstImageUrl

Trik Terbaru Menghapus Navbar Blogger

navbar blogger
Sebenarnya trik terbaru menghapus navbar blogger bukan trik ataupun tips terbaru seputar edit blogger. Akan tetapi blogger berbeda dengan sekarang. Setelah beberapa waktu lalu blogger berganti tampilan, maka editing juga harus mengikuti perkembangan blogger kan. Dengan kata lain cara menghapus navbar memang sudah sering diulas oleh blog lain. Tak ada salahnya sejuta trik berbagi tips terbaru? :D. Bagi sahabat yang masih mengalami kesulitan ataupun error tentang cara menghapus navbar blogger, sejuta trik akan berbagi seputar cara menghapus navbar blogger pada tampilan baru. Cara menghapus navbar blogger adalah sebagai berikut :
1. Masuk di Blogger tentunya
Jika sahabat memakai tampilan terbaru, ubahlah tampilan blogger menjadi tampilan yang lama. Jika belum memakai tampilan terbaru, langsung ke no. 4! Jika sudah berikut caranya:
screen grab
2. Perhatikan gambar di atas, Klik icon Roda gigi tersebut!

3. Klik Old Blogger Interface.
Jika sudah berganti tampilan, lanjutkan dengan

4. Klik Design/desain
5. Klik Edit HTML
6. Centang kotak kecilnya


7. Cari kode berikut ini
</head> (Dengan cara tekan Ctrl + F) Untuk Mozilla firefox. Lalu

8. Hapus kode </head>
dan ganti dengan kode di bawah ini

</head>
<!-- <body><div></div> -->

9. Jika sudah Klik Save Template
save template
10. Akan ada peringatan penghapusan navbar blogger seperti berikut

blogger
11. Terakhir Delete Widgets seperti gambar di atas.
Dengan begitu trik menghapus navbar blogger selesai dilakukan. Bagaimana? Berhasil kah?

Memang cara menghapus navbar secara permanen seperti di atas dilarang oleh blogger, dengan alasan melanggar TOS atau ketentuan dari blogger itu sendiri. Sejuta trik sendiri memiliki 4 blog yang tidak ada navbar bawaan bloggernya. Dengan kata lain menghapus navbar blogger tidak dibanned oleh blogger. Dan semoga kedepannya blogger masih baik hati dengan blog saya :D

Widget Star Rating Untuk Blogger

Widget Star Rating Untuk Blogger kini sudah bisa nikmati dengan berbagai pilihan. Mulai dari yang bentuknya Star Rating (Rating bintang) hingga bentuk bohlam lampu yang lucu. Sebenarnya apa sih kegunaan rating star untuk blogger? dan kenapa kita harus memasang rating bintang di blogger?

Widget star rating untuk blogger digunakan sebagai widget yang memungkinkan pengunjung blog kita agar memilih tingkat kualita isi blog kita. Dengan begitu pengunjung lain akan melihat seberapa rating atau peringkat blog kita. Dengan kata lain cara mengulas manual rangking blog kita. Seperti like di facebook gitu (Pengertian newbie)

Nah bagi yang sedang mencari dan akan memasang widget star rating untuk blogger, Sejuta trik punya rekomendasi situs penyedia widet star rating untuk blog kita. Coba lihat macam-macam widget star rating untuk blogger atau blogspot yang ditawarkan untuk dipajang di blog kita.

1. Kuning Emas

2. Hijau Kuning

3. Kuning Skrup

4. Biru Hijau

5. Kuning Merah

6. Biru Kuning

7. Lampu Pijar

Untuk lebih jelasnya silakan meluncur di Mypagerank.net Star Service dengan begitu kita bisa memilih widget star rating untuk blogger yang kita sukai. 

Untuk masalah SEO dan Validasi di widget rating bintang ini, sahabat sejuta trik agar menambah amp; di belakang '&' atau di depan rima=6 pada kode yang diberikan. Sebagai contoh :

<!-- Star Rating Start Code -->
 <script type="text/javascript" src="http://www.mypagerank.net/services/starrating/rating.php?rid=27798076204012cd444b50aeb8279654d5a8c25475160053115332f076a119270b6fc780ac04e1c94837a257&amp;rima=6"></script>
<!-- Star Rating End Code -->

Nah dengan begitu widget rating bintang atau star rating untuk blogger sudah terpasang tanpa erorr, banyak pilihan, dan yang pasti tetap valid html 5. Selamat mencoba!
Textual description of firstImageUrl

Membuat Komentar Facebook Valid HTML 5

Membuat Komentar Facebook Valid HTML 5 adalah pilihan ke2 setelah menambah komentar discus di blog untuk membuat kotak komentar yang valid HTML 5. Memang kotak komentar facebook memiliki banyak sekali eror. Belum lagi jika komentar pengunjung sudah saking buanyaknya. Justru akan menambah eror yang lebih banyak lagi.

Bagi sahabat yang sampai hari ini belum juga memasang komentar yang valid html 5. Ataupun bagi sahabat yang masih menggunakan template doctype STRICT atau TRANSITIONAL yang masih belum berhasil, Berikut cara yang mungkin dicoba.

DEMO

1. Silakan Menuju ke http://developers.facebook.com/setup/
2. Klik Aplikasi
3. Anda akan dibawa pada gambar di bawah ini (Isikan sesuai selera) Toh tidak terlihat siapa pun.
4. Klik lanjutkan dan Anda akan di bawa ke gambar di bawah ini
 5. Klik Kirim, dan akan menjumpai seperti di bawah ini
6. Simpan hasilnya. Dan menuju ke https://developers.facebook.com/docs/reference/plugins/comments/

7. Jika sudah klik Get Code

8. Kode di atas akan kita tempatkan berbeda tempat.

9. Kode no.1 kita taruh pada EDIT HTML di bawah <body>

10. Jika sudah, Klik simpan. Untuk kode no.2 kita taruh di ADD ELEMENT seperti menambahkan widget. (ukuran kotak komentar secara default adalah 500. Silakan edit sesuai selera.

11. Taruh dimana anda suka, entah dibawah posting, di bagian header atau footer terserah kita.


PENTING!
Kode HTML pada gambar 7 adalah kode untuk HTML 5. Jadi apabila kita menggunakan strict atau transitional silakan klik dulu iframe.

Nah. Itu saja tentang membuat komentar facebook valid html 5. Semoga membantu.

Update !
Untuk teman-teman yang ingin memiliki template valid HTML 5 sekaligus SEO Friendly khusus blogger silakan Download Template SEO Friendly Valid HTML 5

Happy Blogging! by. Sejuta Trik Blogger
Textual description of firstImageUrl

Membuat Recent Comment Hanya Nama

Maksud Membuat Recent Comment Hanya Nama sesuai judul di atas maksudnya adalah menghilangkan tanggal posting, judul posting, dan isi komentar itu sendiri. Jadi dalam membuat recent comment hanya nama ini untuk menampilkan link nama komentator.

Sebagai contoh lihat gambar di bawah ini :


recent comment hanya nama dan url

Nah untuk membuatnya, silakan Login ke Blogger>>Design>>Add HTML. (atau lebih mudahnya kita tambahkan widget seperti biasa) Kemudian pastekan di dalamnya kode di bawah ini :

<script>// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 1.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   alturl = alturl.replace("#", "#comment-");
   var postlink = alturl.split("#");
   postlink = postlink[0];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   var commentdate = entry.published.$t;
   var cdyear = commentdate.substring(0,4);
   var cdmonth = commentdate.substring(5,7);
   var cdday = commentdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = "Jan";
   monthnames[2] = "Feb";
   monthnames[3] = "Mar";
   monthnames[4] = "Apr";
   monthnames[5] = "May";
   monthnames[6] = "Jun";
   monthnames[7] = "Jul";
   monthnames[8] = "Aug";
   monthnames[9] = "Sep";
   monthnames[10] = "Oct";
   monthnames[11] = "Nov";
   monthnames[12] = "Dec";
   var comment = entry.content.$t;
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   if (showcommentdate == true) document.write('Tanggal ' + cdday + ' '+ monthnames[parseInt(cdmonth,10)] + ' ' + cdyear + ' ');
   document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> ');
   if (showposttitle == true) document.write(' pada ' + posttitle);
   document.write('<br/>')
  }

}</script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = false;var standardstyling = false;</script> <script src="http://sejutatrik.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan :
var numcomments = 5;            Jumlah komentar yang tampil
var showcommentdate = false; Tampilan tanggal komentar (ganti false dengan true untuk menampilkan)
var showposttitle = false;         Tampilan judul komentar(ganti false dengan true untuk menampilkan)
var numchars = false;               Rincian untuk komentar(ganti false dengan angka jumlah karakter komentar)
var standardstyling = false;       Tampilan komentar standar
ganti http://sejutatrik.blogspot.com/ dengan url blog sobat.

Kelebihan dari membuat recent comment hanya nama ini adalah kita tidak menggunakan javascript dari url blog lain. Jadi loading menjadi lebih cepat. Bukankah loading yang cepat salah satu kriteria blog itu SEO Friendly? Semoga menjadi telaah kita bersama. Nah akhir kata selamat mencoba.
Happy Blogging!
by. Sejuta Trik Blogger
Textual description of firstImageUrl

Membuat Link di Judul Widget

Dalam sebuah widget pasti kita beri judul. Khususnya widget berbasis HTML kita dapat memodifikasinya. Salah satunya dengan Menambah Link di Judul Widget. Dimana link dalam judul dapat dijadikan optimasi SEO Blogger on page. Nah untuk lebih jelasnya silakan baca di bawah ini :

1. Log in di blogger dengan id anda untuk masuk ke akun dan mengedit blog anda.
2. Klik Tata Letak / Layout
3. Tambahkan gadget dengan mengklik Add a Gadget
4. Pada menu yang tersedia, pilih atau klik HTML/Javascript
5. Copy pastekan Kode di bawah ini, CATATAN : Pastikan judul atau title sidebar / pada gadget HTML/Javascript dalam keadaan kosong untuk menghindari duplicate title.

Kode pertama Link dengan icon tau background :

<style type="text/css">
.pasang-link{ 
font-size:11px; 
float:right; 
font-weight:bold; 
background:url(http://t1.gstatic.com/images?q=tbn:lJgxPMEh7KGJJM: 
http://aespesoft.com/wordpress/wp-content/themes/massivepress/images/category-rss.jpg) 
right 0px no-repeat; padding-right:20px; 
} 
</style>  
<h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>



6. Ganti kode warna merah dengan icon yang anda suka, kode warna biru adalh text link dan warna hijau adalah title sidebar.

Jadinya seperti ini :



Kode kedua link tanpan icon atau backgraund :


<style type="text/css">
.pasang-link{ 
font-size:11px; 
float:right; 
font-weight:bold; 
} 
</style>  
<h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>

Kode ketiga menampilkan text saja :

<style type="text/css">
.pasang-link{ 
font-size:11px; 
float:right; 
font-weight:bold; 
} 
</style>  
<h2><span class="pasang-link">Text Here</span>Title Sidebar</h2>

Jadinya seperti ini :



Begitulah cara menambah link di judul widget. Semoga bermanfaaat!

Sumber ane di http://www.sodiycxacun.web.id/2010/05/cara-membuat-link-atau-text-disamping.html#axzz1ZofLPTj2


Happy Blogging!
by. Sejuta Trik Blogger
Textual description of firstImageUrl

Cara Mudah Membuat Recent Post Dengan Gambar

Recent Post with tumnail

Sesuai judulnya Cara mudah membuat recent post dengan gambar, Seperti motto blog ini yaitu belajar mengedit blog dengan menyenangkan. Maksudnya cara membuat recent post dengan gambar, kita tak perlu susah payah mengedit html atau apalah itu. Belum lagi tampilan baru dasboard blogger yang membuat anda harus belajar lagi membuat anda malas edit html. Anda hanya perlu memasukkan data-data yang diperlukan dan pengeditan hanya perlu klik-klik saja.

Tidak percaya? silakan klik tombol dan langsung membuat recent post dengan gambar secara otomatis. Silakan klik gambar di bawah ini (klik kanan dan klik buka Tautan di tab baru/ klik in new tab)

Recent Post with tumbnail

Add Recent Posts Widget


Jika diklik akan muncul seperti tab berikut ini :
Keterangan :




Instructions
Change settings
For a Grid Layout, click the 'Grid Layout' Button, and it will adjust the settings automatically for you
Click 'Add Widget To My Blog' button

instruksi :

mengubah pengaturan 
Untuk Layout Grid, klik Button 'Grid Tata Letak', dan akan menyesuaikan pengaturan secara otomatis untuk Anda

Klik 'Add Widget To My Blog' tombol








Widget Title
Widget Title:


Widget title diisi dengan judul widget sobat




Customize Widget
Blog url: http:///                         (isi dengan url blog sobat)
(You can leave this blank if you are displaying the posts from the same blog to which you are adding the widget) 

(Anda dapat meninggalkan kosong ini jika anda menampilkan posting dari blog yang sama yang Anda menambahkan widget)
 
Number of posts: (post yang akan tampil)
Maximum title Length: characters      (Judul yang akan tampil)
Show Thumbnail: (Tampilkan gambar)
Show Default Thumbnail:(If image is not present) (Tampilkan Gambar secara default)
Thumbnail Dimension: px (Dimensi gambar)
Float Thumbnail to:
Thumbnail Margin:
Show summary:
Summary size: characters
Show post date:
Show Comment Number:
Show Read more Link:
Read More Text:
Use Full Feed:
Sorting: published updated

Jika dirasa semua udah beres dan sesuai selera tinggal klik button atau tombol seperti di bawah ini 

 


Reset untuk mengulangi jika anda tidak puas dalam membuat widget
Grid Layout adalah tampilan yang sudah anda buat
Add Widget to My blog adalah tombol membuat widget otomatisnya

Nah gimana sobat, mudah bukan cara mudah membuat recent post dengan gambar? semoga membantu.

Sumber ane di Blogger Widget



Membuat Widget Melayang (Sliding Widget)

Nah, Pasti sobat sudah tau artinya Sliding Widget yaitu Membuat Widget Melayang (Sliding Widget). Sliding widget ini bisa diartikan widget yang meluncur, merosot atau apalah terserah sobat. 

Nah untuk lebih jelasnya coba tengok kaskus. Di sebelah kiri ada widget share dan login yang mengikuti kemana mouse digerakkan atau di scrool atas atau bawah. nah untuk Membuat Widget Melayang (Sliding Widget) ini cukup mudah, berikut triknya

Cari kode 

]]></b:skin>


Pastekan di atasnya kode berikut ini :

#widget_fly {
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); }


warna merah berarti letak widget yang ingin di terbangkan. Sobat bisa ganti di dengan bottom right atau dimana saja terserah, center bottom, up left dll.
Nah untuk membuat melayang, sobat hanya harus menambah <div id="widget_fly"> dan diakhiri dengan </div> pada html sobat.

Nih contohnya, Tambah HTML sobat, 

<div id="widget_fly"> 
Kode HTML sobat
</div> 
  

Kode HTML sobat adalah script yang ingin dibuatnya melayang. Beri nama </h> untuk mengosongkan nama script HTML sobat.

Mudah2an cara Membuat Widget Melayang (Sliding Widget) di atas berhasil, mudah dipahami dan membantu sobat dalam menghias blog sobat.


 Sumber

Membuat Recent Post dengan Label




Label:
Recent Posts








Widget by:

Info Blog
Berikut kodenya :
<br />
Label: <span id="pbl_labels"></span><br />
<div id="pbl_posts">
Recent Posts </div>
<br />
<script type="text/javascript">
var jumlah_maksimum_post      = 5;
var dengan_ringkasan          = true;
var jumlah_karakter_ringkasan = 50;
</script><br />
<br />
<script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
</script><br />
<br />
<script src="http://sejutatrik.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
</script><br />
<br />
<br />
<div style="font-size: 0.75em; text-align: right;">
Widget by:<br />
<a href="http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html"><br />
Info Blog<br />
</a>
Textual description of firstImageUrl

Membuat Widget Multi Tab View

Multi Tab View

Membuat widget multi tab view keren di blogspot 2019 kini semakin mudah dan praktis. Anda tinggal memasukkan kode HTML dan CSS saja murni tanpa javascript yang memberatkan loading blogspot. Multi tab view digunakan untuk meminimalkan tampilan blogspot dan penempatan layout lebih dinamis dan tepat sasaran.

Tampilan widget multi tab view responsive akan terlihat seperti berikut :

Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.

Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.

Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.

Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.

Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.

Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.


Bagaimana? Anda tertarik untuk membuatnya? Mari kita bahas! Widget multi tab view digunakan untuk optimasi halaman blog. Dengan cara ini halaman akan terlihat rapi dan memaksimalkan ruang yang ada. Sebagai bukti widget ini seo friendly yaitu dengan penambahan jumlah kunjungan dengan memasukkan widget berisi link-link menuju halaman posting saya.
<div class='bodytab'> <div class='all'> <div class='maintab'> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">Codepen</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">Dribbble</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">Stack Overflow</label> <div id="content1"> <p> Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey. </p> <p> Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin. </p> </div> <div id="content2"> <p> Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin. </p> <p> Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey. </p> </div> <div id="content3"> <p> Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey. </p> <p> Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin. </p> </div> </div> </div> </div> Lalu tambahkan CSS layoutnya agar tampil maksimal
<style> @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); .all, .all::before, .all::after{margin:0;padding:0;box-sizing:border-box;} .bodytab{display:flex;align-items:center;justify-content:center;padding:10px;font:14px/1.5 'Open Sans',sans-serif;color:#345;background:#f0f2f4;} p:not(:last-child) { margin: 0 0 20px; } .maintab { max-width: 800px; padding: 40px; border: 1px solid rgba(0,0,0,.2); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); } #content3, #content2, #content1 { display: none; padding: 20px 0 0; border-top: 1px solid #abc; } input { display: none; } label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #abc; border: 1px solid transparent; } label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } label[for*='1']:before { content: '\f1cb'; } label[for*='2']:before { content: '\f17d'; } label[for*='3']:before { content: '\f16c'; } label:hover { color: #789; cursor: pointer; } input:checked + label { color: #0af; border: 1px solid #abc; border-top: 2px solid #0af; border-bottom: 1px solid #fff; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3{ display: block; } @media screen and (max-width: 800px) { label { font-size: 0; } label:before { margin: 0; font-size: 18px; } } @media screen and (max-width: 500px) { label { padding: 15px; } } </style>