Cara Membuat Menu Horizontal Tabs Sederhana di Blogger

Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!

Kode CSS:

/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

Kode HTML:

<!-- Navigasi tabs Sederhana http://buka-rahasia.blogspot.com Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">Anchor Text</a> di atas </div>.

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:

1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.

2. Copy kode CSS di atas,

4. Cari ]]></b:skin> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya. 
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget

7. Setelah pop up window muncul, pilih opsi HTML/Javascript

8. Masukkan Kode HTML yg telah diedit tadi pada kolom seperti contoh berikut:

 

9. Klik save.

10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE!

Sumber

Read More

Cara Membuat Efek Bayangan Pada Gambar (CSS3 Box Shadow)

Memperindah blog/website kini menjadi hal yang semakin mudah dan merupakan kebutuhan bagi setiap web designer dan developer. Keberadaan CSS3 memungkinkan kita untuk membuat berbagai macam efek tampilan dan fungsi. Sedangkan saat ini hampir seluruh browser telah compatible dengan CSS3.

Pada awal posting tentang CSS3 ini, saya akan mempresentasikan penggunaan CSS3 Box Shadow pada gambar untuk memunculkan efek bayangan (image shadow). Basic penggunaan CSS3 Box shadow adalah dengan menggunakan syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

h shadow: posisi dan besar bayangan horizontal

v shadow: posisi dan besar bayangan vertical

blur: besaran dan jarak blur (opsional)

spread: ukuran bayangan (opsional)

inset: aturan yang ditambahkan untuk mengubah bayangan jatuh ke bagian dalam objek (opsional)

Contoh:

(Biasanya aturan yang lazim digunakan tidak menggunakan spread dan inset)
box-shadow: 5px 5px 3px #666666;

Aturan di atas sangat lah sederhana, pada prakteknya kita harus menambahkan property lain agar compatible dengan browser-browser lainnya (yang berplatform webkit dan moz). Maka property lengkapnya adalah:

-webkit-box-shadow: 5px 5px 3px #666666;
-moz-box-shadow: 5px 5px 3px #666666;
box-shadow: 5px 5px 3px #666666;

Efek bayangan Box Shadow ini sebenarnya dapat diterapkan pada berbagai objek blog/web yang berbentuk kotak dan bahkan juga pada objek yang berlekuk, yang dalam hal ini adalah rounded corners. Untuk mengaplikasikan ke gambar, kita dapat memasukkannya langsung ke dalam dengan menggunakan atribut style atau memberikan atribut class dan meletakkan aturan CSS-nya di bagian lain, baik di bagian HTML posting, widget, atau meletakkannya langsung sebagai aturan umum untuk semua objek yang diberi class/id yang sama di bagian head (antara <head> dan </head>).

Contoh pengaplikasiannya:

Salah satu cara yang digunakan untuk memasukkan kode CSS3 Box Shadow-nya:

Tambahkan class pada tag html gambar dan beri aturan CSS3 Box shadow yang sesuai dengan classnya. Contoh:

<img class="boxshadow" border="0" class="bayang2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbFo545DpHVnZAr4BAQ6-v9WKkvib9yhGOZQlV2U5fWHMj1CUYnxCofKJlcmpEoTiXw8AT9lvJVv0d5kkudPVPRB2ieMV408bpW70aqhv_uIR_FbPWJJod_DB0WXg7_CQK0YhjRMiY0zRP/s1600/anti_copycats-pencuri+konten.jpg" />

Untuk membuat efek bayangan box shadow pada blog anda:
Masuk ke dashboard > design/rancangan > Edit HTML (untuk Blogger), kemudian masukkan kode CSS ini di bagian head, lebih tepatnya di ATAS </head>, dan save template.

<style type="text/css">
.boxshadow {-webkit-box-shadow: 5px 5px 3px 0px #666666;-moz-box-shadow: 5px 5px 3px 0px #666666;box-shadow: 5px 5px 3px 0px #666666;}</style>

 Kemudian setiap anda ingin memberikan efek bayangan (image shadow) pada gambar di posting, sidebar widget yang bergambar, tinggal tambahkan class="bloxshadow" pada tag HTML image-nya:

<img class="boxshadow" border="0" src="http://urlgambar.com/gambar.jpg" />

Kostumisasi efek bayangan:

a. Anda dapat mengubah nilai h shadow, v shadow, dan blur (dalam px) serta kode warna sesuai dengan keinginan. Untuk mengetahui koleksi kode warna silahkan lihat Hex Color Code Generator.

b. Untuk mengubah efek bayangan jatuh ke kiri, gunakan nilai negatif (-) pada h shadow dan v shadow, contoh:

-webkit-box-shadow: -5px -5px 3px #666666;
-moz-box-shadow: -5px -5px 3px #666666;
box-shadow: -5px -5px 3px #666666;

 Hasilnya:

Coba terus dan silahkan bereksperimen dengan nilai vertical, horizontal, blur, dan warna, serta efek jatuhnya bayangan.

Sumber

Read More

Cara Membuat Efek Salju di Blog

Dari sekian banyak efek-efek pada blog, efek salju di blog merupakan salah satu yang paling diminati para blogger, selain loading yang cepat juga efeknya menyebar keseluruh ruang blog, tampilan blog pun lebih menarik dari sebelumnya. Tapi karena warna salju adalah putih mungkin tidak cocok bagi anda yang mempunyai background blog yang berwarna putih, tentu saja efek salju tidak akan kelihatan dengan sempurna.

Paling cocok bagi anda yang mempunyai background yang gelap, efek salju pun terasa maksimal.

Berikut ini adalah cara membuat efek hujan salju di blog:

• Login ke dashboard blogger anda. 
• Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript). 
• Copy script efek hujan salju dibawah ini  dan paste pada gadget 

  <script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

• Jangan lupa save

Selain efek salju masih banyak efek-efek lainnya yang bisa anda terapkan dalam blog salah satunya adalah efek daun berjatuhan, efek bintang bertaburan pada kursor dengan pilihan warna yang berbeda.

Demikian cara membuat efek salju di blog, semoga berhasil.

Terimakasih.

Sumber

Read More

Cara memasang favicon

Salah satu hal kecil yang bisa dilakukan untuk membuat blog sobat sedikit lebih keren adalah dengan mengganti Favicon di blog sobat.

Apa itu Favicon?

Favicon adalah singkatan dari Favorite Icon yaitu sebuah gambar icon yang muncul pada address bar suatu website. Favicon bisa disebut juga sebagai shortcut icon, website icon, URL icon, atau bookmark icon.

Secara default jika sobat membuat blog di blogger, blog sobat akan memiliki favicon berupa logo “Blogger”

Nah agar blog sobat terlihat lebih unik sobat bisa mengganti favicon tersebut dengan favicon milik sobat sendiri.

Berikut adalah caranya:

#1. Pertama sobat harus menyiapkan terlebih dahulu sebuah gambar persegidengan ukuran tidak lebih dari 100KB. Format gambar bisa apa saja, .JPG, .PNG, atau .ICO.

Sobat bisa membuat gambar tersebut secara manual menggunakan software seperti photoshop atau GIMP. Selain itu bisa juga menggunakan Favicon Generator.

#2. Jika gambarnya sudah siap, sekarang login ke blogger.com > Masuk ke menu “Tata Letak” > Klik “Edit” pada bagian Favicon:

#3. Klik “Choose File” dan pilih gambar favicon yang sudah sobat buat.

#4. Setelah itu tinggal klik tombol “Simpan”

Setelah sobat berhasil memasang favicon di blog, kemungkinan saat sobat cek blog sobat, faviconnya masih tetap berupa logo blogger. Hal tersebut wajar karena pengaruh Cache browser.

Silakan sobat bisa hapus cache browser untuk melihat perubahan favicon.

Sumber

Read More

Cara Memasang Back to Top di Blogspot

Tombol "Back to Top" memudahkan user atau pengunjung kembali ke bagian atas blog, dalam satu klik, tanpa harus men-scroll mousenya atau "mengusap-usap" jarinya di "touch pad" atau layar SmartPhone-nya.

CB merasa butuh memasang tombol "kembali ke atas" ini karena kadang/sering harus membuka postingan dengan komentar yang banyak, sehingga "turun banget" dan harus bersusah-payah "scroll" ke bagian atas.

Nah, dengan adanya  tombol "Back to Top" ini, CB tinggl "klik" dan tampilan bagian atas blog akan tersaji secara otomatis.

Cara Memasang Back to Top

1. Pastikan di template blog Anda sudah ada kode jquery, yaitu kode seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Atau seperti ini:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Kalau belum ada, lakukan langkah ini:
- Template > Edit HTML
- Cari (CTRL+F) kode </head>
- COPY salah satu kode tersebut dan PASTE di atas kode </head>  tadi.
- Save!

2. Klik "Layout" (Tata Letak)
3. Klik "Add Gadget" di Sidebar
4. Pilih "Javascript/HTML"
5. Copy dan Paste kode berikut ini:

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk8Jkvb02Qus64eizE-WKXPgEeTKpGVVRHJ6leEiXhegW9O-4jLOiQD112P6rSYbQywpIskV2no3f0tAuNbqhDDSJcuYiLqhFMItJZmhkmfALOpM8KJgXxj6zvlT-3RJgwevnacx8Zlg/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    }); 
  
    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Kode yang berwarna merah adalah image "Back to Top". Anda bisa menggantinya dengan gambar lain sesuai dengan selera Anda, juga sesuai dengan background blog Anda.

Koleksi Gambar Tombol Back to Top untuk Blog

Ini pilihan gambar/tombol "Back to Top" dan URL-nya yang bisa Anda gunakan. Copas link URL-nya ke bagian yang berwarna merah dalam kode di atas tadi.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl_QA5xVdYrEJp5YeZc9YeeEjt9M_2jJAHh4wpJELCiHDLP3Nj8Ar24JAZvhf1eQUcXZCJDfmg2GFu3wE9WaMJ-PoesV3VsFJyg5iMH_gSxReFYmXVSjOqnC2dA6RkVmIUekH5KLPClG4/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhS3f5ygOxb22nB-orl4ETdLTwqq4pH750XfUrmUPlbC2ohDytb6IYw3gonwsGPrWZevZIkr_8iaKXRObqlt6TUQpdc8sETayAm_h1rk3tbO0cXD9zLuGZjILANJ1Tt3E8oVKLnabk-I/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Znf2ay3fr3q2_Zsb1NkH7n7agK1iucaMcXJoLy4L7oaR1857TXdxt2_ahKu6g9_IEQHSMaN0SfWmRKoTWPMLflzvJ5hZAl25eBSD94KWWwaFuqfr6gUOiEvBxN7ynbDvstbL3mnubfk/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYCTpY4UDshA8JjZ4tAkAfmSZSDx_ZdTnThyR2xcJAokX9XUrnz8WmS1oYItKzMLvv9lUdnL7oSzAYsXIdq4mDOa7BzXFHWkE8BO5AhsXijsT-QhjYrXuFHTgsOs_D0SKgCsM2lVHDo3M/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghiS69nWDtR6_lWq24njL9cRR4X2WrBN7RxF7jAA9sxXNRPdGg2TTsKCZH1QXGHbYAZKte_BO2pBoTjJPgtsYRW9ZfKorMxpKOLIDFFoY1PwcmdsrzV2dKOw15Z6CHAEi9qEQSPcgjNt8/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5XM3rYk2CD6GjijtOgZWHMvMCGtNpma3y2v0lgoQEcm-DNN-vst7OYvF50Jfx27JIZQVxea0IiL7PY701gzSoTxYmFuKs2UOpiHtmUroSajopI1M_BfxwM1R_xa87ikuX3NNTTdv7Io4/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRh4OiselDPXxlibS2TC-m3yYCkvAdgNg01gzvYCr8VwFwSx6iuB2PduUx8q3kRmAHPNaHKseOuazDFpVqXCxwdQR0OoOsNda8CzMaqVhZ2AOg6LNrZwvskewObaPzxaf19rQ6VW8fWq8/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIgqr8h3ruhx_S-B0NDMcJf-mEDFv4ZSEWxYm5cog9SYCrIUWH80VqgJohM8oZRY0K9cy1NKaobqByz6HD_iwr3TcV2phyphenhyphenYgiLTzHp6KXmOLl8ovjlbikDYSNw_0rxd60vQPeJMP6_VXk/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk8Jkvb02Qus64eizE-WKXPgEeTKpGVVRHJ6leEiXhegW9O-4jLOiQD112P6rSYbQywpIskV2no3f0tAuNbqhDDSJcuYiLqhFMItJZmhkmfALOpM8KJgXxj6zvlT-3RJgwevnacx8Zlg/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9ikwoEy8UyFyE1JdDtT_EqImSi50lAbp7jYi5mhOL9v_S5u85LDg9HrnXwpr6zK-4EOAlsFbGJiHIoQlZdLfatiEc4ynwyQjyRKfqmHA3qivGBxvLmBcpd6-dS_DcePJgzh20d6Id2I/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bqtOOCigWkVP4LWE_I2LhlHlzp3UoZvz_Xy6X6RAsYCBHPUqpKBqkHGxhi4MyGnmFDQUfxjB0vw6XYvdm7J1QZ5zwOBnnRQ_uh3_5JdOsNINYfvIgq_vpSv4m0Ylyg6R2qpXMZ3tzkk/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYptNRhc5W0GX8MQtB9xkjHKDAM84yfobX78rI7AxGliHPz7Rsdl62mZMHYfPQSgkhosByWL1JUfMN_vDPIlaqjrk2o_qqECbYGU6HQY44Y944bEr_LtvRTE4FlHLiaDO57Pjs_nAz14A/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoWepNUEryQaa4co1x7IdAnbYXrP4AdgG4wDLaubMBW7eI7pnM3kwaxnsSYa1dV_j8n4KR4KxcaQwyGO399S_iqpzReUo5Bnf0kCgtMGbDg9WZQ2GS4bPwEAc7y5PYjUEN-WKBYzgAY0o/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKLK0cbBUItfBfp-bnpf4vcsf90G5nBTq7bwkHEoyZUMEA3zFZMaANZKOgsPqGUXX7BGa8alb-FiXlMrlFGAiog4Ndxqt4m0CpkL-EnloaiuTk54GgXf1ZXxsblESQsxRPvOPMO7iqY8/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jTLo-AY3cY-5Gz6QhC5LDHyzybAH8Zu7gWHELuR1SxqYsRecx5uHAFJG6MJfK3C7IIM8ffvC4J6lPp2pLmeRwWIBcsde0QNXyaaAXpOwgFZv0CGN9Zf-_dnfzYj3rmEvB7OABKCKOvE/s1600/back_to_top_button.png

Alternatif Cara Memasang Back to Top

Jika cara di atas tidak berhasil, coba lakukan langkah berikut ini.
1. Layout
2. Add Gadget
3. HLML/Javascript
4. COPAS kode berikut ini dan Save!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()
</script>

Itu dia cara membuat atau memasang tombol Back to Top di blog blogspot untuk kenyamanan dan kemudahan pengunjung, juga kemudahan kita sendiri sebagai admin blognya. Good Luck and Happy Blogging!

Sumber

Read More

Cara Membuat Kotak Script Dalam Postingan Blog

Menyematkan kotak dalam tulisan blog terlihat menarik dan indah. Banyak blogger menggunakan kotak dalam postingan untuk menaruh informasi penting, salah satunya adalah script HTML, Java dan sebagainya.

Namun kotak yang disematkan dalam postingan ini tidak disediakan defuld oleh blogspot, olehnya itu kita dituntut membuatnya sendiri. Caranya mudah, ikuti langkah-langkah berikut ini.

• Login ke blogger dan pilihlah 'Entri Baru'
• Buat tulisan, contoh seperti gambar. Lihat yang berwana merah, posisi tulisan adalah 'Compose'.

• Setelah itu copy paste script ini, dan kembali ke postingan Anda di blogger. 

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.blogoooblok (ganti tulisan ini).</div>

• Selanjutnya pilih 'HTML' ( jelasnya lihat gambar). 

• Paste script yang tadi di copy di bawah postingan (terserah mau menaruhnya dimana).
• Kembali lagi aktifkan 'Compose' dan lihat hasilnya. Tradaaa... sudah ada kotak. 

• Selanjutnya Anda sisa mengganti tulisan '.blogoooblok (ganti tulisan ini).' dengan tulisan yang ingin Anda taruh disana, bisa berupa script atau tulisan lain. Mudah kan...!

Mudah dong, namun mungkin Anda tidak setuju dengan tampilan kotak contoh diatas. Anda bisa merubahnya sesuka hati. Berikut ini penjelasan scriptnya.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.blogoooblok (ganti tulisan ini).</div>

• border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
• Double : bentuk kotak. (kode ini bisa diganti dengan kode berikut atau juga bisa dihilangkan).

.blogoooblok (Dashed).

.blogoooblok (Dotted).

.blogoooblok (Groove).

.blogoooblok (Inset).

.blogoooblok (Outset).

.blogoooblok (Ridge).

.blogoooblok (Solid).

• padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
• background-color:ffffff; = warna dalam kotak.
• Dan text-align:left; = posisi tulisan didalam kotak di kiri 

Nah itulah penjelasan kode HTML untuk membentuk kotak script dalam postingan. Silahkan memodifikasi sesuai dengan selera Anda. Tidak susah bukan. Dipostingan selanjutnya kita akan buat kotak dengan scroll dalam postingan, so... stay cool.

Untuk blog ini, script diatas saya modifikasi seperti kotak berikut. 

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
.blogooblok (script kotak di blog ini)
</div>

Bagi Anda yang memiliki pertanyaan, jangan sungkan, tinggalkan komentar Anda. Semoga memberi manfaat. :)

Sumber

Read More

Cara Membuat Sitemap di Blogger

Menghadirkan sitemap pada blog punya keuntungan tersendiri, karena akan memudahkan pengunjung mencari artikel lainnya dalam blog.

Namun karena blogspot tidak menyediakan layanan ini secara defuld, maka sebagai pemilik kita diberi kesempatan membuatnya. Dalam tulisan ini kita akan buat sitemap di blogger dengan mudah.
Selanjutnya mari kita buat.

Seperti biasa, pertama-tama login ke blogger Anda. Pilih 'Laman'. (Lihat Gambar).

 

 Lalu klik 'Laman Baru' pilih 'Laman Kosong'

Jika telah terbuka. Isikan 'Judul laman' sesuai dengan keinginan Anda. Sebagai contoh dalam blog ini kita gunakan kata 'Sitemap'. Setelah itu klik 'HTML'.

Masukkan script HTML berikut, copy paste saja.

<script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://blogoooblok.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Tulisan berwarna merah pada script diatas Anda rubah menjadi alamat blog Anda. Jika sudah, silahkan publikasikan. Tapi jika tak merasa yakin, silahkan klik 'Pratinjau' dulu. Jika sudah oke, 'Publikasikan' deh...

Dengan menggunakan script diatas, maka tampilannya akan memanjang terus kebawah, seperti gambar ini.

Untuk menggunakan sitemap berbeda, kita juga bisa menggunakan skrip ini, (ganti kode yang berwarnah merah dengan blog Anda)

<div style="background-color: #dde1e3; border: 1px solid #999999; height: 100px; overflow: auto; padding: 10px; width: 100%px;">
<script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://blogoooblok.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Tampilannya seperti ini:

Untuk yang kedua ini lebih dinamis dengan kolom, dan scroll. Ini memungkinkan bagi pemilik blog yang telah memiliki banyak postingan. Silahkan dipilih, mana yang cocok dengan kepribadian Anda. Gimana mudah kan...!

Sumber

Read More