Post Game: plus

Showing posts with label plus. Show all posts

Thursday, December 15, 2016

Cara Membuat Notifikasi Komentar Ala Google Plus

Cara Membuat Notifikasi Komentar Ala Google Plus - Askum , kemaren ada yang request entang bagaimana cara membuat notifikasi komentar ala google + , sebetulnya cara ini awalnya kang ismet dulu lah yang menemukannya . namun karena ada teman saya yang request notifikasi keren ini , maka akan saya buat triknya , meskipun terlambat :) oh ya demonya seperti dibawah ini .

Demo

Berikut Cara Membuat Notifikasi Komentar Ala Google Plus

1- Pertama sobat harus Simpan kode CSS ini di atas ]]></b:skin> atau </style>

#cm-total{position:fixed;top:14px;right:0;width:188px;text-align:left;z-index:9999;cursor:pointer}
.total-counter{background-color:#d11919;color:white;padding:1px 4px;font-family:Arial,Sans-serif;font-size:11px;border-radius:5px;font-weight:bold}
#notif{position:fixed;top:20px;right:180px;z-index:9999;height:22px;width:19px;opacity:.4;cursor:pointer}
#notif:hover{opacity:1}
.close-notif{position:fixed;top:92px;right:20px;z-index:9999;cursor:pointer;display:none}
#cm-container{width:355px;position:fixed;top:67px;right:0;z-index:9999;background-color:#e5e5e5;padding:60px 20px 10px 20px;color:#666;box-shadow:0 4px 15px -4px rgba(0,0,0,.4)!important;text-align:left;border:1px solid rgba(0,0,0,.2);background-clip:padding-box;display:none}
#cm-container:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_jcwY8CAEx3YlTWGjWlbDKdhyphenhyphennXd9ZcyXO3uhqiiPJzrqQRCmFJNH67f-LchScYwNP_7xAxtiOOjlS37YsPxmObztQRjou7vlovn5_Viuwp13AwL9CdMcvwBJoVC4QVUcx0NfpbyMg8/s1600/arrow-notif.png);position:absolute;top:-14px;left:196px}
#cm-container:after{content:"Komentar Terbaru";position:absolute;top:22px;left:150px;text-align:center;font:normal 14px Arial;color:#333}
.cm-outer{margin:0 auto;padding:0;font-size:11px;text-align:left;font:normal 12px Arial}
.cm-outer ul{margin-bottom:5px}
.cm-outer li{padding:9px 10px 14px;list-style:none;clear:both;position:relative;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);background-color:white;margin-bottom:10px}
.cm-text{color:#797979}
.cm-outer{margin:0 0 5px}
.cm-header{margin:4px 0 8px 90px;font-size:11px;font-weight:normal!important}
.cm-header a{color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover{color:#74a2c3;text-decoration:none}
.cm-outer .cm-content{overflow:hidden}
.cm-content{margin-left:90px}
.cm-outer img{display:block;float:left;background:#ececec url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1dW5HAIA9Fwxgm-FFTqpTUfmwJtTUHvNQ9AIA9dzT-mjvc5PwVW2Zc9GSKJluC0KJxpLTEdFirsvxPkupdMdFyEqpcEUxq-uYCSzKW_LGZu-kDhUPh34qCdlg7djG4x7kSKs1KTfOV48/s1600/anon80.png) no-repeat 50% 50%;overflow:hidden;border-radius:3px 0 0 3px;position:absolute;top:0;left:0}
.cm-footer{margin-top:7px}
.cm-footer a{color:#5886a7;text-decoration:none}
.cm-footer a:hover{color:#74a2c3;text-decoration:none}
div.cm-header img[src=http://img1.blogblog.com/img/openid16-rounded.gif]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSCnugb9SFflanyXjSfhA0QH3ihpfnUs5fCbV7YwoM1I1mlt-kiX5SwsjAHWt98fXs-tqJQyd_MKJyfRRspA4GStgfZJms040XGHbvz5RVIgvvptGOyW27fDE_a4Bwyeh_O8gOsiTc2Q/s80-c/gravatar.png)}

2- Setelah anda pasang kode diatas kemudian langkah selanjutnya adalah sobat Simpan kode Java script ini di atas </body>

<div id=cm-container/>
<div id=notif title=Notifikasi><img alt=notifikasi src=http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png/></div>
<div id=cm-total/>
<div class=close-notif><img alt=close src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLeUB8dSKgOwgrm6H1LgCnGJoXc24bgooSw1gHlekUKO_c5TYpR5Mm-BXJTh2GO5OnIJWNn0jlEzGyUJr4xu3kA4v5UyoQE3NII0CsAdJeE553j36G1DJ99hsGRdkSzfnV1tUPeuLGbjQ/s1600/delete4.png title=close/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
 home_page: "http://blog.kangismet.net",
 max_result: 6,
 t_w: 80,
 t_h: 80,
 summary: 40,
 new_tab_link: true,
 ct_id: "cm-container",
 new_cm: " Komentar Baru!",
 interval: 30000,
 alert: true,
 alert: function(total) {
 document.getElementById("cm-total").innerHTML = <strong class= otal-counter>+total+</strong>;
 document.title = ( + total + ) + originalTitle;
 }
};
$(#notif).click(function(){$(#cm-container, .close-notif).toggle();});$(.close-notif).click(function(){$(#cm-container, .close-notif).hide();});document.getElementById(notif).onclick = function(){document.title = originalTitle;$(#cm-total).hide();};document.getElementById(show-total).onclick = function(){document.title = originalTitle;$(#cm-total).hide();$(#cm-container).show();};
//]]>
</script>

3-Langkah yang Terkahir adalah Sobat Harus Simpan jQuery dibawah <head>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js type=text/javascript/>

Oh ya , apabila di template sobat sudah terdapat jQuery maka lewati saja langkah diatas

4- Simpan Template dan lihat hasilnya . Gimana sob , mudahkan Cara Membuat Notifikasi Komentar Ala Google Plus , oh ya trima kasih banyak to +Kang Ismet

sumber : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html

Go to link Download

Cara Membuat Memasang Auto Readmore Blogger Blogspot Plus Thumbnail

Huuuufft..... pulang sekolah capek banget, plus panasnya minta ampun, tapi walaupun masih capek, saya akan memposting untuk teman-teman pengguna blogger, Naaah kita mulai saja kita liat di TKP,,, wkwkwk kayak OVJ donk................

Nah kita liat dulu seperti apakah read more itu ?

auto readmore memudahkan kita dalam membuat posting. Memasang fitur ini membuat kita tidak perlu membubuhkan kode  atau mengklik tanda

setiap kali melakukan posting.

Fitur auto readmore akan mengurangi pekerjaan ini karena secara otomatis semua posting yang muncul di halaman-halaman utama (misalnya home, search query results, tag results, dll) akan terpotong dengan readmore.

Berikut langkah-langkahnya:
1. Masuk ke editor template HTML. Download template terlebih dahulu untuk amannya.
2. centang expand widgets template.
3. Masukkan script berikut TEPAT SEBELUM tag </head> (gunakan Ctrl+F untuk mencari)

keterangan:
-summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
-img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.
Tapi untuk amannya tinggalkan begitu saja.

4. Lanjutkan dengan mencari <data:post.body/> (seperti biasa, gunakan senjata Ctrl+F)
5. Lalu GANTI <data:post.body/> dengan script berikut:

<b:if cond=data:blog.pageType == "item">
<data:post.body/>
<b:else/>
<div expr_id="summary" + data:post.id>
<data:post.body/>
</div>
<script type=text/javascript>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style=clear: both;/><span style=padding-top:5px;;float:right;text-align:right;><a expr_href=data:post.url rel=bookmark><b>Read more >></b></a></span>
</b:if>

keterangan:
-padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
-float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.
-Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this entry", "Lanjut gan...", "Monggo dilanjut!", atau apa sajalah...
Tapi untuk amannya tinggalkan begitu saja.

6. Untuk memastikan hasilnya, jangan di-save dulu. Gunakan preview untuk mengeceknya.
7. Setelah beres, silakan di-save.

8. Nah skarang lihat hasilnya di blog temen-temen, SEMOGA BERHASIL

Go to link Download

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

CARA memasang, menampilkan, atau membuat widget Kotak Pencarian (Search Box) plus Ikon Media Sosial di sidebar blog sangat mudah. Kita tinggal pasang kode.

Contohnya ada di sidebar blog CB ini, namun yang persis sama dengan kode yang CB share di bawah ini demonya bisa dilihat di Online News Template yang baru saja dipasang.

Kotak Pencarian merupakan salah satu menu utama dalam sebuah situs web/blog. Kotak ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.

Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak user friendly. Sedangkan ikon sosial media berguna bagi nusa dan bangsa, eh.... berguna bagi meningkatkan jumlah follower, teman, atau liker.

Sebelum memasangnya, tentu saja Anda harus punya dulu akun-akun media sosialnya.

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

1. Layout > Add a Gadget di sidebar paling atas.
2. Copy + Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.

<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type="text"]
{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id=search-box>
<form action=/search id=search-form method=get target=_top>
<input id=search-text name=q placeholder=Search here... type=text/>
<button id=search-button type=submit><span>Search</span></button>
</form>
</div>



<div class=widget-content>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
.TZ-social{padding:0 5px 15px;}
.TZ-social img:hover{opacity:0.8}
.googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
#widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
.TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id=socialwidget>
<div class=TZ-social>

<center>

<a href=http://facebook.com/cbblogger rel=nofollow style=margin-right: 15px; target=_blank>
<img alt=Facebook src=http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png/></a>

<a href=http://twitter.com/contohblog rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=Twitter src=http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/s1600/twitter.png/></a>

<a href=https://plus.google.com/106869251529186655236/posts rel=me style=margin-right: 12px; target=_blank>
<img alt=Google Plus src=http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png/></a>

<a href=http://www.pinterest.com/cbblogger style=margin-right: 12px; target=_blank>
<img alt=Pinterest src=http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png/></a>

<a href=http://feeds.feedburner.com/contohblognih rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=RSS Feed src=http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png/></a>

<a href=http://www.linkedin.com/in/cbblogger rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=Linkedin src=http://1.bp.blogspot.com/-uQdbnT1u1e0/Ui26eZOy3VI/AAAAAAAAJqA/h4wzaYt2L_Y/s1600/linkedin.png/></a>

</center>
</div>
</div>
</div>

3. Ganti ID yang berwarna merah dengan kepunyaan Anda.
4. Save!

Selamat, kini Kotak Pencarian plus Ikon Media Sosial sudah muncul di sidebar blog Anda!

Go to link Download

Post Game

Thursday, December 15, 2016

Cara Membuat Notifikasi Komentar Ala Google Plus

Cara Membuat Notifikasi Komentar Ala Google Plus

Monday, December 5, 2016

Cara Membuat Memasang Auto Readmore Blogger Blogspot Plus Thumbnail

Cara Membuat Memasang Auto Readmore Blogger Blogspot Plus Thumbnail

Thursday, November 3, 2016

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Cara Membuat Kotak Pencarian plus Ikon Media Sosial