Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
- Login ke Blogger
- Masuk ke Template >> Edit HTML (centang expand widget templates)
- Letakkan kode CSS di bawah ini diatas ]]></b:skin> :.social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
} - Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum</head> :<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a><a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a><a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a><a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Pinterest</span></span></a><a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a><a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a></div>
Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja. - Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
- Terakhir, Save Templates
Sekian dan semoga ada manfaatnya
Semuaberita - Setelah kemarin saya menulis artikel tentang Membuat Berita Headline di Blogger kali ini saya akan menulis artikel tentang Membuat Menu Horizontal Melayang di Blog.
pengen tahu caranya?
pantengin terus artikel saya ini sampai selesai :D
oke jangan banyak bicara lagi kita mulai Tutorialnya..
Fungsi langkah diatas adalah agar navbar standar Blogger anda tersembunyi, namun jika anda sudah menyembunyikan navbar, lewati saja langkah ini
5. Sisipkan beberapa rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> lagi.
pengen tahu caranya?
pantengin terus artikel saya ini sampai selesai :D
oke jangan banyak bicara lagi kita mulai Tutorialnya..
Pertama
1. Buka akun blogger anda
2. Masuk ke pengaturan templete dan klik Edit HTML
3. Cari kode ]]></b:skin>
Anda bisa menggunakan CTRL+F agar lebih cepat ketemu kodenya
4. Selanjutnya masukkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi.
#navbar-iframe { height:0px; visibility: hidden; display: none; }
Sedikit Keterangan:
5. Sisipkan beberapa rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> lagi.
.bilah-menu-atas {width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}
nah itulah yang akan kita buat saat ini langkah pertamanya adalah:
Berikut tutorial Langkah Membuat Headline News :
1. Login ke akun blogger
2. Masuk ke Rancangan pilih Elemen laman
3. Klik Add Gadget --> HTML/JavaScript
4. Masukkan kode berikut di kolom HTML
1. Login ke akun blogger
2. Masuk ke Rancangan pilih Elemen laman
3. Klik Add Gadget --> HTML/JavaScript
4. Masukkan kode berikut di kolom HTML
<script type="text/javascript">
var hn_url_blog="http:/semuaberita.net/;
var hn_jumlah_post= 15;
var hn_warna_latar="#333333";
var hn_warna_garis="#000000";
var hn_posisi="top";
var hn_tampilkan_judul=true;
var hn_backlink= true;
</script>
<script src="http://naughtyric.googlecode.com/files/Headlinenews.js"></script>
keterangan:
ganti url yang berwarna biru menjadi url blog sobat
5. Simpan
Perhatikan kode yang berwarna biru ganti sesuai dengan keterangan berikut :
- hn_url_blog adalah URL blog Sobat.
- hn_jumlah_post adalah jumlah judul artikel yang mau ditampilkan.
- hn_warna_latar adalah kode warna untuk latar belakang headline news.
- hn_warna_garis adalah kode warna untuk garis bingkai headline news.
- hn_posisi untuk menentukan posisi headline news, apakah di atas ("top") atau di bawah ("bottom").
- hn_tampilkan_judul bernilai true untuk menampilkan tulisan "Headline news of NAMABLOG" di bagian kiri dan false jika tidak ingin menampilkannya.
Jika artikel Cara Membuat Headline News di Blog bermanfaat atau ada yang kurang anda bisa menambahkan, silahkan berikan komentar sobat.
Selamat mencoba :)
Pada postingan terbaru kali ini Semuaberita.net akan share cara mudah untuk memasang widget alexa rank pada blogger.com yang sobat kelola saat ini. Mungkin sudah banyak para master blogger yang sudah menerapkan cara seperti ini, akan tetapi artikel ini dibuat bertujuan agar para blogger pemula yang belum mengetahui cara memasang alexa hari ini jadi tau caranya.
Alexa rank akan memberikan peringkat berdasarkan banyaknya traffic pengunjung blog atau website karena semakin banyak pengunjung pasti alexa rank akan semakin baik. alexa rank juga memiliki toolbar yaitu alexa toolbar. dengan memasang alexa toolbar data yang didapatkan akan lebih maximal dan akurat, atau banyak juga master blogger yang memilih untuk memasang alexa widget.
Dengan memasang alexa widget di blog atau website secara otomatis mesin alexa akan mengetahui secara akurat berapa pengunjung serta backlink yang didapatkan blog atau website, dengan di pasangnya widget alexa pada blog atau website sobat, semoga alexa rank situs sobat akan semakin bagus, alexa rank pendeteksiannya cepat dalam melakukan update sehingga hasil updatenya akan terlihat dalam 1 - 2 hari, untuk menaikan ranking alexa adalah dengan mencoba meningkatkan trafik atau jumlah kunjungan ke blog atau website, Berikut ikuti langkah - langkah cara pasang widget Alexa Rank pada blog atau website :
- Pertama Kunjungi Alexa.com
- Masukan alamat Url blogger anda
- Klik build widget
- Copy kode widgetnya ke notepad
- Login ke akun blogger
- Klik tata letak
- Klik tambah gadget
- Pilih Html javasribt
- Paste kode widgetnya
- Klik simpan
Semoga postingan artikel Semuaberita.net kali ini tentang cara memasang widget alexa pada blog atau website dapat mengoptimalkan reputasi dari situs bisa bermanfaat buat sobat di seluruh dunia,...
Blog yang berkualitas dan profesional juga dilihat dari tampilan widget-widget yang dipasang. Dan Salah satu widget yang banyak digunakan oleh banyak blogger adalah widget random pos baik itu Random Post yang biasa saja atau pun random post yang dilengkapi dengan thumbnail atau gambar.
Apa itu Random Post?
Random post atau yang sering disebut dengan artikel ''sembarang'' adalah widget yang menampilkan postingan atau artikel blog kita secara acak baik itu artikel yang baru dibuat atau pun artikel yang sudah sangat lama, Jadi artikel-artikel lawas anda dapat kembali dibaca oleh pengunjung blog.
Tentu saja ini sangat menguntungkan kita karena dengan random post ini pageviews pada tiap artikel blog saudara bisa meningkat dari sebelumnya-sebelumnya. Sehingga memberikan efek yang bisa dibilang cukup besar dalam meningkatkan kualitas blog Kita.
Cara Memasang Random Post Beserta Thumbnail
Sama halnya dengan Popular Post yang bisa dipasangi gambar atau Thumbnail, Random post yang akan saya bagikan kali ini juga sudah saya modifikasi dengan gambar sehingga akan mempercantik tampilannya. Jadi Tidak hanya itu pada random post saya kali ini juga ada ringkasan postinganya yang dapat membuat pengunjung tertarik untuk membacanya.
Buat anda yang tertarik memasang widget random post ini, silahkan ikuti tutorial sederhana di bawah ini:
1. Login dengan akun blog saudara
2. Masuk ke menu TATA LETAK
3. Klik tambah gadget --> pilih HTML/Javascript
4. Masukan script di bawah ini:
<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #686868;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 120; //Jumlah karakter postingan yang ditampilkan
var numofpost=5; //Jumlah postingan yang ditampilkan
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"
if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>
Note:
- Kode warna Hijau: Untuk Mengatur lebar dan tinggi gambar/thumbnail pada random post nanti.
- Kode warna Merah: Adalah Jumlah Postingan yang ingin ditampilkan.
- Kode warna Biru: Adalah Jumlah karakter/huruf pada ringkasan yang ingin ditampilkan.
Sekian tutorial saya kali ini, maaf jika saya ada kesalahan dalam pengetikan.
jika ada yang tidak dimengerti bisa di komentari di bawah ini.
Semuaberita - Gara-gara saya pengen sekali mengganti Icon yang ada pada kursor di blog, Dan akhirnya setelah googling kesana kemari saya menemukan juga sebuah situs yang menyediakan banyak Icon-icon kursor pilihan. Icon kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ dan banyak sekali pilihan lainnya. jadi kita tinggal memilih sesuai selera saja. Untuk tutorial kali ini saya akan membahas tentang cara memasang icon kursor ini di blog, tetapi kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template kita. Dibawah ini ada beberapa sample icon untuk kursor yang saya ambil berikut URL alamat kursor tersebut.
URL : 
URL : 
URL : 
URL : 
URL : Cara mengganti gambar kursor di blog :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expand widget template.
3. Carilah kode </head> pada template anda dengan menggunakan Ctrl F.
4. Copy kode CSS dibawah ini dan letakkan tepat diatas kode </head> .
<style type='text/css'> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/sweden.gif"), auto;} </style>
5. Simpan template anda dan lihat perubahan pada gambar kursor
6. Jika sobat ingin mengganti gambar kursor dengan gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/ .
Nah ternyata mengganti gambar kursor di blog memang bisa jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang siip dah. Tinggal giliran sobat blogger nih, selamat mencoba ya !
Sebenarnya, kita mungkin tidak akan mendapatkan sesuatu spesial dari widget ini. akan tetapi, widget ini dapat meningkatkan kinerja website anda dengan membantu pengunjung untuk dapat mencari artikel lebih dalam lagi. Jika pengunjung tidak mendapatkan informasi yang sesuai dengan yang mereka cari diblog anda, maka mereka dapat mendapatkan informasi tambahan di Wikipedia melalui widget ini. Jika anda masih belum mengerti anda dapat menyimak contoh berikut ini : jika seorang pengunjung mencari artikel tentang "HTML" di blog anda akan tetapi pengunjung itu tidak menemukannya, maka pengunjung tersebut dapat mencari artikel tentang "HTML" di Wikipedia melalui kotak pencarian.
Proses menambahkan widget kotak pencarian Wikipedia di Blogger sangatlah mudah tidak butuh memahami koding ataupun JavaScript dan hanya butuh beberapa klik saja untuk meng-installnya, silahkan anda simak panduannya dibawah ini.
Proses menambahkan widget kotak pencarian Wikipedia di Blogger sangatlah mudah tidak butuh memahami koding ataupun JavaScript dan hanya butuh beberapa klik saja untuk meng-installnya, silahkan anda simak panduannya dibawah ini.
- Pertama Silahkan login ke akun Blogger anda lalu klik blog yang anda ingin tambahkan widget kotak pencarian Wikipedia kedalamnya.
- Klik menu Tata Letak di bagian kiri.
- Klik Tambahkan Gadget >> Gadget Lainnya, dan pilih Wikipedia yang berada tepat dibawah widget Formulir Kontak.
- Konfigurasikan widget tersebut dan jika sudah klik Simpan.
Sangat mudah bukan?, ya memang mudah, sekarang anda hanya perlu mengatur letak widget tersebut ke Header, disamping Header, dibawah Header, Sidebar atau diatas Footer blog anda. Nah, sekian dulu artikel tentang Cara Menambahkan Widget Kotak Pencarian Wikipedia di Blogger, Dan semoga bermanfaat bagi kita semua.
