Agustus 2013 ~ xbalzt poenya

Rabu, 14 Agustus 2013

cara menambahkan widget social media keren untuk blog anda

Unknown Rabu, Agustus 14, 2013 No comments

hello teman-teman xbalzt saya yang sebelumnya saya telah menambahkan cara menambahkan menu horizontal dropdown dan search engine keren untuk blog anda
dan sekarang saya posting kan bagaimana cara menambahkan
cara menambahkan widget social network keren untuk blog anda

seperti yang di bawah ini :

CARANYA ADALAH:
1. Masuk di Blogg anda sekalain.
2. Pergi ke DESAIN.
3. Masuk ke Tata Letak.
4. Tambah Gadget.
5. Pilih HTML/JavaScript.
4. masukan kode di bawah ini.

5. Terus Simpan Setelan.

SEKIAN DARI SAYA SELAMAT MENCOBA.
SEMOGA POSTINGAN SAYA INI BERMANFAAT OKE SAMPAI JUMPA DI POSTINGAN SELANJUTNYA.

cara membuat menu horizontal dropdown dan search engine keren untuk blog anda

Unknown Rabu, Agustus 14, 2013 No comments

hallo teman-teman sekarang saya posting kan bagaimana cara menambahkan menu horizontal dropdown dan seach engine keren untuk blog anda,,
saya bertujuan untuk membantu anda sekalian yang sedang belajar membuat blog yang keren dan simpel.

Login ke akun Blogger anda,
Setelah itu masuk ke menu Template dan klik Edit HTML
Kemudian copy kode dibawah ini tepat diatas kode ]]></b:skin>
untuk mencari kode ]]></b:skin> dengan mudah tekan tombol Ctrl+F

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #000; background: -moz-linear-gradient(#000000); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; }
#menu li { float: left; padding: 0 0 10px 0; position: relative; line-height: 0; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; }
#menu li:hover > a { color:#fff; text-decoration:none; display: block;} *html
#menu li a:hover /* IE6 */ { background:#4169E1; color:#fff; text-decoration:line-through; }
#menu li:hover > ul { display: block; }
/* Sub-menu */
#menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5); -moz-border-radius: 5px; border-radius: 5px; } #menu ul ul { top: 0; left: 150px; }
#menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; }
#menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#menu ul a { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */ { height: 10px; } *:first-child+html #menu ul a /* IE7 */ { height: 10px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
#menu ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul ul li:first-child a:after { left: -8px; top: 12px; width: 0; height: 0; border-left: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; }
#menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #04acec; border-bottom-color: transparent; }
#menu ul li:last-child > a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html
#menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ #search{ width:220px; float:right; margin:0px 5px 0px 5px; align:center; }
#search input[type="text"] {height:24px; line-height:29px; background: url(http://3.bp.blogspot.com/-qcqxuwepuw8/T7Ts0Iso9VI/AAAAAAAAAkg/oGskZqNwrZY/s1600/search_icon.gif) no-repeat 8px 1px #fff; border: 0 none; font: bold 12px; color: #333; width: 172px; padding: 0 15px 0 32px; -webkit-border-radius: 12px; -moz-border-radius: 3px; border-radius:3px; border:1px solid #eee; -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.7s ease 0 s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { width: 172px; } /* tutup Menu Horizontal Dropdown

Setelah itu cari kode </head> dan letakkan kode dibawah ini tepat dibawah kode </head>

<ul id='menu'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Link Exchange</a></li>
<li><a href='#'>Bisnis Online</a></li>
<li><a href='#'>Download</a>
<ul>
<li><a href='#'>Template Blog</a></li>

</ul>
</li>
<li><a href='http://xbalzt.blogspot.com/p/blog-page.html'>TV Online</a> </li>
<li><a href='#'>Download Anime</a>
<ul>
<li><a href='#'>Complete</a></li>
<li><a href='#'>Ongoing</a></li>
<li><a href='#'>The Movies</a></li>
</ul>
</li>
<form action='/search' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/> </form>
</ul>

Keterangan: Ganti kode yang berwarna Merah dengan nama menu yang anda inginkan dan ganti kode yang berwarna Biru dengan URL menu anda

5. Dan yang terakhir Simpan Template anda!