Selasa, 23 April 2013

Cara Membuat Widget




Asalamualaikum teman teman saya mau ngasi tau beberapa Cara Membuat Widget ookeeh langsung adjah yang pertama adalah:

Cara Membuat Widget yang pertama

Cara Membuat Widget Melayang Pada Blog

- Widget Melayang yang akan saya bahas ukurannya akan menyesuaikan sesuai dengan ukuran yang teman teman mau, jadi teman teman tidak perlu lagi mengatur ukurannya. Namun untuk penempatannya teman teman bisa menempatkan dimana saja sesuai dengan keinginan teman teman.

Oke apabila teman teman tertarik untuk memasangnya pada blog teman teman berikut langkah langkah Cara Membuat Widget Melayang Pada Blog :

1. Login terlebih dahulu ke blogger
2. Lalu pilih Rancangan
3. Tambahkan Widget Baru / Add Widget
4. Lalu pilih HTML/Javascript
5. Copy kode dibawah ini lalu tempelkan kedalam widget tadi


<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> functionshowHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> Silahkan tempelkan kode iklan atau banner milik teman teman disini </center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Keterangan  Cara Membuat Widget Melayang pada blog Silahkan atur posisi dan warna widget teman teman dengan mengganti tulisan yang berwarna hijau dan merah. Untuk menempelkan kode iklan atau banner teman teman silahkan ganti dan tempelkan pada tulisan Silahkan tempelkan kode iklan atau banner milik teman teman disini yang berwarna merah.

Nah selesai Cara membuat widget melayang pada blog.


Cara Membuat Widget Yang Kedua

Cara Membuat Widget Next Page Pada Blog

Tujuan membuat Widget Next Page pada blog adalah untuk mempermudah pengunjung yang membaca artikel kita, Untuk melihat postingan artikel pada halaman yang lainnya, dan hal ini dilakukan karena jumlah postingan artikel yang sudah banyak atau lebih dari 100 postingan. Sehingga pengunjung yang membaca artekel kita sangat membutuhkan witget next page ini, supaya mudah menemukan postingan artikel yang lainnya, Dan mereka betah untuk berlama lama pada Blog kita.


Cara Memasang Widget Next page pada blog adalah sebagai berikut: 

1. Login ke account blogger  anda.
2. Pilih dan Klik menu Layout.
3. Lalu pilih dan klik Add Gadget -----> Pilih gatget yang sesuai dengan letak Next Page  yang akan kita pasang. 
4. Lalu akan muncul Windows baru -----> Pilih HTML java Script -----> Lalu masukkan kode sebagai berikut :


<style type='text/css'>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
</style>
<script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://imtikhan.googlecode.com/files/blogger-page-nav-v2.js'></script>

5. Lalu klik Save atau simpan.
6. Lihat hasilnya.
7. Jika hasilnya belum muncul, Tunggulah beberapa saat atau beberapa jam, Kerena masih dalam Proses penyesuian.
8. Selamat menikmati.

Cara Membuat Widget Next page pada blog selesai.

Cara Membuat Widget Yang Ketiga

Cara Membuat Widget Hanya Tampil pada Homepage

Homepage merupakan halaman utama dari web/blog, pada kesempatan ini kita akan membahas cara membuat widget hanya tampil pada homepage. Agar blog terkesan dinamis dan rapi, sebaiknya beberapa widget yang dianggap penting dan utama hanya ditampilkan di halaman utama atau homepage.

Teman teman ingin membuat widget hanya tampil di halaman utama/homepage, berikut ikuti langkah-langkahnya :

1. Login akun blogger Teman teman.

2. Pilih Template > Edit HTML > centang Expand Template Widget.

3. Jangan lupa backup template agar mudah mengembalikan jika terjadi kesalahan.

4. Cari widgetnya gunakan F3 atau Ctrl + F. Contoh widget: Artikel Terbaru.

5. Letakkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah<b:includable id='main'> dan </b:if> diatas kode </b:includable> seperti berikut: 

<b:widget id='HTML5' locked='false' title='Artikel Terbaru' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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>

6. Kemudian Simpan template.
sekarang Teman teman bisa mengatur widget untuk memodifikasi tampilan pada halaman utama agar blog terlihat rapi dan dinamis.

Selesai Cara Membuat Widget Hanya Tampil pada Homepage.


Cara Membuat Widget yang Ke empat

 Cara membuat Widget Jam Garuda Pada Blog


Widget jam garuda ini bisa juga untuk mempercantik tampilan blog,
Langkah langkah dalam membuat Widget Jam Garuda Pada Blog Sbb :

 Log in ke Blogger


 Masuk ke Tata Letak

 Tambahkan Gadget


 Pilih HTML/JavaScript

 Copy kode berikut dan letakan dalam kolom Widget HTML/JavaScript



<p align="center"><embed src="http://www.widgipedia.com/widgets/orido/Jam-Garuda-Indonesia-4639-8192_134217728.widget?__install_id=1248336094072&__view=expanded" width="200" height="200" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" swliveconnect="true" quality="best" loop="false" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" ></embed></p>

Klik Simpan.

Nah udah yaaah teman teman segitu adah dulu.
MOHON MAAF BILA ADA KESAMAAN KATA.

6 komentar:

  1. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

    BalasHapus
  2. Saya tertarik dengan tulisan anda mengenai pengembangan komputarisasi.Benar benar sangat bermamfaat dalam menambah wawasan kita menjadi mengetahui lebih jauh mengenai ilmu Teknologi.Saya juga mempunyai artikel yang sejenis mengenai komputarisasi yang bisa anda kunjungi di sini

    BalasHapus
  3. patut di coba

    http://st3telkom.ac.id/

    BalasHapus
  4. Terimakasih atas informasinya. Artikel ini sangat membantu
    ST3 Telkom

    BalasHapus

RajaChanger COM Terpercaya Indonesia Jasa Jual Beli eCurrency dan Deposit Withdraw Balance Forex

RajaChanger indonesia terpercaya  jasa exchanger yang melayani penukaran jual beli topup saldo balance dollar akun Perfect Money PM BitCo...