Tab view kren (beckup)

Membuat Tab View Widget Kategori Mantab Banget

Kali ini saya akan membuat satu lagi tutorial mengenai salah satu fitur yang ada pada template Johny Sompret Banget, yaitu membuat tab view widget per kategori. Sebelumnya saya juga pernah membahas cara membuat simple tabber pada sidebar. Ya rencananya saya nanti akan membuat semua tutorial tentang berbagai fitur yang ada pada template-template buatan saya. Tidak ada yang mesti dirahasiakan, semua fitur akan saya jelaskan satu persatu cara pembuatannya, sehingga ke depannya diharapkan Anda mampu membuat template sendiri, syukur bisa dibagikan kepada teman-teman blogger yang lain atau minimal dipakai sendiri. Dan siapa tahu setelah itu ada yang mau menjadi partner saya dalam membuat template blogger atau paling tidak membuat sebuah tutorial baru untuk bisa dibagikan kepada pengguna blogger, karena selama ini saya bekerja sendirian, bikin tutorial sendiri, bikin template juga sendiri, jadi kalau ada yang mau bantu, silahkan saya sangat berterima kasih sekali.

Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya silahkan lihat gambar di bawah, dan klik demo biar lebih jelas.

DEMO

Langsung saja pada cara membuatnya :

Pertama Anda meesti login ke blogger dengan akun Anda
Kedua pilih blog yang ingin anda tambahkan slider ini.
Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}

ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}

ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}

ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}

html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}

.tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}

.tabber{padding:10px 0}

.tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}

.tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}

.tabber h2 a{color:#222}

.tabber h2 a:hover{color:#026ab5}
Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 640px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan.

Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya menjadi 638px. Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi kanan dan kiri sama.
Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script src='https://masolis-javascript.googlecode.com/svn/trunk/tabview.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobfTF_SM96MXE8zedvRGCE-wRWmi04HVY4OC0oV8ipmzjpjabR7NR17NjHXhpL18ir3iIcjykvNISaR9rggk8ozGhkwrGh3-vaDngvXcM9g-I7YI7iL6IR-xCMILxBZlxx2t75jjkNIE/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}

//]]>

</script>
Keterangan :

Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Tulisan warna merah : Norah Jones, Diana Krall dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya disesuaikan.
Kemudian masukkan kode berikut sebelum kode </body> :

<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});

//]]>

</script>
Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada blog kita. Jika Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
<div id='tabber-wrapper'>

<ul class='tab-view'>

<li><a href='#tab1'><script>document.write(Title1);</script></a></li>

<li><a href='#tab2'><script>document.write(Title2);</script></a></li>

<li><a href='#tab3'><script>document.write(Title3);</script></a></li>

<li><a href='#tab4'><script>document.write(Title4);</script></a></li>

<li><a href='#tab5'><script>document.write(Title5);</script></a></li>

<li><a href='#tab6'><script>document.write(Title6);</script></a></li>

</ul><div class='clear'/>

<div class='tab-wrapper'>

<div class='tabber' id='tab1'>

<script>

document.write(" <script src=\"/feeds/posts/default/-/Norah Jones Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script></div>

<div class='tabber' id='tab2'>

<script>

document.write(" <script src=\"/feeds/posts/default/-/Diana Krall?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script></div>

<div class='tabber' id='tab3'>

<script>

document.write(" <script src=\"/feeds/posts/default/-/Sting?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script></div>

<div class='tabber' id='tab4'>

<script>

document.write(" <script src=\"/feeds/posts/default/-/Basia?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script></div>

<div class='tabber' id='tab5'>

<script>

document.write(" <script src=\"/feeds/posts/default/-/Sade Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script></div>

<div class='tabber' id='tab6'>

<script>

document.write(" <script src=\"/feeds/posts/default/-/Jamie Cullum Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script></div>

<div class='clear'/>

</div></div>
Tulisan warna merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah nomer 6 diatas. Dan jika Anda ingin menampilkan widget ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika tidak ada cari yang mirip) :
```

<div class='clear'>&#160;</div>

</div> 
```
Terakhir, save templates dan lihat hasilnya.

Nah itu tadi tutorial membuat tab view widget yang banyak ditanyakan oleh teman-teman blogger pada artikel sebelumnya. Silahkan dicoba, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

Sumber

12.26 | Posted in tutorial | Read More »

Membuat Spoiler

Membuat Spoiler widget untuk meringankan blog, mungkin ini salah satu cara mengatasi beratnya loading blog yang dikarenakan banyaknya pemasangan widget. selain dapat sedikit meringankan loading dengan memasang spoiler pada widget ini akan meminimalkan ruang yang terpakai sehingga memudahkan pengunjung untuk mengetahui isi blog kita karena tidak usah jauh-jauh mengscroll halaman blog kita. seperti pada blog ini saya memasang kurang lebih 17 widget dengan menggunakan Tabview widget dan Spoiler ini maka tampilannya tidak begitu rame dan jauh sampai kebawah, coba sobat bayangkan kalau ke 17 widget diblog ini saya pasang secara default tanpa perubahan apapun sudah dipastikan bagaimana tingginya blog ini dan harus memutar scroll berapa kali ditambah bagaimana ramenya blog ini.

Ok. kita lanjut saja pada pokok bahasan, sebelum berlanjut sobat bisa lihat contoh dari tutorial ini pada sidebar:

Silahkan coba klik Lihat yang ada disisi bawah artikel, nah itulah yang saya maksudkan spoiler pada widget, dengan menggunakan spoiler maka kita dapat meminimalisir tampilan blog dan ini otomatis akan meringankan blog juga. ini saya rasakan bedanya dengan sebelum pakai spoiler meskipun jaringan juga yang menjadi peran utama dalam loading blog namun ini dapat sedikit membantu.

Langkah membuat spoiler pada widget:

Seperti biasa login ke blogger
Pilih tata letak kemudian tambah gadget
Selanjutnya pilih javascript/HTML kemudian beri judul utama widget tersebut. Contoh (aksesories) pada blog ini.
kemudian copy paste kode dibawah ini pada kotak dibawahnya.

<style type='text/css'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OUDsCv1l4Auy4W2egkuPQjoVU6lANYh99Z8J8yhealmFafnBvnmmWbLq6Qp0xB8C3KxvptOvi8sMAnao5aNmHjGkFZGEzkXOb_md8YAJ-UhqeVeFyMvHY2EMvUywJNeWVysiwSAaa9wh/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>

<div id="aks"> <div id="jud">Judul Widget sobat<input 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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget sobat</div> </div> </div>

kalau sobat mau memasang lebih dari satu maka sobat tinggal menambahkannya lagi dibawah kode diatas secara berurutan. hasilnya seperti ini:

<style type='text/css'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OUDsCv1l4Auy4W2egkuPQjoVU6lANYh99Z8J8yhealmFafnBvnmmWbLq6Qp0xB8C3KxvptOvi8sMAnao5aNmHjGkFZGEzkXOb_md8YAJ-UhqeVeFyMvHY2EMvUywJNeWVysiwSAaa9wh/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>

<div id="aks"> <div id="jud">Judul 1<input 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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 1</div> </div> </div>

<div id="aks"> <div id="jud">Judul 2<inputonclick="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 = 'tutup'; this.value = 'tutup'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = 'buka'; this.value = 'buka'; }"
style="background: #f9f9f9; border: 0px solid #000; color: #8B4513;
font-family: arial; font-size: 10px; margin:
0px;font-weight:bold;text-transform:uppercase;float:right;"
type="button" value="LIHAT" /></div> <div style="border: 0px
inset #fff; color: blue; margin: 0 10px 0px 10px;
text-align:center;padding: 0px;"> <div style="display: none;">
<br />Kode Widget 2</div> </div> </div>

<div id="aks"> <div id="jud">Judul 3<inputonclick="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 = 'tutup'; this.value = 'tutup'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = 'buka'; this.value = 'buka'; }"
style="background: #f9f9f9; border: 0px solid #000; color: #8B4513;
font-family: arial; font-size: 10px; margin:
0px;font-weight:bold;text-transform:uppercase;float:right;"
type="button" value="LIHAT" /></div> <div style="border: 0px
inset #fff; color: blue; margin: 0 10px 0px 10px;
text-align:center;padding: 0px;"> <div style="display: none;">
<br />Kode Widget 3</div> </div> </div>

- Judul Widget sobat silahkan beri judul widget

- Masukan Kode Widget sobat Silahkan masukan kode widget sobat

br />

Apabila sobat mau menambahkan lebih banyak lagi sobat tinggal menambahkannya seperti diatas.

Tips:

Untuk widget dengan ukuran kecil seperti statistik blog dan banner sobat bisa menyimpan kodenya secara berurutan dalam satu spoiler.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Spoiler widget untuk meringankan blog kali ini, semoga bermanfaat bagi Anda.

Sumber Tutorial

12.49 | Posted in tutorial | Read More »

Cara menghilangkan widget di blog

Sekilas Penjelasan mengapa harus ada tutorial tetang cara Cara Menampilkan Atau Menyembunyikan Widget Blog Pada Halaman Tertentu yaitu karena untuk menjaga Estetika atau keindahan blog yang anda miliki. Seandainya anda memiliki blog yang suka memasang pernak pernik pada halaman blog dan pernak pernik tersebut anda tampilkan pada setiap halaman blog tentu akan terlihat monoton, pastinya juga akan banyak menghabiskan tempat.

Tapi sekarang bagaimana jika widget atau perak pernik tersebut diatur sedemikian rupa sehingga berubah pada setiap halamannya tentu akan menghasilkan keindahan sendiri pada blog anda dan akan menjaga kenyamanan pengunjung untuk terus berada pada blog anda.

Ok langsung saja kita ke inti pembahasan. Dibawah ini ada beberapa kode yang dapat anda gunakan untuk mengatur widget atau pernak pernik blog anda supaya tampil pada halaman tertentu saja.

Kede ini hanya akan menampilkan widget pada halaman Home atau halaman utama saja

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Posisi Widget Blog
</b:if>

Kede ini hanya akan menampilkan widget selain Homepage atau halaman pertama

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampilkan widget pada Archive Page atau halaman arsip

<b:if cond='data:blog.pageType == "archive"'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampilkan widget selain halaman Archive Page

<b:if cond='data:blog.pageType != "archive"'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampikan widget pada halaman postingan saja

<b:if cond='data:blog.pageType == "item"'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampikan widget selain halaman posting

<b:if cond='data:blog.pageType != "item"'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampilkan widget pada halaman static page

<b:if cond='data:blog.pageType == "static_page"'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampilkan widget selain halaman static page

<b:if cond='data:blog.pageType != "static_page"'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampikan widget pada postingan tertentu

<b:if cond='data:blog.url == "alamatpostingan"'>
Posisi Widget Blog
</b:if>

Kode ini hanya akan menampilkan widget selain postingan tertentu

<b:if cond='data:blog.url != "alamaatpostingan"'>
Posisi Widget Blog
</b:if>

Sekarang kita bahas bagaimana cara meletakan kode-kode diatas.

Masuk ke akun Blogger sobat
Pilih Menu Tata Letak atau menu Layout

Pilih Widget yang ingin anda atur dengan klik Edit (Misalnya disini Dapur Tutorial Blogspot Ambil widget "Tutorial Blog Dan SEO")

Ambil Kode ID Widget tersebut (disini ID Widget ditemukan yaitu "HTML 3")

Sekarang Pilih Menu Template

Klik Pada Tombol Edit HTML

Klik lagi pada tombol Proses atau Lanjutkan

Silahkan Download Template lengkap terlebih dahulu untuk mengantisifasi kesalahan(baca tutorialnya DISINI)
Centang Expand Template Widget

Cari Kode ID Widget (Contoh "HTML 3") yang sudah anda ambil pada langkah 4 (Gunakan Tombol CTRL + F dan F3 untuk mempermudah penarian kode)
Setelah ketemu anda akan menjumpai kode elemen widget seperti ini

<b:widget id='HTML1' locked='false' title='Join Me' type='HTML'>
<b:includable id='main'>
......................................letak kode untuk menyembunyikan widget

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
.............................. letak kode penutup
</b:includable>
</b:widget>

Letakan Kode untuk menyembunyikan widget misalnya kode untuk menampilkan widget hanya pada halaman home page saja, maka susunannya akan menjadi seperti ini

<b:widget id='HTML1' locked='false' title='Join Me' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

klik simpan

Selesai dan lihat hasilnya

Demikian Tutorial Blog Tetang Cara Menampilkan Atau Menyembunyikan Widget Blog Pada Halaman Tertentu semoga bisa bermanfaat untuk sahabat Daput Tutorial Blogspot Semua.

Sumber

09.53 | Posted in tutorial | Read More »

Cara Menambahkan Tabview Section Pada Sidebar Blog

Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuat blog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widget dalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Lalu bagaimana cara membuat Tabview Section ini? Caranya gampang saja, kamu tinggal mengikuti langkah-langkah berikut. Kelihatannya memang ribet karena penjelasannya cukup panjang, tapi jika dipraktekkan akan terasa mudah. Coba saja...

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman Dasbor, pilih Rancangan - Edit HTML.
Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
Cari kode ]]></b:skin> (gunakan Control F atau F3).
Kopi CSS berikut lalu tempelkan (paste) di atas kode ]]></b:skin> tadi (sebaiknya diletakkan di bawah CSS untuk sidebar)
/*-- Tabview Section -- */
.tabs-widget {
list-style:none;
list-style-type:none;
margin:0;
padding:0;
height:24px;
border-bottom:1px solid #A4A4A4;
}
.tabs-widget li {
list-style:none;
list-style-type:none;
margin:0 0 0 4px;
padding:0;
float:left;
}
.tabs-widget li:first-child {margin:0}
.tabs-widget li a {
background-color:#d4d4d4;
color:#000;
text-shadow:1px 1px 1px #fff;
border-top-left-radius:7px;
border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
-khtml-border-radius-topleft:7px;
-khtml-border-radius-topright:7px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
border-right: 2px solid #adadad;
padding:5px 10px;
display:block;
text-decoration:none;
font:bold 11px Arial,Helvetica,Sans-serif;
text-transform:uppercase;
}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current {
background-color:#A4A4A4;
color:#000;
text-shadow:1px 1px 1px #fff;
border-top-left-radius:7px;
border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
-khtml-border-radius-topleft:7px;
-khtml-border-radius-topright:7px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
border-right: 2px solid #adadad;
text-decoration:none;
}
.tabs-widget-content {margin-top:5px; background:#F4F4F4}
.tabviewsection {margin:0 0 2px 0}
Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>.
<script src='http://enes-sc.googlecode.com/files/jquery151.js' type='text/javascript'/>
<script src='http://enes-sc.googlecode.com/files/tabsectionplugin.js' type='text/javascript'/>
Catatan:
- Bagi yang menggunakan frame work dari mootools, letakkan script tersebut di bawah script mootools.
- Bagi yang menggunakan script jQuery, seperti pada perintah Top/Down Page, hapus salah satunya.
Kemudian cari kode untuk widget sidebar, seperti berikut:
<b:section class='sidebar' id='sidebar1' preferred='yes'>
Setelah ketemu, kopi dan tempelkan script berikut di atasnya:
<div class='tabviewsection'>

<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-enes_sc-01-id").hide();
$("ul.tabs-widget-widget-enes_sc-01-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-enes_sc-01-id:first").show();

$("ul.tabs-widget-widget-enes_sc-01-id li a").click(function() {
$("ul.tabs-widget-widget-enes_sc-01-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-enes_sc-01-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>

<ul class='tabs-widget tabs-widget-widget-enes_sc-01-id'>
<li><a href='#widget-enes_sc-01-id1'>Tabmenu 1</a></li>
<li><a href='#widget-enes_sc-01-id2'>Tabmenu 2</a></li>
<li><a href='#widget-enes_sc-01-id3'>Tabmenu 3</a></li>
<li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id1'>
<b:section class='sidebar' id='sidebartab1' showaddelement='yes'>
<b:widget id='HTML73' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id2'>
<b:section class='sidebar' id='sidebartab2' showaddelement='yes'>
<b:widget id='HTML74' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id3'>
<b:section class='sidebar' id='sidebartab3' showaddelement='yes'>
<b:widget id='HTML75' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
<b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
<b:widget id='HTML76' locked='false' title='' type='HTML'/>
</b:section>
</div>

</div>
<div style='clear:both;'/>
Catatan:
- Ubahlah judul Tabmenu 1, Tabmenu 2, Tabmenu 3, dan Tabmenu 4 sesuai dengan judul menu yang diinginkan.
- Jika sidebar blog kamu kecil, hapuslah salah satu Tabmenu dengan cara menghapus kode, misalnya Tabmenu4:
  <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>
  
  dan kode:
  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
  <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
  <b:widget id='HTML76' locked='false' title='' type='HTML'/>
  </b:section>
  </div>
- Jika ingin menambahkan, tambahkan kode-kode seperti pada cara penghapusan, hanya saja kamu harus mengubah id4 menjadi id5, id6, dst. Juga pada id='sidebartab4' harus diubah menjadi sidebartab5, sidebartab6, dst. Begitu juga pada id='HTML76' harus diubah menjadi HTML77, HTML78, dst.
Simpan hasil kerjaan kamu. Jika ingin melihat hasil sementara, lakukan pratinjau, hasilnya akan tampak seperti ini:

Langkah Kedua

Setelah disimpan, klik Elemen Laman
Perhatikan perubahan yang terjadi, seperti gambar berikut:
Edit atau masukkan widget-widget yang kamu kehendaki pada blok-blok Tabmenu yang ada.
Catatan:
- Pada setiap Blok Tabmenu, kamu bisa menambahkan lebih dari satu widget, termasuk yang non-HTML/JavaScript (bawaan blogger).
- Jika ukuran tinggi widget pada setiap blok ingin berukuran sama, lakukan pengeditan pada HTML template. Caranya seperti membuat scrol pada bloglist, yaitu dengan mengubah kode:
  <div class='widget-content'>
  
  menjadi:
  <div class='widget-content' style='overflow:auto; height:250px'>
Jika sudah selesai, ucapkan alhamdulillah...

Ok, segitu aja informasinya, sob... Semoga bermanfaat...

Catatan Tambahan:
Jika kamu ingin membuat Tabview Section ini lebih dari satu, seperti pada blog ini, kamu tinggal mengkopikan script ketiga dan meletakkannya di tempat yang kamu inginkan. Hanya saja kode sc-01 harus kamu ubah menjadi sc-02, sc-03, dst.

Sumber

Ditulis oleh

Kang eNeS

Minggu, 19 Juni 2011. Jam 07:03

12.13 | Posted in tutorial | Read More »

Hosting Kode Yang Sering dipakai Pada Blog di Google Code

Penggunaan Google Code sama pentingnya dengan penggunaan Picasa Web Album pada sebuah blog. Setiap file image yang ada di blog kita otomatis akan tersimpan di album web picasa. Google code sendiri sering kita pergunakan untuk meletakkan kode-kode javascript pada template blog atau sidebar, atau kode-kode hasil "nyolong" dari blog temen lainnya.

Untuk iskaruji dot com sendiri banyak sekali kode-kode yang dipergunakan untuk personalisasi tampilan yang diletakkan di Google code. Seperti Widget Blogger Indonesia, smiley Icon ataupun lainnya. Adapun fungsi Google code selain sebagai pengaman kode-kode kita agar tidak hilang sekaligus untuk mengurangi beban dan crash pada template blog jika ditaro langsung pada template blog.

Dan Bagi kamu yang ingin juga menggunakan layanan Hosting Google Code, berikut langkah-langkahnya;

Pastikan kamu sudah login dengan akun blogger kamu dan kunjungi http://code.google.com

Klik pada menu Project Hosting di sidebar kiri halaman Google code.

Klik pada Project Hosting on Google Code.

Pilih Create a new project untuk pembuatan akun di Google Code.

Silahkan isi seperti yang ditunjukkan pada gambar dan klik Create Project jika sudah selesai.

Akun Google Code kamu sudah selesai di buat. Tahap selanjutnya adalah meng-upload file kamu ke Hosting Google Code. File bisa dalam format .js ataupun .txt pada notepad dengan meng-klik Downloads.

Terlihat pada akun memiliki kode. Untuk itu silahkan klik New Download.

Silahkan upload file kode kamu yang ada. Kasih nama sesuai nama file, browse ketempat file kode kamu di taro pada komputer dan klik Submit File jika sudah selesai.

File kode kamu sudah diupload. Selanjutnya untuk menggunakan file kode tersebut agar bisa dijalankan pada blog ataupun lainnya, silahkan klik pada nama file dan akan terlihat seperti pada gamabar berikut. Klik kanan > Copy Link Locations [Mozilla] untuk mendapatkan kode link file kode kamu.

Selesai.

Jika ingin mengunjungi kembali atau ingin meng-upload kode baru ke Hosting Google Code, akun kamu Google Code kamu bisa langsung di akses pada sisi kanan atas seperti pada gambar berikut:

Dan bagi kamu yang masih bingung gimana cara menggunakan link kode seperti, http://iskaruji.googlecode.com/files/komentarbaru.txt, yang dihasilkan dari Hosting Google Code, silahkan gunakan format penulisan sebagai berikut:

<script type="text/javascript" src="http://iskaruji.googlecode.com/files/komentarbaru.txt"></script>

Demikian moga bermanfaat!

Ditulis Oleh Iskaruji dot com Pada Hari Jumat, 24 Juni 2011 | 18:16

Sumber

Tambahan: google code bisa digunakan untuk membeck up script juga.

01.58 | Posted in tutorial | Read More »

Membuat spoiler di blogspot

Mungkin para sahabat blogger yang budiman bertanya-tanya tentang cara membuat SPOILER, ya itu ntu, yang kayak di forum kaskus.us itu, bisa dibuka dan di tutup gitu, wadeh... pokoke kren sekali lah bah, nah, sahabat sekalian bisa copas kodenya dari blog ini, free kok, ga pake bayar dan ga pake lama, tapi kalau konneksinya lemot kayak tulalit lit lit gitu ya bakalan gitu-gitulah. kok jadi curhat? hahaha. ok, langsung aja lihat dibawah yah:

03.49 | Posted in tutorial | Read More »

Corel Draw x 5

Siapa yang tidak tau software yang satu ini ? Software yang sudah dikenal sebagai penghasil vector yang bagus dan mudah dalam penggunaannya. walaupun saat ini sudah banyak program serupa bahkan dari Adobe pun sudah lama mengeluarkan program yang memiliki fungsi yang mirip dengan CorelDRAW (Adobe Ilustration), tapi bagi sebagian orang seperti saya yang sudah terbiasa memakai Corel dibanding Adobe pasti akan lebih memilih menggunakan CorelDRAW.

CorelDRAW Graphics Suite X5 menawarkan semua alat yang diperlukan untuk pekerjaan produktif desainer kontemporer. Intuitif alat untuk vektor ilustrasi dan tata letak halaman memungkinkan Anda untuk membuat solusi desain yang hebat.

Gambar raster dapat dengan mudah dapat di edit dan diubah menjadi scalable vector file. Apapun proyek Anda, CorelDRAW Graphics Suite X5 menyederhanakan alur kerja dan menginspirasi Anda dengan peluang-peluang baru untuk kreativitas.

Untuk Penginstalan Coreldraw Graphics Suite X5 perlu diperhatikan sistem komputer anda sebagai berikut :

*Microsoft NetFramework v3.5, harus diinstall bagi yg belon download disini

Cara cek netframework dikomputer kita

* Microsoft® Windows® 7, Windows Vista®, Windows® XP, with latest service packs installed and latest online update (32-bit or 64-bit editions).

Cara Cek Update Online Terbaru :

Start-->All Programs--> Windows Update

* Intel® Pentium® 4, AMD Athlon™ 64 or AMD Opteron™.

* 512 MB RAM (1 GB recommended).

* 750 MB hard disk space (1 GB for typical installation without content). Up to 6GB needed to install extra content.

* Mouse or tablet.

* 1024 x 768 screen resolution (768 x 1024 on a Tablet PC).

* DVD drive

* Microsoft® Internet Explorer® 7 or higher, or Firefox, or Opera, or Chrome, or Safari etc

Sudah saya jadikan satu semuanya, silahkan download link dibawah ini, kalau mau seumpama ada paswotnya silahkan tanya di komentar...123456

1- Corel_batakmedan_draw_5_valid.part1.rar
2- Corel_batakmedan_draw_5_valid.part2.rar
3- Corel_batakmedan_draw_5_valid.part3.rar
4- Corel_batakmedan_draw_5_valid.part4.rar
5- Corel_batakmedan_draw_5_valid.part5.rar
6- Corel_batakmedan_draw_5_valid.part6.rar
7- Corel_batakmedan_draw_5_valid.part7.rar

Sumber

01.31 | Posted in tutorial | Read More »

Kebijakan konten blogspot

Blogger merupakan layanan gratis untuk komunikasi, ekspresi-diri, dan kebebasan bicara. Kami percaya Blogger meningkatkan ketersediaan informasi, menjunjung debat sehat, dan membuat hubungan baru antar orang.

Kami menghargai kepemilikan konten user dan tanggung jawab user untuk konten yang mereka sebarkan. Kami percaya bahwa mensensor konten tidak sesuai dengan layanan yang berdasarkan kebebasan ekspresi.

Untuk dapat mempertahankan nilai-nilai ini, kami perlu menghancurkan penyalahgunaan yang mengancam kemampuan kami untuk menyediakan layanan ini dan kebebasan layan yang disediakan. Sebagai hasilnya, ada batasan tertentu konten yang bisa dihosting oleh Blogger. Batasan yang kami definisikan sesuai dengan batasan hukum dan bertujuan meningkatkan layanan secara keseluruhan.

Batasan Konten

Kebijakan konten kami memainkan peranan penting dalam mempertahankan pengalaman positif Anda selaku pengguna. Harap hormati pedoman ini. Dari waktu ke waktu, kami dapat mengubah kebijakan konten kami, oleh karena itu harap periksa kembali di sini untuk mengetahui perubahannya. Selain itu, harap perhatikan bahwa saat menerapkan kebijakan di bawah, kami dapat membuat pengecualian berdasarkan pada pertimbangan artistik, edukasi, dokumenter, atau ilmiah atau bila ada manfaat yang besar lainnya untuk publik agar tidak mengambil tindakan pada konten.

Materi Khusus Dewasa: Kami mengizinkan materi khusus dewasa di Blogger, mencakup gambar atau video yang berisi ketelanjangan atau aktivitas seksual. Namun, harap tandai blog Anda sebagai 'dewasa' pada setelan Blogger Anda. Jika Anda tidak melakukannya, kami dapat menempatkannya di belakang interstisial 'materi khusus dewasa'.

Ada beberapa pengecualian untuk kebijakan materi khusus dewasa kami:

Jangan gunakan Blogger sebagai sarana untuk mendapatkan uang dari materi khusus dewasa. Misalnya, jangan buat blog yang sebagian besar kontennya adalah iklan atau tautan menuju situs porno komersial.

Jangan sertakan konten inses atau bestialitas: Kami tidak mengizinkan konten gambar, video, atau teks yang menggambarkan atau menganjurkan inses atau bestialitas.

Keamanan anak: Kami memiliki kebijakan yang sama sekali tidak mentoleransi konten yang mengeksploitasi anak-anak. Beberapa contoh di antaranya:

Pornografi anak: Kami akan menghentikan akun setiap pengguna yang kami dapati sedang memublikasikan atau menyebarkan pornografi anak. Kami juga akan melaporkan pengguna tersebut kepada penegak hukum.

Pedofilia: Kami tidak mengizinkan konten yang mendorong atau mempromosikan ketertarikan seksual terhadap anak-anak. Misalnya, jangan buat blog dengan galeri gambar anak-anak di mana koleksi gambar atau teks yang mendampingi gambar bernada seksual.

Perkataan yang mendorong kebencian: Kami ingin agar Anda menggunakan Blogger untuk mengungkapkan pendapat, bahkan yang sangat kontroversial sekali pun. Namun, jangan melebihi batas dengan memublikasikan perkataan yang mendorong kebencian. Maksud mendorong kebencian ini adalah konten yang mempromosikan kebencian atau kekerasan terhadap kelompok berdasarkan ras, etnik, agama, kecacatan, jenis kelamin, umur, status veteran, atau orientasi seksual/identitas jenis kelamin. Misalnya, jangan tulis blog yang mengatakan bahwa anggota Ras X adalah kriminal atau menganjurkan kekerasan melawan pengikut Agama Y.

Konten Kasar: Jangan memposkan konten hanya bertujuan untuk mengejutkan atau gamblang. Misalnya, koleksi gambar luka senjata atau adegan kecelakaan yang diambil dari jarak dekat tanpa konteks atau penjelasan akan melanggar kebijakan ini.

Kekerasan: Jangan mengancam orang lain di blog Anda. Misalnya, jangan poskan ancaman kematian terhadap orang lain atau sekelompok orang dan jangan poskan konten yang mendorong pembaca untuk melakukan tindakan kekerasan terhadap orang lain atau sekelompok orang.

Hak cipta: Merupakan kebijakan kami untuk menanggapi pemberitahuan yang jelas mengenai dugaan pelanggaran hak cipta. Informasi lebih lanjut tentang prosedur hak cipta kami dapat ditemukan di sini. Selain itu, harap jangan berikan tautan ke situs yang memungkinkan pembaca memperoleh unduhan tidak resmi dari konten orang lain.

Informasi pribadi dan rahasia: Tidak pantas untuk memublikasikan informasi pribadi dan rahasia orang lain. Misalnya, jangan poskan nomor kartu kredit, nomor Jaminan Sosial, nomor telepon yang tidak terdaftar, dan nomor surat izin mengemudi orang lain. Selain itu, harap perhatikan bahwa dalam banyak kasus, informasi yang telah tersedia di tempat lain di internet atau rekaman publik tidak dianggap sebagai pribadi atau rahasia menurut kebijakan kami.

Meniru identitas orang lain: Harap jangan menyesatkan atau membuat bingung pembaca dengan berpura-pura menjadi orang lain atau berpura-pura mewakili sebuah organisasi bila sebenarnya tidak demikian;. Kami tidak mengatakan bahwa Anda tidak dapat memublikasikan parodi atau sindiran - cukup hindari konten yang kemungkinan menyesatkan pembaca tentang identitas Anda yang sebenarnya.

Kegiatan ilegal: Jangan gunakan Blogger untuk terlibat dalam kegiatan ilegal atau mempromosikan kegiatan bahaya atau ilegal. Misalnya, jangan menulis blog yang mendorong orang-orang untuk minum minuman keras kemudian berkendara. Jika tidak, kami dapat menghapus konten Anda. Selain itu, dalam kasus yang berat seperti kasus yang melibatkan pelecehan anak, kami dapat melaporkan Anda kepada pihak yang berwenang.

Spam: Spam memiliki bentuk yang bermacam-macam di Blogger, segala bentuk spam dapat mengakibatkan penghapusan akun atau blog Anda. Contohnya mencakup membuat blog yang dirancang untuk mengarahkan lalu lintas ke situs Anda atau menaikkan situs ke deretan atas daftar penelusuran, mengeposkan komentar di blog orang lain hanya untuk mempromosikan produk atau layanan Anda, dan meniru konten yang ada dari sumber lain dengan tujuan utama untuk memperoleh pendapatan atau keuntungan pribadi lainnya.

Perangkat lunak jahat dan virus: Jangan buat blog yang mengirimkan virus, menyebabkan munculan, berupaya memasang perangkat lunak tanpa persetujuan pembaca, atau memengaruhi pembaca dengan kode perangkat lunak jahat. Hal ini sangat dilarang di Blogger.

Penegakan Kebijakan Konten Blogger

Jika Anda menemui blog yang menurut Anda melanggar kebijakan konten kami, laporkan kepada kami menggunakan tautan 'Panji Blog Ini' yang terdapat di atas setiap blog (Catatan: Jika pemilik blog telah menyembunyikan tautan ini, Anda masih dapat melaporkan blog tersebut dengan mengisi formulir ini).

Tim kami meninjau panji ini untuk pelanggaran kebijakan. Jika blog tidak melanggar kebijakan, kami tidak akan mengambil tindakan apapun terhadap blog atau pemilik blog tersebut. Jika kami menemukan bahwa suatu blog melanggar kebijakan konten, kami akan mengambil satu atau beberapa tindakan berikut ini berdasarkan tingkat pelanggaran tersebut:

Menempatkan blog di balik interstisial 'materi khusus dewasa'

Menempatkan blog di balik interstisial yang kontennya hanya dapat diakses penulis blog

Menghapus blog

Menonaktifkan akses penulis ke akun Blogger-nya

Melaporkan pengguna kepada penegak hukum

Muhammad Syafii Tampubolon | Buat Lencana Anda