Showing posts with label keren. Show all posts
Showing posts with label keren. Show all posts
Friday, December 30, 2016
Cara Membuat Menu Navigasi Keren Pada Blog
Cara Membuat Menu Navigasi Keren Pada Blog
Cara Membuat Menu Navigasi Keren Pada Blog adalah postingan mengedit blog Jona Rendra yang lain. Menu Navigasi atau menu horizontal merupakan widget yang sangat penting keberadaannya di dalam blog. Menu navigasi akan mempermudah pengunjung untuk menavigasi blog anda. Yang kali ini saya share adalah Menu Navigasi Tampilan Keren dan elegan. Terdapat kombinasi tombol Inset dan Outset membuat blog yang berisi menu ini kelihatan profesional.
Seperti yang anda lihat pada gambar diatas, begitulah desain dari menu horizontal yang akan saya berikan. Kalau dilihat dari gambarnya saja pasti kurang menarik, oleh karena itu, langsung saja pasang widgetnya di blog anda.
Cara Membuat Menu Navigasi Keren Pada Blog
1. Login ke blogger, pada dashboard pilih blog lalu masuk ke template
2. Klik Edit HTML dan letakkan CSS berikut ini di atas kode
]]></b:skin> atau </style>.jona-menu-wrap{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrlQn1bA41FrNxr7O-d3eEhd3SIMEAusNPTAGwFRoto5TonW9wxcrkV5X50Ooxw73AZAK-vzJO_op-0yIFTv4AymU-Vli0FCCDhX93U-K9KDd9vpixnaBXC46Bd29g0Cbq8H8yAtqtIg-0/s1600/menuku.png) repeat-x top;height:54px;width:100%;}
.jona-menu{font:normal 12px Arial;line-height:normal;width:960px;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0 auto;padding:0 auto}
.jona-menu ul{margin:0;padding:0}
.jona-menu li{list-style:none;color:#b69786;float:left;display:inline;position:relative;margin:0;padding:0}
.jona-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsFyKIpE-59AveyEvhIK9FF8lPaElozo9vH4-SAbFv25kiRKngRGNY62i4ENMHOIosj93cAvBstZRy_QOqgXj3Rkz8fncSwmau1Iuk7OqEy04PNZabo8TFP1q1ZUzXH0VH-aHxUxnSp7h/s1600/mnubg.png) repeat-x top;display:block;text-decoration:none;font-weight:700;color:#ccc;text-shadow:1px 1px 2px #111;outline:none;margin:10px 4px 8px;padding:8px 16px;border:1px solid #111}
.jona-menu li a:hover{background:#333;-moz-box-shadow: inset 2px 2px 2px #151515;-webkit-box-shadow: inset 2px 2px 2px #151515;box-shadow: inset 2px 2px 2px #151515;}
.jona-menu li ul{position:absolute;z-index:10;left:0;top:100%;height:30px;width:170px;display:none;margin:0;padding:0;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
.jona-menu li ul a{margin:0;font:12px Arial;background:#2c2c2c;border-left:none;border:none;display:block;padding:7px 10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
.jona-menu li ul a:hover{background:#1b1b1b;color:#fff}
.jona-menu li ul li{float:none;display:block;width:auto}
.jona-menu li ul ul{top:0;left:100%}
.jona-menu li a:hover,.menuku ul li a:hover{color:#eee}<div id=header> atau <header>4. Kalau sudah ketemu salah satu kode diatas, copy paste kode dibawah ini dan letakkan dibawah kode
<div id=header> atau <header><div class=jona-menu-wrap>
<div class=jona-menu>
<ul>
<li><a href=#>Home</a></li>
<li><a href=#>Site Map</a></li>
<li><a href=#>About Me</a></li>
<li><a href=#>Contact Us</a></li>
<li><a href=#>Link Exchange</a></li>
</ul>
</div>
</div>
- Jangan lupa mengganti kode # dengan URL menu yang dituju
- Jika ingin mengganti bagian tulisan pada menu, silahkan diubah
- Mau tahu lebih banyak tentang cara mengedit menu horizontal? baca di Panduan Mengedit Menu Horizontal
5. Setelah di kustomisasikan, baru terakhir klik Simpan Template.
Cara diatas adalah cara memasukkan menu dengan edit html. Sebenarnya ada cara lain. Yaitu dengan Tambah Gadget, HTML/Javascript. Tetapi, anda perlu lagi untuk menambah satu kolom dibawah header. Dan menggabungkan CSS diatas dengan kode HTML link menu nya. Kalau CSS, diapit dengan
<style>CSS</style> setelah itu baru HTML. Seperti yang telah dijelaskan pada Pengetian HTML dan CSS serta Tutorial pemakaiannya.Itulah artikel dari Jona Rendra yang berjudul Cara Membuat Menu Navigasi Keren Pada Blog, semoga dapat bermanfaat untuk anda. Apabila ada pertanyaan mengenai tutorial diatas, silahkan poskan melalui komentar.
Go to link Download
Thursday, December 29, 2016
Cara Membuat Label Keren Di Blog Dengan Efek CSS3
Cara Membuat Label Keren Di Blog Dengan Efek CSS3
Gimana sob, tertarik nggak ?!
Buat yang berminat, silahkan ikuti tutorial di bawah ini ya.
Cara Membuat Label Keren Di Blog Dengan Efek CSS3 :
1 . Log In Blogger
2 . Pilih Blog Yang Akan Di Edit
3 . Pergi Ke Template
4 . Klik Edit HTML
5 . Centang Expand Template Widget
6 . Cari Tulisan ]]></b:skin> ( Tekan Ctrl + F atau F3 Di Keyboard Untuk Mencari )
7 . Pasang Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>
/*--- KxMadagascar Custom Label With CSS3 --- */ .Label a{ padding-left:20px; background:#FFA500; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }
10 . Simpan11 . Sekarang,Pergi Ke Tata Letak
12 . Cari Label , Terus Klik Edit
13 . Sama-Kan Label sobat Dengan Gambar Di Sebelah.
14 . Simpan.
Catatan :
- Yang Hitam Tebal Di Klik
- Yang Merah Di Cari
- Yang Orange Kotak Label Pertama
- Yang Hijau Text Label Pertama
- Yang Biru Kotak Label Berubah Warna
- Yang Ungu Text Label Berubah Warna
Go to link Download
Cara Membuat Like Box FP Keren Melayang versi terbaru 2013
Cara Membuat Like Box FP Keren Melayang versi terbaru 2013
Selamat sore sahabat blogger semua !!! Kali ini, fahrurrozi18 akan berbagi tips tentang Cara membuat like box melayang versi terbaru 2013 yang pastinya simple dan keren abiss deh. Widget like box kali ini berbeda dengan widget like box seperti biasanya, karena widget ini tanpa dilengkapi dengan TimeOut / Batas waktu untuk tertutup otomatis. dan yang paling penting nih, cara pemasangannya tanpa mengedit HTML loh, hanya meng Copy dan Paste codenya lalu di letakkan di Widget. Daripada berlama-lama, langsung saja deh ke TKP... Cekidot :
1. Login ke akun blogger.com sobat
2. Pilih Tata letak.
3. Kemudian Add Gadget
4. Pilih html/javascript
5. Copy kode di bawah ini lalu pastekan ke kotak html/javascript tadi.
<style type=text/css>/* Message Box */#box-message {position:fixed !important;position:absolute; /* IE6 */top:-1000px;left:50%;margin:0px 0px 0px -182px;width:300px;height:auto;padding:16px;background:#f5f5f5;font:normal Dosis, Georgia, Serif;color:#111;border:2px solid #fff;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#box-message a.close {position:absolute;top:-10px;right:-10px;background:#f5f5f5;font:bold 16px Arial, Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#111;border:2px solid #fff;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:22px;cursor:pointer;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type=text/javascript>$(window).bind("load", function() {// Animate Top Value When Page Loaded Completed$(#box-message).animate({top:"50px"},1000);// Remove Mailbox When Close Button On Click$(a.close).click(function() {$(this).parent().fadeOut();return false;});});</script><div id=box-message><!-- HTML Start -->6. Save dan lihat hasilnya.
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/fahrurroziBLOG18&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=112462558775142"scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>
<!-- HTML End --><a class=close href=http://fahrurrozi18.blogspot.com>×</a></div>
Keterangan :
- Ganti kode yang berwarna Merah dengan URL sobat sendiri.
Nah... gimana sob, mudah banget kan ?
Semoga artikel ini bermanfaat dan Bye... bye... :)
Go to link Download
Tuesday, December 20, 2016
Cara Membuat Tulisan Judul Header Blog Keren
Cara Membuat Tulisan Judul Header Blog Keren
Oke Kali Ini Saya Akan Membuat Postingan Tentang Cara Membuat Tulisan Judul Header Blog Keren
Oke Langsung Saja Caranya
Sebelumnya Centang Dulu Expand Template Widget
1. Login Ke Blogger
2. Pilih Template
3. Pilih Edit Html
4. Pilih Lanjutkan
5. Masukkan Kode Beriku DiAtas Kode ]]></b:skin>
#Kaisartitle {6. Cari Kode <div id=header-wrapper>
font-family: Amarante, cursive;
margin: 18px 0px 0px 30px;
position: absolute;
color: #000;
font-size: 45px;
text-align: center;
text-shadow: 2px 0 0 red, -2px 0 2px red, 0 2px 2px red, 0 -2px 2px red, 2px 2px 5px red, 0 4px 1px red, 0 6px 1px red, 0 1px 1px #000000, 0 2px 1px #383838, 0 3px 1px #5E5E5E, 0 4px 1px #777777, 0 5px 1px red, 0 6px 1px red;
}
.Kaisartitle {
font-family: Amarante, cursive;
font-size: 16px;
position: absolute;
margin-top: 100px;
margin-left: 90px;
margin-bottom: 25px;
color: black;
font-weight: bold;
text-shadow: 2px 0 0 red, -2px 0 2px red, 0 2px 2px red, 0 -2px 2px red, 2px 2px 5px red, 0 4px 1px red, 0 6px 1px red, 0 1px 1px #000000, 0 2px 1px #383838, 0 3px 1px #5E5E5E, 0 4px 1px #777777, 0 5px 1px red, 0 6px 1px red;
text-align: center;
}
7. Masukkan Kode Berikut KeBawahnya
<div id=Kaisartitle>Judul Header Blog Kamu</div>9. Simpan Template
<div class=Kaisartitle>Description Blog Kamu</div>
NB : Gnti Kode Bewarna Merah Menjadi Text Kamu
Dan Gnti Juga Bordernya(Klau Mw)
Go to link Download
Monday, December 19, 2016
Cara Membuat Balon Pesan Hide To Tray Keren Dengan Delphi7 Terbaru 2016
Cara Membuat Balon Pesan Hide To Tray Keren Dengan Delphi7 Terbaru 2016
Selasa, 06 September 2016 - www.indoblog.me Mungkin Anda Sedang Mencari Tutorial Cara Membuat Balon Pesan Hide To Tray Keren Dengan Delphi7 Terbaru 2016 atau istilahnya adalah ballon message minimize to tray gitu saja, jadi dengan pesan balon ini maka aplikasi yang anda buat akan terlihat lebih cantik dan elegan dan contoh pesan ini bisa anda lihat contohnya pada akhir gambar artikel ini agar anda mudah memahaminya tentang tutorial ini.
Komponen yang digunakan pada tutorial kali ini adalah Businness Skin Form VCL yang dimana dengan komponen tersebut maka anda bisa membuat program delphi anda akan terlihat lebih cantik, elegan dan keren tentunya.
Baca Juga: Cara Membuat Program Enskripsi Deskripsi File Config Dengan Delphi 7
Dan untuk membuat ballon message keren hide to tray di windows ini anda membutuhkan komponen Businness Skin Form VCL yang bisa anda unduh gratis DISINI dan silahkan instal komponen tersebut pada bahasa program delphi anda, saya anggap anda bisa menginstal komponen baru tersebut kalau belum bisa instal instal komponen baru di delphi anda bisa cari tutorial lama kami pada label delphi saja atau via kolom pencarian kata kunci diatas saja karena sudah lama sering kami share tempo tahun tahun dulu, atau anda bisa lihat di dalam file tersebut didalamnya silahkan anda cari file "cara instal".
1. Pada tahap yang utama silahkan beralih ke palette Businness Skin Form VCL (dengan syarat anda telah menginstal komponen ini kalau belum pasti tidak akan ada pada default delphi anda) kemudian silahkan tambahkan "bsTrayIcon1" ke form lihat contoh gambar dibawah ini saja:
2. Yang kedua kemudian masih di "bsTrayIcon1" lalu silahkan beralih ke OBJECT INSPECTOR > EVENTS > ONDBCLICK contohnya bisa anda lihat pada gambar dibawah ini, kemudian masukan source code dibawah ini:
if Visible
then begin
Application.Minimize;
end
else begin
Show;
Application.Restore;
end;
3. yang ketiga kemudian silahkan beralih ke Form1 lalu silahkan masuk ke OBJECT INSPECTOR > EVENTS > ONHIDE contohnya bisa anda lihat pada gambar dibawah ini, kemudian silahkan masukan source code dibawah ini atau listing coding dibawah ini:
bsTrayIcon1.ShowBalloonHint(Businness Skin Form VCL Oleh "WWW.INDOBLOG.ME",
Minimize To Tray.. + #13 +
Click me if you want to show GUI,
bsbitInfo);
4. Pada point tiga diatas kata kata bisa anda ganti dengan sesuai selera anda saja, kemudian silahkan RUN atau tekan f9 kemudian setelah berhasil coba silahkan aplikasi yang baru saja anda buat klik minimize maka hasilnya akan sama seperti pada gambar dibawah ini, dan jika anda sering menggunakan mmd atau mmda contohnya karya soeb maka anda akan menemukan contoh ballon message seperti dibawah ini;
5. Yang terakhir silahkan anda implementasikan kembali pesan balon tersebut dan selamat berkreasi dan bagi anda yang membutuhkan contoh atau sample source code jadinya silahkan langsung saja ambil gratis DISINI dan untuk password rarnya silahkan copas lengkap URL Postingan atau artikel ini saja, thanks.
Lihat Juga: Cara Membuat Inject Sendiri Dengan Mudah dan Cepat Dengan Delphi XE10 Terbaru 2016
Ok Guys sangat simple bukan Tips Cara Membuat Balon Pesan Hide To Tray Keren Dengan Delphi7 Terbaru 2016 tersebut dan semoga tutorial pada kali ini masih bermanfaat untuk anda semuanya dan atas kunjungannya kami ucapkan terima kasih, wassalam.
Go to link Download
Saturday, December 17, 2016
Cara membuat status facebook jadi lebih keren
Cara membuat status facebook jadi lebih keren
Yaah,, Dah siang makan dulu ah... :)
Tapi Tenang saja ANdavas SiTe sebelum makan siang akan membagikan Trick update status biar keren lhooo..
Mau tahu... yuuk. cekidot,
Bagi sobat-sobat pengguna situs jejaring sosial FACEBOOK, pastinya sering pada update statuskan?? hahaha (termasuk gw) nih __==*ANdavas SiTe*==__ kali ini punya sedikit trik" agar status bisa jadi lebih keren (menurut gw sih).
Ok deh monggo silahkan langsung dicoba :)
Kalian Bisa Copykan ke sini Via di bawah ini, oke,..
__== * Update Status Via BlackBerry * ==__
__== * Update Status Via ANdroid *==__
__== * Update Status Via I phone * ==__
__== * Update Status Via I pad * ==__
__== * Update Status Via ANdroid *==__
__== * Update Status Via I phone * ==__
__== * Update Status Via I pad * ==__
Emoticon BlackBerry Aslii,.. Klik sini
Silahkan di Buka:
Sunday, December 11, 2016
Cara Membuat Tabel Keren di MS Word
Cara Membuat Tabel Keren di MS Word
Cara Membuat Tabel Keren di MS Word,- Table atau bahasa indonesianya tabel adalah sebuah kotak kolom yang saling menyatu sehingga membentuk sebuah kolom besar dengan beberapa bagian yang digunakan untuk memudahkan membagi kelompok tertentu. Sebuah tabel sangat bermanfaat, tidak hanya membagi sesuatu dengan mudah namun yang melihat akan pasti langsung tahu nama/bagian yang berada pada tabel tersebut.
Dalam membuat sebuah tabel sangatlah mudah, salah satunya adalah Microsoft Word yang dimana didalamnya sudah terdapat fitur membuat table. walaupun membuat tabel bisa dilakukan di microsoft excel. namun banyak orang yang lebih memilih word karena lebih gampang dibandingkan excel. walapun sangat mudah namun bagi pemula pasti kesulitan membuatnya, karena mungkin saja tidak tahu tempat fiturnya atau masih bingung dalam mengurangi atau menambah kolom. untuk itu disini saya akan memberikan tutorial dalam membuat tabel di MS Word. Berikut tutorialnya:
Cara Membuat Tabel Keren di Ms Word
Untuk membuat Tabel Ms Word sudah saya jelaskan pada postingan sebelumnya dan disini saya hanya akan memberikan tutorial bagaimana menambah dan mengurangi tabel serta mempercantik tampilan tabel. dan untuk Ms Word nya disini saya menggunakan Word 2007, namun cara ini juga bisa digunakan pada ms word selain 2007. Ok langsung aja.
1. Pertama silahkan Buat Tabelnya, untuk tutorialnya bisa dilihat Disini!
2. Kemudian untuk mengatur lebar kolom cukup mudah tinggal tepatkan kursor pada garis lalu geser dan atur lebar sesuai keingginan anda.
3. Biasanya permasalahan yang muncul ketika membuat tabel adalah tabel kurang atau bahkan lebih. untuk mengatasi masalah tersebut berikut penjelasanya:
- Untuk Menambah Kolom ke Samping Tinggal Block satu baris kebawah kolom dan klik kanan lalu pilih Insert - Insert Columns to the left jika ingin menambah ke kiri dan pilih Insert - Insert Columns to the right jika menambah ke kanan.
- Untuk Menambah Kolom ke Bawah atau atas caranya sama saja Tinggal Block kolom lalu klik kanan dan pilih menu Insert - Insert rows above jika ingin menambah keatas ke atas dan Pilih Insert - Insert rows below jika ingin menambah kebawah.
- Dan untuk menghapus kolom cukup mudah tinggal block kolom yang ingin dihapus lalu klik kanan dan pilih menu Delete Columns, atau juga bisa dengan cara letakan kursor di kolom talu klik kanan dan pilih Delete Cells, kemudian pilih Delete Entire Row (Jika menghapus baris yang diblock) atau Delete entire Colum (Jika menghapus kolom yang diblock).
Cara Mempercantik Tampilan Tabel
Biasanya tabel yang selesai dibuat akan mempunyai tampilan putih biasa dan untuk memberi warna sekaligus menjadikan tabel lebih keran bisa di ikuti cara dibawah ini.
- Silahkan Letakkan kursor di Kolom Kemudian pada menu tab atas silahkan pilih Design lalu pilih desain dan warna yang anda sukai. untuk lebih lengkapnya mengenai desain klik tanda arah bawah. (Perhatikan tanda panah dibawah ini).
Itulah Cara mudah membuat tabel serta menambah, mengurani dan mempercantik tabel di Ms Word, sekian tips yang dapat saya bagikan dan Semoga bermafaat.
Go to link Download
Monday, November 28, 2016
Cara Membuat Permalink Keren Pada Blog
Cara Membuat Permalink Keren Pada Blog
Cara Membuat Permalink Pada Blog - Selamat malam permisah, kali ini saya akan membuat postingan tentang bog. Perlu diketahui Permalink adalah istilah untuk link permanen pada suatu artikel di halaman posting yang di biasanya di letakan di akhir atau bawah postingan, fungsinya yaitu untuk meningkatkan SEO on Page di Blog.
Permalink yang ini sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasang foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag. Contohnya lihat di akhir postingan ini.
Ingin membuat permalink seperti ini? ok langsung saja lihat cara-caranya :
1. Masuk ke blogger
2. Klik Template > Edit HTML > Centang Expand Template Widget
3. Cari kode ]]></b:skin> ( gunakan ctrl + f )
4. Jika sudah ketemu copy kode ini tepat di atasnya.
.admin-tulisan{
width:auto;
background:#a3a3a3;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
width:auto;
background:#a3a3a3;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
5. Jika sudah, cari <data:post.body/> ( gunakan ctrl + f ) dan copy kode berikut tepat di bawahnya.
<!-- Permalink Tatelu -->
<b:if cond=data:blog.pageType == "item">
<div class=admin-tulisan>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Robockop Cyber Blog</h4>
<div class=kontainer>
<img alt=Robockop src=https://lh5.googleusercontent.com/-hwRKr6RbRZ0/AAAAAAAAAAI/AAAAAAAAAgs/oXoKEpE852Q/s250-c-k/photo.jpg/>
Sobat sedang membaca artikel tentang <b><a expr_href=data:post.url><data:post.title/></a></b>. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols=50 id=bloglinking name=bloglinking onclick=this.focus();this.select() onfocus=this.select() onmouseover=this.focus() readonly=readonly rows=1><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<p><span style=float:right;font:italic 10px Arial, Sans-Serif;>
<a href=http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html target=_blank>:: Get this widget ! ::</a></span></p>
<div style=clear:both;/>
</div>
</div>
</b:if>
<!-- Permalink Tatelu -->
<b:if cond=data:blog.pageType == "item">
<div class=admin-tulisan>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Robockop Cyber Blog</h4>
<div class=kontainer>
<img alt=Robockop src=https://lh5.googleusercontent.com/-hwRKr6RbRZ0/AAAAAAAAAAI/AAAAAAAAAgs/oXoKEpE852Q/s250-c-k/photo.jpg/>
Sobat sedang membaca artikel tentang <b><a expr_href=data:post.url><data:post.title/></a></b>. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols=50 id=bloglinking name=bloglinking onclick=this.focus();this.select() onfocus=this.select() onmouseover=this.focus() readonly=readonly rows=1><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<p><span style=float:right;font:italic 10px Arial, Sans-Serif;>
<a href=http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html target=_blank>:: Get this widget ! ::</a></span></p>
<div style=clear:both;/>
</div>
</div>
</b:if>
<!-- Permalink Tatelu -->
6. klik Simpan, dan selesai.
Note*
Untuk <data:post.body/> jika blog kalian memakai fungsi Read More, maka Anda harus mencari <data:post.body/> yang ke 2.
Untuk kode yang berwarna :
Merah > Bisa diganti dengan url/alamat gambar Anda.
Biru > Bisa diganti sesuai keinginan Anda.
Go to link Download
Friday, November 25, 2016
Cara Membuat Widget Music Player Keren Update
Cara Membuat Widget Music Player Keren Update
Tutorial Install nya sama kayak postingan yang lalu yaitu PES 2011 for Android. Check this Out...
Go to link Download
Thursday, November 17, 2016
Cara Membuat Recent Post Keren Horizontal
Cara Membuat Recent Post Keren Horizontal
Dengan Memasang Recent Post atau Artikel Terbaru yang Berkaitan dengan Artikel yang Sedang Di Baca Oleh Pengunjung Membuat Pengunjung akan Penasaran Dengan Blog Anda . Karena Semua yang Pengunjung Cari Berada di Blog Anda Sendiri . Memasang Artikel Terbaru atau Recent Post di Blog sangat Berguna Untuk Membuat Pengunjung Nyaman dan Betah Berlama - Lama di Blog. Recent Post ini Juga Ada Fitur dengan Thumbnail Jadi Pengunjung Akan Merasa Penasaran dengan Artikel yang Dia Lihat Tersebut . Cukup Sampai di sini Penjelasan Tentang Recent Post atau Yang Biasa Kita Sebut Dengan Artikel Terbaru di Blog ini.
Semoga Dengan Tutorial Membuat Cara Membuat Recent Post Keren Horizontal ini Bermanfaat Buat Blog Anda Termasuk Pengunjung Anda Sendiri.
Langkahnya Sebagai Berikut.
Langkahnya Sebagai Berikut.
1. Login Ke Akun Blogger Anda Sendiri.
2. Masuk Ke Menu Tata Letak Blogger
3. Klik Tambah Gadget > Klik Tambah HTML/Javascript
4. Setelah itu Copy Kode dibawah dan Pastekan.
<center><script type=text/javascript>5. Terakhir Klik Simpan
imgr = new Array();
imgr[0] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[1] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[2] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[3] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[4] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[5] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[6] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[7] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[8] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[9] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
showRandomImg = true;
tablewidth = 900;
cellspacing = 2;
borderColor = "#eeeeee";
bgTD = "transparant";
imgwidth = 110;
imgheight = 100;
fntsize = 12;
acolor = "Black";
ahover = "#444444";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 10;
summaryColor = "gray";
icon2 = " ";
numposts = 5;
home_page = "http://bocahporis.blogspot.com/";
</script>
<script src="https://sites.google.com/site/kukuhcdh/home/javascript/recentposts_horizontal_title_below_no.js" type="text/javascript"> </script></center>
Langkah Terakhir Sekarang Anda Tinggal Mengecek Hasilnya Pada Blog Anda .
Go to link Download
Wednesday, November 16, 2016
Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren
Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren
Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Widget daftar isi merupakan salah satu yang tidak boleh ditinggalkan. Karena, site map atau daftar isi dapat menginformasikan kepada pengunjung apa apa saja yang di posting oleh blog tersebut. Ya, sebab daftar isi menampilkan semua artikel secara kesluruhan. Tapi ada juga daftar isi yang hanya menampilkan beberapa artikel. Contohnya widget daftar isi berdasarkan satu label.
Widget daftar isi kini sudah banyak di share oleh para blogger. Jenisnya pun juga sudah banyak. Ada yang diurut berdasarkan tanggal, ada yang menurut abjad, widget daftar isi berdasarkan label, dan ada juga widget daftar isi tampilan tab yang keren. Kali ini saya akan bahas lebih lanjut mengenai Widget Daftar Isi Tampilan Tab yang Keren.
Seperti gambar di atas lah tampilan widget ini. Dikiri terdapat Tab Tab yang menampilkan label dari blog, dan di kanan menampilkan judul posting. Keunggulan dari tab ini, pengunjung dapat memilih kategori posting mana yang ingin dia lihat. Jika diklik, tanpa loading di kiri widget sudah muncul judul posting pada label yang dipilih.
Bagus kan? Lihat live demo nya di Site Map blog saya ini. Pada daftar isi, juga sudah saya tambahkan CSS berwarna biru. Supaya kelihatan nyambung dengan tema warna blog Jona Rendra ini yang juga biru. Mau pasang widget daftar isi tampilan tab yang keren ini? Baca selengkapnya artikel ini.
Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren
1. Login ke blogger
2. Pada dashboard, pilih blog anda lalu masuk ke menu Entri
3. Klik Buat Entri, setelah itu masuk ke edit entri mode HTML (caranya klik saja tulisan HTML yang ada disamping Compose)
4. Copy kode dibawah ini, lalu paste tepat di bagian HTML entri tersebut.
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#EBEBEC;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#000;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Tahoma,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#000;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#D8D8D8;
color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#676767;
color:white;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:white;
border-left:5px solid #676767;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#000;
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#D2D2D2;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #5C5C5C;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#999;
color:none;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#4D4F4D;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color:#333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://jonarendra.blogspot.com/",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: true,
monthNames: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true,
maxResults: 99999,
preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script> </div>
5. Sekarang tinggal di kustomisasikan sendiri dengan mengganti url berwarna biru dengan alamat blog anda.
6. Terakhir klik Publikasikan dan selesai. Coba buka halaman daftar isi yang telah anda pasang tadi. Sudah muncul kan?
Ups, kode diatas ternyata kode dengan widget daftar isi tema berwarna putih abu abu. Widget daftar isi style biru kodenya seperti ini
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#8A94F0;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#000;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Tahoma,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#000;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#C4C9F8;
color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#181D67;
color:white;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:white;
border-left:5px solid #181D67;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#051466;
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#999;
color:none;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#224C19;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color:#333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://jonarendra.blogspot.com/",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: true,
monthNames: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true,
maxResults: 99999,
preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script> </div>
Jangan lupa ganti url berwarna biru dengan url blog anda
Akhirnya selesai sudah Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Jadi, saya sudah berikan 2 tema warna daftar isi diatas. Tinggal pilih saja widget mana yang kelihatannya cocok dengan blog anda.
Widget ini memang sebaiknya di pasang di postingan. Ini dikarenakan cukup besar. Kalau dipasang di sidebar akan kurang menarik. Tetapi jika anda butuh widget yang dipasang di sidebar, mungkin Widget Daftar Isi Berdasarkan Satu Label akan cocok.
Merasa terlalu lebih banyak CSS yang ada pada widget ini? Mau yang polos? Widget Daftar Isi Berdasarkan Label Tampilan Ringan lah yang tepat. Itulah keseluruhan artikel Jona Rendra yang berjudul Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren, semoga dapat berguna untuk menghias blog anda. Biasanya postingan daftar isi itu diletakkan sebagai menu di menu horizontal. Seperti blog ini.
Jika ada kesulitan saat mengerjakan langkah langkah diatas, widget tidak muncul atau sebagainya, silahkan tanyakan lewat komentar.
Go to link Download
Subscribe to:
Posts (Atom)