Kumpulan Widget Animasi Yang Lucu dan Keren Untuk Blog

Cara Memasang Widget Animasi Yang Lucu dan Keren di Blog -

Banyak hal yang dapat membuat sebuah blog dikatakan menarik, selain dari isi content atau postingan , ternyata ada hal - hal lain yang bisa membuat si blog terlihat lebih menarik dan tentunya banyak pengunjungnya. Nah selain postingan, disain dan animasi / pernak - pernik blog ternyata dapat meningkatkan performa dari suatu blog.. ga percaya ? cobalah anda berkunjung kesuatu blog yang disainnya polos hanya berisikan artikel saja kemudian bandingkan dengan blog yang berisi postingan menarik dengan disain yang menarik pula . Pasti kita akan lebih betah berlama-lama di blog yang berisi artikel menarik dan disain / animasi yang menarik itu bukan ? tentunya. Dan, memberikan efek animasi di blog itu ga sulit kok, dan pilihan animasinya pun beragam bergantung selera. . nah dibawah ini ada beberapa contohwidget animasinya. Kalo udah cocok, berikut langkahnya :

Tips-Trik , Tips-Trik Blog

kumpulan efek-efek animasi buat blog

Cara pemasangan :

1. Klik rancangan --> Edit html  centang expand HTML lalu cari kode </body>
2. copy kode di atas dan pastekan di atas </body>
3. Klik Save

1. ini efek jatuhan hati di blog

<scriptsrc='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>

2. efek bintang bertaburan di blog

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

3.efek kembang api di blog

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

4. efek gelembung di blog

<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>

5. efek kupu-kupu terbang di blog

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></script>

Nah itulah kumpulan efek-efek bertaburan di blog .kalo masih belum tau caranya ya lihat di bawah ini saja sob.

dan lihat hasilnya semoga bermanppat sob .....

Tips-Trik , Tips-Trik Blog

Cara Menghilangkan Text Background Color pada Blog

seperti title di atas, cara menghilangkan "text background color" pada postingan di blog. awalnya saya juga mengalami seprti ini, postingan saya jadi ada background colornya, dan itu annoying banget. akhirnya cari di google cara menyelesaikan masalah ini ketemu cara ini.

jika tulisan postingan menjadi seperti ini.. contoh : seperti ini

block tulisan "seperti ini".. dan klik tanda spt terlihat pada gambar

memang mudah dan benar bisa mengembalikan tulisan seperti semula, tapi bagaimana dengan tulisan yang sudah di beri numbering? kan formatnya balik lagi, jadi gak ada number-nya lagi. tak patah semangat saya mencari lagi di halaman - halaman google berikutnya. ternyata ketemu *alhamdulillah* tapi ini cara untuk sebaliknya, untuk memunculkan text background color. tapi ini berhasil *yay!* caranya gini :

masuk di html post

cari format seperti ini <div style="background: #01DF74">Teks masukkan di sini.</div>.

ganti angka 01DF74 dengan default, kadang yang muncul bukan angka, tapi langsung warna, misalnya: white, red, purple etc.

Tips-Trik Blog

Cara Mengganti Email Primary Pada Blogger

Sekian lama mengutak atik cara mengganti email primary blogger ternyata sekarang saya bisa menggantinya dengan email gmail yang lain. Biasanya gantinya cuman ganti email sekunder saja tapi kali ini tidak email yang digunakan untuk masuk tetap satu. 

Bagaimana caranya? mari kita simak... 

1. Masuk di akun blog yang ingin anda pindah tangankan misalnya syaif.catroks@gmail.com
2. Masuk dashbor terus ke setting atau setelan
3. Setelah itu masuk ke permission atau izin
4. Nah undanglah email yang akan anda gunakan untuk mengganti email yang primary contohnya diganti dengan alamatpalsu@gmail.com
5. Sudah selesai? sekarang masuk ke email yang sudah anda undang tadi.
6. Konfirmasi email anda tadi (alamatpalsu@gmail.com)
7. Masuk lagi ke blogger anda yang sebelumnya (syaif.catroks@gmail.com)
8. Masuk ke permission lagi, dan jadikan email anda yang "alamatpalsu@gmail.com" menjadi admin dalam blog tersebut dengan cara klik tulisan "beri hak seperti admin"
9. Nah jika sudah, masuk lagi ke blogger yang "alamatpalsu@gmail.com" dan hapus email yang syaif.catroks@gmail.com tadi sebagai admin.

Selesai lah sudah....

Bagaimana? bingung? mumet? jangan dibuat mumet ikuti aja petunjuk di atas ya. Memang bolak-balik tapi cara ini berhasil lho... 

Perhatikan gambar di bawah ini oke.. 

Screen Shoot

Perhatikan yang ada lingkaranya, itu adalah point-point yang penting.

Selamat Mencoba... 

Tips-Trik Blog

Search Box Simpel dan Keren Untuk Blogspot

Search Box (kotak pencarian di blogspot) pastinya sobat sudah tidak asing lagi mendengarnya, jadi saya rasa tidak perlu panjang lebar saya menjelasakan kembali tentang apa dan fungsi dari Search Box/kotak pencarian di blogspot ini. Oia, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet deh. 
Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini: 

Search Box Simpel dan Keren Untuk Blogspot 

Langsnung ke TKP, dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:

1. Login ke akun blogger sobat 
2. Masuk ke rancangan/design 
3. Pilih Page Element/Elemen Laman 
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini: 

Style 1

><style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-I5wI_KS5ie09pGGyTwZsjC1Wtce1UQ3TE78tMkUIhwXrRzkjgckfkS_54pyUuRRv7C1yigbLPaPo63qvJ5KdNucd9kAHNYWLx696HDLayKHfwxJ42FgpSiCpE3rsUay-_i3M0qHFMJY/s320/kode-blogger_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> 

Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VnckKunm-4HgSxvXd_Sl3z6uDd6J8xf6Ho0usRsxygl2oqi0g96L5ILOwC2GBRS85dXCaqGts3jXe0-bQSjGfBJAMnzZsYjUPan-Soa3h9TJzCQ5rGHyK1B1LRN-bveUtR9JkMA56qw/s1600/kode-blogger_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> 

Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2raOIhjryp_eVmtiazg3RNJGiL3ZlqQBADS9TJCb4VSkj5tyoY2v1kKDxjWDu4xB9EbK-o4dAYjK5sRx4z4TMRDlrW1d4ZPsfZsBNF_QqcMh5wV4ICYdsXF_01nLsR9Qmn7-ob2PNG4/s1600/kode-blogger_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> 

Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Fyv_M1cBpP7E_nS19Bfy4HE861JGV-UqZ9_s3sSohwRgNAItcas-gKRBO5p98643-e4qIwdrUX21O74VeIpb-PIkSXKMGfPwHkF775LBtiO9uDh5srdGulSGmGleMJ3cxrfwlmkpZn4/s1600/kode-blogger_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> 

Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrsCP954jUEwuou9Qz8csQl74KsX-zKz3lRQbbFZgWFJA9Cp6Md2lMgXxYVKz7WuurFRPZt5GIZSvXOYIGYEiYqfHCqNI14MxIvE4ZCD-g6ZKXxQHiDDoCOTGd_Xzmm-GUFrx4w1RjhWM/s1600/kode-blogger_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> 

Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcc0ApHfk-oFOkgF6AyQUsoswukCKMAQvagH5L9UJHPvpoQzLKQ4hAFcf81VsXMudXlSflyU0M65pU7CegNda9lTM9LKNjvsjTTeXCH9rlmRAKxEwFitwN2_jkvG_fVN4Xy4l_NItAr44/s1600/kode-blogger_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> 


Sip... Search Box Simpel dan Keren Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana. 
Semoga Bermanfaat.

Tips-Trik Blog

Modifikasi Widget Popular Post With Grid Layout

Cara membuat atau memodifikasi widget popular post menjadi lebih keren bergaya grid layout, seperti yang kita tahu untuk tampilan widget bawaan blogger ini cukup menarik, tapi bisa kita modif lagi dengan gaya yang berbeda, dan lebih keren tampilannya. Pastinya diluar sana sudah banyak yang share tentang topik ini. Saya ulas lagi disini karena saya awalnya mendapat masalah dalam proses pemasangan kode scriptnya, jadi mungkin postingan saya ini bisa mempermudah sobat blogger yang mengalami masalah dalam menerapkan cara modifikasi popular post ini.
Biar makin jelas dan gamblang neh saya sediakan juga screenshotnya masbro :

Modifikasi Widget Popular Post

Oke, langsung saja kita praktek masbro
1. Login blogger pastinya
2. Pergi ke munu Design > Page Element > Add a Gadget
3. Pilih Widget "Popular Post"
4. Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa sobat atur sendiri.

Setting Configure Popular Post

4. Lalu Save.
5. Lanjut ke Edit HTML, beri ceklist pada Expand Widget Templates. Jangan lupa juga BackUp template sobat (buat jaga-jaga kalo ada yang error).
6. Cari kode (CTRL+F) ]]></b:skin>
Dan tambahkan kode CSS berikut diatasnya:

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} 

7. Lanjut cari teks PopularPosts1 (CTRL + F) biar lebih cepat.
Ini kode script lengkapnya:

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

8. Gantilah kode script diatas dengan kode script berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

9. Terakhir Simpan dan lihat hasilnya.

Tips-Trik Blog

Membuat Blockquote Keren Di Blog

Artikel yang saya cari-cari dari dulu, yaitu blockquot yang tampilannya cantik dan menarik dilihat, saya kira itu bukan blockquote melainkan text area yang diberi background, tp ternyata saya salah... hehee

Nah, karna itulah kali ini saya akan bahas cara membuat blockquote.
Seperti yang sudah kita tahu Pada blogger sendiri sudah ada fitur Blockquote , tetapi setiap tampilannya berbeda tergantung kode CSS yang ada pada tempalte blog Sobat.
Bagi Sobat yang ingin membuat tampilan layaknya punya saya, silahkan ikuti langkah-langkah berikut :

Gambar

Contoh tampilannya seperti di bawah ini :

Contoh Blockquote Kode-Blogger

Cara Membuatnya Sebagai berikut :

• Login ke akun Blogger Sobat
• Masuk Tata Letak
• Edit HTML
• Beri centang pada "Expand template widget"
• BackUp template sobat dulu, dengan cara klik "download template lengkap"
• Cari kode Berikut : .post blockquote {
• Berilah imbuhan, sehingga kodenya jadi seperti berikut :

.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}

• Simpan Template.

Keterangan :
Cara menggunakannya, waktu buat postingan baru cukup klik gambar "blockquote" yg sudah ada di form posting blogger.
Semoga bermanfaat. 

Tips-Trik Blog

Membuat Text Area Yang Keren

Postingan saya sebelumnya pernah membahas tentang cara membuat text area, untuk pengertian text area sendiri, pasti sobat blogger sudah pada tahu, sedikit ulasan text area kurang lebih adalah kotak aktif yang dapat digunakan untuk menempatkan teks atau kode atau script, untuk memudahkan dalam melakukan copy-paste.

Nah kali ini saya akan membahas kemabali cara membuat text area dengan berbagai macam dan bentuk yang lebih menarik tentunya, mungkin sobat akan tertarik.

Gambar

di bawah ini ada beberapa macam text area yang usudah di edit :























Nah text area di atas merupakan sebagian yang telah di edit dari script aslinya, menarik bukan ?? silahkan edit menurut kesukaan sobat masing-masing.
Cukup sekian dari saya, semoga bermanfaat.

Tips-Trik Blog

Cara Mudah Membuat Menu Horizontal Di Blog

Postingan saya kali ini akan membahas tentang bagaimana membuat menu horizontal di blog. menu horizontal sangatlah penting dalam sebuah blog, jadi wajib kiranya menu blog ini ada di blog kita, karena sangat berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu. Biasanya pada template standart blog ada yang belum terpasang menu horizontal, Buat Blogger yang pada template-nya belum tersedia menu horizontal, sobat bisa menambahkan dengan cara berikut ini (ini cara simple-nya)

Screenshot

Langkah-langkahnya:

• Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Beri tanda centang "Expand Template Widget"
• Carilah Kode Dibawah ini:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

• Jika sudah ketemu, silahkan copy paste kode berikut tepat dibawah kode-kode pada langkah diatas

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

• Lalu Simpan Template.
• Lanjut lagi sob... kalo dilihat pasti menunya bukan horisontal tapi vertikal, hehee.. Nah untuk itu kita perlu menambahkan kode css, agar menu menjadi horisontal dan lebih menarik tentunya.
• Masih pada bagian Edit HTML, dan carilah kode: ]]></b:skin>
• Lalu copy paste kode dibawah ini tepat diatas kode: ]]></b:skin>

/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

Keterangan:
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

• Setelah itu sobat jg perlu merubah pada kode berikut (ini kode pada langkah diatas):

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

Sobat Ubah Menjadi:

<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>

Keterangan:
Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. begitu jg seterusnya.

• Simpan template dan lihat hasilnya.

Tips-Trik Blog

Cara membuat Tag Cloud Dengan Background Effect

Sedikit Penjelasan tentang apa itu Tag Cloud, dan apa fungsinya.
Tag Cloud merupakan sebuah box yang berfungsi sebagai wadah untuk sekelompok link dalam sebuah web.
Fungsi dari tag could kurang lebih sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. lebih jelasnya liaht gambar dibawah ini.

Gambar

Berikut cara membuat Tag Cloud menggunakan efek background :

1. Login ke akun blogger sobat
2. Masuk Tata Letak
3. Edit HTML dan ceklist/centang "Expand Template Widget"
4. Biasakan sebelum sobat mengedit template, backUp dulu templatenya, dengan cara klik "download template lengkap"
5. Carikode berikut : ]]></b:skin>
6. Letakan kode css berikut dan taruh di atas kode ]]></b:skin>

.tagcloud {
width:300px;
font-family:Times;
padding:15px 8px;
border:solid 1px #eee;
background:#fff;
}
.tcloud {
padding:3px 6px;
text-decoration:none;
}
.tcloud:link {
color:#003EBA;
}
.tcloud:visited {
color:#ff900;
}
.tcloud:hover {
color:#ffffff;
background:#003EBA;
}
.tcloud:active {
color:#ffffff;
background:#5D7CBA;
}

7. Simpan Template.

8. Kemudian masuk ke Elemen Halaman, Tambah gadget, pilih HTML javascript, dan pastekan kode berikut :

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

9. Edit dan simpan.


Keterangan :
1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html
3. Nama Link-1 s/d Link-10 = Judul Posting.
4. Title Link : berisikan penjelasan singkat Nama Link.

Semoga Bermanfaat. 

Tips-Trik Blog

Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3

Kali ini lanjut lagi share tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Efek gambar pada postingan blog, pastinya akan membuat blog lebih enak dipandang mata. Seperti yang kita tahu, ada banyak macam dan cara untuk membuat efek pada gambar di postingan blog, salah satunya yaitu efek image dengan JQuery, tapi yang akan saya bahas disini yaitu efek image dengan CSS3. Dibawah ini merupakan kumpulan efek-efek gambar pada postingan blog yang bisa saya kumpulkan.

Wuookeee.. langsung saja praktek sob !!
1. Login blogger
2. Pergi ke Edit HTML
3. Beri ceklist pada Expand Widget Templates
4. Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>

DEMO : Arahkan mouse ke gambar dan lihat efeknya.
Dan berikut adalah KODE CSS beserta DEMO untuk efek gambar pada postingan blog :

.post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}
.post img:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

.post img{
    transition:all 1.2s ease-out; 
    -o-transition:all 1.2s ease-out; 
    -moz-transition:all 1.2s ease-out; 
    -webkit-transition:all 1.2s ease-out; 
} 
.post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);  
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); 
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
} 

5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Tips-Trik Blog