BLOG BUDAK BUNGO

Pages

Connect With Us

Instructions

Recomended

blogbudakbungo. Powered by Blogger.

Labels

Las series mรกs vistas

Categories

Followers

Our Partners

Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Cara Membuat Link Download di Blog

Cara Membuat Link Download di Blog - Dalam dunia blog selain artikel ada juga yang di sebut link, link sebagaimana kita ketahui adalah tautan yang menghubungkan antara halaman satu dengan halaman lain, situs dan situs lain termasuk link download yang tentuhnya mengarah ke situs file sharing tertentu. Contoh link adalah seperti berikut ( baca : blogspot template blog ).

Kali ini masih seputar link, saya akan share tentang cara bikin link download gratis di blogspot. Untuk membuat link download yang pertama harus kita miliki adalah file dan tentunya akun di file sharing ( seperti ziddu, googlecode, 4shared dll ). File yang ada di komputer sobat nantinya kan di upload ke salah satu file sharing tadi guna mendapatka url dari file tersebut. Kali ini kita akan membahas di file sharing ziddu saja.

1. Sign up di ziddu.com ( baca : cara membuat akun di ziddu )
2. Silahkan sobat meng-upload file ke ziddu untuk mendapatkan link downloadnya.
3. Link download dari ziddu kira - kira seperti gambar berikut.




Nah, setelah kita mendapatkan lin downloadnya, sekarang waktunya untuk membuat link downloadnya. setahu saya, ada 2 cara untuk membuat link download, yang pertama dengan mengunakan teks biasa dan kedua dengan menggunakan / menyisipkan gambar pada link download. Berikut penjelasannya.

1. Link Download Biasa
<a href="http://www.ziddu.com/download/19044499/tatelustyle.rar.html" target="_blank"><b>DOWNLOAD</b></a>

Hasilnya :

DOWNLOAD


2. Link Download Dengan Gambar
<a href="http://www.ziddu.com/download/19044499/tatelustyle.rar.html" target="_blank"><img alt="Download Button" src="http://2.bp.blogspot.com/-d94UwjQPxh8/T3plWl6fZNI/AAAAAAAAAyw/W_EAtXrMGY0/s1600/download-button.jpg" /></a>

Hasilnya :

Download Button


Tambahan:
Tulisan yang di cetak tebal dan berwarna merah adalah link download ( url file ) yang diambil dari file hasil upload di ziddu.

Cara Membuat Tombol Next Page Dengan Angka

  1. Login ke blog
  2. Masuk ke dasbor dan klik template => pilih Edit HTML
  3. Backup Dulu Template anda dengan meng Klik Download Full Template (Terserah anda Ya atau Tidak.tapi lebih baik Ya)
  4. Centang Expand Template Widget
  5. Cari Kode ]]></b:skin> Copy kode di bawah lalu paste di atas kode ]]></b:skin>
.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;}

7. Selanjutnya cari kode </body>
8. Copy lalu paste kode di bawah ini tepat si atas kode </body>

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src='http://codecbd.googlecode.com/files/page-no.js' type='text/javascript'/>

Tombol Next Page Dengan Angka

9. klik pratinjau untuk memastikan terjadinya kesalahan
10. Apabila sudah oke dan silahkan sobat klik simpan template
11. Selesai

Sekian dulu pembahasan kita kali ini tentang Cara Membuat Tombol Next Page Dengan Angka, Apabila ada yang ingin ditanyakan silahkan tinggalkan pesan pada kotak komentar. 
Terimakasih, selamat mencoba dan semoga bermanfaat..!!!

Cara Menghapus Halaman Blog pada Hasil Pencarian Google

Teori

Apa itu halaman Blog?
Halaman blog adalah sebuah tempat untuk memuat sebuah artikel yang telah kita buat sebelumnya dengan menggunakan Blogger post editor. Mengenai blogger post editor anda bisa membaca penjelasannya lebih lanjut disini:
http://support.google.com/blogger/bin/answer.py?hl=en&answer=42239
Saat kita mempublikasikan sebuah postingan/artikel yang telah kita buat pada sebuah blog maka otomatis postingan kita akan terdaftar pada mesin pencari google, yaitu berupa judul postingan, deskripsinya dan alamat URL.
Alamat URL sendiri berfungsi untuk mengarahkan para pengguna google menuju halaman yang mereka cari (contoh: halaman kita) saat mereka mengklik pada hasil pencarian yang mereka cari di situs google.
Kembali pada tema kita kali ini yaitu cara menghapus halaman blog (Alamat URL) kita di hasil pencarian google (lihat gambar diatas), sebelum melakukannya setidaknya kita tahu terlebih dahulu alasannya mengapa kita perlu menghapus halaman blog kita di google pencarian.
Alasan Kenapa Perlu di Hapus?
Berikut adalah beberapa alasan mengapa kia perlu menghapus halaman blog kita di hasil pencarian google:
  1. Alasan keamananMisalnya ada halaman tertentu dari blog Anda yang hanya orang-orang tertentu yang boleh tahu dan tidak ada orang lain yang boleh tahu, tetapi sudah terlanjur terindeks oleh google dan masuk ke cache/tembolok google, karena sebelumnya halaman tersebut belum terproteksi.
  2. Halaman Expired atau Sudah KadaluarsaMisalnya ada halaman yang sudah dihapus oleh kita akan tetapi masih terindeks oleh google. Untuk itu sebisa mungkin kita segera menghapusnya. Hal ini untuk mencegah deadlink, yang dapat menurunkan PR (page rank).

Praktek

Setelah anda memahami teori di atas, saatnya kita langsung pada prakteknya, yaitu Cara Menghapus Halaman Blog pada Hasil Pencarian Google.
  1. Login dulu ke Google Webmaster Tools dengan akun Google anda.
  2. Pilih blog yang mau anda hapus cache-nya.
  3. Pada halaman dashboard pilh Optimization > Remove URLs.
  4. Kemudian klik tombol Make a new removal request dan masukkan URL postingan atau artikel yang ingin kita hapus cache-nya kemudian tekan Continue.
  5. Jika ingin menambahkan url yang ingin di hapus ulangi langkah no.4 di atas.
Biasanya perubahan akan terlihat setelah 1 hari (24 jam) tergantung tingkat crawler blog anda, untuk blog yang selalu di update saya yakin prosesnya akan cepat.

Cara Membuat Yahoo Messenger Di Blog

Cara Membuat Yahoo Messenger Di Blog

Cara Membuat Yahoo Messenger Di Blog, Apakah Sahabat adalah seseorang yang suka chatting di Yahoo Messenger ? Kalau jawabanya iya, maka widget ini sangat cocok dan perlu sekali ditamahkan dalam blog sahabat. Karena pengujung akan langsung tahu jika Sahabat sedang online di Yahoo Messenger dan pengunjung bisa langsung chat dengan Sahabat.
Adapun langkah-langkahnya sebagai berikut :
Cara Membuat Yahoo Messenger Di blog :
  • Klik Desain
  • Klik Tata Letak
  • Klik Add Gadget
  • Klik HTML/Javascript
  • Copy-paste kode dibawah ini
<a href="ymsgr:sendIM?Id_yahoo_Sahabat"><img src="http://opi.yahoo.com/online?u=Id_yahoo_Sahabat&amp;m=g&amp;t=1&amp;l=us"/>
</a>
  • Klik Simpan
Catatan :

Ganti dua tulisan Id_yahoo_Sahabat dengan ID Yahoo Sahabat
Untuk t=1 silahkan ganti dengan model gambar yang sahabat kehendaki bisa dilihat dibawah ini:

Icon Cara Membuat Yahoo Messenger Di Blog 
Icon Cara Membuat Yahoo Messenger Di Blog
Icon Cara Membuat Yahoo Messenger Di Blog

Icon Cara 
Membuat Yahoo Messenger Di Blog

Cukup sekian Cara Membuat Yahoo Messenger Di Blog, semoga berhasil dan bermanfaaf

Belajar Blogging : Cara Membuat Live Radio Streaming di Blog Anda

Sambil nge-blog, browsing, fesbukan atau twitteran akan lebih asyik dan tidak membosankan kalau kita sambil dengarkan radio online. Nah sekarang sudah banyak sekali streaming radio yang tersedia di internet, tentunya akan lebih menarik lagi kalau streaming radio tersebut ada di blog anda. Nah karena itu saya akan berbagi bagaimana membuat Streaming Radio di blog anda. 
Berikut Caranya :

Langkah Pertama :

Copy text ini (ini adalah script utk membuat streaming radio)

<div align="center"><b>KENCANA FM MALANG<br />
<!-- plugin start -->
<div align="center"><embed allowscriptaccess="never"
name="RAOCXplayer" src="http://live.adabisnis.com:8012/"
type="application/x-mplayer2"
showstatusbar="1" displaysize="0" autostart="true"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
height="70"
width="255"></embed></div> <br /></b></div>

Langkah Kedua : 
Silahkan login ke blogger dengan ID anda
  1. Klik Tata Letak
  2. Klik tab Elemen Halaman
  3. Klik Tambah Gadget
  4. Klik tanda plus (+) untuk HTML/Javascript
  5. Paste kode yang sudah di copy tadi ke dalam kolom konten yang tersedia
Setelah di paste coba kamu perhatikan di baris ke 4, disitu script:

name="RAOCXplayer" src="http://live.adabisnis.com:8012/"

Nah ini adalah sumbernya mengapa suara radio kamu nantinya adalah suara radio KENCANA FM MALANG, jika kamu menggunakan script tersebut. Coba perhatikan script: src="http://live.adabisnis.com:8012/ itu adalah link streaming radio KENCANA.
Jika kamu tidak suka dengan siaran radio tersebut, kamu bisa menggantinya dengan siaran streaming radio yang kamu sukai. Caranya adalah dengan mengganti script: src="http://live.adabisnis.com:8012/ dengan script link radio streaming yang kamu sukai.

Contoh:
src="http://live.adabisnis.com:8012/
(ini adalah link awal di atas)

Kemudian kamu ganti kink tersebut misalnya dengan Prambors Fm Jakarta, untuk mengetahui link radio tsb atau link radio yg lain kamu bisa browsing di mbah google, nah dari penelusuran saya link radio Prambors Fm Jakarta adalah (http://orange.ask.co.id:8000/1022fm.ogg.m3u) kemudian kamu copy script tsb kemudian kamu paste untuk menggantikan script yang saya jelaskan diatas.
Nah setelah di paste maka hasilnya menjadi:

<div align="center"><b>Prambors Fm Jakarta<br />
<!-- plugin start -->
<div align="center"><embed allowscriptaccess="never"
name="RAOCXplayer" src="http://orange.ask.co.id:8000/1022fm.ogg.m3u"
type="application/x-mplayer2"
showstatusbar="1" displaysize="0" autostart="true"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
height="70"
width="255"></embed></div> <br /></b></div>

Ingat....!!!
Jangan menambahkan atau mengurangi sedikitpun script yang sudah saya berikan diatas selain yang akan saya contohkan tersebut.
Jika sudah yakin tidak ada lagi yang salah maka tinggal klik SAVE/SIMPAN

Berikut adalah link Radio Streaming Indonesia sejauh yang saya ketahui :
- Hardrock Jakarta (mms://radio.vstreamer.com/hardrock)
- Hardrock Surabaya (mms://202.148.11.104/hardrockfm)
- i-radio (Jakarta) (mms://radio.vstreamer.com/iradio)
- cosmopolitan fm (Jakarta) (mms://radio.vstreamer.com/cosmopolitan)
- star fm (Surabaya) (mms://202.148.11.104/starfm)
- istara fm (Surabaya) (mms://istarafm.surabaya.indo.net.id/istara/istarafm.asx)
- DJ FM (Surabaya) (mms://202.148.11.104/djfm)
- D Radio (Jakarta) (mms://radio.vstreamer.com/dradio)
- Prambors Fm (Jakarta) (http://orange.ask.co.id:8000/1022fm.ogg.m3u)
- Kiss FM (Medan) (http://live.kissfm-medan.com:8080/)
- Putra FM (http://www.putrafm.upm.edu.my:8080/listen.pls)
- Maestro FM (Bandung) (http://202.6.239.11:10925/radio.maestro.m3u)
- DJ Wirya (http://cast.idvps.com:8000/djwirya.m3u)
- Prima FM (Aceh) (http://prima.fmradiocast.com:8080/listen.pls)
- elshinta (Jakarta) (mms://202.158.49.136/elshinta)
- cosmopolitan fm (Jakarta) (mms://radio.vstreamer.com/cosmopolitan)
- star fm (Surabaya) (mms://202.148.11.104/starfm)
- istara fm (Surabaya) (mms://istarafm.surabaya.indo.net.id/istara/istarafm.asx)
- RRI (http://222.124.10.203:8000/highband.ogg)

Mudah-mudahan penjelasan singkat dan link radio streaming tersebut bisa bermanfaat.
Selamat Mencoba...

Read more: http://blessed4blessing.blogspot.com/2012/05/cara-membuat-live-radio-streaming-di.html#ixzz2MqtYymSa

Cara membuat efek membesar pada gambar di blog

OK...., bila anda berminat, silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.







4. Cari kode di bawah ini atau yang mirip dengan kode ini :


</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
#zoomimage div {
height:100px;
width:100px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;}

#zoomimage div:hover {
padding-top:0;
padding-left:0;
padding-top:0;
padding-right:0;

-webkit-transform:scale(3,3);
-moz-transform:scale(3,3);}

#zoomimage img {
border: 3px solid #D8D8D8;
border-style:double;
}
</style>
Catatan :
  • Anda bisa mengatur posisi gambar pada saat membesar, baik kearah kekiri, kekanan, dan kebawah. Anda tinggal mengganti nilai "0" pada kode - kode :
padding-top:0;
padding-left:0;
padding-top:0;
padding-right:0;

6. Simpan Template.

7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek membesar, silahkan ... itu terserah anda.

<center>
<div id="zoomimage">
<div class="hover"><a href="http://si-owner.blogspot.com" target="_blank"><img src="https://lh3.googleusercontent.com/-gjMAmm0g4qA/T9NKc8KgqtI/AAAAAAAAAA4/TfYen1Zi1FQ/s512/ROHMAN.jpg" width="100" height="100"/></a>
</div></div></center>
catatan :
- Ganti ULR blog dan ULR image dengan ULR milik anda.

Nah....Mudah kan...?
Silahkan anda coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat....

Cara pasang Iklan di dalam Postingan blog

Langkah memasang Script Iklan di (Kiri, kanan, atas, dan bawah) dalam postingan blog :

    Sebelumnya sobat siapkan terlebih dahulu Script Iklan yang hendak di pasang di blog.
    Setelah Script iklan sudah siap, Sobat kunjungi http://si-owner.blogspot.com/2012/05/parse-kode-html  yang berfungsi untuk memparse Script Iklan sobat.
    Setelah sobat klik parse, kode iklan akan berubah kemudian sobat copy / biarkan dulu script iklan tersebut yang nantinya akan digunakan.
    Kemudian sobat langsung masuk ke Blogger dengan akun sobat
    Masuk pada Rancangan >> Klik edit html >> exspand template widget
    Sobat Cari kode <data:posts.body/> , jika terdapat dua kode, sobat pilih yang kedua.
    Selanjutnya letakkan kode script di bawah ini sebelum kode <data:posts.body/>



*). Kode script untuk iklan di sisi kiri postingan :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>
<--Simpan Kode Iklan Disini--&gt;</div></b:if>




*). Kode script untuk iklan di sisi kanan postingan :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;width:300px;height:250px;padding:0 0px 0px 0;'>


<--Simpan Kode Iklan Disini--></div></b:if>



Keterangan :


Pada kode width:300px;height:250px ini, sobat bisa mengganti dengan ukuran yang lain.
Pada kode <--Simpan Kode Iklan Disini--> Sobat bisa ganti dengan kode script iklan yang sudah diparse tadi.


*). Untuk iklan di atas postingan letakkan script iklan yang sudah diparse tadi di atas kode <data:posts.body/>


*). Untuk iklan di bawah postingan letakkan script iklan yang sudah diparse tadi di bawah kode <data:posts.body/>




Jadinya seperti ini :


<div class='post-body entry-content'>
<data:post.body/>


<b:if cond='data:blog.pageType == "item"'>
<p> Kode iklan, banner, pesan atau apapun di pasang disini! </p>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Itulah sobat Tutorial untuk memasang Script Iklan di (Kiri, kanan, atas, dan bawah) dalam postingan blog. Semoga bermanfaat bagi sobat, dan jika sobat berkenan untuk memberikan kesan dan juga pesannya, bisa menulis di bawah ini

Meta Tag Otomatis di Setiap Halaman Blog

Pada dasarnya sebuah mesin pencari akan mengidentifikasi atau membaca konten sebuah blog atau website melalui Meta Tag entah Meta Deskripsi atau Keywords dan meta tag lainnya. Pada blog yang kita buat di Blogspot secara default belum memiliki meta deskripsi atau keywords melainkan hanya title saja contohnya seperti ini <title><data:blog.pageTitle/></title> meta tersebut hanya akan mengidentifikasi judul blog dan halamannya saja jadi menurut saya kurang memiliki kekuatan dalam masalah SEO. Sekarang silahkan cek punya anda caranya Masuk Ke Tata Letak >> Edit HTML dan lihat dibagian bawah area kode <head>  apakah sudah dirubah atau masih seperti diatas, jika tidak ada kemungkinan jika sudah dirubah akan seperti pada postingan yang ini namun ternyata itu saja masih kurang bagus jadi saya sarankan anda menggunakan Meta Tag Otomatis di setiap halaman anda.

Fungsi dari Meta tag yang akan saya posting ini yaitu akan memanggil secara otomatis setiap Judul postingan anda dan kemudian akan memasukkannya kedalam Deskripsi dan Keywords Blog anda. Jadi blog anda akan memiliki format seperti dibawah ini :

Sebelum dirubah :

Setelah Dirubah :

Nah untuk merubahnya dibawah ini caranya!
1. Masuk ke Rancangan / Tata Letak >> Edit HTML




2. Cari kode <title><data:blog.pageTitle/></title> letakknya dibawah area <head> 


3. Kemudian Hapus dan ganti dengan kode dibawah ini :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Ini meta otomatis halaman utama -->
<title><data:blog.title/></title>
<meta expr:content='data:blog.title + &quot; Sebuah blog yang menyediakan berbagai macam informasi.&quot;' name='description'/>
<meta expr:content='data:blog.title + &quot;, Komputer, Internet, News, Berita, Politik, Fasion, Ekonomi, Musik, Game, Olah Raga, Artis&quot;' name='keywords'/>
<b:else/>
<!-- Ini meta otomatis pada setiap halaman posting -->
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot;, Adalah sebuah artikel yang mungkin sedang anda cari.&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Komputer, Internet, News, Berita, Politik, Fasion, Ekonomi, Musik, Game, Olah Raga, Artis, Bola, Blogging, Bisnis dan Keuangan&quot;' name='keywords'/>
</b:if>
4. - Ubahlah teks warna Ungu sesuai dengan deskripsi dan keyword blog anda
    - Ubahlah teks warna Hijau sesuai dengan deskripsi dan keyword halaman posting blog anda
    - Jika bingung ganti terserah anda atau biarkan seperti itu saja. anda bisa mengubahnya kapan saja kalau sudah tidak bingung.,.,,hehehe.


4. Kemudian simpan

Definisi :
- <data:blog.title/> : Ini berfungsi untuk memanggil Judul Blog Anda
- <data:blog.pageName/> : Ini berfungsi untuk memanggil judul posting atau judul setiap halaman anda.

Ngomong-ngomong saya juga pake ini lho... sekiranya hanya itu yang bisa saya bagikan hari ini, semoga bermanfaat...!!! Semoga Sukses...!!!

cara menyembunyikan widged di blog

Adapun cara Menyembunyikan widget tertentu pada halaman posting dibawah ini :
1. Login dulu ke Account Blogspot.
2. Pilih Rancangan >>  Edit HTML,
3. Carilah kode ]]></b:skin>  kemudian letakkan kode berikut ini di bawah kode ]]></b:skin>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#HTML1,#Feed1,#Label1,#HTML9,#Followers1 {display:none;}
</style>
</b:if>
4. Rubahlah tulisan berwarna merah dengan ID widget yang mau disembunyikan pada halaman posting. perlu diketahui bahwa kode widget memiliki sifat yang unik!


 Adapun cara Menyembunyikan widget tertentu pada halaman utama
:

1. Login dulu ke Account Blogspot.
2. Pilih Rancangan >>  Edit HTML,
3. Carilah kode]]></b:skin>  kemudian letakkan kode berikut ini di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
#HTML1,#Feed1,#Label1,#HTML4,#HTML8,#HTML14 {display:none;}
</style>
</b:if>
4. Rubahlah tulisan berwarna merah dengan ID widget yang mau disembunyikan pada halaman posting. perlu diketahui bahwa kode widget memiliki sifat yang unik!

cara membuat css menu magig horizontal di blog

cara cara membuat css menu magig horizontal  :
Animated Tree1. Login dulu ke Account Blogspot.
2. Pilih Add Gadget,
3. HTML Java Script
    dan Copy kode dibawah ini



Cara Membuat Komentar Blogger Bisa di Buka Tutup

Langkah dan Cara Membuat Show Hide Komentar / Expand Collapse Blogger Comment Box

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak kemudian contreng tulisan Expand Widget Templates,dan cari kode berikut (Gunakan Ctrl+F):
</head>
Jika sobat sudah menemukannya,tepat diATASnya letakkan script berikut:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.co.cc/slide%20blogger%20comment.js' type='text/javascript'/>

Setelah itu,cari kode berikut:
]]></b:skin>
Jika sudah sobat ketemukan,tepat diATASnya letakkan barisan kode ini:
a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}
Setelah itu simpan template sobat.
Catatan:
Trik ini akan bekerja tentu jika sobat mengaktifkan komentar di blogger,baik dalam komentar posting maupun settingan secara universalnya.Selamat mencoba ya

Cara Membuat Menu Hidden di Blog

Pertama anda harus Login terlebih dahulu ke akun Bloger anda
Kemudian ke Rancangan -> Edit Html
kemudian cari kode ]]></b:skin>  salin kode berikut di bawah ini ...


Selanjutnya cari kode dan letakan kode dibawah ini danletakan diatasnya :

LALU SIMPAN TEMPLE ANDA

Cara Membuat Hidden Buku Tamu di Blog

1. Login ke Blogger
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

membuat link pop up

1. Login ke Blogger
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

<div style="overflow: auto; width: 350px; height: 100px; padding: 10px; border: 2px solid rgb(238, 238, 238);">
<form onsubmit="window.open('http://budakbungotv-media.blogspot.com/2011/08/bollywood24.html', 'popupwindow','scrollbars=no, width=500,height=450');return true">
<input value="bollywood24" type="submit" /></form>
<form onsubmit="window.open('http://budakbungotv-media.blogspot.com/2011/08/sound-musik-model-teasers.html', 'popupwindow','scrollbars=no, width=480,height=550');return true">
<input value="music barat" type="submit" /></form>
<ul>

</ul></div>

ket..
warna hijau silahkan ganti link nya
warna kuning untuk judul nya

Membuat Navigasi Dropdwon Menu Unik Style Kompas di blog


  cara Memasang Menu Navigasi Ala Kompas.com
  1. Login Ke blogger anda
  2. Masuk ke halaman Edit HTML dengan cara, Dari dashboard pilih Template --> Edit HTML --> Proses/lanjutkan
  3. Download Lengkap Template  blog terlebih dahulu untuk antisipasi kesalanan
  4. Sekarang Cari Kode ]]></b:skin> (Gunakan CTRL + F dan F3 untuk mempermudah pencarian)
  5. Setelah Ketemu Copas kode berikut dan letakan diatas kode ]]></b:skin>
  6.  .nav {
    height:35px;
    background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif) repeat-x;
    position:relative;
    font-family:arial, verdana, sans-serif;
    font-size:11px;
    width:100%;
    z-index:100;
    margin:0;
    padding:0;
    }
    .nav .table {
    display:table;
    margin:0 auto;
    }
    .nav .select,
    .nav .current {
    margin:0;
    padding:0;
    list-style:none;
    display:table-cell;
    white-space:nowrap;
    }
    .nav li {
    margin:0;
    padding:0;
    height:auto;
    float:left;
    }
    .nav .select a {
    display:block;
    height:35px;
    float:left;
    font-weight:bold;
    background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif);
    padding:0 30px 0 30px;
    text-decoration:none;
    line-height:35px;
    white-space:nowrap;
    color:#2b3238;
    }

    .nav .select a:hover,
    .nav .select li:hover a {
    background: url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif);
    padding:0 0 0 15px;
    cursor:pointer;
    color:#2b3238;
    }
    .nav .select a b{
    font-weight:bold;
    }
    .nav .select a:hover b,
    .nav .select li:hover a b {
    display:block;
    float:left;
    padding:0 30px 0 15px;
    background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif) right top;
    cursor:pointer;
    }
    .nav .select_sub {
    display:none;
    }
    /* IE6 only */
    .nav table {
    border-collapse:collapse;
    margin:-1px;
    font-size:1em;
    width:0;
    height:0;
    }
    .nav .sub {
    display:table;
    margin:0 auto;
    padding:0;
    list-style:none;
    }
    .nav .sub_active .current_sub a,
    .nav .sub_active a:hover {
    background:transparent;
    color:#2b3238;
    }
    .nav .select :hover .select_sub,
    .nav .current .show {
    display:block;
    position:absolute;
    width:100%;
    top:35px;
    background:url(http://1.bp.blogspot.com/-ha6EhdiZxBI/Ti1qXa6bmsI/AAAAAAAAE1c/A7NU-qQ_-Ls/s1600/back.gif);
    padding:0;
    z-index:100;
    left:0;
    text-align:center;
    }
    .nav .current .show {
    z-index:10;
    }
    .nav .select :hover .sub li a,
    .nav .current .show .sub li a {
    display:block;
    float:left;
    background:transparent;
    padding:0 10px 0 10px;
    margin:0;
    white-space:nowrap;
    border:0;
    color:#2b3238;
    }
    .nav .current .sub li.sub_show a {
    color:#2b3238;
    cursor:default;
    }
    .nav .select .sub li a {
    font-weight:normal;
    }
    .nav .select :hover .sub li a:hover,
    .nav .current .sub li a:hover {
    visibility:visible;
    color:#73a0d2;
    }
    <!--[if IE]>
    .nav ul {display:inline-block;}
    .nav ul {display:inline;}
    .nav ul li {float:left;}
    .nav {text-align:center;}
    .nav .select a:hover b,
    .nav .select li:hover a b {float:none;}
    <![endif]-->
  7. Jika sudah cari salah satu kode dibawah ini
  8. <div id='header-wrapper'>  
    .............
    </b:section>
        </div>

    Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

    <div class='header-outer'>
        ...............................
    </b:section>
        </div>
  9. Jika salah satu kode diatas sudah ketemu Copas kode berikut dan letakan disalah satu kode tersebut
  10. <div class="nav">
    <div class="table">
    <ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    </ul>
    </div>
    </li>
    </ul>
    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    </ul>
    </div>
    </li>
    </ul>

    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    </ul>
    </div>
    </li>
    </ul>

    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    </ul>
    </div>
    </li>
    </ul>
    </div>
    </div>
  11. Silahkan menu Navigasi Dropdown diisi sesuai dengan kebutuhan.
  12. Terakhir Klik Simpan Template dan lihat hasilnya
  13. Selesai
Demikian Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas.Selamat mencoba and Thanks !.

downloand temple blog full

di sini blogbudakbungo ingin berbagi temple blog yg pernah menjadi koleksi budakbungo,untuk blog budakbungo yg ada.temple blog budakbungo ini banyak nya -+ 1000 temple langsung saja di sedot dengan mengklik link downloand di bawah ini

DOWNLOAND

Cara Memasang Basmallah di Awal Postingan Blog

Baiklah kita langsung saja ke tutorial membuat bismillah di awal setiap postingan blog :   1.Masuk Ke Akun Blogger Anda Anda
  2.Pilih ke menu Template
  3.Kemudian klik Edit HTML
  4.Centang Expand Widget Template
  5.Kemudian cari kode   <data:post.body/>
  6.Lalu copas/copy paste script di bawah ini,Lalu letakan di bawah kode  <data:post.body/>




<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ุจ&#1616;ุณ&#1618;ู€ู€ู€ู€ู€ู€ู€ู€ู€ู€ู€ู€ู€ู€ู€ู€ู…&#1616; ุง๏ทฒ&#1616;ุงู„ุฑ&#1614;&#1617;ุญ&#1618;ู…&#1614;ู†&#1616; ุงุงุฑ&#1614;&#1617;ุญ&#1616;ูŠู…</span></span></span></div><br/>
 7.Simpan template !

Sekian tutorial untuk Cara Memasang Basmallah di Awal Postingan Blog dari saya.Semoga bisa bermanfaat bagi anda semua

Memasang Slide Carousel di Blogger

langsung saja cara membuatnya
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. kalian cari kode berikut :
]]></b:skin>
4. kalo udah ketemu, kalian ganti kode ]]></b:skin> dengan kode berikut:
 /*----------------------------------------------------
{--------}  carousel slider  {--------}
----------------------------------------------------*/
.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 920px;  /*sesuaikan dengan template*/
background:#000000;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 980px;
height: 155px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 2px;
width: 106px;
}

.stepcarousel .panel img{
float: left;
background:#666666;
margin: 0px;
padding:2px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#000000;
}

]]></b:skin>

<script src='http://sites.google.com/site/anchamanproject/CopyjQuery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anchamanproject/CopyStepCarouselViewer.js' type='text/javascript'/>
5. Klik Simpan deh.

Buat nambahin ke widgetnya. langkah-langkahnya :

1. Menu Dashboard, klik Tata Letak, klik Elemen Halaman.
2. Klik Tambah Gadget. Klik HTML/Javascript.
3. Copy Paste kode berikut :

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://sites.google.com/site/anchamanproject/Left-Arrow.png', 30, 60], rightnav: ['http://sites.google.com/site/anchamanproject/Right-Arrow.png', -65, 60]},statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- Ganti link dengan link kalian -->

<div class="panel">
<a href="URL-ANDA" title="TITLE"> <img src="URL-GAMBAR" width="100" height=" 148" title="TITLE"/></a>
</div>


<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/11/explodemon.html" title="explodemon"> <img src="http://4.bp.blogspot.com/-tejrv68DIDw/TrZ2RxOBycI/AAAAAAAAAg0/-DWPBXZT6EU/s400/t-expdmon.jpg" width="100" height=" 148" title="explodemon"/></a>
</div>

<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/10/pro-evolution-soccer-2012-reloaded.html" title="PES2012"> <img src="http://4.bp.blogspot.com/-jHOKtg3mdEs/TpgnFs9To7I/AAAAAAAAARk/sTYkh71FhHA/s400/2mOvk.jpg" width="100" height=" 148" title="PES2012"/></a>
</div>


<!-- copas code diatas untuk memperbanyak tampilan -->
</div>
</div>
 4. Klik Simpan.

nb:
  • widget ini biasanya dipasang di header.kalo susah pasang diheader.pasang atas posting aja,sesuaikan dengan lebar (width) template anda
  • untuk menghilangkan fungsi otomatis slider,autostep diganti jadi false,cth : autostep: {enable:false, moveby:1, pause:3000},
  • untuk ukuran gambar tampilan jg bs dirubah. pada gadget/widget sesuaikanlah width dan heigth.
  • selamat mencoba.trial n error ..............semoga bermanfaat. hehehehe

cara mambuat Menu Sliding Vertikal Dengan CSS

Menu Sliding Vertikal Dengan CSS. Langsung saja masuk ke pembahasan :

Langkah 1
Masuk ke akun Blogger anda
Langkah 2
Masuk Ke Menu Rancangan atau Design
Langkah 3
Masuk ke EDIT HTML
Langkah 4
Silahkan Copy Paste kode dibawah ini tepat diatas kode ]]></b:skin>
 
Langkah 5
Setelah anda selesai memasukkan kode diatas. Sekarang memasukkan kode dibawah ini dengan cara menambahkan Gadget HTML/JavaScript.

Langkah 6
Simpan template anda dan lihat hasilnya. Sekian terima kasih trik kali ini.

Cara Membuat Menu Vertikal di Blog

Cara memasang

1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript

2. Masukkan kode di bawah ini kedua nya.


Yang perlu sobat perhatikan antara lain;


1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.

2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu, hehe maklum super gaptek). Jika sobat mengisi dengan 6 Link, gak bakalan tampil semua.

3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post

4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.

5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A;

6. Selamat Mencoba.
Proudly powered by : Blogger
Copyright © 2013. Blog Budak Bungo - All Rights Reserved
Blog By : Vhen Part II
Template by blogbudakbungo.blogspot.com | Publish :budakbungo