KLIPING DUNIA: Blog Design

Home » Posts filed under Blog Design

Showing posts with label Blog Design. Show all posts

Text Efek Keyboard Dengan CSS3 Pada Blog

Memepercantik postingan blog dengan menambahkan dan menampilkan beberapa efek pada text memang merupakan suatu hal yang tidak jarang bloggers lakukan, baik itu efek dengan berbagai kombinasi antara CSS, JavaScript maupun jQuery.

Nah, pada tutorial kali ini, saya akan berbagi tentang bagaimana cara menambahkan efek keyboard pada text-text tertentu dengan cara mudah dan hanya memerlukan beberapa potong kode CSS3 dan tidak memerlukan tambahan seperti Javascript maupun jQuery sehingga tidak akan mempengaruhi load time blog.

Kode CSS

lsc{

border:1px solid gray;

font-size:14px;

box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;

-webkit-border-radius:3px;

-moz-border-radius:3px;

-o-border-radius:3px;

border-radius:3px;

margin:2px 3px;

padding:1px 5px;

}

Memasukkan ke dalam Template

Pada Dashboard, pilih Template » Edit HTML

Copy kode di atas kemudian pastekan tepat di atas tag ]]></b:skin>

Selanjutnya, pilih Simpan Template

Cara Menggunakan pada Postingan Blog

Pada saat membuat postingan baru pada blog, pilih HTML (samping kanan Compose) dan gunakan kode pemanggil <lsc> dan diikuti oleh text yang akan diberikan efek keyboard serta diakhiri dengan kode penutup </lsc>. Berikut contohnya :

<lsc>Ctrl</lsc> <lsc>Shift</lsc> <lsc>Contoh yang lain</lsc>

Maka hasilnya akan terlihat seperti di bawah ini :

Ctrl Shift Contoh yang lain

Selamat Mencoba dan Semoga Bermanfaat...!!!

readmore »»

Cara Membuat Peringatan Saat Blog Dalam Perbaikan

Mengedit bahkan mengganti template blog merupakan suatu hal yang paling sering dilakukan oleh seorang blogger, namun ketika melakukan pengeditan atau penggantian template, tentu memakan waktu yang cukup lama sehingga tampilan baru tersebut bisa teraplikasikan dengan segera sesuai dengan apa yang diinginkan.

Pada saat pengeditan template berlangsung, sering kali tampilan blog tersebut tidak sempurna atau acak-acakan sehingga mengganggu para visitor dengan tampilan blog yang kurang enak untuk dilihat. Nah, untuk mengakalinya, mungkin diperlukan sebuah pemberitahuan khusus agar para pengunjung tidak dapat mengakses untuk sementara waktu blog yang sedang dalam perbaikan tersebut dengan cara membuat sebuah peringatan bahwa blog tersebut sedang dalam perbaikan / maintenance.

Tetapi kekurangan pada saat menerapkan tips ini pada blog yakni pada saat kita ingin melakukan Preview atau pratinjau karena apa yang pengunjung lihat sama persis dengan apa yang kita lihat sehingga mempersulit kita untuk melakukan pratinjau tentang hasil dari editing template.

Tips yang satu ini mungkin sangat cocok untuk para bloggers yang sudah sangat paham [Advanced] dengan kode-kode template yang tidak memerlukan yang namanya Preview/pratinjau pada saat melakukan pengeditan template blog.

Nah, untuk para sahabat bloggers yang ingin menggunakan cara ini, berikut kode CSS yang diperlukan dan bagaimana cara meletakkannya kedalam Template.

CSS

html {

height: 100%;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lb8eFiqW4TFOuZcGHieCAiXWMsEiVxOpTo-VhnwGfByJiGUrYmtyHKYBahezOysz4jJlHPcNTkCvB2wFr93GhLC9h1FIC69C97nQUMh7SC2Yysih5xfZfwY5UYTjR4xeLjWVrfBIN_mb/s1600/lostsector-under-maintenance.gif) no-repeat center 50%;

margin: 0;

}

body {

display: none;

}

Keterangan :

URL yang berwarna Merah pada kode CSS di atas adalah URL gambar yang nantinya akan jadi pemberitahuan bahwa blog sedang dalam perbaikan/maintenance. Silahkan diganti dengan URL gambar yang sobat desain sendiri.

Cara Meletakkan CSS Kedalam Template

Untuk penempatannya sendiri di dalam template, cukup mengcopy kode CSS di atas dan mempastenya tepat di atas tag ]]></b:skin> serta lanjutkan dengan mengklik tombol Save atau pratinjau untuk melihat hasilnya.

Selamat mencoba dan semoga bermanfaat. Terima kasih, salam bloggers...!!!

readmore »»

Cara Mengganti Warna Text Selection Pada Blog

Color Text Selection atau warna teks pada saat di blok pada postingan blog pada dasarnya yakni berwarna biru muda. Warna tersebut adalah warna standard pada semua web/blog dan bukan hanya itu, color text selection juga sering didapati pada aplikasi-aplikasi komputer yang lain seperti MS Word, Notepad dan lain sebagainya.

Nah, pada kesempatan kali ini saya akan memberikan sebuah tips/cara untuk mengganti color text selection tersebut dengan warna yang diinginkan. Langsung saja saya kasi kode CSSnya dan cara menempatkannya didalam template.

CSS

/* On Mozilla Firefox*/
::-moz-selection {
background-color: #b80000;
color: #fff;
}
/* On Safari Safari or Chrome */
::selection {
background-color: #b80000;
color: #fff;
}

Keterangan :

Kode warna HTML yang saya beri tanda dengan warna merah merupakan warna background pada saat di blok dan warna biru merupakan warna text pada saat diblok. Silahkan ganti sesuai dengan keinginan.

Cara Memasukkan ke dalam Template

Copy kode di atas kemudian pastekan tepat di atas tag ]]></b:skin> kemudian lanjutkan dengan mengklik tombol Save / Simpan.

Semoga bermanfaat dan salam bloggers...!!!

readmore »»

CSS Buttons With Transitional Hover Untuk Blogger

CSS3 Buttons With Transitional Hover Untuk Blogger

Button Transitional Hover adalah sebuah tombol yang berisikan link atau tidak pada blog baik itu tombol download, informasi, live demo maupun yang lainnya dengan efek hover atau bergerak pada saat tersentuh pointer mouse.

Tombol Transitional Hover ini sendiri adalah hasil dari modifikasi CSS3 dan tanpa ada tambahan Javascript maupun jQuery sehingga tidak mempengaruhi load time blog. Nah untuk melihat demo atau contohnya, silahkan mengklik link live demo di bawah.

LIVE DEMO

Cara memasang dan menggunakan tombol transitional

Pada dashboard, pilih Template » Edit HTML

Copy kode di bawah ini dan pastekan tepat di atas/sebelum tag ]]</skin>

#button .icon {

background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;

border-radius:10px;

display:block;

color:#212121;

float:none;

height:80px;

width: 80px;

line-height:80px;

margin:10px auto 0;

padding-top:1px;

position:relative;

text-shadow:0 1px 0 #FAFAFA;

text-align:center;

text-decoration:none;

white-space:nowrap;

-webkit-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-ms-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-moz-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-o-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;

}

#button a span {

display:none;

}

#button:hover a span {

display:inline;

}

#button a span {

font-size:1.4em;

}

#button:hover .icon {

width:420px;

}

#button .demo {

background-position:0 -80px;

}

#button .info {

background-position:0 -160px;

}

#button .download {

background-position:0 0;

}

Simpan template.

Nah, untuk memasangnya pada postingan blog, pilih HTML (samping kanan compose) pada saat membuat postingan/artikel terbaru dan masukkan salah satu kode pemanggil di bawah ini :

Button Download

<div id="button">

<a href="#" class="icon demo"><span>Lihat Demo</span></a>

</div>

Button Live Demo

<div id="button">

<a href="#" class="icon download"><span>Lihat Demo</span></a>

</div>

Button Info

<div id="button">

<a href="#" class="icon info"><span>Lihat Demo</span></a>

</div>

Keterangan : Ganti tanda # (pagar) dengan URL tujuan

Selanjutnya pilih pratinjau atau publikasikan untuk melihat hasilnya.

Semoga bermanfaat. Salam bloggers...!!!

readmore »»

Floating Social Bookmark Vertical Untuk Blogger

Social bookmarking adalah salah satu alat atau media yang dapat digunakan oleh para bloggers untuk meningkatkan pageviews blog. Hal ini dikarenakan jika seseorang mengklik tombol suka atau like facebook (dalam keadaan login) pada widget social bookmark yang dipasang pada blog, otomatis postingan akan ditampilkan pada beranda atau profil facebook visitor tersebut dan sama halnya tombol social bookmark yang lain seperti google plus dan Twitter.

Nah, pada kesempatan kali ini saya akan membahas tentang bagaimana cara memasang sebuah Widget Floating Social Bookmark Vertical pada Blog yang dilengkapi oleh tombol social bookmark yang lain seperti facebook, twitter, google plus dan masih banyak lagi. Berikut previewnya (screenshoot image & live demo).

Floating Social Bookmark Vertical Untuk Blogger

LIVE DEMO

Untuk pemasangannya sendiri tidaklah rumit dan tanpa harus mengedit atau mengotak atik kode template, tetapi cukup dengan memasukkannya kedalam gadget HTML/Javascript. Berikut kode yang diperlukan dan cara memasukkannya kedalam gadget.

KODE

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="background:#ffffff; border: 1px solid #000000; top:150px;left:110px;">

<div class="addthis_toolbox addthis_default_style">

<span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span>

<span><a class="addthis_button_tweet" tw:count="vertical"></a></span>

<span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span>

<span><a class="addthis_counter"></a></span>

<center><a href="http://bit.ly/Z3bVtA" target="blank"><span style="color: #999999; font-size: 8px;">Get This Widget</span></a></center>

</div>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

CARA PEMASANGAN

Pilih Tata Letak » Add Gadget » HTML/Javascript

Copy kode di atas dan masukkan kedalam kolom HTML/Javascript

Terakhir, pilih simpan dan lihat hasilnya

Selamat mencoba dan semoga bermanfaat. Terima kasih...!!!

readmore »»

5 Efek Foto Menggunakan jQuery & CSS pada Blog

5 Efek Foto dengan jQuery & CSS pada Blog

Hampir semua blogger selalu menggunakan gambar pada setiap postingan mereka dan memang salah satu yang membuat postingan tersebut terlihat rapi dan menarik yakni dengan menambahkan image / gambar ke dalamnya. Tetapi kadang gambar yang ditampilkan tidak mempunyai efek apa-apa alias standard sehingga terkesan kaku dan kurang menarik.

Nah, dari hal tersebut di atas, maka pada kesempatan kali ini saya akan berbagi tentang bagaimana cara menambahkan 5 buah efek dengan menggunakan jQuery dan beberapa potong CSS kedalam template serta bagaimana cara penggunaannya. Untuk live demonya sendiri, silahkan sobat klik link di bawah ini dan jika sudah terbuka, silahkan sorot pada image dan lihat sendiri efeknya.

LIVE DEMO

Bagaimana, menarik bukan...??? Untuk pemasangan kode dan cara penggunaannya sendiri, berikut tutorial singkatnya :

Seperti biasa, login ke blogger terlebih dahulu.

Pilih Template » Edit HTML » Proceed (jangan lupa beri centang pada Expand Template Widget)

Copy CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

.adipoli-wrapper{position:relative;display:inline-block;margin:auto}

.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}

.adipoli-box{display:block;position:absolute;z-index:0}

.post img{border:0!important;margin:0!important;padding:0!important}

.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

Selanjutnya copy Script di bawah ini dan pastekan tepat di atas tag penutup </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>

<script type='text/javascript'>

/*<![CDATA[*/

jQuery(function($pice){

$pice('.effect1').adipoli({

'startEffect' : 'normal',

'hoverEffect' : 'popout'

});

$pice('.effect2').adipoli({

'startEffect' : 'overlay',

'hoverEffect' : 'sliceDown'

});

$pice('.effect3').adipoli({

'startEffect' : 'transparent',

'hoverEffect' : 'boxRandom'

});

$pice('.effect4').adipoli({

'startEffect' : 'overlay',

'hoverEffect' : 'foldLeft'

});

$pice('.effect5').adipoli({

'startEffect' : 'transparent',

'hoverEffect' : 'boxRainGrowReverse'

});

});

/*]]>*/

</script>

Simpan template.

Selanjutnya, untuk menerapkannya pada postingan blog, berikut caranya :

Pada saat selesai mengupload gambar ke dalam postingan, pilih HTML kemudian cari kode gambar tersebut dan tambahkan attribut class="effect1" sampai class="effect1" untuk kategory efek yang ingin ditampilkan. Berikut contohnya :

Ketika membuka HTML pada postingan, biasanya kode anchor untuk gambar akan terlihat seperti di bawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" /></a>

Nah untuk menambahkan efek pada gambar tersebut, berikut caranya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" /></a>

class="effect1" adalah kategory image dengan efek zoom pada saat gambar tersentuh oleh pointer mouse. Ganti kode tersebut dengan effect yang lain (class="effect1" sampai dengan class="effect5").

readmore »»

Redirect Halaman Error 404 [Page Not Found] Ke Homepage

Ketika visitor berkunjung ke blog, ada kalanya mereka menemukan sebuah halaman error 404 [page not found] atau halaman tidak ditemukan. Hal ini dikarenakan oleh beberapa faktor, yakni penghapusan artikel oleh admin, penggantian URL halaman, salah mengetikkan URL oleh pengunjung dan yang lain sebagainya.

Nah, karena hal tersebut di atas, maka pada kesempatan kali ini saya akan berbagi kepada sobat tentang bagaimana cara mengakali halaman error 404 tersebut dengan meredirect mereka ke halaman beranda atau homepage pada blog. Redirect halaman ini konsepnya hampir sama dengan Desain / Design Halaman Error 404 Page Not Found yang pernah saya bahas sebelumnya, tetapi perbedaannya yakni pada penerapannya, dimana Desain Halaman Error 404 membutuhkan partisipasi visitor untuk mengklik sebuah link untuk kembali ke homepage, sedangkan Redirect Error Page ke Homepage yakni membawa pengunjung ke hompage atau halaman lain secara otomatis tanpa melakukan klik apa-apa.

Redirect Halaman Error 404 [Page Not Found] Ke Homepage

LIVE DEMO

Cara Pemasangannya

Pilih Setelan » Preferensi Penelusuran » Kesalahan dan Pengalihan » Pesan Khusus untuk Laman Tidak Ditemukan » Edit (Lihat gambar di bawah untuk lebih jelasnya)

Copy kode di bawah ini :

<p align='center'><strong>

<font color='#ff0000' size='25px'>

Error 404<br/>[Page Not Found]...!!!

</font></strong></p>

<br/>

<p align='center'><font color='#0000ff' style='font-size: 25px'><strong>Kami mohon maaf atas ketidaknyamanan ini.</strong></font></p><br/>

<p align='center'><font color='#000' style='font-size: 15px'>Dalam beberapa saat, sobat akan dialihkan ke halaman lain secepatnya...!!!</font>

<script type = "text/javascript">

//Redirect Page Not Found - Error 404 By Lostsector

LS_redirect = setTimeout(function() {

location.pathname= "/"

}, 5000);

</script>

Selanjutnya, pastekan kode yang sobat copy tadi ke dalam form pengalihan (lihat gambar)

Pilih "Simpan Perubahan"

Nah, jika sobat ingin mengalihkan atau meredirect ke halaman tertentu, berikut penjelasannya :

pathname ganti menjadi href

Ganti tanda "/" (slash atau garis miring) dengan URL halaman yang akan dituju.

Jika sudah di ganti, maka hasilnya akan terlihat seperti ini :

<script type = "text/javascript">

//Blogger 404 Redirect v1.0 by Lostsector

BSPNF_redirect = setTimeout(function() {

location.href= "http://lostsector-stars.blogspot.com/2012/12/live-demo-cool-button.html"

}, 5000);

</script>

Selamat mencoba dan semoga bermanfaat...!!!

readmore »»

Cara Membuat Tombol Keren [Cool Button] untuk Blogger

Membuat salah satu tombol atau button pada blog adalah sebuah hal yang tidak jarang sahabat bloggers lakukan. Hal ini disebabkan oleh karena adanya beberapa kebutuhan para blogger untuk membuat sebuah postingan pada blog agar terlihat menarik dengan menggunakan sebuah tombol, baik itu tombol yang berisikan link seperti link download, live demo, next, home, previous atau yang lainnya.

Nah, pada kesempatan kali ini, saya akan memberikan sebuah tips kepada sobat tentang bagaimana cara membuat tombol keren atau dalam bahasa inggrisnya cool button yang sudah dimodifikasi sedemikian rupa sehingga hasil yang ditampilkan berbeda dari tombol-tombol yang lain. Berikut contoh gambar dan live demonya.

Cara Membuat Tombol Keren [Cool Button] untuk Blogger

LIVE DEMO

Bagaimana, sobat tertarik? Jika sobat tertarik, perhatikan cara pemasangan dan penggunaan tombol ini pada postingan blog.

Langkah pertama, login ke Blogger

Pilih Template » Edit HTML » Proceed

Copy kode CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

.ls-button{

background-color:#0404B4;

font-family: 'Verdana', sans-serif;

font-size:12px;

text-decoration:none;

color:#fff;

position:relative;

padding:10px 20px;

padding-right:50px;

background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);

border-radius: 5px;

box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;

}

.ls-button:active {

top:3px;

background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);

box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;

}

.ls-button:before {

background-color:#FF0000;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij2ZAb8GQXJSQSvX2ED0ZPcFiAcNne_Mri0HZIYyMGh5oZc67xDvdpTKIPtg-IaZSgCTtC-5hEMeVST1mkjT3OAr2NSWHSJ9L8QNqw_bIgOonlVDJlk6r7i-FqPjFweAnQlVp0QnSPh8BN/s1600/lostsector-right-arrow.png);

background-repeat:no-repeat;

background-position:center center;

content:"";

width:20px;

height:20px;

position:absolute;

right:15px;

top:50%;

margin-top:-9px;

border-radius: 50%;

box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;

}

.ls-button:active::before {

top:50%;

margin-top:-12px;

box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;

}

Simpan template

Nah, sekarang untuk memasangnya pada setiap postingan blog, masukkan kode berikut ke dalam HTML postingan.

<a class="ls-button" href="LINK SOBAT DISINI">MASUKKAN TEXT DISINI</a>

Keterangan :

Biru

Merah

Pilih Publikasikan atau Pratinjau untu melihat hasilnya.

Selamat mencoba... Happy nice blogging and Happy New Year 2013...!!!

readmore »»

Cara Membuat Mega Menu Drop Down Menu For Blogger

Sekedar iseng, pada kesempatan kali ini saya akan memberikan sebuah tutorial khusus kepada pengunjung setia lostsector yakni mega drop down menu untuk blogspot. Tanpa basa basi lagi, langsung liat live demonya aja yuk...!!!

LIVE DEMO

(sorot pointer mouse ke menunya dan lihat efeknya)

Nah, setelah melihat live demo di atas, mungkin sobat tertarik untuk memasang menu navigasi drop down tersebut, jika iya berikut tutorialnya. Eh sebelum lanjut, saya ingin jelaskan sedikit tentang mega menu drop down di atas dulu ya [hehehe]. Mega menu drop down seperti yang sobat lihat (jika mengklik live demonya :D) menggunakan perpaduan antara javascript dan jQuery sehingga menampilkan sebuah menu drop down yang mempunyai efek yang menurut saya pribadi sangatlah mengagumkan.

Selain itu, pada menu tersebut diatas bisa sobat modifikasi sedemikan rupa sehingga bisa sobat sesuaikan dengan keinginan, namun untuk memodifikasinya sobat harus mengerti dan memahami dasar-dasar untuk mengedit kode CSS, baik itu deklaratornya maupun tag-tag yang terdapat dalam template. Well, sekarang langsung aja yuk simak bagaimana cara memasang mega menu drop down ini pada blog.

Copy code di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

Lanjutkan dengan mencari tag <body> kemudian copy script & jQuery di bawah ini dan pastekan tepat di atas tag <body>

Langkah selanjutnya, cari kode seperti ini pada template :

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>

</b:section>

<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>

<div style='clear:both;'/>

</div>

Jika sudah ketemu, copy kode di bawah ini dan pastekan tepat di bawah kode di atas :

Keterangan :

Tanda # (pagar) silahkan ganti dengan URL yang sobat inginkan

Tulisan yang saya tandai dengan warna Biru, silahkan ganti dengan kata-kata sobat

Sebelum mengklik save / simpan, baiknya pilih pratinjau dulu dan jika sobat merasa sudah pas, nah baru tekan save atau simpan.

readmore »»

Cara Menambahkan Gambar di Depan Judul Postingan Blog

Pada postingan kali ini, saya akan membahas tentang bagaimana cara memasang atau menambahkan gambar di depan judul postingan blog dengan gambar sendiri atau gambar-gambar yang lain. Baiklah sobat, tanpa berbicara panjang lebar lagi, langsung aja yuk liat contohnya berikut ini :

SEBELUM

Cara Menambahkan Gambar di Depan Judul Postingan Blog

SESUDAH

LIVE DEMO

Nah, cara pemasangan gambar di depan postingan tersebut adalah dengan mengotak atik dan mengganti kode template yang sudah ada sebelumnya dengan kode yang sudah saya siapkan di bawah ini beserta penjelasan lengkapnya. Namun, sebelum kita lanjut, perlu saya ingatkan kepada sobat, bahwa kode template berbeda-beda khususnya pada kode tag judul postingan, dimana beberapa template ada yang menggunakan tag <h2 class='post-title entry-title'> dan ada pula yang menggunakan tag <h3 class='post-title entry-title'> sebagai title postingan.

Untuk itu, pada kesempatan kali ini saya akan menjelaskan penambahan kode dari kedua tag title di atas sehingga sobat bisa menerapkannya pada blog sobat. Berikut caranya :

1. Menerapkan pada tag title <h2 class='post-title entry-title'>

Cari kode seperti di bawah ini :

<b:includable id='post' var='post'>

<div class='post hentry'>

    <a expr:name='data:post.id'/>

    <b:if cond='data:post.title'>

      <h2 class='post-title entry-title'>

      <b:if cond='data:post.link'>

        <a expr:href='data:post.link'><data:post.title/></a>

      <b:else/>

        <b:if cond='data:post.url'>

          <b:if cond='data:blog.url != data:post.url'>

            <a expr:href='data:post.url'><data:post.title/></a>

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h2>

    </b:if>

Jika sudah ketemu, tambahkan kode di bawah ini tepat di atas tag <h2 class='post-title entry-title'> :

<table><tr>

<td class='ssybyposttitle'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>

</td>

<td>

Keterangan :

URL yang saya beri tanda dengan warna Biru di atas adalah gambar yang akan ditempatkan di depan judul postingan blog. Silahkan sobat ganti dengan URL foto yang sudah sobat upload.

Selanjutnya, masukkan kode di bawah ini tepat di bawah tag penutup </h2>

</td></tr></table>

     <style>

       h2.post-title {

       margin: 0px !important;

       }

     </style>

Jika semuanya sudah digabungkan, maka hasilnya akan jadi seperti ini :

<b:includable id='post' var='post'>

<div class='post hentry'>

    <a expr:name='data:post.id'/>

    <b:if cond='data:post.title'>

       <table><tr>

         <td class='ssybyposttitle'>

            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>

             </td>

            <td>

      <h2 class='post-title entry-title'>

      <b:if cond='data:post.link'>

        <a expr:href='data:post.link'><data:post.title/></a>

      <b:else/>

        <b:if cond='data:post.url'>

          <b:if cond='data:blog.url != data:post.url'>

            <a expr:href='data:post.url'><data:post.title/></a>

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h2>

     </td></tr></table>

     <style>

       h2.post-title {

       margin: 0px !important;

       }

     </style>

    </b:if>

Simpan template dan lihat hasilnya.

2. Menerapkan pada tag title <h3 class='post-title entry-title'>

Cari kode seperti ini :

<b:includable id='post' var='post'>

<div class='post hentry'>

    <a expr:name='data:post.id'/>

    <b:if cond='data:post.title'>

      <h3 class='post-title entry-title'>

      <b:if cond='data:post.link'>

        <a expr:href='data:post.link'><data:post.title/></a>

      <b:else/>

        <b:if cond='data:post.url'>

          <b:if cond='data:blog.url != data:post.url'>

            <a expr:href='data:post.url'><data:post.title/></a>

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h3>

    </b:if>

Jika sudah dapat, tambahkan kode di bawah ini di atas tag <h3 class='post-title entry-title'> :

<table><tr>

<td class='ssybyposttitle'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>

</td>

<td>

Keterangan :

Selanjutnya, masukkan kode di bawah ini tepat di bawah tag penutup </h3>

</td></tr></table>

     <style>

       h3.post-title {

       margin: 0px !important;

       }

     </style>

Jika digabung, maka hasilnya akan jadi seperti ini :

<b:includable id='post' var='post'>

<div class='post hentry'>

    <a expr:name='data:post.id'/>

    <b:if cond='data:post.title'>

       <table><tr>

         <td class='ssybyposttitle'>

            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>

             </td>

            <td>

      <h3 class='post-title entry-title'>

      <b:if cond='data:post.link'>

        <a expr:href='data:post.link'><data:post.title/></a>

      <b:else/>

        <b:if cond='data:post.url'>

          <b:if cond='data:blog.url != data:post.url'>

            <a expr:href='data:post.url'><data:post.title/></a>

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h3>

     </td></tr></table>

     <style>

       h3.post-title {

       margin: 0px !important;

       }

     </style>

    </b:if>

Save template.

Semoga bermanfaat & salam bloggers...!!!

readmore »»

Costumize / Modifikasi Label Blogspot Dengan CSS

Menampilkan label blog pada widget merupakan suatu hal yang sebagian sahabat bloggers lainnya dianggap penting karena dengan menampilkan label akan sangat mempermudah para visitor untuk mengakses artikel-artikel yang serupa dengan artikel yang ia cari.

Pada umumnya, setiap label yang ditampilkan pada sidebar terdapat 2 tampilan bawaan blogger yakni tampilan flat dan cloud. Beberapa waktu yang lalu, saya juga sudah pernah memposting sebuah artikel tentang bagaimana cara membuat menu drop down pada label, nah pada kesempatan kali ini, saya akan berbagi tips kepada sobat tentang bagaimana cara memodifikasi label blog dengan tampilan yang agak sedikit berbeda dan terlihat lebih menarik dari yang biasanya. Berikut contoh label hasil modifikasi :

Costumize / Modifikasi Label Blogspot Dengan CSS

LIVE DEMO

Setelah sobat melihat tampilan label diatas, mungkin sobat tertarik untuk memodifikasinya dan jika ia, di bawah ini akan saya jelaskan bagaimana caranya, namun sebelum lanjut saya akan memberikan gambaran singkat tentang kode apa saja yang digunakan untuk kostumasi label ini. Kode yang digunakan adalah CSS dan tidak memerlukan tambahan javascript maupun jQuery sehingga tidak akan mempengaruhi load time blog. Well, sekarang untuk lebih jelasnya, perhatikan langkah-langkah cara memasukkan kode CSS ke dalam template blog.

Langkah Pertama, login ke blogger, pilih tata letak dan setting label seperti gambar di bawah ini.

Langkah kedua, lanjutkan dengan mengklik Template » Edit HTML.

Copy CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

.label-size {

    float: left;

    margin: 0 0 7px 20px;

    position: relative;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 0.75em;

    font-weight: bold;

    text-decoration: none;

    color: #996633;

    text-shadow: 0px 1px 0px rgba(255,255,255,.4);

    padding: 0.417em 0.417em 0.417em 0.917em;

    border-top: 1px solid #d99d38;

    border-right: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0.25em 0.25em 0;

    -moz-border-radius: 0 0.25em 0.25em 0;

    border-radius: 0 0.25em 0.25em 0;

    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

    -webkit-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    -moz-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    z-index: 1;

}

.label-size:before {

    content: '';

    width: 1.30em;

    height: 1.39em;

    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

    position: absolute;

    left: -0.69em;

    top: .2em;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    border-left: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0 0 0.25em;

    -moz-border-radius: 0 0 0 0.25em;

    border-radius: 0 0 0 0.25em;

    z-index: 1;

}

.label-size:after {

    content: '';

    width: 0.5em;

    height: 0.5em;

    background: #fff;

    -webkit-border-radius: 4.167em;

    -moz-border-radius: 4.167em;

    border-radius: 4.167em;

    border: 1px solid #d99d38;

    -webkit-box-shadow: 0 1px 0 #faeaba;

    -moz-box-shadow: 0 1px 0 #faeaba;

    box-shadow: 0 1px 0 #faeaba;

    position: absolute;

    top: 0.667em;

    left: -0.083em;

    z-index: 9999;

}

#Label1 {

    height: 210px;

}

.label-size:hover {

    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

}

.label-size:hover:before {

    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

}

Simpan template dan lihat hasilnya.

Semoga bermanfaat dan Happy nice blogging...!!! See you...!!!

readmore »»