F For Fauzie

Here This Streaming NET. TV Live Streaming
Check This Out ...

Streaming NET. TV Live Streaming

Membuat Tombol Share Dibawah Postingan Blog Super Keren

Kali ini Ane akan share tentang Trik Membuat Tombol Share Dibawah Postingan Blog Super Keren yang terbaru .. silahkan simak postingan ane dibawah ini.

Untuk menghindari kesalahan ada baiknya kalian backup template kalian terlebih dahulu.

Pertama - tama Login Blogger

Pilih mode Template lanjut pilih Edit HTML

>> Cari kode berikut ]]></b:skin>

Kemudian letakan kode dibawah ini diatas kode ]]></b:skin>

#share-button-fauzie {margin:0 0 8px;padding:0;overflow:hidden;}#share-button-fauzie p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#eaeaea;font-color:#000;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;}#share-button-fauzie a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff;}#share-button-fauzie a:hover {top:1px;left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1);}

Setelah itu cari kode <data:post.body/>

kemudian letakan dibawah kode tadi letakan kode script dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<div class='clear'/>
<div id='share-button-fauzie'>
<p>Bagikan ke</p>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a class='facebook' expr:href='"https://plus.google.com/share?url=" + data:post.url' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a>
<a class='twitter' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<a class='twitter' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' style='background:#000000;' target='_blank' title='Digg this!'>Digg</a>

<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>

<div class='clear'/>
</div>
</b:if>

langkah terakhir Save template kalian.

Trik Membuat Tombol Share Dibawah Postingan Blog Super Keren

Baca Selengkapnya →

Do you want to alter your Blogger’s Popular Posts Widget to make it more prominent and attractive for your visitors? Having a Popular Posts Widget in the sidebar has numberless advantages. It helps new visitors to pick those articles that are most trending on a website. However, Blogger’s Built-in Popular posts widget is not that much attention-grabbing in terms of designing and displaying. Therefore, if you wish to transform your Popular Posts widget into a masterpiece then, you have to rely on CSS Style sheets. After lots of request from our loyal readers, finally we have decided to share our custom popular post design that we are using on this MBL Blog. In today’s article, we will reveal its CSS Style sheet.

Adding Popular Post Widget To Your Blogger Blog:

The Steps are extremely straightforward so you can easily customize your widget without facing any problem what so every. Just follow the following instructions.

Go To Blogger >> Your Blog >> Layout.
Add a Gadget >> Now within the list of widget look for “Popular Posts” and select it.
Now match the settings which are shown in the screenshot below.

Select “Last 7 Days” (Weekly).

Make sure you check the “Image Thumbnail” and “Snippet” because we need to display Small images along the trendy article, this will add more spice to your site.

You can display up to 10 trendy articles, but we would recommend you to select 7 from the Drop down list.

Now go ahead and Save the widget and that’s it we have successfully integrated a Popular Post widget.

Customizing and Stylizing Blogger Popular Post Widget:

Once again go to Blogger >> Template >> (Create a backup in case anything went wrong).
Select Edit HTML >> Proceed.
Now with in the Template Search for ]]></b:skin> (CTRL+F Shortcut to quick search) and just above it paste the following CSS Coding.

/*--- MyBloggerLab --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKzd3aOJzBqI5rdQRONwszO3HZaw64CPMO9WkM2QD0kjaNxTf9eBofLasqMNYrBN_vf6Pp-lofmjGcjkfrul1caBaggWfX7Ftp1bQo7RxiapUtF6frJ0oS5Q3ILi4SBHCXN51Bqxv3PI/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

All Done: Finally, Press the Save Template button and you have successfully customized your y post widget. Now visit your site and enjoy the picture perfect results.

source : www.mybloggerlab.com

Trik Customize Popular Post Keren Widget di Blogger

Baca Selengkapnya →

Here This Streaming Kompas TV
Check This Out ...

Streaming Kompas TV

Baca Selengkapnya →

Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Hay sobat , disini saya akan memberikan tips blogger kepada kalian tentang bagaimana cara membuat kotak pencarian atau search box di blog kalian. Nahh,, disini saya mempunyai banyak pilihan model dan warna kotak pencarian, dari yang simple sampai yang keren dan berkualitas. Nah, silahkan kalian pilih salah satu diantara banyak pilihan dibawah ini :

Kotak Pencarian 1
Caranya :
1. Login ke akun Blogge
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
7. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.

Kotak Pencarian 2
Caranya :
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Klik HTML/Javascript
6. Dan Pastekan Kode dibawah ini :

Keterangan :
Ganti http://mazinubersahabat.blogspot.com/ dengan nama blog Kalian.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.

7. Lalu Save dan Lihat hasilnya!

Kotak Pencarian 3
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvvIJ197T1KoxbYUYyMhbWhhbtHYK_UOyBH5x8pN_GYRwpLkKlLMogQijmKRW1lA59MbKJJUSnj0opbfTsTV20B50seh_k9O9kLScNW268kM0nT7Kn-HyL5EEBIx8fkcFpOmbiu2s0OQb/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" 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="abutton" /> </form></div>
</span>

Keterangan : Ganti Tulisan warna merah sesuai keinginan kalian, itu berfungsi untuk menampilkan tulisan ditengah-tengah kotak komentarnya!

Dan Hasilnya nanti seperti ini :

Kotak Pencarian 4
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja6vQd8xZkS1Fu19RrheNhKzw-jlfGBsIxLAxkLM-01DpNdzPo_3u6mUZXq8AMIG-9MxtJjwfGQfFGl6jy2j7SxKBp1zxlRsaN9orKsWdG2rTIP1TDFOr4QJf1VvReKBG_-PRt4qZgaHM/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

NB : Ganti warna merah sesuai dengan selera dan kebutuhan kalian yang nanti tulisan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!

Yang hasilnya nanti seperti ini :

Kotak Pencarian 5
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

Keterangan :
Ganti Warna Merah dengan berbagai macam pilihan style dibawah ini :

Gaya Pencarian warna hijau :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUSPt4vpKlFtvU0y2lsD1njTvt5xs_khZXhR0yTu9fH1QoplLaLyaOXZBA8H43DR5y4pQac-9ws04LBdl6hTuKmh-dZhyphenhyphenqGAmoxg6isrPNdLzrDFYI8NBmQwndNGcu8F2rLGKUw8YeLhY/s1600/impoint.blogspot.com-green.png

Gaya Pencarian warna merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtf7cqxfp6JM7hDmdpDCquqcu6Oev4xjLQMmfqyA3fPPRLjnALgHG4vdKU6pJ2uQoYphVrUAO2DS9tYR8xv2EAmy6blmBOjkI0cOKq9aexeCXyYrrmEQYZcKuct50CHK7Xtw5vFk_spXHt/s1600/impoint.blogspot.com-red.png

Gaya pencarian warna biru :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPzyX3jeNXopl_EPrQDXlvTqkSa1Dm5VlKjhJuz72DQZDxzlpeHSPtRfZLMwfm6a5VOcfFH7R-xAlLx36rHOshLLu4z3Rns1iKVp7UqsPucZvEH8FTj7Y4BXocccn79OL7iGiiX6JvCDX/s1600/impoint.blogspot.com-blue.png

Gaya Pencarian warna orange :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIs6Udsc-e95YcF48laaoTPCBV_nBJPzRGZ0d1wSd42wQ61DEULEGpBoS-PaaObY7WcxqXX8D2omTvaUFB_dsCgorny3Hu7CCsc2b7wp0ps_00FdVgAU3Km2zEfx52lPwdeI5fN02vBaKZ/s1600/impoint.blogspot.com-orange.png

Dan salah satu contoh hasilnya nanti seperti ini :

Kotak Pencarian 6
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

Yang hasilnya nanti seperti ini :

Keterangan :
Silahkan kalian ganti warna merah diatas dengan kode dibawah ini, untuk mengganti tipe dan style selera kalian,,

http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfk1upwLFPxY5dE5bauIFh9GmKS73S5sCdYeOeU4QSl02-GP6U38Zl7l0Stu6iXJXecck2ByL4p9Rp-nvtSP7ZeEnmRvLQUMf_P0i0AHmxwyBpSP6FVvr_BVbVumlh1REno0lWuWP4a-AD/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1TjQddgAa9NSaG7KpOdLYwX0DwgVSykm4cHYhawOgvsVmirXK4vKTK6jMXRg33wWBgAs51mcpL-Ph98BfpS4quo6YgwBZXYEAlMaza1PN4XGoBbvj5Yi2dsJ4DWN7v0Fl8S4pk-THDIor/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBKop8JNdnyBVoQ-VMXGBut4iJg1cbISWuwOuu4htcMSeE2Uvb-dHHkeLionXSfSSO6-L7KSyFZtivKpp6gVZmmoSuX2BTASGzpTbDajnY79GvIVrplC8Wn6fhIWpE6XhS1HEnODHc4EqK/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-SUtlszjy52i3DVlESOsiBf6FHypaULGBMv3cP9MMUzKDsuhcWUxcyl1S_KLaSnmQPB6BXotRrtyBkgbEG2OJoosOR04u2RKfwtcDBYntkK9jaYbNZvlE_lAfQib39ZDc4dbPRxFRYdv/s1600/lostsector-search-box-yellow.png

Okeh,, mazinu rasa cukup tentang artikel yang saya tulis mengenai 6 Cara Membuat Kotak Pencarian Paling Keren di Blog ini, semoga bermanfaat buat kalian!

sumber : mazinubersahabat.blogspot.com