Home » Bloggers
Showing posts with label Bloggers. Show all posts
Showing posts with label Bloggers. Show all posts

Menambahkan tombol back pada template blog

, ,
Udah pada tau kan apa tuh tombol back to top pada blog . kebanyakan dari kita menambahkan fungsi ini mengingat kadang kita membuat sebuah postingan yang bab dan pasal tertulis semua mulai dari a sampai dengan z alias panjang ! :p
Kalau belum tau apa tuh Tombol back to top maka baca :
back top top sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat
Menambahkan tombol back pada template blog

ketika berada dibagian bawah halaman dengan hanya sekali klik saja , sehingga visitor tidak lagi melakukan scroll ke atas untuk melihat main page dari sebuah blog
oke dah ngerti kan ?? hehehe..... cara bikinnya bagaimana ?? disimak yah :D

Cara Buat Tombol Back Top di Blog


1. login dulu di Blogger Pilih Template >> Edit HTML
2. edit Template Cari kode <body> (gunakan CTRL+F) Copy kode dibawah ini dan Paste tepat diatas kode <body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

3. Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode <body>


TO TOP
<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/> <!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com --> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-z8NtRXP_9UH1VpM-mSaE4hygj53gDYhYgSO35I8A2i-wWUiY4dgRZb_sEl496TKns-d6H-72ojkSbdf2EQFomHLMMJMwDhTvoQ0Y5MEUN6yZOLfO03ceAHKH-LIFZl-StID8LCIWrqQ/s1600/back-to-top.gif'/></a>

Nah sekarang selesai , check blogmu apa udah ada tombol back to topnya ?? kalo belum ada silahkan berkomentar :D

Menambah meta tag media sosial di blog

Add Comment ,

Sosial Media Meta Tag ? 

Katanya sih meta tag sudah tidak berfungsi lagi semenjak kejadian banyaknya kecurangan dalam menuliskan meta deskripsi . wah.. apa itu betul ??
Yah, itu memang benar, tapi yang akan saya share disini adalah Sosial Media Meta Tag bukan Meta Tag Biasa bukan meta tag terdahulu.
menambahkan Sosial Media Meta Tag ?

Apa bedanya antara Sosial Media Meta Tag dengan Meta Tag Biasa ?

Bedanya ada di tujuan atau fungsinya. Jika Meta Tag Biasa dulu fungsinya untuk memberitahukan kepada Search Engine mengenai isi dari situs kita "meta keyword dan meta deskripsi" dan sekaligus untuk mendongkrak situs kita di SERP... katanya sih begitu :p

Sementara untuk, Sosial Media Meta Tag mempunyai target yang berbeda namun tujuannya sama yaitu untuk, bingung kan ? sama, haha.
Tidak usah kuatir bro and sis, kalau sudah masuk pada contoh dari Sosial Media Meta Tag nanti akan sedikit lebih jelas setelah saya share.
Baik, langsung aja proses penerapan,



Meta Tag yang bisa Anda gunakan untuk mengoptimalisasi Social Media 



Meta tag media sosial
<!-- kuncinya ada di itemscope dan itemtype attributes -->

Tambah tag itemscope pada doctype html

<html itemscope itemtype="http://schema.org/Article">

Letakkan script dibawah ini, sebelum </head>

<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Google Authorship and Publisher Markup -->

<link rel="author" href="https://plus.google.com/[Google+_Profile_ID]/posts"/>

<link rel="publisher" href=”https://plus.google.com/[Google+_Page_Profile_ID]"/>

<!-- Schema.org markup for Google+ -->

<meta itemprop="name" content="The Name or Title Here">

<meta itemprop="description" content="This is the page description">

<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->

<meta name="twitter:card" content="summary_large_ image">

<meta name="twitter:site" content="@publisher_handle">

<meta name="twitter:title" content="Page Title">

<meta name="twitter:description" content="Page description less than 200 characters">

<meta name="twitter:creator" content="@author_handle">

<!-- Twitter summary card with large image must be at least 280x150px -->

<meta name="twitter:image:src" content="http://www.example.com/image.html">

<!-- Open Graph data -->

<meta property="og:title" content="Title Here" />

<meta property="og:type" content="article" />

<meta property="og:url" content="http://www.example.com/" />

<meta property="og:image" content="http://example.com/image.jpg" />

<meta property="og:description" content="Description Here" />

<meta property="og:site_name" content="Site Name" />

<meta property="article:section" content="Article Section" />

<meta property="article:tag"

content="Article Tag" />

<meta property="fb:admins" content="Facebook numberic ID" />

Ubahs yntax yang warna merah sesuai dengan identitas media sosial dan blog anda

Its all !!
Tutorial cara membuat widget artikel terbaru tanpa gambar

Tutorial cara membuat widget artikel terbaru tanpa gambar

Add Comment ,
Widget new article atau recent post adalah salah satu widget yang harus seorang blogger terapkan dalam blog nya . widget recent post sudah menjadi kelayakan buat kita dalam mengembangkan profesional sebuah blog. navigasi widget recent post berfungsi sebagai widget penampil artikel yang baru saja kita buat, dalam hal ini para pengunjung akan tahu apakah blog kita selalu update atau tidak. nah untuk membuat widget itu ternyata tidak begitu sulit jadi sobat semua hanya dengan mengikuti trik dibawah ini maka anda bisa menerapkan cara membuat widget artikel terbaru tanpa gambar

Nah, bagai mana cara membuatnya..silahkan ikuti tahap2 berikut
catatan : tidak semua tmplate bisa terapkan cara ini

Tutorial cara membuat widget artikel terbaru tanpa gambar

1- login ke blogger lalu pilih tata letak -add new widget lalu pilih java script dan copy paste code ini
<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script><ul>
<script type="text/javascript">var numposts = 10;var standardstyling = true;</script><script type="text/javascript" src="http://www.url blog anda.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul> 
Lalu save !
kalau tampilannya masih modar brarti lanjut ketahap berikutnya-----

2- masuk menu edit template dan cari code css kurang lebih seperti ini

/* Widget Recent Post */
#sidebar3 h4, #sidebar3 h3, #sidebar3 h2{background:#5fb564;color:#fff;text-transform:capitalize;font-family:Arial, Sans-Serif;font-size:135%;font-weight:400;position:relative;padding:12px 0 15px;text-align:center;margin:0}
#sidebar3 .widget-content{background:#fff;padding:0 0 0 10px}
#sidebar3 a:link, #sidebar3 a:visited{font-weight:normal}
#sidebar3 ul li {margin:0 5px 0 0 !important;padding:6px 0 !important;position:relative;border-bottom:1px dashed #d5d5d5 !important}
#sidebar3 ul li:last-child{border:none !important}
#sidebar3 ul li a {font-size:14px !important;font-weight:normal !important;color:#333 !important;text-decoration:none;transition: all 0.3s ease-out 0s !important;line-height:1.4em !important}
#sidebar3 ul li a:hover {color:#6aba82 !important;}

Ubah lebar posisi weight:400  dan  warna {background:#5fb564;color:#fff;text-  sesuai dengan kesukaan anda...

 Nah demikian sedikit tutorial cara membuat widget artikel terbaru tanpa gambar


Bagaimana cara Membuat Navigasi Menu di Atas Header

Bagaimana cara Membuat Navigasi Menu di Atas Header

Add Comment ,

Tutorial Membuat Navigasi Menu di Atas Header

Percantik blog kamu dengan menambahkan fitur navigasi diatas header . selain membuat blog kita kelihatan profesional para pengunjung blog juga mudah mengerti tentang isi blog kita .
baik, sedikit tutorial bagaimana cara Membuat Navigasi Menu di Atas Header

1. Template > Edit HTML
2. Pasang kode HTML berikut ini di bawah kode <body> atau <body ...ada kode lain... .>

<ul class="topnav" id="myTopnav">
<li><a href="/">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/sitemap.html">Sitemap</a></li>
<li><a href="/p/kontak.html">Kontak</a></li>
<li><a href="/p/disclaimer.html">Disclaimer</a></li>

<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>
Catatan:
  • Kode di atas sudah dilengkapi link ke halaman statis About, Sitemap, Kontak, dan Disclaimer jadi kamu tinggal membuat halaman statis dengan nama/judul About, Sitemap, Kontak, Disclaimer 
3. Pasang Kode CSS ini di atas kode ]]></b:skin>
/* Topbar Navmenu */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
4. Pasang Kode Add JavaScript ini di atas kode </head> atau </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

Terakhir save template
Nah semoga tutorial Bagaimana cara Membuat Navigasi Menu di Atas Header ini bisa membantu kamu dalam penyempurnaan navigasi blog kamu.

Subscribe to: Posts (Atom)