Blog Deniededen

Home » All post

Cara Membuat Button Like Facebook, Twitter, G+ Dan Share

Posted by Denie Deden_Nz

Hallo..sob apa kabar? sehat-sehat khan? Pada postingan kali ini saya akan share " Cara Membuat Button Like Facebook, Twitter, G +, Dan Share ". Membuat tombol like Facebook, Twitter dan Google Plus (G+) semuanya bisa kita pasang diatas atau di bawah judul postingan.

Manfaat dari pemasangan button ini bagi blog sangat besar sekali, yaitu membantu penyebaran link artikel kita di media jejaring sosial. Sebenarnya artikel ini cenderungnya dikategorikan dalam SEO Optimisasi OFFpage karena lebih pada menyebarkan link artikel kita. Tetapi karena dalam rangka mengolah blog makanya bisa juga sih di kategorikan dalam kategori Onpage saja. Begitu sob...

Pada postingan ini saya akan share memasang Tombol Like Facebook, Twitter dan G + di Bawah Judul Posting. Sekedar mengingatkan saja pada bagian akhir postingan / bawah tombol serupa yang yang telah disediakan blogger.

Sobat semua bisa mengikuti cara-cara dibawah ini;

Masuk ke blog sobat
Klik Template
Masuk ke Edit HTML
Cari kode di bawah ini dan untuk mempermudah pencarian kode pakai Ctrl F:

<data:post.body/>

Note: Sobat semua pasti akan menemukan kode tersebut diatas lebih dari satu menurut pengalaman yang sudah-sudah pilih yang pertama saja / di coba semua.

Letakkan Kode berikut ini diatas kode <data:post.body/>

<table border='0'><tbody><tr>
<td><a class='twitter-share-button' data-count='horizontal' data-via='MkZHackers' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like& font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style addthis_nonzero' href='#' style='display: block;'><a class='atc_s addthis_button_compact'><span/></a></a><div class='atclear'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></td>
</tr></tbody></table>

Simpan Template
Selesai
Kemudian sobat klik salah satu artikel blog sobat, untuk melihat berhasil tidaknya pemasangan kode tadi.

Sekian dulu postingan kali ini selamat mencoba dan semoga bermanfaat bagi sobat-sobat semua....

Sumber image: www.hongkiat.com

Cara menambah gadget di atas header

Posted by Denie Deden_Nz, Sabtu 18 Mei 13

Bagi para blogger master postingan ini yaitu mengenai "Cara menambah gadget di atas header" bukan persoalan lagi. Postingan ini yah ane ditujukan untuk blogger newbie kayak ane gituu kekeke...pada dasarnya template bawaan memang sudah default so.. jadinya widget di atas header memang tidak ada. Well.. ane akan coba ng_share postingan dengan harapan dapat bermanfaat bagi agan dan sobat semua siapa tau ada yang ingin menambahkan widget. Caranya gampang sob, nggk usah deg..deg an lah santai aja, udah dulu basa basinya kelamaan mending kita langsung ke tempat perkaranya hehe..;

Cara menambah gadget di atas header:

Masuk ke blog sobat >> Dashbord >> Klik Template >> Klik Edit template / HTML

Untuk mempercepat pencarian pakai CTRL + F lalu cari kode seperti di bawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ganti kode diatas dengan kode seperti di bawah ini:

<b:section class='header' id='header1' preferred='yes'>

Sebelum di save lebih baik klik Pratinjau dulu biar manteep sob, biar terhindar dari kesalahan pasang. Kalau semuanya beres nggk ada peringatan kesalahan tekan save/simpan template.

Demikian postingan kali ini selamat mencoba semoga bermanfaat bagi sobat-sobat semua dan sampai jumpa....bye

Cara Memasang Widget Popular Post Berwarna Di Blog

screenshot widget warna-warni

Flamboyan68 - Hallo! bagaimana kabarnya, sob? pastinya sehat-sehat saja ya. Malam menjelang subuh ini saya akan men_share postingan buat agan-agan newbie / pemula kayak ane hehe tentang " Cara Memasang Widget Popular Post Berwarna Di Blog ". Blogger pemula seperti halnya saya, suka sekali dengan memasang widget-widget cerah seperti halnya postingan ini.

Widget popular post / artikel populer warna-warni ini tidak di lengkapi dengan efek slide, tampilan warna setiap popular postnya berbeda-beda (tidak ada warna ganda) sampai 10 artikel dikarenakan terbatasnya widget popular post. Pemasangan widget warna-warni ini sangat cocok alias matching apabila diterapkan pada blog yang bertemplate cerah.

Biar agan-agan tidak penasaran dengan gambarnya, agan-agan bisa melihat pada screenshot diatas. Agan semua pasti tanya-tanya dalam hati hehehe..sebenarnya nomor yang nempel itu apa yah maksudnya? seperti yang saya terangkan diatas tadi bahwa widget ini hanya bisa menampilkan popular post sampai 10 artikel dan disebelah judul artikelnya akan ditampilkan nomor urut dari 1 sampai 10 yang maksudnya adalah menandakan ke-populeran artikel blog agan. Dan satu hal lagi tampilan warna-warna pada widget ini bisa di ubah / dimodif lagi sesuai selera agan. Basa basinya udah dulu ya, sob? kita langsung sedot saja ke cara pemasangannya.

Masuk / Login ke >> Blogger sobat.

Pilihlah >> Tata Letak.

Pilihl >> Add Gadget.

Pilih >> Entri Populer.

Selanjutnya lakukan Setting pada widget Entri Populer

- Hilangkan >> Thumbnail Gambar dan Cuplikan.

- Silahkan pilih Entri / Artikel yang ingin ditampilkan (diposkan)

Klik Save / Simpan
Masih dalam posisi di Tata Letak, Kemudian pilih Add Gadget
Klik pilih HTML / Javascript.
Letakan kode di bawah ini kedalam kotak "HTML / Javascript

<style type='text/css'>

/*----- popular post warna warni by farhanshare.blogspot.com-----*/

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

</style>

Setelah selesai mem_pastekan kode tadi selanjutnya klik ' Save / simpan '.
Masuk ke blog agan dan bukalah salah satu artikel dan lihat hasilnya
Selesai

Bagaimana, gan? pastinya ringan alias mudah, selamat mencoba senantiasa bermanfaat dan sampai jumpa.

Cara Menampilkan Menu Scroll Pada Arsip Blog

Flamboyan68 - Pada postingan kali ini saya akan berbagi dengan sobat nubie semua yaitu bagaimana " Cara Menampilkan Menu Scroll Pada Arsip Blog ". Keberadaan dari widget arsip blog adalah menu penting yang harus sobat pasang di blog, karena eksistensi arsip blog ini akan memudahkan pengunjung menemukan semua artikel yang ada di blog kita.

Walaupun penting tapi tidak semua para blogger enggan untuk memasangnya dikarenakan memakan banyak tempat apalagi jika artikelnya sudah banyak tentuk membutuhkan tempat yang luas.

Di bawah ini ada cara dan langkah untuk menampilkan menu scroll pada arsip blog:

Masuk / Login ke Blog sobat
Pilih Menu Design > > Seting Elemen Widget Arsip Blog pakai model Hierarki

Lalu Simpan / Save
Selanjutnya sobat masuk ke menu >> pilih Edit HTML
Kemudian cari kode seperti dibawah ini, untuk mempermudah pencarian gunakan Ctrl + F dengan memasukan salah satu kode <div id='ArchiveList'> ke dalam kotak pencarian.

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
          <b:includable id='main'>
          <b:if cond='data:title'>
          <h2><data:title/></h2>
          </b:if>
          <div class='widget-content'>
          <div id='ArchiveList'>
          <div expr:id='data:widget.instanceId + "_ArchiveList"'>
          <b:if cond='data:style == "HIERARCHY"'>
          <b:include data='data' name='interval'/>
          </b:if>
          <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
          </b:if>
          <b:if cond='data:style == "MENU"'>
          <b:include data='data' name='menu'/>
          </b:if>
          </div>
          </div>
          <b:include name='quickedit'/>

Setelah ketemu kode tadi sisipkan kode dibawah ini tepat diatas kode <div id='ArchiveList'>

<div style='overflow:auto; width:ancho; height:100px;'>

Tambahkan kode </div> diatas <b:include name='quickedit'/>
Tampilan keseluruhan kode setelah di sisipkan kode tambahan tadi menjadi:

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
          <b:includable id='main'>
          <b:if cond='data:title'>
          <h2><data:title/></h2>
          </b:if>
          <div class='widget-content'>
          <div style='overflow:auto; width:ancho; height:100px;'>
          <div id='ArchiveList'>
          <div expr:id='data:widget.instanceId + "_ArchiveList"'>
          <b:if cond='data:style == "HIERARCHY"'>
          <b:include data='data' name='interval'/>
          </b:if>
          <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
          </b:if>
          <b:if cond='data:style == "MENU"'>
          <b:include data='data' name='menu'/>
          </b:if>
          </div>
          </div></div>
          <b:include name='quickedit'/>

Klik Save / Simpan Template.
Selasai.

Tampilan Arsip Blog setelah di pasang kode model menu scroll, seperti dibawah ini:

arsip blog menu scroll

Catatan:

Sebelum melakukan Edit HTML Template blog, selalu membiasakan back up template dengan cara unduh template lengkap terlebih dahulu untuk menjaga apabila terjadi kegagalan pasang saat proses edit HTML berlangsung.
Kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll. Silahkan atur sesuai selera sobat.
Sebelum melakukan edit HTML untuk merubah tampilan arsip blog dengan model scroll, pastikan kita telah merubah model arsip blog kita menjadi model hierarki terlebih dahulu. Untuk tampilannya apakah dimuat perbulan atau perminggu tidak masalah.

Semoga bermanfaat dan sampai jumpa..

Sumber: http://panduansederhana.blogspot.com/2012/03/cara-membuat-tampilan-menu-scroll-pada.html

Cara Membuat Related Post Scroll Di Blog

Flamboyan68 - Apa kabarnya, sob? Saya kembali untuk share ria dengan sobat semua dengan postingan kali ini tentang Cara Membuat Related Post Scroll Di Blog, Related Post.

Atau dalam bahasa sehari-harinya tiada lain adalah Artikel Terkait yang merupakan sebuah elemen pada blogger yang berfungsi untuk menampilkan beberapa judul Artikel lain yang tentunya masih berkaitan dengan artikel yang sedang dibaca oleh pengunjung.

Related Post sangat bermanfaat sekali untuk meningkatkan PageView pada Blog dan banyak manfaat lainnya.

Untuk itulah saya akan share dengan sobat semua, dan bagi sobat yang berminat silahkan ikuti cara dan langkah dibawah ini :

1. Login / Masuk ke akun blogger sobat
2. Kemudian masuk ke > Template lalu pilih > Edit HTML
3. Dan carilah kode <div class='post-footer-line post-footer-line-1'> pakailah CTRL + F untuk mempermudah pencarian.
4. Apabila sudah menemukan kode tadi, sobat akan menemukan 2 kode dan pilihlah yang pertama.
5. Selanjutnya copy kode script dibawah ini:

<b:if cond='data:blog.pageType == "item"'>
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<Script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</Script>
</Div>
<script type="text/javascript">RelPost();</script>
</Div>
</b:if>

6. Dan paste kode script tadi tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.
7. Simpan / Save template.
8. Selesai.
9. Untuk melihat hasilnya sobat bukalah salah satu artikel sobat.

Note:

* <h2>Artikel Terkait:</h2> sobat bisa menggantinya sesuai selera seperti Related Post.

* <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.

* maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

Selamat mencoba dan semoga bermanfaat...

Blog Deniededen

Pageviews - Info Blog

Visitor Blog

Cara Membuat Button Like Facebook, Twitter, G+ Dan Share

Cara menambah gadget di atas header

Cara Memasang Widget Popular Post Berwarna Di Blog

Cara Menampilkan Menu Scroll Pada Arsip Blog

Sumber: http://panduansederhana.blogspot.com/2012/03/cara-membuat-tampilan-menu-scroll-pada.html

Cara Membuat Related Post Scroll Di Blog

Sobat Blogger

Translator

Cari Artikel

Rekomendasi Artikel

Arsip Blog

Labels Blog

Pengelola Blog