Blogna Urg tasik

Showing posts with label membuat. Show all posts

Saturday, December 7, 2013

Membuat TapView Mudah

Membuat TapView dapat dilakukan dengan mudah. Apa TabView? Coba anda perhatikan (gambar)

Gambar TabVew

seperti itulah tap view. Untuk membuatnya :

1. Masuk Ke ID Blog anda

2. Klik Tata Letak

3. Pada Tab Elemen Halaman ,tambahkan Elemen, Pilih HTML/Javascript

4. Masukian Script di bawah ini ke dalam Form HTML/Javascript

<style type="text/css">
div.TabView div.Tabs
{height: auto;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:5px groove #141414; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #222222; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:5px groove #141414; /* Warna border Kotak Utama */ overflow:hidden; background-color:#222222; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type=text/javascript>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch("+TabViewId+", "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != Pages) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == Page)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? block : none;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs"> <a>Judul TAB-1</a>
<a>Judul TAB-2</a>
<a>Judul TAB-3</a>
</div>
<div style="width:auto; height:250px; " class="Pages">
<div class="Page">
<div class="Pad"> <a href="http://blogspot.com/"><li>GUDANG INFO</li></a>
</div>
</div>
<div class="Page">
<div class="Pad"> Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad"> Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize(TabView);
</script>

Silahkan dicopas dan dicoba!

Thursday, November 7, 2013

Cara Membuat Read More Template Baru part2

Read more berguna agar artikel tidak kelihatan terlalu panjang sehingga artikel-artikel yang lain juga kelihatan,berikut cara membuat readmore otomatis

Beri centang terlebih dahulu kotak expand templata widget

Lalu cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src=http://rizqi.moehamed.googlepages.com/read-moreotomatis.js type=text/javascript/>

Selanjutnya, cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

ganti kode tersebut dengan kode di bawah ini :

<b:if cond=data:blog.pageType != "item">

</script>

<a expr:href=data:post.url>»»  READMORE...</a></span>

</b:if>

<b:if cond=data:blog.pageType == "item"><data:post.body/></b:if>

Terakhir, klik save template

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.

Summary noimg 430 = tinggi artikel terpenggal tanpa image

Summar img 430 = tinggi artikel terpenggal dengan image

Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll.

Wednesday, November 6, 2013

Membuat favicon animasi di blogspot

Trik blogspot- Mau membuat gambar favicon anda bergerak(animasi)? Caranya mudah kok! hanya beberapa langkah yang harus sobat lewati. Tanpa mengulur waktu lagi, Lebih baik kita langsung saja ke TKPnya..

1.Pertama - tama yang sobat harus lakukan yaitu sobat harus mengunjungi Situs http://www.favicongenerator.org

2. kemudian scroll mouse hingga ke bagian bawah halaman. Maka sobat akan temukan tampilan seperti berikut

3. Klik pada tulisan browse, Kemudian masukan Gambar yang telah sobat sediakan sebelumnya

di komputer sobat.

4. Masukkan Teks pada kotak Scrolling text(jika ada) digunakan untuk menghasilkan Favicon Teks Bergulir.

5. Setelah ikuti klik tulisan Generate favicon, maka akan tampil beberapa icon yang bisa sobat copy paste.

Caranya: klik kana pada mouse, klik Save Image As.

6. Upload gambar tersebut yang telah ada di komputer sobat ke Filehosting milik sobat. ( Photobucket,picasa web album dan lain - lain )

7. Ambil kode htmlnya.

8. Selanjutnya, login ke akun blog sobat

9. Klik rancangan --> edit HTML

10. Cari kode <head>

11.Letakan kode HTML yang di ambil dari file hosting tadi, diatasnya.

12.Dan selesai.

Bagaimana... Ribetkan? Okelah karena aku orangnya baik hati, ni gua kasih cara mudahnya. HEHEHE (bercanda)

1. login ke akun blog sobat.

2. Klik rancangan --> klik elemen laman

3. Cari tulisan Favicon tepatnya di bagian sudut kiri atas elemen laman, kemudian klik Edit.

4. Klik pada Tulisan Browse, kemudian otomatis akan di arahkan ke file yang di simpan di komputer sobat.

5. Pilih gambar animasi favicon yang di download tadi.

6. Dan selesai sudah.

Gimana... mudah kan???

Cara Membuat Spoiler di Postingan Blogspot

Yang suka ngaskus pasti tahu spoiler. Spoiler biasanya dipakai para penipu untuk menyembunyikan foto,video, atau tulisan. Foto, video, atau tulisan tersebut hanya bisa dilihat setelah diklik tombol open-nya.

Sebelum membuat spoiler, barangkali ada yang ingin berkenalan dulu dengan spoiler dan ingin tahu seluk beluk spoiler silahkan baca postingan sebelumnya tentang Pengertian Spoiler dan Alasan Kenapa Menggunakan Spoiler.

Memasang spoiler diblog sangat mudah dan bisa dilakukan dengan cepat. Bila ingin melihat dulu contoh spoiler di blog kang asep sule, bisa melihat artikel yang berjudul Foto-foto Pramugari Pesawat Sukhoi Superjet 100 Sebelum Jatuh di Gunung Salak

Cara Membuat Spoiler di Postingan Blogspot:

Saat membuat postingan, pindah ke mode menulis HTML.
Copy kode Spoiler berikut:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b> : <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 = ; this.value = Close; } else { this.parentNode.parentNode.getElementsByTagName(div)[1].getElementsByTagName(div)[0].style.display = none; this.innerText = ; this.value = Open; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;">
SPOILER DIMARI GAN
</div></div></div>

Paste di lokasi yang akan dipasangi spoiler.
Ganti tulisan warna biru dengan judul spoiler yang diinginkan.
Ganti tulisan warna merah dengan isi spoiler
Isi spoiler gambar, kodenya <img src="lokasi_file-gambar" height="tinggi-gambar" width="lebar-gambar">

Demikian tutorial cara buat spoiler diblog seperti yang ada di Kaskus. Semoga bermanfaat.