» » » » DLE Masha eklentisi nedir ve nasıl aktifleştirilir?

DLE Masha eklentisi nedir ve nasıl aktifleştirilir?

marika
marika Üye 31-08-2014, 14:24
Masha, bir web sayfası içindeki bölümleri işaretleyerek bu işaretli kısımların paylaştığınız kişiler tarafından belirgin bir şekilde görünmesi sağlayan bir js eklentidir.

goo.gl/EslT7Y sayfayı ziyaret ederseniz benim işaretlediğim yeşil bölümleri görebilirsiniz. Eklenti sayfada benim işaretlediğim o renkli kısımların özel urlsini oluşturdu.

Her sitede standart olarak olması gerekli bence. Çünkü uzun bir yazı var ve arkadaşlarınız sadece okumasını istediğiniz bir kaç bölümü var. O zaman bu eklenti bu işi mükemmel yapıyor. Hatta bunu her sitede olmasından ziyade tarayıcılarda özellik olarak gelmeli.

Nasıl aktifleştirilir?

Sistem Ayarları > Makaleler > "Ziyaretçiler sitenizdeki ilginç içerikleri paylaşabilir" özelliğini aktif etmelisiniz.

Temanızın engine.css kodlarında alttaki dosyadaki css kodlarını yapıştırınız ve dleimages klasörüne alttaki resimleri yükleyiniz.

Resimler
http://dle.net.tr/uploads/posts/1409484162_closemarker.png
http://dle.net.tr/uploads/posts/1409484172_marker.png
http://dle.net.tr/uploads/posts/1409484165_social-icons.png
http://dle.net.tr/uploads/posts/1409484165_social-icons.png
http://dle.net.tr/uploads/posts/1409484184_upmsg_closebtn.png



Css kodları
#marker-bar,
#txtselect_marker {
	display: block;
	visibility: hidden;
    position: absolute;
    z-index: 1200;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}
#txtselect_marker {
    cursor: pointer;
    background:url(../dleimages/marker.png) -0px -0px no-repeat;
}

#txtselect_marker:hover {
        background-position: -0px -32px;
}

#marker-bar{
    border: 1px solid #ccc;
    border-radius: 15px;
    background: #fff;
    padding: 5px 10px;
    cursor: default;
    box-shadow: 0px 0px 4px #ccc;
}

#marker-bar.show {
	-webkit-transition: opacity .4s, visibility 0s;
	-moz-transition: opacity .4s, visibility 0s;
	-o-transition: opacity .4s, visibility 0s;
	transition: opacity .4s, visibility 0s;
	opacity: 1;
	visibility: visible;
}

#txtselect_marker.show {
        /* XXX make a common css fadeIn/fadeOut classes */
	visibility: visible;
    width: 32px;
    height: 32px;
	-webkit-transition: opacity .4s, visibility 0s;
	-moz-transition: opacity .4s, visibility 0s;
	-o-transition: opacity .4s, visibility 0s;
	transition: opacity .4s, visibility 0s;
	opacity: 1;
}

#marker-bar .masha-social,
#marker-bar .masha-marker{
	cursor: pointer;
	display: block;
	margin: 0 5px;
	float: left;
}

#marker-bar .masha-marker{
	line-height: 1em;
	color: #aaa;
	border-bottom: 1px dotted #aaa;
	margin-right: 10px;
}

#marker-bar .masha-marker:hover {
	color: #ea3e26;
	border-color: #ea3e26;
}

.user_selection, .user_selection_true {
	background: #c4f47d;
	padding: 2px 0;
}
.user_selection a.txtsel_close, .user_selection_true a.txtsel_close {
	display:none;
}
.user_selection .closewrap, .user_selection_true .closewrap {
	position: relative;
}
.user_selection.hover a.txtsel_close, .user_selection_true.hover a.txtsel_close {
	display: inline-block;
	position: absolute;
	top: -7px;
	left: -5px;
	width: 33px;
	height: 33px;
	background: url(../dleimages/closemarker.png) -0px -0px no-repeat;
}

.user_selection.hover a.txtsel_close:hover, .user_selection_true.hover a.txtsel_close:hover {
	background-position: -0px -33px;
}


#share-popup {
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	position: absolute;
	width: 414px;
	display:none;
	z-index: 100;
	padding: 10px 0;
	opacity: 0;
	-webkit-transition: opacity .4s, visibility .1s linear .4s;
	-moz-transition: opacity .4s, visibility .1s linear .4s;
	-o-transition: opacity .4s, visibility .1s linear .4s;
	transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
	display:block;
	opacity: 1;
	-webkit-transition: opacity .4s, visibility 0s;
	-moz-transition: opacity .4s, visibility 0s;
	-o-transition: opacity .4s, visibility 0s;
	transition: opacity .4s, visibility 0s;
	opacity: 1;
}

#share-popup .social {
	padding: 0 0 10px 17px;
	height: 40px;
}

#share-popup .social p {
	padding-bottom: 10px;
	margin: 0;
	font-weight: bold;
}

#share-popup .social ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#share-popup .social ul li {
	float: left;
	margin-right: 20px;
	padding-top: 2px;
	position: relative;
}

#share-popup .social ul a {
	text-decoration: none;
	font-size: 11px;
	display: inline-block;
	color: #aaa;
	padding-left: 25px;
}

#share-popup .social ul a:hover {
	text-decoration: underline;
	color: #ea3e26;
}

#share-popup .social a span{
	cursor: pointer;
	width: 20px;
	height: 20px;
	background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
	position: absolute;
	left: 0;
	top: 0;
}

#share-popup .social .tw span{
	background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
	background-position: 0 0;
}

#share-popup .social .fb span{
	background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
	background-position: -20px 0;
}

#share-popup .social .vk span{
	background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
	background-position: -40px 0;
}

#share-popup .social .gp span{
	background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
	background-position: -60px 0;
}

#share-popup .link {
	clear: both;
	border-top: 1px solid #d9d9d9;
	padding: 10px 5px 0 10px;
	line-height: 1.2;
	overflow: hidden;
	margin: 0 7px;
}

#share-popup .link p {
	font-weight: bold;
	padding: 0 0 3px 0;
	margin: 0;
}

#share-popup .link span {
	color: #999;
	font-size: 10px;
	display: block;
	padding-top: 3px;
}

#share-popup .link a {
	display: block;
}
Çözüldü İşleme Alındı Bekliyor Çözülemedi
Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.
0
muhammed 23 Şubat 2015 11:59
Bunu Sadece Admin İçin Olanı Yokmu
0
3 745
MaRZoCHi 31 Ağustos 2014 22:58
@mrt806, sana katılıyorum. Gerçekten zaman ayıramadığımız, kullanıcıya yönelik bilgiler geliyor. @marika, est. teşekkür ederek çalışmalarında başarılar diliyorum...

--------------------
0
597
marika 31 Ağustos 2014 17:15
@mrt806, teşekkürler. Mehmet hocamın emeği çok. Yardımı çok oluyor. Ben elimden geleni yapmaya çalışıyorum.
0
103
mrt806 31 Ağustos 2014 16:51
Paylaşımların için sağol kardeşim, değişik ve bir o kadar da işe yarar şeyler paylaşıyorsun çalışmalarında başarılar dilerim.
0
597
marika 31 Ağustos 2014 15:22
Nasıl kullanılıyor?

Eklentiyi aktif ettikten sonra herhangi bir yazınıza girip bir metni seçtiğinizde yanında ikonun görünmesi lazım. İkona tıkladığınızı seçilen alan yeşil olacaktır. Sonra başka bir cümleyi ya da paragrafı seçtiğinizde yine aynı işlemi yaptığınızda tarayıcınızın adres satırı bölümüne baktığınızsa o yazının urlsini sonuna bir şeyler eklendiğini görebilirsiniz.

Url'niz www.site.com/kategori/id-yazi.html iken
Yeni url, www.site.com/kategori/id-yazi.html#sel=5:1,5:27;10:1,10:53;17:49,17:73

yapısına benzer olacaktır. Sonra bu yeni urlyi paylaşırsanız url ye giren kişi sayfada belirlenmiş yerleri renkli olarak görecektir.
0
İSTATİSTİKLER