Blogger Tips And Trik

Sabtu, 31 Oktober 2015

Fb pop up

Rabu, 13 Juni 2012

Social Bookmarking Buttons With Spinning Effect for Blogger

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.

Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven't such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Check the demo yourself!

Here is how to add these cool buttons to your Blogger blog:

Login to Blogger > Design > Edit HTML > Expand widget templates. Find the following code in your template:

<data:post.body/>

Just below that add the following group of codes:

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/hacktutors' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

Replace hacktutors with your feedburner username. Again, find the following code:

]]></b:skin>

Just above that code, past the following:

.spinning_icons a{
width:48px;
height:48px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4JbNbJVZZmb72qivpSl98kASLSSMDJmlvibg9OH1ilvzh54KkhKtWCoe2_RU_ABX-D4LElI1fiVuQdbwwYJfZVt-2dJsmbKWvY_FlutlkK923b5YUEogL8aFSTzRHxTGHM7tZ10q4nDo/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9TcEbnhMdxLvhuPMChwZNqxkeCAZ4lt2nGDUFHexuVigeFRDTC-vA2mFXj2fXBEEoWdlvb5jc67MZcUFKDZMHfP1cnKTlhLKJPqOkn8HA5oUchN-cSL6aTcTISSPMwA-q5sKUaIqmZ7E/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLDQyBuiRsr4hCi-2fxxasAhRzRb9dqm8t_7KltPX6kXCgIW2sHzjn8rR1VLJfkAr-6VKALAJI3ZJlKngC59AD4zH9lJn77-4CLz-x2KEHLcPl0gtzGgQ0RmJi8XGbcwxuAnyWiID9sKE/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZrBjIGe4lCCq7UharEZ5pqujJXE57dkRe_V9X0ju68nkS8L2J3Hoslq7KFhDsvHA8epPsQr2cgFmAsZWRqvSTbwRUS8DexfKaRWFuJgEDL6kmwiIfol1gxMYB7gRlYxm41kGJ7hCWdc/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGqkmC226Q_6jm9oWRQa62hzLFWHo3HJB9LcvHUIo8c25q7QfswjGzSJERz44nb3isXKq4FwtqPTs9uAbpwUW70PymeZMG_VD50po8TV7lgKKtuxrZNoLCFoj1DuhB0GXc0hUjGMj6_g/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWkPaTLNRUk5tMqnROS2Otl2-1Cz01hxvAnSk4MslJueFRhudtU8Al_FUUmC_ZNxJ_2HH8bQSqknU0I7GZXBhFqDC_1Cjj5dp3RPAmS3Suq20u2dYrrW2LdNRt14Svd0cCQBAOONYS_w/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Thanks to Paulund for this cool CSS3 bookmarking button spinning effect.

Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :
1. Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2. Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfg-8GzRALvfdj4YtYe5uffSpoMLFqBqSTAM-iqyyi8JUJN1uqe92L_hyGxiAxx3emMHN9Iue_S-v8Lnq0W83QEJl4a2wqhFc0HXVtW0luQRu64W9X6xMlfKAJPipFrbm42BD-0ldFC-u/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVAOmem_Bkegenp3aHC5fnkxzo0ljdmhnaLRDFCgB1zMg9sUshnepvFOXGUzBs5fh6kgPPrwsLDooJI2bHoZr_xPlJ-I9UYAiH08IvCuYKRlUfuDyIQ0sEQ1XHjggS1AH_RK6cT469CUVl/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5sGB__muMkSzQhmAW8Z3SO0tMhpQhD_BPO-agOobSCFsVJPnfaJrID-xK3VE3JAspcpy-hwpyu_Hb1DnH-sDYgcJ3ITQmFGtQfqJShuIvNKi0q0YAyzx4RR3h6ormbsaOM8pAOlKc9gaO/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNAxrNiUOTd6Bi8pFpqHgHB6Ly_xJiaMXO1Tq2vAYBcZae412r2HCUi328ZdNIEucJN8_8DbQJfRrs4zwXC1-X25nRHM0rjJC4sT8l7jk3UriMf9YqcoSC_5y6rBG46CGufWdDUwsfidr/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTh2-aJzXXQzCIwPke3DFixMsvM-5PXf6gg9a1eaEdEyz_lYBqE_8jrg0dIsAFO5-MQA9ht0OK6T9u29oa0a9k1P1UIiDphifIsePz_FxvSQmAjIuPt8zfgLai1L-0O_Vs0VFLDNvCXBO8/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoXAR89WE7XFczVEFndPPwVSDnHV8oEoId67toeNtVr2jjNMkzggYM4wI6M33CNaRu-HZdkbdByPbemjGxkAvuAVVEgducpl3297VFpTHxelAcARGVEiCGrJtC5gX9LLeuqD7RyamqqX6/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

Sabtu, 19 Mei 2012

Cara Membuat Gambar Berputar Seperti Jam Pada Blog

Sering kita menjumpai di blog atau website ada gambar yang berputar seperti jam, nah kali ini saya akan memberikan kodenya untuk membuat gambar berputar di blog.
Langkah- langkahnya seperti ini:
1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi:

* {margin: 0;padding: 0;}#clock {position: relative;width: 300px;height: 300px;margin: 10px auto 0 auto;background: url();list-style: none;}#sec, #min, #hour {position: absolute;width: 331px;height: 220px;top: 0px;left: 100px;}#sec {background: url();z-index: 3;}#min {background: url();z-index: 2;}#hour {background: url();z-index: 1;}p {text-align: center; padding: 10px 0 0 0;}

</style><script src="http://generation-platinum.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">

</script><script type="text/javascript">

$(document).ready(function() {setInterval( function() {var seconds = new Date().getSeconds();var sdegree = seconds *<span style="color: #444444;"> 6</span>;

}, 1000 );setInterval( function() {var mins = new Date().getMinutes();var mdegree = mins * 6;var mrotate = "rotate(" + mdegree + "deg)";$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});}, 1000 );});

</script><ul id="clock"><li id="sec"><div class="details">

<img src="<span style="color: #4c1130;">MASUKAN URL GAMBAR</span>" /></div>

</li>

</ul>

3. Ganti kode dengan url gambar anda dan simpan.

zFPmenu

zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan).dan ada tobol buat scroll top.

Contohnya seperti ini

cara buatnya seperti ini:
masukan script di bawah ini di atas tag kode </body>

ket: Penggunaan / Konfigurasi menu Ganti menu dengan menu Anda sendiri. Class place = "dir" atribut dalam tag li dimana Anda ingin menambahkan submenu. Mengatur / Variabel Anda dapat mengubah warna tema dan berbagi pengaturan tombol visibilitas. var zfpm_colorTheme = 'light' Mengatur warna tema untuk widget menu. 'light' atau 'dark' Var zfpm_shareBox = 'yes' ini untuk menampilkan tombol 'Retweet' Twitter, Facebook jadi kalau sobat tidak mau menampilkan tombol nya sobat tinggal ganti dari "yes"menjadi "no"