MEMBUAT SOSIAL PROFIL KEREN DI BLOG
Sumber: TriksTrikBlogging.com
Step by step for blogger
MEMBUAT LOGO KEREN DI BLOG
Sumber: TriksTrikBlogging.com
Cara menambahkan widget ini ke blog
Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.Step by step for blogger
- Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
- Copy dan paste kode berikut pada kolom konten:
<div class='metro-social'> <li><a class="fb" href=http://www.facebook.com/kedaiakay rel="nofollow"></a></li> <li><a class="tw" href=http://twitter.com/ihsanakasyah></a></li> <li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li> <li><a class="pi" href=http://pinterest.com/akasyah rel="nofollow"></a></li> <li><a class="in" href=https://www.linkedin.com/in/akasyah rel="nofollow"></a></li> <li><a class="yt" href=http://www.youtube.com/ihsantaufik2013></a></li> <li><a class="fd" href=http://feeds.feedburner.com/akasyah rel="nofollow"></a></li> </div> <style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style>
MEMBUAT LOGO KEREN DI BLOG
Sumber : http://buka-rahasia.blogspot.com/2011/06/cara-mudah-membuat-logo-blog-online.html
Tampilan logo blog pada header yang khas dan memiliki desain yang bagus
pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan
sebagai bagian dari header yang berupa paduan gambar dan gambar teks
yang berisi nama atau ciri dari suatu blog. Umumnya, logo blog
digunakan untuk menggantikan teks pada bagian title dan deskripsi
header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text,
bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan
untuk membuat teks logo dengan menggunakan software image editing
semacam Correl Draw maupun Photoshop.
Pengen punya logo teks blog yang seperti ini?
Atau yang seperti ini?
Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator
yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat
dengan mudah membuat teks logo blog maupun logo blog untuk header dengan
hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6
online logo generator/creator yang mudah untuk digunakan sebagai
berikut:
Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.
FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.
Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.
4.
Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.
Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.
Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.
Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Header Blogger/Blogspot
MEMBUAT FANSPAGE MELAYANG DI BLOG
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Kalau Bermanfaat,Silahkan Dilke Ia</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/kedaiakay?ref=hl&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=kedaiakay&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div style="text-align: center;">
<a href="http://fujianto21-chikafe.blogspot.com/2013/10/cara-membuat-fanspage-melayang-di-blog.html" target="_blank">Get This Widget</a></div>
<a class='close' href='#'>×</a>
</div>
Warna Hijau Tulisan
Warna Merah alamatmu
Warna Biru Tweet
No comments:
Post a Comment