izone15: trick blog

Tampilkan postingan dengan label trick blog. Tampilkan semua postingan

Membuat Spoiler Pada Blog

Contoh Spoiler :

Kode Scrip :

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakkan teks atau kode script (gambar atau video) di sini <br> </div> </div> </div>

Post-Code Converter

Label: trick blog

Post-Code: code converter

Membuat box kode atau kotak script pada postting artikel

Label: trick blog

Tool HTML Parser :

Post-Code: code converter

Beberapa Contoh Kotak / Box Script dan Kodenya :

Simple Box

Kode Script Anda Disini…….

<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>

Simple Box 2

Kode Script Anda Disini…….

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>

Ridge Border

Kode Script Anda Disini……

<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>

Inset Border

Kode Script Anda Disini……

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini……</</div>

Outset Border

Kode Script Anda Disini…….

<div style="border: 3px #5f200e outset; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>

Double Border

Kode Script Anda Disini…….

Dotted Border

Kode Script Anda Disini……

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>

Dashed Border

Kode Script Anda Disini……

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Kode Script Anda Disini……</div>

Scroll Box

Kode Script Anda Disini……

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> Kode Script Anda Disini…… </div>

Pilih salah satu contoh diatas yang Anda sukai, kemudian copy code script yang sudah diparse, dan pastekan code itu di mode HTML di post editor Blogger saat posting artikel.

Sumber : http://problogiz.blogspot.com

Memunculkan Widget Pada Versi Mobile

Label: trick blog

Widget, inilah elemen halaman yang dapat disebut sebagai bagian tak terpisahkan dalam suatu blog. Setelah membuat sebuah blog, dapat dipastikan bahwa salah satu hal yang dilakukan adalah memasang atau menambahkan widget tertentu pada blog yang dimaksud dengan tujuan untuk ‘mempercantik’ atau mempermudah dalam melakukan navigasi. Namun seperti yang kita tahu bahwasanya setelah melakukan penambahan widget tertentu, maka widget tersebut (secara default) hanya ditampilkan pada halaman blog versi web saja.

Merujuk panduan kustomisasi template seluler Blogger (dalam hal ini dapat dibuka pada URL http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html), bahwasanya untuk beberapa jenis widget tertentu, yaitu header, blog, profile, pagelist, AdSense, dan attribution, selain ditampilkan pada halaman versi web, maka (secara default) juga akan ditampilkan dalam halaman versi seluler.

Walau widget yang dapat ditampilkan pada kedua versi blog hanya beberapa buah, bukan berarti kita tidak dapat menampilkan widget yang lainnya pada tampilan versi seluler maupun versi web. Karena sebenarnya kita dapat menambahkan atribut tertentu pada widget yang dimaksud agar dapat ditampilkan pula pada blog versi seluler (mobile=’yes’), tidak ditampilkan pada halaman versi seluler (mobile=’no’), atau hanya ditampilkan pada versi seluler saja (mobile=’only’).

Dengan demikian apabila kita menambahkan atribut tersebut pada widget yang dikehendaki, maka akhirnya widget yang dimaksud akan dimunculkan pula dalam tampilan versi seluler (sebagai contoh misalnya widget artikel populer, artikel terbaru, kategori artikel, kotak penelusuran, dan lain sebagainya). Akan tetapi perlu diingat bahwa agar beberapa atribut ini dapat bekerja atau berfungsi, maka pilihan template seluler yang digunakan haruslah ‘Tersesuai (Custom)’.

Nah, sekaligus menanggapi pertanyaan Sobat Blogger dalam artikel tanya jawab mengenai bagaimana cara membuat kotak pencarian pada tampilan seluler, maka artikel ini merupakan uraian jawaban atas pertanyaan tersebut. Lantas bagaimana cara mengimplementasikannya? Caranya adalah serupa dengan teknik menyembunyikan widget pada tampilan blog versi mobile, seperti yang saya uraikan dalam artikel sebelumnya. Dimana untuk melakukannya Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama,
buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua,
cari widget yang akan ditampilkan pula pada tampilan versi mobile. Untuk mempermudah dalam menemukannya, lakukan pencarian sesuai dengan judul yang dipakai pada widget yang dimaksud.

Ketiga,
apabila widget yang dimaksud sudah ketemu, maka tambahkan kode mobile='yes' dalam rangkaian kode widget yang dimaksud. Sebagai contoh misalnya seperti yang tampak pada rangkaian kode di bawah ini.

<b:widget id='Profile1' locked='false' mobile='yes' title='About Me' type='Profile'>
<b:includable id='main'>
----- rangkaian kode -----
</b:includable>
</b:widget>

Keempat, simpan template.

Sumber: http://eltelu.blogspot.com/2012/08/cara-menampilkan-widget-pada-blog-versi.html#ixzz2D89gnas9

Cara Memberikan Kotak pada Script

Label: trick blog

Login dulu ke blogger
Pilih Design/Rancangan
Klik Edit HTML
Cari Kode ]]>
Kemudian letakkan kode dibawah ini persis diatas ]]> :

/* Alert */
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Ganti warna biru sesuai dengan background blog anda atau selera anda.
Kemudian simpan tamplate.

Untuk pilihan garis border yang ada pada tulisan berwarna pink bisa anda ganti sesuai keinginan yaitu dengan mengganti tulisan dashed dengan salah satu pilihan yaitu: none, dotted, double, groove, inset, outset, ridge, solid, dsb. Lebih jelasnya lihat gambar berikut.

Agar kode tersebut berfungsi, maka script atau kode yang akan kita posting harus kita apit dengan kode

dan

Sehingga nanti contohnya seperti ini

Setelah itu Terbitkan posting anda dan liat hasilnya

ISI/SCRIPT KODE DALAM KOTAK

sumber : http://situsmadu.blogspot.com