Fungsi CDATA Dalam JS dan CSS

Fungsi CDATA

Jika kamu sering mengotak-atik CSS maupun JS atau mungkin cuma drag and drop kode dari orang lain kamu terkadang akan menemukan yang namanya CDATA atau tertulis // <![CDATA[, kenapa saya bilang terkadang ? karena tidak semua JS dan CSS menggunakan itu. Oke, pernahkah terlintas rasa penasaran akan fungsi dari CDATA ini ? jika iya silahkan lanjutkan membaca karena kita akan mengulasnya disini dan mungkin ini hanyalah pembelajaran kecil-kecilan, namun untuk menambah wawasan kita tidak ada salahnya kita pelajari ini.

CDATA, menurut salah satu pengguna stackoverflow.
CDATA adalah kumpulan XML yang menetapkan isi tag yang biasanya #PCDATA - mengurai data karakter, untuk dijadikan sebagai CDATA, yaitu data karakter non-parsing (Tidak terurai).
Menurut saya, CDATA ini memiliki fungsi untuk mencegah penguraian yang dilakukan XML pada character tertentu sepertu &,<,>,",' dll. Dari beberapa kasus yang saya temui ketika saya membuat sebuah script ataupun CSS yang didalamnya terdapat karakter seperti diatas awalnya normal dengan menunjukkan wujud aslinya, namun ketika saya save HTML dan keluar lalu masuk lagi, yang terjadi adalah karakter diatas berubah wujud menjadi terurai, contohnya yang terjadi pada CSS tepatnya properti content:"" yang diurai menjadi content:&quot;&quot; dan JS yang terjadi pada data String '#monyet' diurai menjadi &#39;#monyet&#39; . Untuk lebih jelasnya perhatikan contoh kode dibawah.

Tanpa CDATA

<script>
$(function(){
if($(&quot;#HTML2&quot;).length){
var o=$(&quot;#HTML2&quot;),i=$(&quot;#HTML2&quot;).offset().top,t=$(&quot;#HTML2&quot;).height();$(window).scroll(function(){
var s=$(&quot;.bloginfo&quot;).offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();
if(i&lt;n&amp;&amp;f&gt;1200?o.css({position:&quot;fixed&quot;,top:0,width:&quot;291px&quot;}):o.css(&quot;position&quot;,&quot;static&quot;),s&lt;n){var c=s-n;o.css({top:c})}})}});
</script>

Dengan CDATA

<script>
//<![CDATA[
$(function(){if($("#HTML2").length){var o=$("#HTML2"),i=$("#HTML2").offset().top,t=$("#HTML2").height();$(window).scroll(function(){var s=$(".bloginfo").offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();if(i<n&&f>1200?o.css({position:"fixed",top:0,width:"291px"}):o.css("position","static"),s<n){var c=s-n;o.css({top:c})}})}});
//]]>
</script>

Seperti yang dikatakan diatas, kode tidak akan terurai jika menggunakan CDATA.
Semoga ada sedikit bayangan tentang fungsi CDATA, jika ada tambahan silahkan ditambahkan dibawah. Sekian dan terima kasih.

Pentingnya Meta Viewport Untuk Web Responsive

Viewport Brayen ID

Meta viewport, mungkin ini meta yang sedikit asing untuk para blogger yang jarang mengutak-atik meta tag, tetapi walaupun asing meta tag ini tentu sangat vital perannya dalam Web yang ingin tampil responsive.

Kenapa bisa begitu ?
Karena viewport ini meta salah satu fungsinya yang dapat menginstruksikan isi web untuk melakukan penyesuaian pada lebar perangkat yang sedang berjalan. Berikut isinya.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Inti dari meta ini adalah contentnya, jika kita melihat dalam content terdapat properti ;

Width=device-width

Properti ini memiliki perintah supaya elemen  web dapat menyesuaikan diri pada lebar perangkat, sehingga tidak akan terjadi yang namanya overflow atau scroll horizontal saat web terbuka menggunakan perangkat yang lebih kecil.

Don't Use Viewport

Initial-scale=1

Ini menentukan skala awal yang akan terlihat saat pertama kali web terbuka, yang artinya skala web tidak mengalami pembesaran atau 1:1.

Maximum-scale=1

Dengan ini kawan dapat membatasi zooming atau pembesaran pada blog kawan yang dilakukan oleh pengunjung.

Penggabungan Dengan Media Queries

Nah, jika anda sudah menggunakan Meta Viewport maka anda juga dapat menggunakan media queries sebagai penyesuaian elemen-elemennya supaya tidak berantakan pada saat web beradaptasi dengan ukuran perangkat. Untuk penggunaannya, saya sudah menulisnya di artikel berikut.
Diatas sudah saya jelaskan cara penggunaan media queries, jadi silahkan disimak.
Saya kira cukup disini, saya harap bermanfaat sekian dan terima kasih.

Membuat Kotak Author Info

Kotak Author

Setelah lama tidak menulis artikel seperti ini karena sibuk ngurus template yang gak mutu itu, akhirnya saya bisa nulis lagi pada jam /4 ini. Oke, membuat kotak author info ini tidaklah sulit, karena kita hanya cukup memainkan sedikit CSS dan perpaduan HTML maka terbentuklah sebuah author info yang nyaman dipandang ini. Tidak ada yang spesial sih sebenarnya dengan tampilannya, tapi ya sudahlah.

Sebenarnya membuat kotak author atau about me box ini sudah saya bahas di artikel sebelumnya
Namun kotak author atau about me box kali ini kita desain ulang supaya lebih joss :D.
Sebelum memasang, pastikan sudah instal font awesome.


Praktek

Letakkan CSS dibawah ini diatas </style>, tetapi hindari yang ada dalam tag kondosional


.inner_wrapper {background:#fff}
.aboutme-img {position: relative;height: 150px;background: url(https://1.bp.blogspot.com/-SuS26cgl5JM/WS3DCpqUxvI/AAAAAAAABVA/Yr8Yq0G1IKwmuQvZujEumGFA5S2CPs6DACLcB/s1600/bg6.jpg) no-repeat top;background-size:cover}
.aboutme-img img {width: 100px;height: 100px;display: block;border-radius: 50%;margin: 0 auto;position: relative;top: 100px;}
.aboutme-info {font-size: 13px;padding: 66px 20px 10px;text-align: center;}
.aboutme-info h4 {margin-bottom: 10px;text-align: center;font-size: 16px; text-transform: uppercase;color: #202020;font-weight: 700;}
.aboutme-ikon {display: block;margin: 0 auto;padding: 10px 10px 20px;position: relative;}
.aboutme-ikon .sosialmedia {width: 100%;display: block;text-align: center;}
ul.sosialmedia {padding:0}
.sosialmedia .aboutme-icon a {font-family:fontawesome;font-weight:400;color:#222;}
.sosialmedia .aboutme-icon, .sosialmedia .ig,.sosialmedia .fb, .sosialmedia .twt, .sosialmedia .ggl{border-radius: 3px;background: #f6f6f6;height: 42px;width: 42px;line-height: 42px;display: inline-block;border: 0;margin: 0;padding: 0;}
.sosialmedia li.fb:hover, .sosialmedia li.fb:hover a {color: #fff;background-color: #3b5998;}
.sosialmedia li.twt:hover, .sosialmedia li.twt:hover a {color: #fff;background-color: #00aced;}
.sosialmedia li.ggl:hover, .sosialmedia li.ggl:hover a {color: #fff;background-color: #dd4b39;}
.sosialmedia li.ig:hover, .sosialmedia li.ig:hover a {color: #fff;background-color: #dd4b39;}

Silahkan kawan sesuaikan sendiri, saya ngantuk hahaha.
Oke selanjutnya pasang HTML dibawah ini kedalam Widget di Tata Letak.


<div class="inner_wrapper"> 
<div class="aboutme-img"> 
<img alt="Author" src="https://i0.wp.com/santuarie.files.wordpress.com/2017/03/ys2.png" title="Author" /> 
  </div> 
</div> 
<div class="aboutme-info"> 
  <h4>Brayen Luhat</h4> 
  <p>Selamat datang orang lemah yang kalo joging pake sepatu. Saya no, saya pake sendal refleksi, dan itu sakit!</p> 
</div> 
<div class="aboutme-ikon"> 
  <ul class="sosialmedia"> 
    <li class="twt"><a href="//twitter.com/brayenid" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li> 
    <li class="ggl"><a href="//plus.google.com/u/0/+Brayenluhat" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li> 
    <li class="ig"><a href="//instagram.com/brynfree" rel="nofollow" target="_blank" title="IG"><i class="fa fa-instagram"></i></a></li> 
  </ul> 
</div>

Saya rasa kode diatas cukup jelas, silahkan disesuaikan sendiri kawan.
Oke saya rasa itu saja, jika kesulitan silahkan bertanya pada saya. Sekian dan terima kasih.

Cara Paling Mudah Memotong Snippet Tanpa JS

Cara Paling Mudah Memotong Snippet Tanpa JS

Pernahkah kawan merasa risih dengan snippet bawaan blogger yang memiliki kode <data:post.snippet>  terasa terlalu panjang terutama pada post homepage ? Jika pernah kita sama, selama ini yang saya gunakan adalah snippet yang sudah diatur dalam JS, jadi mengatur snippet bukan masalah. Namun, untuk sedikit meringankan kerja browser untuk membaca XML blog kita, kita akan mengganti settingan snippet tersebut menggunakan hanya sebaris kode HTML.Ya, hanya sebaris, ngapain panjang-panjang kalo ada yang pendek dan ringan.

Baiklah kita mulai praktekkan.
Sebenarnya cara ini sangatlah simple dan pastense, jika kamu menggunakan auto read more yang menggunakan kode <data:post.snippet> sebagai pengambil snippet, kamu cukup mengubahnya dengan kode dibawah ini.
<b:eval expr='snippet(data:post.body, {length: 50, links: false})'/>
Angka yang saya tandai adalah panjang karakter yang ingin kamu tentukan, terserah silahkan diubah sesuka hati :D.

Singkat saja bukan ?, baik sekian artikel saya. Terima kasih.

Cara Membuat About Me Box Sederhana dan Keren !

About Me

Kali ini saya akan membuat tutorial tentang cara membuat Abouut Me Box dengan tentunya hanya menggunakan CSS yang simple. About Me Box ini bisa anda pasang di side bar dengan ukuran 300px lebar sidebar, tetapi juga bisa anda sesuaikan sendiri. About Me Box ini memiliki link yang saya tempatkan dibawahnya untuk membawa pengunjung ke halaman about me yang lebih lengkap, jadi About Me Box ini sifatnya singkatnya about me anda.


Oke langsung saja.
Pertama, tempatkan CSS dibawah ini diatas </style>

#utama {background:#eee;text-align:center;line-height:1.4em;width:300px}
.artikel {padding:7px 23px 15px}
.tombol {background:#3DC3A8;margin-top:2px;padding:8px}
.tombol a {color:#fff;text-transform:uppercase;letter-spacing:0.5px}
.tombol:active {background:#43DABB}
.sosmed {display:inline-block;letter-spacing:0.1px;margin:0;padding:4px 13px;}
.fb,.tw,.ig {transition:all .2s ease-in-out}
.fb {background:#3A539B;color:#fff}
.fb:hover {background:#4865BC}
.tw {background:#19B5FE;color:#fff}
.tw:hover {background:#49C6FF}
.ig {background:#F62459;color:#fff}
.ig:hover {background:#FF3668}

Kemudian masukan kode HTML dibawah ini didalam Tata Letak, anda bisa memasukannya dengan cara pilih Tambahkan Widget, kemudian pilih HTML/Javascript.

<div id='utama'><img src='https://1.bp.blogspot.com/-aPZ2l1EPf2s/WSbwfXBKj4I/AAAAAAAABTA/_K5XZe1uEZQ7RbCZhCrCc9BHw_glP_c6gCLcB/s400/bingung.jpg' height='200px' width='300' alt='About Me' title='About Me'/>
  <div class='sosmed'>
  <a class='sosmed fb' href='#' target='blank'>Facebook</a>
  <a class='sosmed tw' href='#' target='blank'>Twitter</a>
  <a class='sosmed ig' href='#' target='blank'>Instagram</a>
  </div>
  <div class='artikel'>Jangankan gunung semeru, jangankan juga gunung everest, apalagi gunung rinjani, gunung depan rumahku saja tak mampu tuk ku daki....
  </div>
  <div class='tombol'><a href='#'>kenali lebih dalam</a>
  </div>
</div>

Note : Ganti yang berwarna merah dengan URL gambar kawan, ganti tulisan yang berwarna ungu dengan tulisan atau cuplikan kawan.,  ganti pagar warna biru dengan URL tujuan, ganti yang warna pink dengan tulisan terserah.
Nah selesai, seperti yang katakan tadi sedehana. Ok, sekian artikel saya, terima kasih
Kamu bisa menggantikan tulisan sosmed diatas dengan Font Awesome jika mau

Membuat Tombol Salin Artikel Instan Untuk Blogger

Copy
Akhirnya saya bisa menulis tentang tutorial blogger lagi, kali ini saya akan menulis tentang "Membuat Tombol Salin Artikel Instan Untuk Blogger". Mungkin anda bertanya, apa maksudnya tombol salin artikel instan ? sebenarnya hal ini terlintas begitu saja dipikiran saya untuk membuatnya karena pengalaman saya dulu yang sering sekali membuat makalah untuk tugas sekolah dengan mencari referensi di google, banyak memang yang menyediakan materi, tetapi artikelnya panjang-panjang, saya selalu kesulitan untuk menyalin ke Ms.Word, hal ini dikarenakan jika saya menekan CTRL+A yang terjadi malah seluruh elemen blog terseleksi, jika saya menyeleksi secara manual terkadang setelah dipastekan ke word hasilnya kadang kacau, seperti warna font, iklan, ukuran, jenis font. Nah dari situ saya timbul ide untuk memudahkan mereka yang ingin mencari materi di blog dengan lebih efisien (efisien dalam seleksi, tapi jika sudah di paste ke word, tulisan perlu sedikit diatur lagi, hanya enter saja).

Tetapi sepertinya hal ini tidak terlalu penting bagi para blogger yang protektif terhadap artikelnya, yang memasang JS anti seleksi, klik kanan, copy. Tetapi bagi para blogger yang blognya dikhususkan untuk menulis sebuah materi belajar, menurut saya cara ini sangatlah perlu. (Para pelajar butuh materi anda guru)

Oke mulai saja, pastikan sobat sudah memasang Jquery pada blog sobat, jika belum tempel kode dibawah ini diatas </head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Tambah JS dibawah ini diatas </body>

<script src='https://rawgit.com/brayenid/borneoscript/master/bryncopy.js'/>

Kemudian tempelkan CSS ini sebelum </style>

.tombol {background:#eee;cursor:pointer;padding:4px;border-radius:4px;border:1px solid #1abc9c;transition:all .3s ease-in-out;float:right}

Terakhir, letakan dimana saja kawan mau tombol "salin"nya, contohnya saya memasangnya didalam <div class='post-info'>....</div>, tentunya berbeda, mungkin blog sobat menggunakan post-info yang berbeda (atau tidak menggunakannya). Sobat juga bisa memasangnya diatas <div id='related-posts'> (diatas related posts masing-masing)

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<a class='tombol' title='Klik Untuk Salin' onclick='copyToClipboard(&apos;.post-body&apos;)'>Salin Artikel Ini</a>
</b:if>

Note : Perhatikan class warna merah, itu adalah class dari body artikel saya, silahkan sesuaikan class body artikel blog sobat.

Nah selesai, jika ada pertanyaan soal tutorial diatas, sobat bisa ajukan pertanyaan di bawah. Terima kasih.

Membuat Tombol Share Dengan Hover

Tombol Share

Kali ini saya akan share kepada sobat Blogger tentang cara memasang "Tombol Share Dibawah Postingan dengan Hover", tutorial ringan ini saya bagikan karena saya ingin update blog saya  maka dari itu saya share tutorial ini. Oh ya, sebelumnya saya juga sempat memberikan Tutorial yang serupa.
Cuma, tombol share yang sebelumnya belum disertakan dengan effect Hover, jadi saya coba lagi membuat yang baru dengan effect hover supaya lebih kelihatan lebih menarik.

Ok, langsung saja.
- Pertama, sobat masuk kedalam Edit HTML
- Setelah itu cari kode ]]></b:skin atau </style>
- Lalu masukan kode berikut diatasnya.
.brayenl {background:#eaeaea;width:97.1%;border:1px solid #ccc;text-align:left;color:transparent;text-decoration:none;padding:7px 7px 7px 7px;font-size:13px;margin-top:4px;position:relative}
.brayen {color:#222;font-size:12px;font-weight:700;}
.share1 a {text-decoration:none;color:#fff;margin-left:3px}
.fb {background:#3b5998;padding:3px;border-radius:3px;border:1px solid #3b5998;transition:all 800ms ease-in-out}
.fb:hover {background:#809FFE;padding:3px;}
.gp {background:#b0103d;padding:3px;border-radius:3px;border:1px solid #b0130d;transition:all 800ms ease-in-out}
.gp:hover {background:#FF0000;padding:3px;}
.tw {background:#4099FF;padding:3px;border-radius:3px;border:1px solid #4099ff;transition:all 800ms ease-in-out}
.tw:hover {background:#9FCCFE;padding:3px;border:1px solid #4099ff;}
Note :
Ganti ukuran panjang yang berwarna merah dengan ukuran panjang yang sobat inginkan.

 - Setelah memasukan kode diatas, sobat cari kode <div id='related-posts'> lalu masukan kode berikut diatasnya.
<div class='brayenl'>
<div class='share1'>
<span class='brayen'>Share This Article :</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank'>Facebook</a>
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'>Google+</a>
 <a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'>Twitter</a>
</div>
</div>
 selesai, demikia artikel saya, semoga bermafaat.

Cara Membuat Like Box Facebook Float

Floating Like Box

Kali ini saya akan mencoba share cara memasang Like Box Facebook Float atau melayang.
Dengan memakai widget ini, sobat pasti akan mudah mencari liker FPnya di Facebook melalui blog.
Ok, deh langsung saja sobat.
- Pertama, buka tab Template
- Kedua, klik Edit HTML
- Setelah masuk, sobat cari kode </body>, lalu masukan kode berikut diatasnya.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><object data="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/brayenluhatpages?fref=ts&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" ></object><span><a target='_blank' href="http://my-topsite.blogspot.com">Brayenl &#9658;</a></span></div></div>

Note :
Ganti URL yang berwarna merah dengan url FPnya sobat.
URL yang berwarna biru itu akan menuju ke blog saya, jika sobat ingin menghapusnya, silahkan saja.

Untuk masalah Iframe, sudah saya ganti dengan object seperti yang disarankan oleh Kompi Ajaib, jadi like box yang satu ini sudah bebas dari Iframe.

Ok deh demikian artikel saya, semoga bermanfaat.

UPDATE :
Jika Like Boxnya gak mau keluar, coba pasang kode diatas dalam layout/add gadget.

Membuat Tombol Link Sederhana Dengan CSS

Membuat Tombol Link Sederhana Dengan CSS

Sudah lama saya gak share tentang Tips Blogger karena beberapa hari ini saya cuma share artikel Umum seperti Berita Misteri, Game, dll pokoknya. Maklum saya kurang berpengalaman di Blogger karena saya baru jadi Blogger, jadi kurang terlalu paham tentang kode-kode pembangunnya, tetapi walaupun begitu, saya mencoba untuk belajar lebih giat lagi tentang kode-kode tersebut dengan melakukan Eksperimen-eksprimen Sederhana yang hanya melibatkan CSS dan HTML yang saya lakukan di lab Cssdeck saya.
Ok, ngomong soal Tombol link ini sebenarnya tidak berbeda dengan Link Biasa hanya saja tombol link ini lebih berwarna dan bervariasi jadi lebih kelihatan menarik, heheh.

Ok deh, kita langsung praktekan saja.
- Pertama, sobat masuk dulu ke Edit HTML
- Lalu cari Kode ]]></b:skin
- Masukan Kode ini diatas ]]></b:skin
.johny {background:#15b;color:#fff;text-shadow:1px 1px 1px #000;padding:5px 11px 5px 11px;text-decoration:none;border-radius:3px 3px;font:normal 12px arial;font-weight:599;box-shadow :inset 1px 2px 2px #1b6fee}
.johny:hover {background:#484848;color:#fff; box-shadow :inset 0 3px 3px #000;transition: all 800ms ease-in-out}
.johny2 {background:#B0130d;color:#fff;text-shadow:1px 1px 1px #000;padding:5px 11px 5px 11px;text-decoration:none;border-radius:3px 3px;font:normal 12px arial;font-weight:599;box-shadow :inset 1px 2px 2px #FF0000}
.johny2:hover {background:#484848;color:#fff; box-shadow :inset 0 3px 3px #000;transition: all 800ms ease-in-out}
Untuk supaya desainnya berfungsi, saat sobat ingin membuat link, sobat tinggal menambah sedikit kode.
Contoh :
<a class='johny' href='http://my-topsite.blogspot.com'>Johny</a>
Maka akan menjadi

Johny

<a class='johny2' href='http://my-topsite.blogspot.com'>Johny</a>
Maka akan menjadi

Johny

Selesai, saya harap artikel diatas bisa dimengerti.

Membuat Menu Dropdown Di Blogspot

Submenu

Mungkin Tutorial ini sudah ketinggalan jaman atau hal yang sudah diketahui oleh kebanyakan Blogger-blogger, tetapi sekali lagi saya memberikan tutorial ini untuk para sobat saya yang masih bingung dan kesulitan dalam memasang submenu ini.
Sebenarnya sih agak ragu memberikan tutorial ini, karena saya masih bingung untuk menempat kode submenunya dimana, tetapi setelah coba teliti sedikit (soq teliti nih Johny :D) akhirnya saya mengerti juga dengan kode Submenu yang ditaruh Maskolis pada template ini.
Ok, jika sobat ingin memasang Submenu ini, silahkan sobat ikuti cara berikut.
- Sobat cari dulu kode ]]></b:skin
- Lalu masukan kode berikut diatasnya.
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 -1px 0 #222;}
#menu li a{border-right:1px solid #222;}
#menu li a:hover {color:#fff;background-color:#222;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#444;border-top:1px solid #222;border-left:1px solid #000;border-bottom:1px solid #000;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#f0f0f0 transparent transparent transparent;position:absolute;top:16px;right:9px}
#menu ul.menus a:hover{background:#222;color:#fff}
- Setelah memasukan kode diatas, silahkan sobat cari kode yang hampir mirip dengan kode.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cara Blogger' type='Header'/>
</b:section>
</div>
- Lalu Masukan kode dibawah ini  dibawah kode </div> pada kode diatas.
  <nav id='menu'>
<input type='checkbox'/>
  <label><i class='icon-reorder'/><span>Navigation</span></label>
<ul>
<li><a href='http://my-topsite.blogspot.com/' title='Home'>Home</a></li>
<li><a href='#' title='Template Blogger'>Template</a></li>
<li><a href='#' title='Best Blogger'>Best Blogger</a></li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
 <li><a href='#' title='Index'>Blog Index</a></li>
  <li><a href='#' title='About Me'>About Me</a></li>
  <li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
  <li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
 <li><a href='#' title='Index'>Blog Index</a></li>
  <li><a href='#' title='About Me'>About Me</a></li>
  <li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
  <li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
 <li><a href='#' title='Index'>Blog Index</a></li>
  <li><a href='#' title='About Me'>About Me</a></li>
  <li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
  <li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
       </ul>
    </nav>
Note :
Sesuaikan sendiri link yang sobat ingin masukan pada submenu.

Demikian Tutorial dari saya, yang saya kutip dari template Maskolis dan Kang Ismet, semoga bermanfaat.

Cara Membuat Pop Up Window Di Blog

Contoh Pop Up Window Tanpa Javascript

Tutorial yang sangat sulit dicari ini akan coba saya publikasikan, mungkin untuk seorang master, hal ini tidaklah sulit, tetapi untuk kita yang masih awam dalam masalah ini, pasti akan kesulitan tentunya, saya saja sebenarnya sempat kesulitan untuk membuat pop up window ini, tetapi lama-lama bisa juga.
Ok, pop up window yang satu ini tanpa menggunakan Javascript, walaupun kebanyakan orang memakai Javascript. Alasan saya tidak menggunakan Javascript, karena saya tidak ingin memberatkan blog saya dengan terlalu banyaknya kode-kode yang berada diatas </body> ataupun </head>, banyak Blogger lain yang bilang kalau terlalu banyak memasukan Javacript akan memberatkan blog kita, maka dari itu saya mencoba untuk mentiadakan Javascriptnya.
Ok, jika sobat ingin memasangnya sekarang, ikuti cara berikut.
- Pasang Kode ini pada : Postingan, submenu ataupun link lainnya
<a href="http://my-topsite.blogspot.com" onclick="javascript:void window.open('http://my-topsite.blogspot.com','1377457520549','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;">Ganti Dengan Text Link</a>
Note :
Ganti URL yang berwarna merah dengan URL yang sesuai dengan URL tujuan.
Ganti kode yang berwarna orange dengan ukuran yang sobat inginkan (width = Lebar | height = Tinggi).
Ganti text yang berwarna Hijau sesuai dengan text link yang sobat inginkan.
Selesai.

Demikian Tutorial dari saya, semoga bermanfaat.

Cara Membuat Tombol Share Dibawah Postingan

Cara Blogger Share

Saya akan memberi Tutorial tentang cara memasang Tombol share dibawah postingan yang Ringan, Tutorial yang satu ini saya dapatkan dari mas Kompi Ajaib , cuma ada bagian yang saya tambahkan, seperti tombol Share Digg dan Linkedin, karena mas Kompi ajaib hanya membuat 3 Tombol Share saja yaitu tombol Share to Fb - Share to Twitter - Share to Gplus+, walaupun gak seberapa hehehe.
(Sobat bisa melihat previewnya diatas atau Melihat Tombol Share yang saya gunakan sekarang. )
Ok, langsung saja kita mempraktekannya.
- Copy Code berikut :
<!-- Horizontal social buttons Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='background:#f6f6f6; border:2px solid #fff;width:100%;height:22px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:2px 0;margin-right:15px;font:bold 14px Arial;color:#333'>
<strong>Share This Article</strong> :
</div>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on fb</a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a>

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #009999; text-decoration: none; border: 1px solid #009999; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Digg'>Digg</a>

<a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' style='color: #fff; background: #00477D; text-decoration: none; border: 1px solid #00477D; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Linkedin'>Linkedin</a>
  </div>
</b:if>

<!-- Horizontal social buttons End -->

- Setelah itu, tempelkan Kode diatas Kode <div id='related-posts'> (semua Template Maskolis pasti ada Kode tersebut.)
Demikian Artikel dari saya, semoga bermanfaat.

Note :
Jika bagian atasnya terlalu tinggi keatas, sobat bisa ganti kode yang berwarna merah dengan 5px.