Navbar Bawah
Selasa, 07 Juni 2016
Cara membuat open new tab semua link di blog
M
embuka halaman baru atau new tab dimana setiap pengunjung mengklik link tertaut adalah suatu keuntungan buat halaman blog. Mungkin masih ada teman teman kita yang berpikir apa keuntungan dari sistem open new tab ini. Saya akan menerangkan buat teman teman bloger yang masih baru didunia bloging bagi teman teman yang sudah senior saya ijinkan saya menjelaskan hal tersebut.. he..he...heee.... !!!
Bila pengunjung membuka halaman blog anda dan membaca semua artikelnya dan didalam artikel tersebut ada beberapa link yang menuju suatu artikel postingan yang bersangkutan dengan artikel postingan tersebut, pengunjung blog anda akan membuka dan menuju link tersebut, satu dan dua link akan di kunjungi dan secara otomatis setiap link di buka maka halaman blog tersebut akan terbuka pada tab baru, kemungkinan, tab yang pertama dibuka yaitu artikel yang pertama dibaca masih belum ditutup sementara waktu berjalan sampai tiba saatnya sipengunjung menutup sekaligus window browsingnya. Sejak awal sampai akhir ditutupnya window browsing tersebut berarti sudah memakan waktu beberapa menit, apalagi artikel yang telah anda posting pada halaman blog anda lumayan panjang, pasti akan memakan waktu singgah yang lumayan lama. Keuntungan yang anda raih adalah lamanya waktu halaman blog anda terbuka pada saat itu, hal ini sangat menunjang kinerja URL blog anda pada halaman search engine, dimana penghitungan tingkat nilai SEO pada suatu halaman dimana halaman blog tersebut mempunyai jam tayang yang lama akan mempengaruhi nilai SERP blog itu sendiri, jadi coba anda bayangkan bila setiap pengunjung yang berkunjung rata rata meluangkan waktunya 5menit saja , saya rasa blog anda akan mempunyai nilai SERP yang bagus. Saya anggap teman teman sudah lebih mahir tentang ini dari pada saya, dari pada cerita lama lama dan makin bosan langsung saja menuju TKP.
Tutorial
- Login to blog
- Pilih " Template " lalu klik " Edit HTML "
- Cari kode <head>
- Setelah ketemu dengan kode tersebut, copy kode dibawah ini lalu pastekan dibawah kode <head>
<base target='_blank' /> - Setelah selesai save template anda, dan lihat hasilnya.
Kesimpulan
Sistem ini akan memperbanyak review halaman blog dan memperbanyak waktu kunjungan halaman blog anda. Hal inilah yang menjadi suatu alasan pentingnya sistem ini buat para bloger mania. Saya mengucapkan terimakasih buat teman teman bloger dan juga para member BLOG DESIGN yang saya hormati atas dukungan dan waktunya yang telah diberikan untuk berkunjung ke blog yang sederhana ini.
salam bloger,
salam BLOG DESIGN
By : Admin.
salam BLOG DESIGN
By : Admin.
Random post dengan gambar valid html5
Widget random post dengan gambar ini mempunyai script yang memang ringan walaupun script widget random post ini mampun untuk menampilkan Judul postingan, dan gambar bahkan menampilkan beberapa kata dari artikel yang telah diposting. Pada postingan saya dihari hari yang lewat, saya telah membuat suatu artikel yang berisi Script widget random post yang tidak menampilkan gambar. Tulisan saya kali ini terinspirasi dari dorongan beberapa teman yang mengatakan untuk sekalian gambar untuk widget ini ditampilkan. Widget ini SEO Friendly dan Valid HTML 5 dan CSS 3 kenapa saya katakan demikian, sebab script widget ini menganut penulisan tag tag yang dianjurkan oleh prinsip SEO dan Valid HTML 5. Disamping hal tersebut widget ini mempunyai script yang memang benar benar mempunyai loading yang ringan dan tidak akan mempengaruhi loading blog anda. Tampilan yang benar benar mempunyai design yang menarik akan menambahkan kesan menarik juga pada halaman blog kesayangan anda. Widget random post dengan gambar ini saya namakan dengan " Widget Beautiful Avatar Random Post ". Oke tanpa penjelasan yang lebihpanjang lagi dan saya harap anda sudah memahami temtang kegunaan dari script random post dengan gambar ini kini saatnya kita menuju TKP dan silahkan anda simak penjelasan tutorial berikut.
Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
Install Program Tag HTML
Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;
- Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
- Silahkan klik "Add Gadget "( Tambahkan gadget )
- Pilih " HTML / JavaScript "
- Copy Code HTML dibawah ini, paste pada gadget anda.
Keterangan Gambar
- Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
- Code warna Biru jumlah kosa kata yang akan ditampilkan
- Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.
Kesimpulan
Widget Random Post ini dilengkapi dengan gambar yang secara otomaits ditampilkan bila artikel tersebut memiliki suatu gambar dan akan menampilkan gambar pengganti bila artikel tersebut tidak memiliki gambar. Widget Random Post image ini SEO Friendly dan Valid HTML 5 Serta Fast loading script, Cocok untuk widget random post halaman blog kesayangan anda.
Widget random post seo friendly html5
Random post adalah suatu artikel postingan yang dipilih secara acak untuk ditampilkan pada halaman. Pemakaian random post ini pada halaman sangat berguna mengingat sudah banyaknya artikel yang telah lama diposting pada blog agar ditampilkan kembali pada halaman blog apabila pengunjung berkunjung keblog kita. Coba anda pikirkan apabila anda sudah memiliki 300 artikel postingan pasti yang pertama kali diposting reviewnya tentu sudah sedikit itupun hanya mengandalkan suatu keybord pada search engine agar pengunjung mengetahuinya, Tapi pada widget Random Post ini hal itu dapat diatasi. Pada kinerjanya widget Random Post ini akan menampilkan secara acak semua aritek postingan yang telah terpublish pada blog walaupun itu artikel pertama yang pernah kita posting. Keuntungan memakai widget Random Post ini bila seseorang mengunjungi halaman blog anda secara otomatis artikel yang lain akan dimunculkan oleh widget ini dan pengunjung blog andapun tau bahwa masih adalagi artikel lain yang telah diposting dihari hari yang lewat tanpa harus membuka suatu menu. Saya rasa penjelasan diatas sudah bisa anda pahami tentang kegunaan dari widget ini. untuk mewujudkan misi kita, silahkan anda simak penjelasan pemasangan tutorial widget Random Post ini :
Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
Install Program Tag HTML
Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;
- Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
- Silahkan klik "Add Gadget "( Tambahkan gadget )
- Pilih " HTML / JavaScript "
- Copy Code HTML dibawah ini, paste pada gadget anda.
Keterangan Gambar
- Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
- Code warna Biru batas minimal dan maximal artikel yang dapat dijangkau widget Random Post ini
- Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.
Kesimpulan
Widget Random Post ini SEO Friendly dan Valid HTML 5 jadi anda dapat memasang widget ini pada template HTML 5 begitu juga dengan Template Responsive dan yang paling menarik script yang digunakan sangat ringan dan tidak akan memperlambat Loading halaman blog kesayangan anda.
Widget Random Post ini SEO Friendly dan Valid HTML 5 jadi anda dapat memasang widget ini pada template HTML 5 begitu juga dengan Template Responsive dan yang paling menarik script yang digunakan sangat ringan dan tidak akan memperlambat Loading halaman blog kesayangan anda.
Cara membuat tool parse kode html diblog
Tool parse kode html atau aplikasi konversi kode html adalah suatu sistem konversi atau penggantian kode html tertentu yang tidak dapat dipublish oleh aplikasi tag tag html pada halaman blog atau situs web. Kegunaan konveksi kode html ini sering dipergunakan kebanyakan untuk berkomentar dengan memuat tag tag html yang dalam devaultnya tag html tersebut tidak dapat dipublish pada kotak komentar halaman blog. Pada halaman blog yang membidangi tutorial hal ini sangat perlu dimiliki, dengan alasan apabila seorang komentator mau memuat suatu code tag html pada komentar untuk mengkomentari tutorial yang diposting maka sang komentator akan memerlukan suatu aplikasi untuk mengkonversi code tag html tersebut untuk dapat dipublish pada form komentar. Ada juga yang mempergunakan aplikasi konversi tag html ini untuk berbagai keperluan untuk mengganti semua kode tag yang memang pada dasarnya kode tag html tersebut tidak diterima oleh beberapa aplikasi halaman blog.
Pada tutorial kali ini saya akan membantu anda untuk mengantisipasi hal tersebut. Aplikasi ini saya buat menggunakan software Macromadia Dreamweaver 8 dan memiliki script yang ringan serta Valid HTML 5 dan CSS 3 jadi sangat cocok untuk template yang berbasih HTML 5, Script ini juga SEO Friendly dengan menganut pengcodean script yang mempunyai standart SEO. Aplikasi Konveksi HTML ini saya berinama " Black Parse HTML ". Buat para teman teman bloger menginstalasi script ini tergolong mudah pada halaman blog kesayangan anda.
Kode standart yang dapat dikonversi
- Code [ & ] menjadi [ & ]
- Code [ < ] menjadi [ < ]
- Code [ > ] menjadi [ > ]
- Code [ " ] menjadi [ " ]
- Code [ ± ] menjadi [ ± ]
- Code [ © ] menjadi [ © ]
- Code [ ® ] menjadi [ ® ]
Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
Install Program Tag HTML
Untuk menempatkan script dan kode tag ini ada baiknya anda tempatkan pada satu halaman blog anda, atau bisa saja pada widget, tergantung selera anda.
Tutorial pemasangan pada halaman blog
- Setelah anda login ke dasbor blog anda silahkan pilih " LAMAN "
- Kemudian klik " LAMAN BARU "
- Pilih " LAMAN KOSONG "
- Setelah berada pada halaman kosong pilih " HTML " bukan " COMPOSE "
- Copy script dibawah lalu pastekan pada halaman kosong " HTML "
- Kemudian buat judul halaman dan simpan halaman anda.
Tutorial pemasangan pada widget blog
- Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
- Silahkan klik "Add Gadget "( Tambahkan gadget )
- Pilih " HTML / JavaScript "
- Copy Code script/html dibawah ini, paste pada gadget anda.
- Untuk memaksimalkan ukuran sesuai dengan halaman anda silahkan edit code [ cols="50" rows="15" ] sesuai dengan ukuran widget pada halaman anda.
Pengoperasian Aplikasi
- Ketikkan atau pastekan kode html anda pada form textarea
- Kemudian Klik " KONVERSIKAN "
- Copy code anda yang sudah Di Konversi.
- Bila anda merasa belum sempurna silahkan ulagi dan klik " BERSIHKAN " untuk membersihkan textarea bekas kode yang telah dibuat.
Kesimpulan
Aplikasi konversi kode html ini dapat anda pergunakan untuk berbagai keperluan dalam hal menangani konversi kode html. Script yang dimiliki aplikasi ini ringan dan SEO friendly serta Valid HTML 5 dan CSS 3.
Aplikasi konversi kode html ini dapat anda pergunakan untuk berbagai keperluan dalam hal menangani konversi kode html. Script yang dimiliki aplikasi ini ringan dan SEO friendly serta Valid HTML 5 dan CSS 3.
Cara Membuat Pesan Komentar Di Blogspot
Pesan komentar sangat diperlukan sebagai peraturan kepada pengunjung untuk lebih menjaga tatakrama memberikan suatu komentar pada artikel yang akan dikomentari atau istilah dalam bloging adalah komentar SPAM. Bagi pengguna blog yang masih baru dalam dunia bloging hal ini dapat dengan mudah dilakukan tanpa mengedit html template blog yang berlebihan. Untuk mewujudkan misi ini anda harus lebih dulu membuat pesan untuk komentar anda. Silahkan simak tutorial dibawah ini :
Tutorial
- Login to Blog
- Pilih " Setelan " kemudian klik " Pos dan Komentar "
- Pada halaman tersebut lihat tulisan " Pesan Formulir Komentar " dan silahkan tambahkan pesan anda. setelah selesai klik " simpan setelan " yang ada disebelah kanan atas. Sekarang pesan komentar halaman anda sudah tersedia kini saatnya kita untuk memodifkasinya atau memberikan sentuhan CSS yang tentunya Valid HTML5 & CSS 3 agar lebih sensasional..
- Sekarang kita masuk ke template ,Silahkan pilih " Template " kemudian klik " Edit HTML " lalu cari code <p><data:blogCommentMessage/></p>. Setelah ketemu silahkan anda ganti dengan code<div id='pesan-comment'><data:blogCommentMessage/></div>Note : Biasanya code tersebut ada 4 code yang sama pada template blogspot, silahkan ganti keempat code tersebut dengan code diatas.
- Setelah anda ganti codenya silahkan cari code ]]></b:skin>
- Setelah ketemu tanbahkan code yang ada dibawah ini tepat keatas code ]]></b:skin> yang anda cari tadi, lalu simpan template anda. Lihat pesan komentar dibawah postingan ini sebagai DEMOnya.
#pesan-comment {
position : relative;
background : #E4E6E7;
width : 95%;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #5F676B solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
}
#pesan-comment::after, #pesan-comment::before {
top : 100%;
border : transparent solid;
content : " ";
height : 0;
width : 0;
position : absolute;
}
#pesan-comment::before {
border-top-color : #5F676B;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#pesan-comment::after {
border-top-color : #E4E6E7;
border-width : 9px;
left : 10%;
margin-left : -30px;
}
position : relative;
background : #E4E6E7;
width : 95%;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #5F676B solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
}
#pesan-comment::after, #pesan-comment::before {
top : 100%;
border : transparent solid;
content : " ";
height : 0;
width : 0;
position : absolute;
}
#pesan-comment::before {
border-top-color : #5F676B;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#pesan-comment::after {
border-top-color : #E4E6E7;
border-width : 9px;
left : 10%;
margin-left : -30px;
}
Note : Silahkan anda design ulang warnanya agar lebih serasi dengan warna template anda. Bila ada penjelasan diatas yang kurang begitu jelas buat anda silahkan share dengan berkomentar di form komentar dibawah.
Bila anda mengalami masalah pada pemasangan pesan komentar ini silahkan kunjungi link dibawah ini untuk melihat solusinya :
Pesan komentar yang selalu melorot kebawah kotak form komentar
Masalah ini diakibatkan oleh kurangnya beberapa code pada script dan html comment halaman blog, untuk mengatasi hal ini anda perlu manambahkan kode ke tubuh blog anda, silahkan simak penjelasan dibawah ini.
Masalah ini diakibatkan oleh kurangnya beberapa code pada script dan html comment halaman blog, untuk mengatasi hal ini anda perlu manambahkan kode ke tubuh blog anda, silahkan simak penjelasan dibawah ini.
Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari kode dibawah ini.
- Setelah ketemu, coba perhatikan kode tersebut , silahkan hapus kodenya dari kode tulisan warna MERAH atas sampai kode tulisan warna MERAH yang dibawah.
- Kemudian ganti dengan kode html yang ada dibawah ini.
- Setelah anda ganti kodenya saatnya kita poles sedikit lagi scriptnya untuk lebih maximal.
- Cari kode tag dibawah ini pada template anda
Biasanya kode tersebut ada pada script komentar ,document.getElementById(domId).insertBefore(replybox, null); - ganti kode script yang diatas menjadi kode script dibawah ini.
document.getElementById(domId).insertBefore
(document.getElementById('bdform-wrapper'), null); - Setelah selesai saatnya anda klik SAVE untuik menyimpan perubahan.
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='bdform-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='bdform-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
Keterangan Code
- Tulisan kode warna MERAH atas sampai kode warnaMERAH dibawah harus secara keseluruhan anda hapus kemudian masukkan kode pengganti lihat didalam spoiler " Kode Yang Diganti ")
- Cari kode warna HIJAU seperti diatas, setelah ketemu ganti dengan code warnaBIRU. Biasanya kode ini berada pada tag html blog
Cara Membuat Huruf Drop Cap Pada Awal Artikel
utorial cara membuat huruf dropcap ini pada dasarnya sudah banyak sekali yang menshare, namun tanpa berkecil hati saya akan tetap mempublish tutorial yg satu ini yakni tentang tata cara membuat huruf dropcap. Huruf besar tersendiri yang biasanya terletak diawal kalimat, atau mungkin anda lebih sering melihatnya dalam sebuah artikel majalah dimana huruf awal selalu tercetak lebih besar dari default atau bawaan huruf penulisan.
Jika sobat sudah sering membuka- buka banyak artikel dalam blog ini saya yakin anda akan menjumpai tiga jenis huruf dropcap yang berbeda dalam setiap postingnya, di mana bentuk- bentuk huruf drop cap yang ada tersebut kurang lebih terlihat seperti ini:
Nah, jika sobat tertarik.untuk menerapkan salah satu huruf dropcap seperti yang terlihat di atas kedalam setiap halaman artikel sobat, maka silahkan ikuti tata cara pembuatannya. Saya akan coba merinci satu persatu tentang cara pembuatannya. Oya, sebelumnya ke, 3 jenis huruf dropcap ini kita namai dulu supaya mudah di ingat.
Yang pertama huruf dropcap Simple, yang kedua, dropcap Square, dan yang terakhir huruf dropcap Fancy
Ok, sekarang langsung saja akses ke dalam halaman dasbor blog sahabat, lalu pilih "Template" kemudian pilih " edit html " dan sekarang kita lanjut pada cara membuat ke 3 jenis huruf dropcap tersebut.
Cara membuat huruf dropcaps
Dalam halaman edit html silahkan cari kode yang mirip seperti ini ]]></b:skin> jika sudah menemukannya, selanjutnya copy dan pastekan kode berikut ini tepat di bawah kode ]]></b:skin>
/* DROPCAPS
----------------------------*/
.dropcapsimple, .dropcapsquare, .dropcapfancy {
float:left;
overflow:hidden;
text-align:center;
}
.dropcapsimple {
font-size:34px;
height:34px;
line-height:38px;
width:30px;
text-align:left;
}
.dropcapsquare {
font-size:28px;
height:38px;
line-height:38px;
width:38px;
margin-right:7px;
color:#fefefe;
background:#111;
text-shadow:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.dropcapfancy {
font-size:26px;
height:40px;
line-height:40px;
width:40px;
margin-right:7px;
color:#fefefe;
text-shadow:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0750YdXHEPFp4vCL5ZBZgVK0i_EFWoN1b_y8-9YGTpr_lEFvxFt-QJvpuzOPgdESF6hzEuRZv1_oeihtWVFHQEa1UOacQh_kIlvGMkYC4JO9KXScXhGr93sZ-x138-aSD7Y3xqkop5k/s1600/bk_dropcap3.png) 0 0 no-repeat !important;
}
Simpan template, done!
Nah, untuk memunculkan huruf dropcap tersebut kedalam setiap postingan baru, langkah selanjutnya adalah klik "Pengaturan" lalu pilih "Post dan Komentar" copy dan pastekan kode html berikut kedalam kotak "Template Entri"
<span class="dropcapsimple">Huruf awal Anda</span>
Untuk merubah tampilan huruf Dropcap Anda hanya perlu mengganti tulisan dropcapsimple yang tercetak tebal dan berwarna merah tersebut dengan kata berikut ini : "dropcapfancy" untuk dropcap Fancy, "dropcapsquare" untuk Dropcap Square. Buka postingan baru untuk memunculkannya kemudian ubahlah mode penulisan menjadi mode "HTML" dan ganti tulisan "Huruf awal Anda" dengan awal huruf postingan.
Senin, 06 Juni 2016
Cara Membuat Pesan Popup Atau Jendela Munculan Terbuka Secara Otomatis
emberitahuan atau pesan singkat bisa anda tampilkan dalam sebuah laman tertentu dan tujuannya adalah untuk memberitahukan sebuah materi yang anda ingin sampaikan ketika pengunjung tiba dan membaca artikel anda. Entah itu berupa kotak pemberitahuan Download e-book, sosial media, seperti fan page facebook anda, Google follower dan lain sebagainya sesuai keinginan anda.
Singkatnya apapun itu bentuk pemberitahuannya yang ingin anda sampaikan kepada para pengunjung web anda, maka bisa anda lakukan dengan menggunakan pemberitahuan popup window ini. Dan cara membuatnya sendiri adalah sebagai berikut:
- 'Masuk' kedalam dasbor blog
- Pilih 'Template',
- Pilih 'Edit HTML'
- Lalu cari kode <body> (Gunakan pencarian cepat dengan menekan tombol Ctrl + F)
Untuk mencegah terjadinya error saat melakukan pengeditan kode template, ada baiknya anda membuat berkas cadangan kode template anda.
- Simpan kode script berikut ini tepat di bawah kode <body>
<script type='text/javascript'>Catatan: Ganti URL berwarna merah dengan URL anda sendiri.
var popurls=new Array()
popurls[0]='http://www.maslukis.com/'
function openpopup(popurl) { var winpops=window.open(popurl,'','width=,height=,toolbar,location,status,scrollbars,menubar,resizable') }
openpopup(popurls[Math.floor(Math.random()* (popurls.length))])
</script>
- Terakhir pilih 'Save' dan selesai.
Cara membuat "Alert message" atau Pesan saat membuka/menutup blog
Pada postingan artikel artikel saya kali ini, yaitu bagaimana cara memasang pesan tertentu muncul saat kita membuka atau menutup halaman blog. Bagi teman-teman dan master blogger yang sudah mengerti tidak perlu meneruskan karena walau scriptnya berbeda namun konsepnya saya yakin sama persis.
1. Login pada blog anda terlebih dahulu
2. Masuk pada menu rancangan dan pilih menu edit HTML
3. Silahkan cari script berikut <head> dan letakkan script dibawah ini dan letakkan dibawah code yang tadi.
<script language='JavaScript'>alert("Masukkan pesan anda disini..!!");</script>
4. Lalu SIMPAN dan lihat hasilnya.
Muncul saat menutup blog
1. Login pada blog anda terlebih dahulu
2. Masuk pada menu rancangan dan pilih menu edit HTML
3. Silahkan cari script berikut <head> dan letakkan script dibawah ini dan letakkan dibawah code yang tadi.
<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Masukkan pesan anda disini..!!');
}
parent.window.onunload=goodbye;
</script>
4. Lalu SIMPAN dan lihat hasilnya.
Jangan lupa mengganti teks/code yang berwarna biru diatas. Selamat mencoba... :)
Cara Membuat Pesan Di Blog
Apakah sobat blogger pernah berkunjung ke suatu blog, kemudian di blog tersebut muncul pesan konfirmasi seperti ini : Nama anda siapa, Salam kenal ya dan Selamat browsing di blog saya...? Pesan konfirmasi seperti ini, terkadang menambah keunikan dari blog yang memasang pesan konfirmasi ini. Tapi tidak jarang juga, pesan konfirmasi seperti ini membuat pengunjung blog kita merasa tidak nyaman.
Fitur blog yang berupa Pesan konfirmasi sering juga di sebut dengan Fitur Salam Pembuka. Memasang Pesan Konfirmasi atau memasang salam pembuka di blog tidaklah sulit. Apakah kit harus Edit Template blog kita? Tidak juga, kita hanya menambahkan sedikit kode di kolom Widget. Berikut panduan singkat tentang Cara Buat pesan Konfirmasi di Blog.
Cara buat Salam Pembuka di Blog :
- Login di http://www.blogger.com
- Pada menu Drop Down, Klik Layout
- Klik Add a gadget dan HTML/JavaScript
<script type='text/javascript'>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda ");
alert("Salam kenal ya "+name)
alert("Selamat browsing di blog saya, senang berkenan!")
</script>
- Klik Save/Simpan.
Tambahan :
Untuk tulisan yang bercetak tebal dan berwarna merah tersebut, sobat blogger bisa rubah sesuai dengan keinginan blog sobat.
Minggu, 05 Juni 2016
Widget Panel W8 SM
Inilah pertama kalinya saya memposting Widget Blog. Widget ini saya namakan Panel W8 SM. Saya desain menyerupai Gadget Panel OS Windows 8,7,Vista. Widget ini mempunyai pajang 100px dan lebar 100px, Berposisi Melayang. Widget yang saya keluarkan ada dua, yaitu JAM dan TANGGAL. Jika anda tertarik memasang di blog, dibawah saya kasih tutorialnya.
OK. Langsung saja.
- Masuk ke Blog kamu, dan pilih Tab Template lalu klik Edit HTML.
- Tekan Tombol F3 , untuk memudahkan mencari kata kunci
- Pasang CSS Widget ini di atas ]]></b:skin>
.kotak-tanggal{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;right:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}
.kotak-jam{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;left:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}
- Lalu klik Simpan
- Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
- Pastekan Source kode Widget ini di situ.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <div class='kotak-tanggal'><script src='https://sites.google.com/site/blogsantamars/css-santa-mars/Panel-W8-SM-Tanggal2.js'></script></div> <div class='kotak-jam'><script src='https://sites.google.com/site/blogsantamars/css-santa-mars/Panel-W8-SM-Jam3.js'></script></div>
- Setelah itu Simpan dan Lihat Hasilnya.
Demikianlah Posting Widget Panel W8 SM, semoga bermanfaat.
Note!
- Anda bisa mengatur letak posisinya di CSS tadi.
Membuat Animasi Login Di Home Blog
Animasi Login Di Home Blog ini memberikan efek manipulasi
terhadap blog agar nampak seperti sedang login dengan Cap Jempol.
Inspirasi ini saya dapatkan dari tetangga blogger kita dan saya padukan
dengan pengalaman tentang jQuery saya. Yah, lumayan memberikan kesan yang menarik para pengunjung ketika berada di home blog kita.
Ya udah langsung tancap tutorialnya gan.
Animasi Login Home Blog
Letakkan Element dibawah ini tepat di atas </body><b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Animasi Login Begin -->
<div id='animasi-loginSM' style='position:fixed;z-index:9001;background:transparent;height:100%;width:100%;left:0;top:0;'>
<script type='text/javascript'>
// ----- Gambar Ukuran 28 x 28 Pixel -----
var Gambar_Login_Anda ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAV04jDzosCRsLfuUk6OXAl2qBlbmyd8MTs_7No_Ok6mAY7KEA666gZ7CfVK23QSBrq6E7cNps4X7YzcsQ_ZANsnlx3yPkmKVVetQSVa_kWkBUkKHckr6M-e91ZOxZi1dbs29mFqlINaQ/s28/Shutdown.png',
Nama_Login_Anda = 'Santa_Mars';
</script>
<script src='https://sites.google.com/site/blogsantamars/css-santa-mars/animasi-login3.js' type='text/javascript'></script>
</div>
<div id='animasi-munyer1' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;top:0;'></div>
<div id='animasi-munyer2' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;bottom:0;'></div>
<div id='animasi-munyer3' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;left:0;top:0;'></div>
<div id='animasi-munyer4' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;right:0;bottom:0;'></div>
<!-- Animasi Login End -->
<b:else/>
</b:if>
Note!
- Gambar Login ukuran 28 x 28 pixel
Konsep Pembuatan Kotak Instalasi Widget Blog
Selamat datang sobat, saya ingin berbagi bagaimana cara pembuatan "Kotak Instalasi Widget" dengan bantuan CSS dan jQuery. Konsep ini terinspirasi dari penginstalan software di Windows dan setelah itu saya coba untuk membuat di blog.
Ok rekan-rekan, langsung aja nyoba "Konsep Pembuatan Kotak Instalasi Widget Blog" ini di blog kamu.
Ok rekan-rekan, langsung aja nyoba "Konsep Pembuatan Kotak Instalasi Widget Blog" ini di blog kamu.
Untuk memasang di posting blog anda harus menggunakan Tab HTML.
CSS Kotak Instalasi
.instalasi-widget-sm{z-index:9999;position:fixed;top:0px;left:0px;height:100%;background:rgba(240,240,240,0.7);width:100%;}
.kotak-instalasi{position:relative;top:25%;margin:auto;background:#333;color:white;width:500px;height:auto;border-radius:4px;padding:2px;
box-shadow:0pt 1px 1px 1px black;-webkit-box-shadow:0pt 1px 1px 1px black;-moz-box-shadow:0pt 1px 1px 1px black;}
.judul-instalasi{font-size:14px;font-family:Broadway;margin:5px;position:relative;color:white;border-radius:6px;padding:0px 2px 2px 24px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8vwT7nr9C2YVNRRMfRB-zMG_Bc2ICYxZ6KBCEz3s1cTgILte8C10T5pJuBSvAbAAfgz-nLlPI0ySw0K0zWagzvdPKlchpqDvHukwIjxp7GJooWmTFfMbRSccKr3Ay_SnynGqytmt7SU/s16/share-sm.png") no-repeat scroll 2px 1px transparent}
.text-instalasi{padding:4px 10px;background:#FFF;color:#222;}
.instalasi-widget-sm pre {background: #2d2d2d;background: -moz-linear-gradient(top, #2d2d2d 0%, #2a2a2a 25%, #272727 50%, #242424 75%, #222222 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(25%,#2a2a2a), color-stop(50%,#272727), color-stop(75%,#242424), color-stop(100%,#222222));background: -webkit-linear-gradient(top, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); background: -o-linear-gradient(top, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); background: -ms-linear-gradient(top, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); background: linear-gradient(to bottom, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#222222',GradientType=0 );font:normal 12px/14px Monaco,Monospace;color:#ccc;padding:10px 15px;margin:10px 0px 10px;position:relative;max-height:500px;width:96%;word-wrap: normal;overflow:auto;border:1px solid #444;border-left:3px solid rgb(45, 166, 223);}
.text-instalasi pre{max-height:150px;width:400px}
.text-instalasi img{opacity:1;}
.tombol-instalasi{padding:10px;background:#CDD;text-align:right}
.dalam-tombol{margin:0px 4px;padding:2px 4px;background:#FFF;
box-shadow:0pt 1px 1px 1px #70a3e9;-webkit-box-shadow:0pt 1px 1px 1px #70a3e9;-moz-box-shadow:0pt 1px 1px 1px #70a3e9;
cursor:pointer;color:#333;}
.dalam-tombol-next{margin:0px 4px;padding:2px 4px;background:#0186CB;
box-shadow:0pt 1px 1px 1px #70a3e9;-webkit-box-shadow:0pt 1px 1px 1px #70a3e9;-moz-box-shadow:0pt 1px 1px 1px #70a3e9;
cursor:pointer;color:white;}
HTML dan jQuery Kotak Instalasi
<div class="instalasi-widget-sm" style="display:none;">
<div id="instalasi-1" class="kotak-instalasi">
<div class="judul-instalasi">Konsep Kotak Instalasi Widget Blog</div>
<div class="text-instalasi">
<center><table cellpadding="5" cellspacing="5"><tbody><tr>
<td align="left" valign="top" width="160"><img width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmo8qPhBCUgsQHUYlfNFAFuWV8ILIibpYfSZxubndo9nt3OOkaiY6HqgWj5WtiyO9y44NM-P0g4D5uyr0aeaKfcR7FDVmYAaqOUib7USgOTks3IsfkhZx7sRiL9mzGyEGWwKznsu_-2DQ/s1600/no_image.jpg"/></td>
<td><span><b>Disini</b> merupakan deskripsi atau penjelasan tentang widget yang anda buat.</span></td>
</tr></tbody></table></center>
</div>
<div class="tombol-instalasi">
<span class="dalam-tombol-next" onClick="$('#instalasi-2').fadeIn('slow');$('#instalasi-1').fadeOut('slow');">Lanjut</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
</div>
</div>
<div id="instalasi-2" class="kotak-instalasi" style="display:none;">
<div class="judul-instalasi">Perihal Lisensi</div>
<div class="text-instalasi">
<center><table cellpadding="5" cellspacing="5"><tbody>
<tr> <td>Mohon di baca dan menyetujui persyaratan lisensi di bawah ini sebelum memasang.</td></tr>
<tr> <td>
<textarea style="width:100%;height:150px;padding:4px;">
Disini adalah letak lisensi tentang widget yang anda buat
</textarea>
</td></tr>
</tbody></table></center>
</div>
<div class="tombol-instalasi">
<span class="dalam-tombol" onClick="$('#instalasi-1').fadeIn('slow');$('#instalasi-2').fadeOut('slow');">Mundur</span><span class="dalam-tombol-next" onClick="$('#instalasi-3').fadeIn('slow');$('#instalasi-2').fadeOut('slow');">Setuju</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
</div>
</div>
<div id="instalasi-3" class="kotak-instalasi" style="display:none;">
<div class="judul-instalasi">Tutorial Memasang Part 1</div>
<div class="text-instalasi">
<center><table cellpadding="5" cellspacing="5"><tbody>
<tr> <td>
<ul>
<li>Pilih Tab Template lalu klik <b>Edit HTML</b></li>
<li>Letakkan CSS berikut di atas <b>]]></b:skin></b></li>
</ul>
</td></tr>
<tr> <td>
<pre>Kode CSS
Paste kan disini aja</pre>
</td></tr>
</tbody></table></center>
</div>
<div class="tombol-instalasi">
<span class="dalam-tombol" onClick="$('#instalasi-2').fadeIn('slow');$('#instalasi-3').fadeOut('slow');">Mundur</span><span class="dalam-tombol-next" onClick="$('#instalasi-4').fadeIn('slow');$('#instalasi-3').fadeOut('slow');">Lanjut</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
</div>
</div>
<div id="instalasi-4" class="kotak-instalasi" style="display:none;">
<div class="judul-instalasi">Tutorial Memasang Part 2</div>
<div class="text-instalasi">
<center><table cellpadding="5" cellspacing="5"><tbody>
<tr> <td>
<ul>
<li>Buat Gadget <b>HTML/JavaScript</b> baru</li>
<li>Masukkan Elemen ini dan klik Simpan</li>
</ul>
</td></tr>
<tr> <td>
<pre>Kode HTML
Anda bisa konvert di
http://santa-mars.blogspot.com/2013/02/generator-konverter-html-blog.html
</pre>
</td></tr>
</tbody></table></center>
</div>
<div class="tombol-instalasi">
<span class="dalam-tombol" onClick="$('#instalasi-3').fadeIn('slow');$('#instalasi-4').fadeOut('slow');">Mundur</span><span class="dalam-tombol-next" onClick="$('#instalasi-5').fadeIn('slow');$('#instalasi-4').fadeOut('slow');">Lanjut</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
</div>
</div>
<div id="instalasi-5" class="kotak-instalasi" style="display:none;">
<div class="judul-instalasi">Konsep Instalasi Selesai</div>
<div class="text-instalasi">
<center><table cellpadding="5" cellspacing="5"><tbody><tr>
<td align="left" valign="top" width="160"><img width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmo8qPhBCUgsQHUYlfNFAFuWV8ILIibpYfSZxubndo9nt3OOkaiY6HqgWj5WtiyO9y44NM-P0g4D5uyr0aeaKfcR7FDVmYAaqOUib7USgOTks3IsfkhZx7sRiL9mzGyEGWwKznsu_-2DQ/s1600/no_image.jpg"/></td>
<td><span>Terimakasih anda telah memasang <b>Widget bla,bla,bla....</b>, semoga dapat bermanfaat.</span><br/><br/>
<span>by <a href="http://santa-mars.blogspot.com" target="_blank" style="color:#0186CB;">Santa Mars</a></span><br/>
<span>Copyright © 2013</span>
</tr></tbody></table></center>
</div>
<div class="tombol-instalasi">
<span class="dalam-tombol-next" onClick="$('#instalasi-5').fadeOut('slow');$('#instalasi-1').fadeIn('slow');$('.instalasi-widget-sm').hide('slow');">Selesai</span>
</div>
</div>
</div>
Tombol Untuk Memanggil Kotak Instalasi
<center><button onclick="$('.instalasi-widget-sm').show(400)">Open Instalasi</button></center>
Langganan:
Postingan
(
Atom
)