Zett - A Responsive Blogger Theme, Lets Take your blog to the next level.

This is an example of a Optin Form, you could edit this to put information about yourself.


This is an example of a Optin Form, you could edit this to put information about yourself or your site so readers know where you are coming from. Find out more...


Following are the some of the Advantages of Opt-in Form :-

  • Easy to Setup and use.
  • It Can Generate more email subscribers.
  • It’s beautiful on every screen size (try resizing your browser!)

Cara Membuat Kotak Script Keren Di Postingan Blog

11 comments
Cara Membuat Kotak Script Keren Dipostingan Blog

Memberi kotak script pada kode - kode HTML, CSS, JQuery, dan Javascript di postingan blog akan menjadikan artikel yang kita tulis tampil keren, elegan, sederhana, dan enak dipandang oleh para pembaca.

Banyak para blogger yang menginginkan agar sebuah artikel yang mereka post dapat menarik dan mendatangkan banyak pengunjung.

Begitu juga dengan saya, menginginkan hal tersebut.

Dan pada kali ini saya akan memberikan tutorial bagaimana membuat kotak script dipostingan blog.

Dan kotak yang akan saya berikan ini sangat berbeda dari kotak - kotak yang ada di blog lain.

Untuk DEMO, bisa dilihat kotak script yang saya gunakan di artikel ini.

Langkah Pembuatan Kotak Script

Pertama, Login ke blogger Sobat.

Kedua, Masuk ke template ==> Edit HTML.

Ketiga, Sisipkan kode CSS dibawah ini di atas kode </style>


 /* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}a  

Keempat, Sisipkan juga kode CSS di bawah ini di atas kode </body> atau </head>


 <script src='https://Zona99-Blog.googlecode.com/svn/prism.js' type='text/javascript'/> 
 <script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script> 
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> 

Kelima, Untuk memanggil kotak script ini

Gunakan kode script di bawah ini

Paste kode dibagian HTML bukan compose saat membuat artikel.


<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre> 

Perhatian :

Kotak script tidak akan muncul di bagian compose, tetapi kotak scrip muncul jika sobat klik pratinjau atau setelah artikel dipublikasikan.

Nah bagaimana cukup mudah bukan ???

Jika masih bingung, silahkan bertanya di kolom komentar di bawah ini.

Sekian tutorial membuat kotak script di postingan blog.

Semoga artikel ini dapat bermanfaat.

Membuat Subscribe Box / Kotak Berlangganan Di Blog

10 comments
Membuat subcribe blog keren - Untuk mempermudah para pengunjung blog dalam memperoleh update-tan artikel terbaru dari admin blog dengan secara otomatis masuk ke dalam email pengunjung.  

Maka dibutuhkan kotak berlangganan atau dalam bahasa Inggris disebut Subscribe Box.

Dan pada kesempatan yang cukup baik ini saya akan menjelaskan bagaimana membuat subscribe blog keren. Dengan adanya subscribe box pengunjung hanya perlu memasukkan email mereka dan secara otomatis mereka akan mendapatkan update-tan terbaru dari suatu blog. 

Untuk itu mari kita mulai saja;

Cara membuat Subscribe Box / kotak berlangganan di blog

Pertama
Hal pertama yang sangat penting adalah sobat tentunya harus memiliki sebuah akun feedbunner dan mengetahui Id Feedbunner tersebut.

Saya sarankan untuk membaca artikel "cara mendaftar ke  feedburner dan cara mengetahui Id Feedburner" terlebih dahulu.

Kedua
Silahkan sobat login ke blogger sobat

Ketiga
Tambahkan kode dibawah ini dimana sobat mau meletakkan subcribe box / kotak berlangganan. 

Sebagai contoh Sobat bisa meletakkan disini.

Tata letak ---> Tambahkan Widget ---> Kode HTML/Java script.

<div id="subscribe-css">

<div class="subscribe-wrapper">

<p>Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih</p>

<div class="subscribe-form">

<form action='http://feedburner.google.com/fb/a/mailverify?uri=SettiaBlog' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SettiaBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="uri" type="hidden" value="SettiaBlog" />

<input name="loc" type="hidden" value="en_US" />

<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/>

<input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" />

</form>

</div>

</div></div></div> 


Keterangan :
- Ganti "SettiaBlog" dengan Id feed sobat.

Keempat
Tambahkan kode css di bawah ini di atas kode ]]></ b:skin>. 

Template ---> Edit HTML (untuk memudahkan sobat mencari kode ]]></ b:skin>, silahkan tekan CRTL + F kemudian tulis kode "]]></ b:skin>" dan tekan enter.

 .subscribe-wrapper {

 color : #fff;

 background: none repeat scroll 0% 0% #FF6C60;

 font-family: "Oswald",Tahoma,Sans-serif;

 line-height : 20px;

 padding : 1px 20px 10px;

 text-align : center;

}

.subscribe-form {

 background : #FF6C60;

 clear : both;

 display : block;

 margin : 10px 0;

 overflow : hidden;

}

form.subscribe-form {

 clear : both;

 display : block;

 margin : 10px 0 0;

 width : auto;

 overflow : hidden;

}

.subscribe-css-email-field {

 background : url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) 1px -27px no-repeat #eee;

 color : #444;

 margin : 0 0 15px;

 padding : 12px 40px;

 width : 100%;

 border : none;

}

.subscribe-css-button {

 background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);

 color : #fff;

 cursor : pointer;

 font-weight : 700;

 padding : 7px;

 text-transform : none;

 width : 100%;

 border : none;

 font-size : 16px;

 transition : all 0.3s ease-in;

}

.subscribe-css-button:hover {

 transition : all 0.3s ease-in;

 background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2);

}   

Keterangan :
- Ganti "FF6C60" untuk mengganti warna background

Kelima
Klik pratinjau untuk melihat/mengecek apakah sudah sesuai dengan keinginan sobat dan sudah cocok dengan blog sobat,

Jika sudah klik simpan.

Keenam
SELESAI

Nah bagaimana mudah bukan ?

Selamat mencoba dan semoga berhasil.

Semoga artikel ini dapat bermanfaat dan membantu sobat. Jika sobat mempunyai pertanyaan silahkan sobat tulis saja pertanyaannya di kolom komentar. 

Baca juga : Kumpulan Subcribe keren dan responsive

Cara Termudah Membuat Laman Disclaimer Blog

16 comments
Mudah Membuat Halaman Disclaimer

Cara Termudah Membuat Laman Disclaimer Blog - Selamat datang dan jumpa lagi dengan saya Settia Blog, pada kesempatan ini saya akan berbagi sedikit tutorial tentang bagaimana cara membuat laman Disclaimer blog. Tapi sebelum membuat sebuah laman Disclaimer marilah kita mengenal sedikit apa itu Disclamer.

Pengertian Disclaimer

Dari Informasi yang saya dapat dari Google.com maka dapat disimpilkan, Disclaimer merupakan pernyataan resmi dari suatu blog yang menjelaskan bahwa blog tersebut tidak dapat di ganggu gugat.

Lalu Bagaimana Cara Membuat Laman Disclaimer
1. Silahkan sobat kunjungi situs, privacypolicyonline.com
2. Kemudian sobat klik tulisan "Disclaimer Generator" 


3. Kemudian akan muncul halaman seperti di bawah ini

4. Silahkan sobat isi kolom tersebut sesuai blog sobat

    Keterangan :
- Your Site Title : Tulis nama blog atau website Sobat
- Your Site URL : Alamat blog Sobat
- Contact Link : Laman contact us Sobat
- Email Address : Email untuk menghubungi Sobat.
- Email Encryption: Ada tiga pilihan, mau tidak pakai Encryption, HTML atau JavaScript.

(Cotoh pengisian)

5. Jika semua sudah tepat, selanjutnya klik "Generate Disclaimer"
6. Maka akan muncul kode script seperti di bawah ini


7. Sobat bisa melihat hasil Disclaimenya dengan klik "Preview your Disclaimer"
8. Memasang kode script tesebut ke blog, Untuk caranya Masuk ke blogger ---> Laman ---> Laman Baru ---> Rubah mode Compose menjadi HTML ---> Paste script tadi kedalamnya ---> Beri judul Disclaimer ---> Publikasikan. 

Nah kali ini blog sobat sudah memiliki laman disclaimer. Semoga bermanfaat dan membantu Sobat. Jika Sobat mempunyai pertanyaan silahkan bertanya melalui kolom komentar. Terima kasih.

Perhatian : "Jika gambar kurang jelas, silahkan klik gambar tersebut"

Membuat Background Gambar Di Postingan

1 comment
Membuat Background Gambar di Postingan

Membuat Background Gambar di postingan - Pada kali ini kami akan menjelaskan bagaimana membuat background gambar pada postingan, yang sebelumnya saya sudah menjelaskan cara membuat background warna di postingan.


Sebenarnya dalam membut backgraund gambar di postingan tidaklah sesulit yang sobat bayangkan. Dalam pembuatannya sobat hamnya meng-edit di HTML dan menambah kode sricpt tertentu.

Membuat Backround gambar
Pertama
Sebulum memulai tutorial berikut ini, pastikan sobat sudah menyiapkan sebuah gambar, kemudian sobat upload gambar tersebut.

(Contoh background)

Kedua
Silahkan Sobat copy alamat tautan gambar yang sobat upload. 

Biasanya berupa http://....jpg harus diakhiri dengan tulisan .jpg

Ketiga
Silahkan sobat login ke blog sobat ---> Entri Baru ---> Klik HTML (terletak di sebelah kiri atas disamping Compose).

Keempat
Silahkan Copy dan paste kode berikut ini :

<div style="background:url(alamat gambar) no-repeat;">
Tulis Disini
</div>

Keterangan :
- Ganti "alamat gambar", sesuai alamat gambar yang sudah sobat upload tadi.
- Ganti "Tuli Disini", dengan kalimat yang mau sobat beri background.

Kelima
Klik kembali Pratinjau, untuk memastikan hasilnya. Jika sudah sesuai klik Publikasikan.

Hasil nya :


Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog

Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog

Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog Settia Blog



Berikut ini adalah tutorial cara membuat background gambar pada postingan. Semoga dapat membantu dan bermanfaat bagi sobat - sobat sekalian. Selamat mencoba dan berkreasi. Terima kasih.

Cara Simple Membuat Kode HTML Banner

24 comments

Cara Simple Membuat Kode HTML Banner - Dalam melakukan promosi suatu produk, jasa, dan blog dapat dilakukan dengan berbagai cara mulai dari yang gratis sampai yang berbayar dan dari cara yang termudah hingga cara yang rumit dan sulit. 

Tapi pada kesempatan kali ini saya tidak akan menjelaskan bagaimana memprpomosikan suatu praduk, jasa dan blog. 

Kali ini  saya akan menjelaska cara bagaimana membuat kode HTML banner, karena banner sering kali digunakan untuk mempromosikan suatu produk, jasa, dan blog. 

Sebelumnya marilah kita simak beberapa penjelasan mengenai banner.

Apa Itu Banner ?

Banner merupaka suatu media untuk melakukan promosi yang di nilai sangat efektif dan efisien yang terdapat pada suatu blog. 

Ukuran bannerpun bermacam - macam, ada yang besar, kecil. Pemasangannya juga berbeda-beda, ada yang di pasang diatas, ditengah, disamping, dan dibawah postingan.
 
Fungsi Benner :
1. Menambah daya tarik web / blog

Banner yang kita pasang di web / blog, bisa menambah tampilan web / blog lebih menarik. 

Sehingga pengunjung betah berlama-lama di blog Sobat. Sobat bisa menempatkan banner di bagian header web/blog.

2. Sebagai cirikhas / identitas Sobat 

Dengan membuat banner, Sobat berusaha untuk menunjukkan kepada pengunjung tentang siapa Sobat dan apa yang Sobat tulis dalam blog. 

Itu artinya, Sobat menciptakan brand bagi Sobat dan web/blog Sobat.

3. Sebagai alat promosi

Banner merupakan alat promosi yang efektif. Dengan menitipkan banner Sobat di web/blog yang sudah terkenal dan banyak pengunjungnya, Sobat bisa berharap mereka akan mampir di blog Sobat dengan meng-klik banner itu.

4. Menonjolkan isi blog Sobat

Banner juga bisa digunakan untuk menonjolkan isi dari web/blog Sobat. Pengunjung bisa mengetahui atau paling tidak membayangkan isi web / blog Sobat dari baner Sobat.

Oke setelah membaca pengertian banner dan fungsi banner diatas, semoga sobat sudah sedikit mengerti. Dan marilah kita mulai saja yang menjadi topic pada artikel kali ini yaitu "cara simple membuat kode HTML banner".

Cara Membuat Kode
Pertama
Silahkan login ke blog sobat ---> entri

Kedua
Sebelum membuat banner pastikan sobat sudah siap dengan gambar banner. Banner bisa sobat buat secara offline maupun online. 

Membuat banner secara online bisa sobat lakukan di website/blog khusus pembuat banner, dan untuk membuat banner secara offline bisa sobat lakukan melalui aplikasi photoshop, coreldraw, atau aplikasi sejenisnya.

Ini sebagai contoh banner buatan saya

Setelah banner siap, silahkan sobat upload gambar tersebuat. Untuk cara upload gambar bisa sobat lakukan melalui blog yaitu dengan "insert image" yang letaknya berapa di bawah judul postingan blog, atau sobat bisa upload di situs Image Hosting. 

Setelah sobat upload silahkan copy url banner tadi.

Ketiga
Ganti menu dari Compose ke menu HTML ---> copy dan paste kode berikut ini :
<a href='http://settiablog.blogspot.com' target='_blank' title='Settia Blog'><img src='http://i.imgur.com/SVTFrf1.png' alt=Settia Blog' border='0' heght='200' width='1000'/></a>
keterangan :
  • Ganti tulisan warna BIRU dengan url/alamat tujuan. Jika banner di klik maka akan menuju ke url tersebut.
  • Ganti tulisan warna MERAH dengan judul yang sobat mau. Tulisan akan muncul jika cursor morse berada di atas banner.
  • Ganti tulisan warna HIJAU dengan alamat url banner/gambar sobat yang sudah di upload.
  • Ganti huruf warna PINK dengan ukuran banner sobat. Heght untuk panjang banner dan Widht untuk lebar banner, usahakan menulis ukuran yang sama dengan banner. 
Keempat
Klik pratinjau (untuk melihat hasil sementara) jika cocok klik Publikasikan

Kelima
SELESAI

Contoh Hasilnya :

Settia

Selamat mencoba dan semoga artikel ini dapat bermanfaat.