Cara download Uang: Tutorial Blog

Showing posts with label Tutorial Blog. Show all posts

Monday, September 9, 2013

Daftar Social Bookmark 2013 Terbaru

Daftar Social Bookmark dari PR8 sampai PR0

Mensubmit artikel ke situs social bookmark adalah salah satu metode mencari backlink paling gampang yang sudah tidak asing lagi di kalangan blogger newbie kayak saya dan juga para mastah-mastah SEO. Cuma bedanya kalo mastah SEO bukan cuma mengandalkan social bookmark saja dalam pencarian backlink, tapi juga menggunakan metode-metode yang lain yang tentunya itu semua rahasia mereka sebagai seorang mastah atau suhu SEO.

Nah berbicara tentang social bookmark atau bahasa gaulnya SosBok, kali ini saya ingin sedikit berbagi list atau daftar situs social bookmark yang ada di alam maya, baik dari dalam maupun luar negri. Semua daftar sosbok di bawah ini saya dapatkan dari berbagai sumber, dari nyari sendiri dan juga dari hasil ngintip para peserta kontes SEO. Ok, langsung saja dicatat daftar social bookmark di bawah ini yang saya urutkan berdasarkan Pagerank tertinggi, dari PR 8 sampai PR 0.

http://slashdot.org/ PR8
http://www.reddit.com/ PR8
https://www.stumbleupon.com PR7
http://www.faistapart.ca/ PR7
http://www.nettraject.com/ PR5
http://www.newsmeback.com/ PR5
http://www.social-bookmarking.net/ PR5
http://linkagogo.com/ PR5
http://fwisp.com/ PR5
http://www.ornamentalplantpatentprotection.com/ PR4
http://www.lintas.me/ PR4
http://infogue.com/ PR4
http://www.basketguide.com/ PR3
http://okenesia.com/ PR3
http://bookmarkgolden.com/ PR3
http://www.thetennisnetwork.us/ PR3
http://dreaminginamerican.com/ PR3
http://bookmarkz.info/ PR3
http://www.zbookmarking.com/ PR3
http://sfcsf.org/ PR3
http://www.video-bookmark.com/ PR3
http://www.titansonine.com/ PR3
http://www.indofeed.com/ PR3
http://blogger-id.com/ PR2
http://kojaxx.com/ PR2
http://www.memomu.com/ PR2
http://populerkan.com/ PR2
http://www.mosaiccontemporary.com/ PR2
http://suffil.com/ PR1
http://beritawoow.com/ PR1
http://sosbok.com/ PR1
http://anepunya.com/ PR1
http://lintasberita.in/ PR1
http://beritapilihan.com/ PR1
http://bookmarkindonesia.com/ PR1

PR0/NA
http://situsku.sumbawanews.com/
http://bookmark.dewaseo.com/
http://www.cendol.in/
http://kucapai.com/
http://www.qiel.com/
http://beritainter.net/
http://tempat.net/
http://www.chummy.us/
http://sosbook1.marketplus.co/
http://bookmark.beamcharged.com/
http://soloadv.com/
http://setbookmark.com/
http://perdetik.com/
http://befamoussite.com/
http://klubberita.com/
http://beritawan.com/
http://cepatnya.com/
http://jaditerkenal.com/
http://aspirasiku.com/
http://kanalku.com/

dikutip dari mas-sugeng.com

Saturday, August 10, 2013

Cara Membuat Blog di Blogspot.com Gratis dan Mudah

Cara Membuat Blog di Blogspot.com Gratis dan Mudah - Blog bisa dikatakan serupa dengan website, namun dalam hal ini website yang berbasis blog. Blog sendiri merupakan sebuah aplikasi berbasis web yang berisi tulisan-tulisan ~~tangan jahil~~ disebuah web umum lainnya, situs web atau blog yang seperti ini biasanya dapat diakses oleh siapapun dan dimanapun anda berada akan tetapi berada didalam jaringan internet. :D

Menurut gue blog itu bisa menjadi wadah dalam segala hal, seperti halnya lo mempunyai kelebihan namun orang nggak pernah menganggap kelebihan lo ada. Contoh semisal lo punya kelebihan dalam hal menulis, desain, websiters, programmer dll. itu bisa lo share ke dalam blog lo, tanpa kita sadari hobi atau kelebihan lo itu udah banyak yang menganggap. Yah mungkin sekiranya begitulah...

Cara Membuat Blog di Blogspot.com

1. Lo harus punya akun Gmail. Lo mau nanya gunanya apa? Wey Gmail itu produk dari Google, dan si Google ini si peluncur blogspot.com. Nah jadi lo ngerti kan antara Gmail, Google dan Blogspot?
Cara membuat akun Gmail Klik disini

2. Setelah selesai bikin akun Gmail, lo lihat kesisi kanan bawah dan ubah bahasa menjadi bahasa Indonesia. Baru deh lo login dan ikutin langkah-langkah selanjutnya, nah disini lo bakalan dihadapin sama tampilan blogspot yang dibawah ini, lo klik aja Lanjutkan Ke Blogger.

3. Setelah langkah diatas selesai lo bakalan dihadepin sama tampilan yang berbeda lagi, liat aja deh gambar dibawah ini yak. :p

4. Kemudian setelah lo mengklik tombol Blog Baru, maka tampilan akan berubah seperti gambar dibawah ini.

5. Pada gambar diatas lo diwajibin tuh untuk ngisi semua form yang ada. Judul lo isi dengan judul blog lu nanti, dan Alamat lo isi dengan alamat blog lo nanti. Misalnya lo ngisi alamat tipsdantriktech.blogspot.com, nah nanti ketika lo ketik alamat blog lo di addres bar mozilla dll itu bakalan menampilkan blog lo. Yah mungkin lo paham lah. Ketika lo selesai mengklik Buat blog! lo bakalan dihadepin sama tampilan yang baru lagi, nih kaya gambar dibawah.

6. Disitu ada tulisan "blog anda telah dibuat!" nah untuk memulai tulisan perdana lo diblog, lo cukup mengklik "mulai mengeposkan", dan akan tampil wajah layar komputer lo kayak dibawah ini.

7. Nah gambar diatas itu adalah tempat dimana lo menuliskan segala apapun terserah lo, asal jangan tentang bokep yak.. Sudah tertulis rapih semuanya, dilanjut deh lo klik Publish, dengan kekuatan alam dan doa semoga tulisan lo akan dilihat banyak orang.

Selesai deh.

Nah itulah sedikit ulasan tentang Cara Membuat Blog di Blogspot.com Gratis dan Mudah Semoga tulisan yang gue buat ini bermanfaat bagi kamoh-kamoh cemuanyah... Cemungudh eaaak...

Cara Mudah Membuat Tombol Share di Bawah Postingan

Cara Mudah Membuat Tombol Share di Bawah Postingan - Memasang Button Share di Bawah Postingan - Mesangan Share Button di Blog - Hallo bro, malem ini gue bakalan kasih beberapa kelebihan tentang widget yang ada di dalam template blog gue, nah kali ini gue bakalan kasih widget share ini beserta cara memasangnya. Ikutin tutorial berikut bro. :)

Cara Membuat Tombol Share.

1. Login ke akun Blogger lo.
2. Klik menu tab "Template" lalu klik "Edit HTML".
3. Kemudian cari ]]></b:skin> atau supaya lebih mudak tekan tombol Ctrl + F.
4. Kalo udah ketemu, lo letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#share-button{
border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:10px 0px;width:100%;float:left;height:20px;font-family: 'Noto Sans', sans-serif; font-size: 12px; font-weight: 400;}
#share-button p{
float:left;
background:#fafafa;
display:block;
padding:5px 8px !important;
margin-top:-3px;
border-radius:6px 6px;}
#share-button a{
position:relative;
float:left;
border-radius:6px 6px;
display:block;
color:#fafafa;
padding:5px 8px;
margin:-3px 3px 3px;}
#share-button a:hover{
}

5. Setelah udah diletakan kode tadi, kemudian lo cari kode <data:post.body/>. Tapi kalo lo udah masang Read More otomatis di template lo, maka lo pilih <data:post.body/> yang ke-3 atau ke-4, tergantung template yang lo gunain bro.
6. Kalo udah ketemu, lo letakin deh kode dibawah ini tepat dibawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='clear'/>
<div id='share-button'>
<p>Share to</p>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank'>Facebook</a>
<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' style='background:#c0361a;' target='_blank'>Google+</a>
<a expr:href='"https://twitter.com/share?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' rel='nofollow' style='background:#4099ff;' target='_blank'>Twitter</a>
<a expr:href='"http://digg.com/submit?url=" + data:blog.url' rel='nofollow' style='background:#000;' target='_blank'>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+"' target='_blank' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div>
</b:if>

7. Selesai, dan klik Simpan template. Lihatlah hasilnya bro.

Akhirnya selesai deh... Kalau masih gagal coba deh lo tinggalin komentar di postingan ini, dengan senang hati gue akan membantu.

Itulah panduan tentang Cara Mudah Membuat Tombol Share di Bawah Postingan, semoga hati senang ataupun gundah tetap bermanfaat bagi kalian. Salam hormat.

Cara Mudah Membuat Email di Gmail Gratis

Cara Mudah Membuat Email di Gmail Gratis - Jaman sekarang ini udah canggih broh, terus masih jaman nggak punya email? Nah berarti kalo nggak punya email lo nggak bakalan punya akun Facebook, Twitter dll dong?
Nggak ngerti bikin akun email di Gmail? ini deh gue bakalan kasih tutorialnya, ikutin aja langkah-langkahnya broh. :)

1. Buka Gmail.com. Jika sudah maka tampilan bakalan kaya gambar dibawah ini.

2. Kalau tampilan udah berubah kaya gambar diatas, lo klik "Buat Akun" tuh yang ada dipojok kanan atas. Ketika lo udah klik lo bakalan dibawa kehalaman yang kayak dibawah ini.

3. Tampilan udah berubah kaya gambar diatas, mulai deh lo isi form-form sesuai identitas lo, boleh ngasal kalo emang menurut lo email itu nggak berguna bagi hidup dan bangsa lo.. :p
Selesai megisi form-form barudeh lo klik "Langkah Berikutnya" maka tampilan bakalan berubah lagi kaya gambar dibawah ini.

4. Pada gambar diatas lo disuruh untuk memasukan nomer hp lo, ini gunanya untuk memverivikasi akun email yang lo buat tadi. Lo centang "Pesan Teks" Nah lo isi tuh "Nomer telepon" Jika selesai klik "Kirik kode verivikasi". Taraaaa... tampilan berubah lagi kaya gambar dibawah ini.

5. Tunggu beberapa detik atau menit, google bakalan ngirim SMS ke nomer yang tadi lo ketik untuk memverivikasi akun email lo, nah lo isi deh "Kode verivikasi" itu sama kode yang google SMS tadi. Jika selesai, klik "verivikasi". Ahoooy... tampilan berubah lagi nih kaya gambar dibawah ini.

6. Nah disini tahap terakhir bahwa akun email lo udah aktif, terserah deh lo mau klik "Tambahkan Foto Profil" atau "Langkah berikutnya". Udah jadi kan akun email di Gmail? :D

Selesai deh.

Mungkin itulah sedikit pembagian ilmu turun menurun dari gue tentang Cara Mudah Membuat Email di Gmail Gratis, semoga ilmu atau tulisan ini bermanfaat buat kalian cemuahhh eaak. :)

Cara Membuat Menu Navigation Melayang di Blogger

Cara Jitu Membuat Menu Navigation Melayang - Cara Membuat Floating Menu Navigation di Blog - Membuat Menu navigation melayang, tentunya anda sudah punya gambaran tentang Tutorial kali ini yang vivologis bahas. Menu Navigation ini adalah menu yang selalu mengambang disepanjang anda menurunkan scroll tanpa ada yang berubah di menu tersebut.

Penting atau Tidak Menu Navigation di Blog?

Menu Navigation ini menurut saya lumayan bermanfaat untuk tidak merepotkan pengunjung, ketika membaca postingan sampai ke bilah yang paling bawah dan ia ingin mencari menu lainnya cukuplah menaikan cursor mouse kepada Menu Navigation yang sudah kita buat. Recommended tentang Template Blog Seo Friendly 2013.

Dimanakah Menu Navigation ini akan Muncul?

Cara Pemasangan Menu Navigation Melayang

Hal yang pertama anda harus login kedalam akun blogger, barulah anda memilih Blog yang ingin anda pasang Menu Navigation Melayang ini. Pada sisi sebalah kiri klik -> Template -> Edit HTML lalu cari kode ]]></b:skin> Jika sudah ketemu copy kode dibawah ini dan letakan persis diatas kode tadi.

/*--MyBloggerLab Sticky Navigation Bar--*/
#MBL_wrapper .MBL_social_wrapper
{
margin-top: 15px;
}

#MBL_wrapper
{
width: 100%;
margin: auto;
background: #fff;
height: 50px;
border-top: 5px solid #2c2f32;
border-bottom: 1px solid #EBEBEC;
-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
position: fixed;
z-index: 999;
}

#MBL_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}

#top_menu a
{
color: #fff;
}

#top_menu
{
display: block;
float: left;
list-style: none;
margin-top: 12px;
}

#top_menu li
{
display: inline-block;
margin-right: 15px;
font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
font-size: 14px;
text-transform: uppercase;
}

#top_menu li ul
{
display: none;
}

#boxed_wrapper
{
width: 980px;
margin: auto;
}

.MBL_standard_wrapper
{
width: 960px;
margin: auto;
}

.MBL_standard_wrapper.wide
{
width: 980px;
}

.MBL_standard_wrapper.header
{
margin-bottom: 0px;
}

.MBL_social_wrapper
{
width: auto;
float: right;
}

#menuforall .MBL_social_wrapper
{
margin-top: 15px;
}

.MBL_social_wrapper ul
{
list-style: none;
}

.MBL_social_wrapper ul li
{
float: right;
margin-left: 5px;
}

.MBL_social_wrapper ul li img
{
width: 24px;
}

#MBL_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}

.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
{
display: none;
list-style: none;
background: #000;
position:absolute;
padding: 0;
margin-top: 51px;
width: 200px;
height: auto;
z-index: 1000;
padding-top: 5px;
border-bottom: 5px solid #000;
border-left: 0;
}

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
{
background: none;
}

.main_nav li ul li
{
width: 100%;
}

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
{
color: #fff;
display: block;
width: 188px;
font-weight: bold;
line-height: 1em;
padding: 10px 0 10px 12px;
background: none;
}

.main_nav ul, .main_nav
{
list-style: none;
margin: auto;
width: 600px;
height: 50px;
z-index: 999;
float: left;
border-left: 1px solid #EBEBEC;
}

.main_nav ul li, .main_nav li
{
display: block;
float :left;
margin: 0;
}

.main_nav ul li a, .main_nav li a
{
display: block;
float :left;
margin: 0 0 0 0;
padding: 18px 15px 14px 15px;
color: #2c2f32;
font-family: 'Patua One';
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #EBEBEC;
}

.main_nav ul li ul li a, .main_nav li ul li a
{
width: 165px;
padding: 7px 19px 7px 16px;
border: 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
}

.main_nav ul li ul li:last-child a, .main_nav li ul li:last-child a
{
border-bottom: 0;
}

.main_nav ul li a:hover, .main_nav li a:hover, .main_nav ul li a.hover, .main_nav li a.hover, .main_nav ul li a:active, .main_nav li a:active, .main_nav li.current-menu-item a
{
color: #fff;
background: #1bc4de;
}

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
{
border-right: 0;
}

.main_nav li ul li a, .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
{
display: block;
width: 170px;
line-height: 0.7em;
padding: 5px 0 5px 30px;
}

.main_nav li ul li a:hover, .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover, .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
}

div
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

a
{
color: #2C2F32;
text-decoration: none;
-webkit-transition: color .2s linear, background .1s linear;
-moz-transition: color .2s linear, background .1s linear;
-ms-transition: color .2s linear, background .1s linear;
-o-transition: color .2s linear, background .1s linear;
transition: color .2s linear, background .1s linear;
}

/* Font Face ----------------------------------------------- */
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

ul{
margin: 0;
padding: 0;
list-style: none;
}

Ketika anda sudah selesai meletakan kode diatas, carilah kode <body> dan letakan kode berikut persis dibawah kode <body>.

<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5D_sdzpcqkvs9SJewp_m567iReYnRB0P7_-WC_wVGfDE80suuP3XMOv9YRNHwqEyBWkuUskFnNzZYs0UtlJNryoSviE5L6qAZxI5aovLXILXUZeSz0DdVOPg9xGxyMcYKsURbtcwojcW/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWNID16mxEW-rNCdgie2MjP61JS5qR_cCPblxDlN7TyzSkFNr8r4pGxt3X8VlGGEVFNIyx3wu6y0H1OgLipJgDBodH3JKRbgYCbG5_buMDDjkJnO0c_G-p-inq7dLRy5g2vgSFF_8Am5f/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjejevR4bWetZpkxZteEVKKaUvzCAzZvO6HKK99uK5f40_yOKzd8QwxkTmiQ7Z-NqAqOpOYaGeyOdLl93KJD3bOsc1RRIdPG4uTEs6KG306h2QUUFUQLni9oSyNAnQkr0jv4WNEam2_oAE9/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifHlqqJwXSgPOUmeMDvaDL0Rdgbg13l_INFdMvyFmVnGs27mpEVVnS6aW3LbWavvz6-5_5dgr22pZtX0l8Rr2mmghPyjnvtyZt74Z5ZTm2EGGoil3BXQu9E213uNFz-AVu4wiI6RdH-8mW/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWjL-SDZuCi_dZg_ftWoXbdLEcUBbBLOncPeu3b-KjaP3Li6Lvyx_guVSAabEncsN6g9ljn6p6xM8uGL7fLSrPxZ4DeDsCKd8tpv2WtBZ-NZLrGrkf1ej7sKzgLK6Crp4vwod1mnxuJTNq/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2u1DTKPy79VgTSDlN81qmel4FSEn3A_ZQeaC3JaICplXP_BL1IwghL5-mKl5GTVucBxA0x-JBbLKwoEq6EBvyu2uR0dVflOMNwNNEyIunVWVnMx6IpE26FIVqDvfo2JxXaY9chRCjjl3A/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGMtN88fZtOsV1Zz6POdelWk8f-LnOOHcj_6p5kNt8UuawCFGdH_wduylt6f3MpLMZ9vkkfZMBRSwnYe36FcVDBtLdziHpyeE6u7z1bgpeL107nn3FUmr_s4Hent-yXsjcDhbiEp-YxfW/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbNTagWtKSgNmRpHz9LXbeuYGznTlr0LGtO-nVwnv5N4Y2lKrxGdYViqQKGQsAGhaJoKXUTYj-Y_e4DHh45mgfZI9k7Cny6whlWDTx866ossZxKpVVp6R5mxYzpIUkM186vFV-dnxWHB2/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4L-uxS4z9PhTPPCQX-M8v3Ecdb0OlHu80t37EdSJrNEq5h-QoJ5kqlzzReJt820uKKlVXYeL73KUy6izzr9mUCfNrmslJNRZNIQ6B-hiwS-yW3MVo91ylxau7hQz9IBvDy4J7jkB6jEu/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xuSdcrDbBdRpCX3Kfrdh7v5rjjY-ufBjNaaKCR5MLvNUNgExiLj1wZU_TOE0DKYShglnQQrF7EQNIHqGPnb-HE3XnWaV238CopEjuf5_mBSfMR9rbEggkjvPdmwwUB34_aCpUoC1jboP/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPWj0BzKtdmThc6n_Y4spooBGMC207hnVS4HxuuNZveVYsjkOMgHdIMYOLy8EXHr19vBfVpbZ-qJ-Y5st_CTaluhk8cFz1HY1wvZFsdlorRteqw7pbTti71PxNyy6UjyeZxMiMdBv7LDDx/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>

Sebelum klik Simpan Template, tidak ada salahnya jika anda untuk me-review perubahan yang ada pada template blog anda. Jika semua tampilan mulus tak ada kendala atau pengacakan tampilan, mulailah anda klik Simpan Template.

Sekiranya begitulah tentang Cara Membuat Menu Navigation Melayang di Blogger, atas perhatian kalian saya ucapkan terimakasih dan Salam Hormat dari saya vivologis. Jika ada pertanyaan tentang Tutorial ini, silahkan menuju halaman komentar.

Cara Membuat daftar isi tampilan keren dan unik

Cara Jitu Membuat Daftar Isi Blog Dengan Tampilan Keren

Cara Jitu Membuat Daftar Isi atau Sitemap Blog - Cara Memasang Daftar Isi di Blog - Cara Membuat Sitemap di Blog - Hallo kembali lagi bersama gue si Vivologis yang akan mengulas tentang Cara Membuat Daftar Isi di Blog. Lo pastinya udah tau kan arti dari Daftar Isi? kalo nggak ngerti kebangetan broh. :p

Kalau lo belum ngerti apa itu Daftar isi, coba deh lo buka buku, majalah dll. pasti dihalaman awal lo bakan dikasih tulisan Daftar Isi yang berguna untuk memudahkan kategori apa yang lo mau baca. Itulah pengertian gue tentang Daftar Isi di buku atau majalah. Sama halnya Daftar Isi di buku dan majalah, kita akan memberi halaman atau page Daftar Isi ini ke dalam blog. Gunanya untuk apa? Daftar isi di blog ini berguna untuk memudahkan pengunjung untuk memilih kategori apa yang ingin dia baca. Selebihnya pake feel sendiri deh arti dari Daftar Isi. :D

Demo

Cara Membuat Daftar Isi

CSS, HTML, JavaScript dan Cara Pemasangannya.

Untuk penempatan dartas isi Tablusai ini, lo bisa menempatkan pada postingan atapun Widget Blogspot. Kalau menurut saran gue sih mending dipasang kedalam postingan, kalau ditaro di widget kesian nanti amburadul tampilannya, karena lebar dari Daftar isi yang mau kita bikin ini lumayan buat tiduran. :D

1. Login ke akun blogger lo.

2. Setelah itu klik "New Post" baik dihalaman statis atau dihalaman yang biasa lo sering gunain buat ngeposting. Dihalaman selanjutnya akan ada dua tab disebelah kiri atas yang satu bertuliskan "Compose" sedangkan yang satunya "HTML". Nah sekarang lo klik aja yang tab "HTML" untuk pemasangan Codenya. Lihat gambar dibawah ini..

3. Selanjutnya lo copy deh code dibawah ini dan lo paste di tab HTML tadi.

<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#50b7dc;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
overflow:hidden;
position:relative;
color:#fff;
border: 1px solid #2aa4cf;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
font-size: 13px;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#fff;
text-transform:uppercase;
text-decoration:none;
padding:2px 12px;
cursor:pointer;
padding-top: 10px;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#2aa4cf;
color:#fff;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#2aa4cf;
color:white;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:white;
border-left:5px solid #2aa4cf;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
font-size: 11px;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#222;
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#222;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #2aa4cf;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#50b7dc;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#EAEAEA;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#2aa4cf;
color:#fff;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#2aa4cf;
}
@media (max-width:700px) {
#tabbed-toc {
    border:2px solid #2aa4cf;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
}
#tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:#2aa4cf;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
}
#tabbed-toc .toc-content {
    border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
    display:none;
}
}
</style>

<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://vivologis.blogspot.com/2013/08/cara-membuat-daftar-isi-keren-dan-unik.html" style="display: block; font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 11px; font-weight: 700; margin: 9px; text-align: right; text-decoration: none;" title="Daftar Isi">Get widget</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://vivologis.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

Keterangan:

1. Ganti URL yang berwarna merah dengan URL blog lo.

2. ShowDates: false ganti menjadi true jika ingin menampilkan postingan.

3. ShowSummaries: false ganti menjadi true jika ingin menampilkan deskripsi singkat postingan.

4. ShowThumbnails: false ganti menjadi true jika ingin menampilkan gambar.

5. NewTabLink: true ganti menjadi false jika ingin membuka link di tab yang sama.

6. MaxResults: 99999 adalah jumlah maksimal postingan yang ditampilkan.

Jika lo masih merasa kesulitan tentang tutorial diatas, atau lo bingung untuk mendesain ulang tampilannya. Dengan senang hati gue membantu, silahkan tinggalin komentar pada postingan ini.

Nah itu lah selagi-lagi waktu luang gue di isi untuk menulis tentang Cara Jitu Membuat Daftar Isi atau Sitemap Blog. Semoga bermanfaat buat kalian.

Monday, March 18, 2013

Cara Memasang Meta Tag pada Blog

Vivologis - Dalam kesempatan pagi ini saya akan share dan berbagi tentang cara Cara Memasang Meta Tag pada Blog yang mungkin teman blogger ingin mengetahui informasi berikut ini

Berikut Langkah-langkah untuk Pasang Meta Tag Pada Blog.

Silahkan Anda login Ke Akun Blogger sobat
Pilih Menu Template

Klik Pada Tobol Edit HTML

Klik tombol Proses Atau Lanjutkan

Anda akan menjumpai area edit HTML seperti gambar dibawah

Sekarang Cari Kode <title><data:blog.pageTitle/></title> (Gunakan tomblo CTRL + F Atau F3 untuk memudahkan pencarian Kode)
Sudah Ketemu hapus kode tersebut dan ganti dengan Kode Dibawah ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/> | Deskripsi Singkat Blog</title>
<meta content='deskripsi tentang blog anda' name='description'/>
<meta content='kata kunci, kata kucni,' name='keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.title/> | Deskripsi Singkat Blog</title>
<meta content='deskripsi tentang blog anda' name='description'/>
<meta content='kata kunci, kata kucni,' name='keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta expr:content='"Download " + data:blog.pageName + ". deskripsi tentang blog anda"' name='description'/>
<meta expr:content='data:blog.pageName + ", kata kunci, kata kucni, kata,"' name='keywords'/>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
</b:if>
</b:if>
<meta expr:content='data:blog.title' name='author'/>
<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>

Keterangan :
Deskripsi Singkat Blog Isi dengan deskripsi singkat mengenai blog anda misalnya Free Download Software
deskripsi tentang blog anda Cerikakan latar blakang blog anda contoh "Blog yang berisi kumpulan-kumpulan software gratis"
kata kunci, kata kucni Isi dengan kata-kata kunci ( pisahkan dengan koma "," ) contoh. "Free download, Software gratis, kumpulan Software,computer"

Terakhir Klik Simpan
Selesai

source : klik disini http://dapur-tutorial.blogspot.com/2012/03/cara-memasang-meta-tag-pada-blog.html

Cara mengganti warna link di blogspot dengan mudah

Vivologis - Kali ini vivologis akan share bagi teman - teman blogger yang mana posting pada kali ini dapat bermanfaat bagi teman semua ,yaitu tentang Cara mengganti warna link di blogspot dengan mudah ,untuk lebih jelasnya simak berikut ini :

1. login ke blogger >> pilih rancangan >> edit Html ,jangan lupa centang Expand Template Widget
2. cari kode a:link {

a:link {
color: #0AF251;
color:#04B33A;
text-decoration:none;
}

3. ganti kode warna biru sesuai keinginan anda
4. kemudian save template dan lihat hasilnya

semoga postingan Cara mengganti warna link di blogspot dengan mudah kali ini dapat bermanfaat bagi teman teman semua