Sobat bloger dalam postingan kali ini saya terobsesi dengan komentar salah seorang sobat kita, dimana saya trus berpikir pikir bagaimana cara membuat tab yang menampilkan tag lebel dan tag arsip dalam halaman blog. Dan saya mempelajarinya dan membuat suatu widget yang simple agar para penggunanya tidak terlalu pusing apa lagi dia seorang yang masih baru didunia bloging. Pada postingan saya ini untuk menampilkan widget sangat mudah dalam halaman blog kita. Struktur pemasangan widget tab view otomatis Demo Gambar Dalam tutorial kali ini kita akan menampilkan widget : [*]Entri Populer [*]Lebel [*]Arsip blog [/list] [/list] Jadi bila kita ingin menampilkan widget tersebut kita hanya membuat 1 widget saja dengan code Script tab view otomatis ini didalamnya dan diletakkan tepat diatas widget yang ingin ditampilkan. Agar lebih mudah dimengerti silahkan lihat gambar dibawah ini. Gambar yang diblog warna merah itu adalah widget dari script tab view otomatis, dan widget yang lain yang ingin kita tampilkan berada tepat dibawah widget tersebut. Untuk mewujudkan misi kita ini silahkan buat widget : [*]Entri Populer Klik disini cara membuat entri populer [*]Lebel / Kategori Klik disini cara membuat lebel di blog [*]Arsip Blog Klik disini cara membuat arsipt di blogspot [/list] Jika widget tersebut sudah terpasang silahkan lihat tutorial dibawah ini Tutorial cara membuat tab view otomatis Seperti biasa login to blog Klik "tata letak" ( biasanya ditempatkan di sidebar atau disamping halaman ) Pilih "HTML/Javascript" ( Tidak usah diberi judul widgetnya ) Copy script dibawah ini lalu pastekan dan simpan <style type="text/css"> .BLOGDESIGN_TABS { padding: 0px !important; border: 1px solid #bbb; color: #FF0000; } .BLOGDESIGN_TABS h2 { float: left; margin: 0 2px 0px 0; font-size: 12px; padding: 3px 5px; border: 1px solid #bbb; overflow: hidden; position: relative; text-shadow: NONE; cursorointer; background-color: #000000; color: #FFFFFF; }html .BLOGDESIGN_TABS h2.active { background-color: #FF0000; color: #000000; } .BLOGDESIGN_TABS .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;} .btab, #lihattabs {display:none;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"> </script> <script type="text/javascript">eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35? String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e= function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(9($){$.o.q=9(6){4 f={g:3};4 6=$.r(f,6);4 a=$(b).h().h(\'.7\');a.8(\'s\');a.t(\'.7\').u(0,6.g).8(\'1\');$(\'.1\').c();$(\'.1:d\').i($(\'.1 2\'));$(\'.1:d\').j();$(\'.1\').v($(\'#w p\').x({\'y\':\'z 0 0\',\'A\':\'0\',\'B-C\':\'D\'}));$(\'.1 2:d\').8(\'e\');$(\'.1 2\').E(9(){$(\'.1 2\').F(\'e\');$(b).8(\'e\');4 k=$(\'.1 2\').G($(b));4 5=$(\'.1:H(\'+k+\')\');5.i($(\'.1 2\'));$(\'.1\').c();5.j();5.l(\'.7-m\').n().c();5.l(\'.7-m\').n().I(J);K L})}})(M);',49,49,'|BLOGDESIGN_TABS|h2||var|animtab|options|widget|addClass|function |tablog|this|hide|first|active|tabwidget|jumlahtabs|parent|prepend|show|base|find |content|contents|fn||rivaiBlogTab|extend|btab|nextAll|slice|append|lihattabs|css |margin|5px|padding|font|size|10px|click|removeClass |index|eq|fadeIn|700|return|false|jQuery'.split('|'),0,{})) </script><script type="text/javascript">$(document).ready(function() {$('#lihattabs') .rivaiBlogTab ({jumlahtabs: 3});});</script><div id="lihattabs"></div> Keterangan Code Code yang di block baris pertama adalah code CSS bisa saja anda letakkan code tersebut diatas code ]]></b:skin> template anda. Code yang di block baris ke dua adalah code JQUERY bila anda sudah mempunyai Jquery versi diatasnya code tersebut tidak usah dipasang, sipatnya bisa atau tidak. Code yang di block baris ke tiga adalah code scriptnya Code yang hurufnya dibolt ' Jumlahtabs : 3 adalah jumlah tab widget yang akan ditampilkan yang telah kita sesuaikan. Bila anda ingin menampilkan 4 silahkan ganti code huruf 3 dengan 4. NB : untuk menampilkan jumlah tab widget anda harus menyesuaikan berapa widget yang anda pasang dibawah widget tabview ini. Untuk melihat tutorialnya lebih detail lihat sumbernya. Sumber : http://rivai-silaban.blogspot.com/2013/06/cara-membuat-tab-view-otomatis-di-blog.html Rivaiblog, Jun 8, 2013 #1 cayun Member Joined: Feb 5, 2013 Messages: 661 Likes Received: 27 Trophy Points: 28 sip deh, tapi yang begini sip deh, tapi yang begini suka bikin berat loading blog, jadi saya ga pernah masang cayun, Jun 8, 2013 #2 Rivaiblog Member Joined: Jun 7, 2013 Messages: 278 Likes Received: 1 Trophy Points: 18 makasih atas sarannya bang cayun Sebenarnya rahasia untukmempercepat loding blog tergantung dengan pemakaian widgetnya dan berbagai script baik itu Jquery dan Iklan. ada baiknya thems template juga perlu diperbaiki sebab menurut pengalaman saya yang masih belum seberapa bang cayun, template blog pangarus besar dengan lambatnya loding blog, banyak para sobat2 bloger kita yang memang hanya memperdulikan tampilannya saja tapi tidak menyadari lodingnya, script yang tidak sesuai dan kevalitan HTML serta Meta Tag yang tidak begitu akurat begitu juga dengan pemakaian JQuery yang begitu berlebihan tentu akan memberatkan loding blog kita bang. btw blog abang cayun yang http://eboobelajarkteknisikomputer.blogspot.com/ bagus dan mantap salut buat abang. Rivaiblog, Jun 8, 2013 #3 cayun Member Joined: Feb 5, 2013 Messages: 661 Likes Received: 27 Trophy Points: 28 Rivaiblog wrote: Iya banyak faktor yang mempengaruhi loading blog sperti Jquery,Javascript,gambar dan masih banyak yg lainnya .. saya sih pakai yg standar" aja.. iya itu blog saya mas dan biasa aja cayun, Jun 8, 2013 #4 Rivaiblog Member Joined: Jun 7, 2013 Messages: 278 Likes Received: 1 Trophy Points: 18 mantap bang ayun yup setuju, berarti enak juga belajar bloging sama abang. di mantapkan bang blognya biar valid html 5 sekalian soalnya seonya dah mantap biar lebih sempurnah... bang... Rivaiblog, Jun 8, 2013 #5 cayun Member Joined: Feb 5, 2013 Messages: 661 Likes Received: 27 Trophy Points: 28 Rivaiblog wrote: xixi, saya ga pernah memikirkan valid HTML 5, coz itu katanya ga berpengaruh sama sekali ke SEO ,, yg penting $$ cayun, Jun 8, 2013 #6 Rivaiblog Member Joined: Jun 7, 2013 Messages: 278 Likes Received: 1 Trophy Points: 18 cayun wrote: iya sih untuk beberapa tools tapi pernah saya coba memakai tools dari Code: www.seoanalyser.net ternyata hasil SEO yang saya dapatkan dibeberapa tools SEo yah sudah bagus pas waktu ngecek di situs seoanalyser wah ternyata jauh dari harapan, sehingga saya memperbaiki kevalitannya untuk HTML 5 dan sekarang dah mulai meningkat hanya saja blog saya ini memang masih baru kurang lebih 3 bulanan belum mempunyai pageranking heheh maklum bang masih anak baru... Rivaiblog, Jun 8, 2013 #7 LilihPAP Member Joined: Jun 8, 2013 Messages: 183 Likes Received: 3 Trophy Points: 18 Google+: Author kalo yang gak pake javascript kalo yang gak pake javascript adakah? LilihPAP, Jun 8, 2013 #8 Rivaiblog Member Joined: Jun 7, 2013 Messages: 278 Likes Received: 1 Trophy Points: 18 LilihPAP wrote: Saya rasa tidak ada soalnya pemanggilan scriptnya untuk ditampilkan harus ada jadi pastinya memakai JQury untuk memanggil scripnya. kalo manual saya rasa tampilan standart saja sob. Rivaiblog, Jun 8, 2013 #9 ayahnyanadia Well-Known Member Joined: Apr 4, 2013 Messages: 1,369 Likes Received: 153 Trophy Points: 63 Google+: Author dah.. dah.. ayahnyanadia, Jun 8, 2013 #10 satriajogja Member Joined: Feb 24, 2013 Messages: 348 Likes Received: 7 Trophy Points: 18 Mantab sharingnya Mantab sharingnya satriajogja, Jun 9, 2013 #11 Rivaiblog Member Joined: Jun 7, 2013 Messages: 278 Likes Received: 1 Trophy Points: 18 satriajogja wrote: Terimakasih bang... Rivaiblog, Jun 10, 2013 #12 royger Member Joined: Feb 15, 2013 Messages: 392 Likes Received: 12 Trophy Points: 18 Google+: Author Tipsnya lengkap Tipsnya lengkap langsung dites ke tkp deh royger, Jun 12, 2013 #13 Rivaiblog Member Joined: Jun 7, 2013 Messages: 278 Likes Received: 1 Trophy Points: 18 royger wrote: oke bang silahkan Rivaiblog, Jun 12, 2013 #14 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Cara membuat view [ASK] Cara membuat Shortener Generate Link Domain Sendiri Pasha Lovarian, Mar 15, 2017, in forum: Blogger Replies: 5 Views: 3,713 compzone08 Oct 3, 2017 [Ask] Bagaimana cara membuat gambar artikel vertikal jadi horizontal? BangNasti, Mar 5, 2017, in forum: Blogger Replies: 10 Views: 2,986 #BOOM Mar 5, 2017 [HELP] Cara membuat subdomain di cloudflare? Musthafa Kamal, Apr 2, 2016, in forum: Blogger Replies: 21 Views: 4,918 Musthafa Kamal Jul 14, 2016 [ ASK ] Cara Membuat Kotak KomenSeperti Forum Leon Sion Turnip, Jan 8, 2016, in forum: Blogger Replies: 6 Views: 1,260 zaarsaja Feb 4, 2016 Cara Membuat Blogspot bisa didaftarkan Adsense Muhammad Khoir, Dec 30, 2014, in forum: Blogger Replies: 53 Views: 7,655 hidayat daffa Jan 12, 2015 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
sip deh, tapi yang begini sip deh, tapi yang begini suka bikin berat loading blog, jadi saya ga pernah masang
makasih atas sarannya bang cayun Sebenarnya rahasia untukmempercepat loding blog tergantung dengan pemakaian widgetnya dan berbagai script baik itu Jquery dan Iklan. ada baiknya thems template juga perlu diperbaiki sebab menurut pengalaman saya yang masih belum seberapa bang cayun, template blog pangarus besar dengan lambatnya loding blog, banyak para sobat2 bloger kita yang memang hanya memperdulikan tampilannya saja tapi tidak menyadari lodingnya, script yang tidak sesuai dan kevalitan HTML serta Meta Tag yang tidak begitu akurat begitu juga dengan pemakaian JQuery yang begitu berlebihan tentu akan memberatkan loding blog kita bang. btw blog abang cayun yang http://eboobelajarkteknisikomputer.blogspot.com/ bagus dan mantap salut buat abang.
Rivaiblog wrote: Iya banyak faktor yang mempengaruhi loading blog sperti Jquery,Javascript,gambar dan masih banyak yg lainnya .. saya sih pakai yg standar" aja.. iya itu blog saya mas dan biasa aja
mantap bang ayun yup setuju, berarti enak juga belajar bloging sama abang. di mantapkan bang blognya biar valid html 5 sekalian soalnya seonya dah mantap biar lebih sempurnah... bang...
Rivaiblog wrote: xixi, saya ga pernah memikirkan valid HTML 5, coz itu katanya ga berpengaruh sama sekali ke SEO ,, yg penting $$
cayun wrote: iya sih untuk beberapa tools tapi pernah saya coba memakai tools dari Code: www.seoanalyser.net ternyata hasil SEO yang saya dapatkan dibeberapa tools SEo yah sudah bagus pas waktu ngecek di situs seoanalyser wah ternyata jauh dari harapan, sehingga saya memperbaiki kevalitannya untuk HTML 5 dan sekarang dah mulai meningkat hanya saja blog saya ini memang masih baru kurang lebih 3 bulanan belum mempunyai pageranking heheh maklum bang masih anak baru...
LilihPAP wrote: Saya rasa tidak ada soalnya pemanggilan scriptnya untuk ditampilkan harus ada jadi pastinya memakai JQury untuk memanggil scripnya. kalo manual saya rasa tampilan standart saja sob.