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

Cara Membuat Related Post Dengan Thumbnail

Label: trick blog

Cara Membuat Related Post Dengan Thumbnail - Ada seorang sahabat blogger nih yang menanyakan Cara Membuat Related Post dengan Thumbnail, dan sekarang saya akan berbagi tutorial Cara Membuat Related Post dengan Thumbnail yang sangat-sangat mudah, ini dia langkah-langkah nya.

Masuk ke alamat http://www.linkwithin.com .
Setelah masuk anda akan disuruh mengisi,
Email isi dengan e-mail kamu.
Blog Link isi dengan alamat Blog kamu.
Platfrom kamu pilih Blogger.
Lebar pilih sesuai keinginan anda mau 3 cerita, 4 cerita, atau 5 cerita.
Terus kamu Klik GET WIDGET!
Setelah klik Install Widget ke Blog kamu.

Setelah terpasang kamu pindahkan ke Bawah posting kamu di Menu Tata Letak.

Gimana mudahkan.

sumber:http://blazerracing.blogspot.com

Menampilkan Widget Linkwithin Hanya Tampil di Posting Saja

Label: trick blog

Bagi Sobat yang Udah pasang Widget Linkwithin atau Artikel Terkait dengan Thumbnail di Blog, saya sarankan hanya menampilkan nya di bagian Posting saja, bagi yang menggunakan Featured Read More biasanya Widget Linkwithin tampil di bagian Bawah Fetured Read More, nah sekarang bagaimana supaya Widget Linkwithin hanya Tampil pada posting saja tidak dihalaman Home Page, Cara nya mudah tinggal ikuti langkah-langkah di bawah ini.
Bagi sobat yang udah tau cara pasang Widget Linkwithin langsung aja ke tahap Cara nya, Bagi yang belum Tahu silahkan lihat Cara Membuat Widget Linkwithin atau Related Post dengan Thumbnail

Login ke Blog kamu.
Pilih Rancangan.
Biasanya Letak Widget Linkwithin nya kaya gini.

Kamu Klik Edit lalu akan muncul Kode Script nya, biasanya kaya gini.

Kamu copy kode nya, setelah di Copy Pilih EDIT HTML, jangan lupa centang dulu EXPAND WIDGET TEMPLATE NYA.
Cari kode <data:post.body/> setelah ketemu letakan kode yang kamu Copy tadi di bawah kode <data:post.body/>
Sehingga posisinya kaya gini

<data:post.body/> <script> var linkwithin_site_id = 1073407; </script> <script src='http://www.linkwithin.com/widget.js'/> <a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>

Sehingga kode nya Jadi seperti ini

<b:if cond='data:blog.pageType == "item"'><script>
var linkwithin_site_id = 1073407;
</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a></b:if>

Selsai dan Simpan Template, lalu lihat hasilnya.

sumber:http://blazerracing.blogspot.com

Cara Membuat Widget Random Post

Label: trick blog

Cara Membuat Widget Random Post, apa yah maksud Random Post maksud Random Post ini Menampilkan Posting Acak jadi acak gitu, jika sobat memasang nya di Blog kamu maka secara otomatis Artikel kamu akan di acak kamu bisa pasang Widget ini di Sidebar atau Footer langsung aja Cara Membuatnya.

Login ke Blog kamu.
Pilih Rancangan.
Pilih Add Gadget.
Pilih HTML Java Script lalu Copy kode di bawah ini ke kotak HTML JS.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=15;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Preview :

Yang berwarna Merah kamu bisa ubah sesuai berapa Posting yang ingin kamu tampilkan.
Selamat mencoba dan Semoga Sukses

sumber:blazerracing.blogspot.com

Kode Warna

Label: trick blog

Cara Menghilangkan Tulisan Showing All Posts With Label di Blog

Label: trick blog

Cara Menghilangkan Showing All Post With Label di Blog - Kali ini saya akan mengulas Tutorial Blog yaitu Cara Menghilangkan Tulisan Showing All Post With Label kalian tau apa maksud judul di atas, jika tidak tau saya akan jelaskan biasanya jika kita Klik Sebuah Label maka akan muncul tulisan Showing All Post With Label How To Earn With Bloggers. Show All Post.

Gimana sudah tau sekarang, jika menurut sobat Tulisan di atas cukup menggangu sobat bisa menghilangkan Tulisan tersebut dengan beberapa langkah saja, jika mau tau langkah-langkah nya silahkan lihat di bawah ini.

Login ke Blog kamu.
Pilih Rancangan, Edit HTML.
Jangan Lupa Centang Expand Widget Template.
Cari Kode yang mirip kaya di bawah ini.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Setelah ketemu Ganti alias hapus kode di atas dan ganti dengan kode di bawah ini.

<b:includable id='status-message'>
<b:if cond='data:navMessage'> <div> </div> <div style='clear: both;'/> </b:if> </b:includable>

Simpan Template dan lihat Hasilnya.

sumber:blazerracing.blogspot.com

Mengenal Struktur Template Blog

Label: trick blog

Sebagai seorang blogger, pengetahuan akan struktur template amat penting. Karena ini perlu saat kita ingin mendesain tampilan/layout blog kita.

Secara umum, struktur aktual dari template blog tidak selalu sama. Namun, dengan mengetahui struktur dasar (basic structure) dari sebuah template, akan memudahkan kita dalam mendesain ulang ataupun merubah struktur blog.

Jika kita melihat secara biasa, maka kita bisa tahu bahwa struktur blog adalah seperti ini : Header, Posting/Konten, dan Footer. Tapi, sejatinya, ada lagi beberapa bagian yang tidak terlihat di layar. Kita sebut bagian ini blocks atau container. Nah, berikut struktur blog dalam sebuah gambar :

Keterangan :

Body : block paling luar dari template. Jadi, segala yang tampil di screen komputer adalah body.
Outer-wrapper : container ini meliputi seluruh isi template (jadi bisa dikatakan, Body berada diluar template). Secara mudah, kita membuat outer-wrapper untuk menempatkan beberapa block yang lebih kecil di dalamnya. Block yang ada di Outer-wrapper adalah : Header, Content, dan Footer.
Header : block ini berada di bagian paling atas blog/template. Tetapi, dalam Header kita akan mendapati sub block yang lain yaitu : Header Title, Header Description, dan yang lain seperti banner, banner Adsense, menu, dll. Jadi, untuk menempatkan semua sub-block di dalam satu container. Container terluas di dalam header adalah header-wrapper.
Content : di bawah header adalah Content-wrapper. Ini adalah bagian terpenting dari semua container. Dalam block inilah terdapat Sidebar (1,2 atau berapapun jumlahnya) dan container Main yang berisi posting/artikel, komentar, dan beberapa iklan.
Footer : adalah block paling bawah dari semua container template. Sama seperti di Header section, kita juga membutuhkan footer-wrapper untuk menempatkan beberapa sub-block lain.
Main : main-wrapper adalah bagian terluar dari semua block di Main section, yang berada di dalam Content-wrapper. Dalam Main-wrapper adalah Post block, Comment block, Date Header, dan widget lain yang tercipta dari opsi Add Page/Gadget Element.
Sidebar : adalah block yang berisi semua side widget kita yaitu : About Me, Labels, Archive, Text, HTML, Adsense, dll. Dalam template blogger standar, kita selalu akan menjumpai hanya 1 sidebar. Tetapi sebenarnya kita bisa menambah beberapa sidebar lagi. Yang paling umum adalah 2 sidebar dari template 3 kolom.
Blog Post : block ini berisi hal penting dari posting/artikel seperti title/judul, Post, Post Author, Labels, dll.

Jadi bila disusun secara hierarki, struktur template adalah seperti di bawah ini :

    Body
        Outer-wrapper
            Header-wrapper
                Blog Title
                Blog Description
                widget lain
            Content-wrapper
                Sidebar-wrapper (1,2,3...)
                Main-wrapper
                    Date Header
                    Posts
                        Post Title
                        Post Content (atau juga disebut Post Body)
                        Post Footer (Author, Labels, dll)
                    Comments
                    Feed Link
                    Widget lain (biasanya iklan/banner)
            Footer-wrapper
                Footer text (disclaimer, copyrights, dll.)
                widget lain

Apabila sobat mengerti dan memahami struktur dasar ini, maka akan lebih mudah nantinya dalam memahami kode-kode template. Dan, tentu saja memudahkan kita dalam mendesain template kita. Sekian artikel mengenai struktur template.

Semoga manfaat ....

sumber:http://ricdetop.blogspot.com